/* create 的页面样式（从 templates/create.html.html 的内联 <style> 外置而来）
 *
 * ⚠ 为什么要外置：内联 CSS 没法单独缓存 —— 每页访问都要重新下载、
 *   重新解析。一个达人主页原本 72KB，其中 31KB 就是这段。
 *   外置后浏览器缓存它，换页/回头再访都不再下载。
 * ⚠ 改样式请改**这个文件**，改 templates/create.html.html 里的内联块无效
 *   （外置脚本已经把那段搬走了）。
 */
  .hero-mini {
    padding: 22px 16px 18px;
    background:
      radial-gradient(120% 90% at 12% 0%, var(--cover-c) 0%, transparent 58%),
      linear-gradient(150deg, var(--cover-a) 0%, var(--cover-b) 100%);
    color: #fff; position: relative; overflow: hidden;
  }
  .hero-mini::after {
    content: ""; position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .hero-mini h1 { font-family: var(--serif); font-size: 25px; line-height: 1.35; position: relative; }
  .hero-mini p { margin-top: 7px; font-size: 13.5px; opacity: .9; position: relative; }
  .hero-mini .pill {
    display: inline-flex; align-items: center; gap: 5px; margin-bottom: 11px;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26);
    padding: 4px 11px; border-radius: 999px; font-size: 11.5px; position: relative;
  }
  .hero-mini .pill svg { width: 13px; height: 13px; }

  .sluggable { display: flex; align-items: center; gap: 0; }
  .sluggable .prefix {
    padding: 12px 10px; border: 1px solid var(--border); border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--surface-2);
    color: var(--text-3); font-size: 13px; white-space: nowrap;
  }
  .sluggable .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
  .sluggable .input.bad { border-color: #C0392B; }
  .sluggable .input.good { border-color: var(--accent); }
  .slug-state { font-size: 12px; margin-top: 6px; display: flex; align-items: center; gap: 5px; }
  .slug-state svg { width: 13px; height: 13px; flex: none; }

  .tagbox { display: flex; flex-wrap: wrap; gap: 7px; padding: 9px; min-height: 44px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
    align-items: center; cursor: text; transition: border-color .22s var(--ease), box-shadow .22s var(--ease); }
  .tagbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  [data-theme="ink"] .tagbox { background: var(--surface-2); }
  .tagbox .tag { display: inline-flex; align-items: center; gap: 5px; background: var(--accent-soft);
    color: var(--accent-2); border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12.5px; }
  .tagbox .tag button { color: var(--accent-2); opacity: .6; display: grid; place-items: center; }
  .tagbox .tag button:hover { opacity: 1; }
  .tagbox .tag svg { width: 12px; height: 12px; }
  /* 16px 是 iOS 不自动放大输入框的下限 */
  .tagbox input { flex: 1; min-width: 90px; border: none; background: none; outline: none; padding: 3px 2px; font-size: 16px; }

  .hl-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; background: var(--bg); }
  [data-theme="ink"] .hl-item { background: var(--surface-2); }
  .hl-item .hl-n { font-family: var(--serif); color: var(--accent); font-size: 12px; margin-bottom: 5px; }
  .hl-item .input { background: var(--surface); margin-bottom: 8px; }
  [data-theme="ink"] .hl-item .input { background: var(--bg); }
  .hl-item .input:last-child { margin-bottom: 0; }
  /* auto（跟随系统）在深色系统下要跟 ink **完全一致** ——
     上面这几条 ink 专属的底色规则也得跟上，否则 auto 深色下跟 ink 长得不一样。 */
  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] .tagbox { background: var(--surface-2); }
    [data-theme="auto"] .hl-item { background: var(--surface-2); }
    [data-theme="auto"] .hl-item .input { background: var(--bg); }
  }

  .gen-bar { display: flex; gap: 10px; align-items: center; padding: 13px;
    border-radius: var(--radius-sm); background: var(--accent-soft); margin-bottom: 14px; }
  .gen-bar .t { font-size: 13px; color: var(--text-2); line-height: 1.5; }
  .gen-bar .t b { color: var(--text); }

  .preview-frame { width: 100%; height: 66vh; min-height: 420px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface-2); display: block; }
  .preview-wrap { position: relative; }
  .preview-loading { position: absolute; inset: 0; display: grid; place-items: center;
    background: var(--surface-2); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-3); }

  .done-card { text-align: center; padding: 8px 0 4px; }
  .done-mark { width: 58px; height: 58px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
    display: grid; place-items: center; margin: 0 auto 14px; animation: pop .5s var(--ease-out) both; }
  .done-mark svg { width: 28px; height: 28px; }
  @keyframes pop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
  .done-card h2 { font-family: var(--serif); font-size: 21px; margin-bottom: 6px; }
  .done-card p { font-size: 13.5px; color: var(--text-2); }

  .qr-box { width: 132px; height: 132px; padding: 8px; background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-sm); margin: 0 auto; box-shadow: var(--shadow); }
  .qr-box img { width: 100%; height: 100%; object-fit: contain; }
  .share-link { display: flex; align-items: center; gap: 8px; background: var(--surface-2);
    border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; }
  .share-link .u { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }

  .code-input { display: flex; gap: 8px; }
  .code-input .input { flex: 1; letter-spacing: 4px; font-size: 17px; text-align: center; }
  .code-input .btn { flex: none; }
  .code-input .btn.sent { color: var(--text-3); }

  /* 上传图片按钮行：输入框 + 按钮并排（窄屏按钮换行独占一行，不许溢出） */
  .up-row { display: flex; gap: 9px; align-items: stretch; }
  .up-row .input { flex: 1; min-width: 0; }
  .up-row .btn { flex: none; min-height: 44px; padding-left: 16px; padding-right: 16px; }
  .up-row .btn svg { width: 16px; height: 16px; }
  @media (max-width: 420px) {
    .up-row { flex-wrap: wrap; }
    .up-row .btn { width: 100%; }
  }

  /* 文字按钮（切换登录方式 / 找回密码入口） */
  .linkish {
    /* ⚠ 触控目标 ≥ 44px（2026-10-31）：原来 18px 高（纯文字行），
       手机上很难点准。改成 inline-flex + min-height，字号不变。 */
    display: inline-flex; align-items: center; min-height: 44px;
    margin-top: 8px; padding: 0; border: 0;
    background: none; color: var(--accent); font-family: inherit;
    font-size: 13px; font-weight: 600; cursor: pointer;
  }
  /* ⚠️ 必须显式写这条：`.linkish{display:inline-block}` 的优先级高于
     浏览器默认的 `[hidden]{display:none}` —— 不写的话 hidden=true 也藏不住。 */
  .linkish[hidden] { display: none; }
  .linkish:hover { color: var(--accent-2); text-decoration: underline; }
  .alt-line { text-align: center; font-size: 13px; color: var(--text-3); margin-top: 14px; }
  .alt-line a { color: var(--accent); font-weight: 600; }

  /* ── 登录 / 注册弹层 ─────────────────────────────────────
     注册闸门后移之后，账号只在三处要：上传图片 / 帮我写一版 / 公开我的主页。
     关闭态必须彻底退出交互层 —— 只设 opacity:0 的话，
     这个固定定位的遮罩会安静地吃掉页面中央的点击（老坑）。
     窄屏 390px：宽度取 min(92vw, 380px) → 359px，不会横向溢出。 */
  .auth-mask {
    position: fixed; inset: 0; z-index: 240; background: rgba(20,20,26,.42);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .28s var(--ease), visibility 0s linear .28s;
  }
  .auth-mask.on {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .28s var(--ease), visibility 0s;
  }
  .auth-sheet {
    position: fixed; left: 50%; top: 50%; z-index: 241;
    width: min(92vw, 380px); max-height: 88vh; overflow-y: auto;
    background: var(--surface); border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0,0,0,.28);
    transform: translate(-50%, -50%) scale(.94);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
  }
  .auth-sheet.on {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s;
  }
  .auth-head { display: flex; align-items: flex-start; gap: 10px; padding: 18px 18px 0; }
  .auth-head .t { flex: 1; min-width: 0; }
  .auth-head .sec-sub { margin-top: 6px; line-height: 1.6; }
  .auth-body { padding: 14px 18px 20px; }