:root, html[data-theme="light"] {
      color-scheme: light;
      --bg: #f4f7fb;
      --card: #ffffff;
      --text: #0f172a;
      --muted: #64748b;
      --line: rgba(15, 23, 42, .08);
      --accent: #2563eb;
      --accent-2: #0ea5e9;
      --ok: #059669;
      --warn: #d97706;
      --bad: #dc2626;
      --shadow: 0 18px 50px rgba(15, 23, 42, .08);
    }
    html[data-theme="dark"] {
      color-scheme: dark;
      --bg: #0b1220;
      --card: #121a2b;
      --text: #e8eef7;
      --muted: #94a3b8;
      --line: rgba(148, 163, 184, .14);
      --accent: #60a5fa;
      --accent-2: #38bdf8;
      --ok: #34d399;
      --warn: #fbbf24;
      --bad: #f87171;
      --shadow: 0 20px 50px rgba(0, 0, 0, .35);
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; }
    body {
      color: var(--text);
      font-family: "PingFang SC", "HarmonyOS Sans", "Segoe UI", system-ui, sans-serif;
      background:
        radial-gradient(800px 420px at 10% -10%, rgba(37,99,235,.12), transparent 55%),
        radial-gradient(700px 380px at 100% 0%, rgba(14,165,233,.10), transparent 50%),
        var(--bg);
    }
    .top {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px; max-width: 760px; margin: 0 auto;
    }
    .brand { display: flex; align-items: center; gap: 10px; }
    .logo {
      width: 36px; height: 36px; border-radius: 10px; overflow: hidden;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      display: grid; place-items: center; color: #fff; font-weight: 800;
    }
    .logo img { width: 100%; height: 100%; object-fit: cover; }
    .brand h1 { margin: 0; font-size: 1.05rem; }
    .theme-btn {
      width: 36px; height: 36px; border-radius: 50%;
      border: 1px solid var(--line); background: var(--card); color: var(--text);
      cursor: pointer; display: grid; place-items: center;
    }
    .wrap { max-width: 760px; margin: 0 auto; padding: 4px 16px 40px; }
    .card {
      background: var(--card); border: 1px solid var(--line);
      border-radius: 18px; box-shadow: var(--shadow); padding: 22px 20px 20px;
    }
    .steps { display: flex; gap: 8px; margin-bottom: 18px; }
    .step {
      flex: 1; text-align: center; font-size: .78rem; color: var(--muted);
      padding: 8px 4px; border-radius: 10px; background: rgba(37,99,235,.05);
    }
    .step.on { color: var(--accent); font-weight: 700; background: rgba(37,99,235,.12); }
    .step.done { color: var(--ok); }
    .banner {
      margin-bottom: 18px; padding: 10px 14px; border-radius: 10px;
      background: rgba(37,99,235,.06); line-height: 1.65; word-break: break-word;
    }
    .banner a { color: inherit; text-decoration: underline; }
    .hint { color: var(--muted); font-size: .82rem; line-height: 1.55; margin: 0 0 14px; }
    .warn { color: var(--warn); font-size: .8rem; margin: 10px 0 0; }
    .ok { color: var(--ok); }
    .user-chip {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border-radius: 999px; background: rgba(5,150,105,.1); color: var(--ok);
      font-size: .8rem; margin-bottom: 12px;
    }
    .qr-box { display: grid; place-items: center; margin: 8px 0 12px; }
    .qr-box img {
      width: min(220px, 68vw); height: auto; border-radius: 12px;
      background: #fff; padding: 10px; border: 1px solid var(--line);
    }
    .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .grow { flex: 1; min-width: 180px; }
    .adv { margin-top: 10px; }
    .foot { margin-top: 16px; color: var(--muted); font-size: .75rem; text-align: center; }
    .prog { margin-top: 14px; }
    .prog-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: .8rem; margin-top: 6px; }
    .link-gen-prog {
      margin: 12px 0 4px; padding: 14px 16px; border-radius: 12px;
      border: 1px solid rgba(37,99,235,.28); background: rgba(37,99,235,.08);
      box-shadow: 0 1px 2px rgba(37,99,235,.06);
    }
    .link-gen-prog .el-progress { margin-top: 2px; }
    .link-gen-prog .el-progress-bar__outer { height: 10px !important; border-radius: 999px; }
    .link-gen-prog .el-progress-bar__inner { border-radius: 999px; }
    .link-gen-prog .prog-meta { margin-top: 8px; justify-content: flex-start; gap: 8px; font-weight: 600; color: var(--accent); }
    .folder-progress { padding:12px; border:1px solid var(--el-border-color); border-radius:8px; margin:12px 0; }
    .folder-progress ul { max-height:160px; overflow:auto; }
    .download-actions {
      margin: 10px 0 4px; padding: 12px 14px; border-radius: 12px;
      border: 1px solid rgba(5,150,105,.25); background: rgba(5,150,105,.08);
      display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    }
    .download-actions .da-label { color: var(--ok); font-size: .85rem; font-weight: 600; width: 100%; margin: 0 0 2px; }
    .download-actions a {
      display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px;
      background: var(--accent); color: #fff !important; text-decoration: none; font-size: .85rem; font-weight: 600;
    }
    .folder-hint { color: var(--muted); font-size: .78rem; margin: 8px 0 0; }
    .folder-download-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:12px 0 8px; }
    .folder-download-label { font-size:.85rem; font-weight:600; margin-right:4px; }
    .folder-download-actions .el-button + .el-button { margin-left:0; }
    .fm { min-width: 0; max-width: 100%; }
    .fm .toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; align-items: flex-start; }
    .fm .crumbs {
      display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0;
      min-width: 0; flex: 1 1 160px; padding: 2px 0;
    }
    .fm .crumb {
      border: 0; background: transparent; color: var(--accent-2);
      cursor: pointer; font-size: .85rem; padding: 3px 4px; border-radius: 6px;
      max-width: 100%; white-space: normal; word-break: break-all; overflow-wrap: anywhere;
      line-height: 1.4; text-align: left;
    }
    .fm .crumb:hover { background: rgba(37,99,235,.08); }
    .fm .crumb.is-now { color: var(--text); font-weight: 600; cursor: default; }
    .fm .crumb-sep { color: var(--muted); font-size: .8rem; user-select: none; padding: 0 2px; }
    .fm .file-list { display: grid; gap: 0; max-height: min(52vh, 420px); overflow: auto; }
    .fm .file-row {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 4px; border-bottom: 1px solid var(--line); cursor: pointer;
    }
    .fm .file-row:last-child { border-bottom: 0; }
    .fm .file-row:hover { background: rgba(148,163,184,.06); border-radius: 10px; }
    .fm .file-row.is-on { background: rgba(37,99,235,.08); border-radius: 10px; }
    .fm .file-thumb {
      width: 48px; height: 48px; flex: 0 0 48px; border-radius: 8px;
      display: grid; place-items: center;
      background: rgba(230, 162, 60, .12); border: 1px solid rgba(230, 162, 60, .28); color: #e6a23c;
    }
    .fm .file-thumb svg { width: 26px; height: 26px; }
    .fm .file-main { min-width: 0; flex: 1; }
    .fm .file-name {
      font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .fm .file-name.is-link { color: var(--accent-2); }
    .fm .file-name.is-link:hover { text-decoration: underline; }
    .fm .file-sub { color: var(--muted); font-size: .75rem; margin-top: 2px; }
    .fm .file-actions { flex: 0 0 auto; display: flex; gap: 4px; }
    .fm .ico-btn {
      width: 32px; height: 32px; border: 0; border-radius: 8px;
      background: rgba(15, 23, 42, .06); color: var(--text); cursor: pointer;
      display: grid; place-items: center; flex: 0 0 auto;
    }
    .fm .ico-btn:hover { background: rgba(37,99,235,.12); color: var(--accent); }
    .fm .ico-btn:disabled { opacity: .4; cursor: not-allowed; }
    .fm .ico-btn svg { width: 16px; height: 16px; }
    .fm .ico-btn.is-accent { background: var(--accent); color: #fff; }
    .fm .ico-btn.is-accent:hover { background: #1d4ed8; color: #fff; }
    .fm .ico-btn.is-loading { pointer-events: none; }
    .fm .ico-btn.is-loading svg { animation: ico-spin .8s linear infinite; }
    @keyframes ico-spin { to { transform: rotate(360deg); } }
    .fm .empty { color: var(--muted); font-size: .85rem; padding: 28px 8px; text-align: center; }
    .fm .dir-err { color: var(--warn); font-size: .8rem; margin: 0 0 8px; }
    .fm-foot {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
    }
    .fm-foot .picked {
      flex: 1 1 100%; min-width: 0; color: var(--muted); font-size: .8rem;
      word-break: break-all; overflow-wrap: anywhere; line-height: 1.45;
    }
    .dir-dialog { max-width: 720px; width: min(720px, calc(100vw - 20px)) !important; margin: 8vh auto 0 !important; }
    .el-overlay .el-dialog { max-width: calc(100vw - 16px); }
    .dir-dialog .el-dialog__body,
    .el-overlay .el-dialog__body { padding: 10px 14px 14px; overflow-x: hidden; }
    .dir-dialog .el-dialog__header,
    .el-overlay .el-dialog__header { padding-right: 40px; }
    html[data-theme="dark"] .fm .ico-btn { background: rgba(226,232,240,.1); }
    html[data-theme="dark"] .fm .crumb:hover { background: rgba(96,165,250,.12); }
    html[data-theme="dark"] .fm .file-row:hover { background: rgba(148,163,184,.08); }
    html[data-theme="dark"] .fm .file-row.is-on { background: rgba(96,165,250,.14); }
    .guides { display:flex; flex-wrap:wrap; gap:8px; margin:-4px 0 14px; }
    .guides a {
      display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px;
      border:1px solid var(--line); color:var(--accent); text-decoration:none; font-size:.82rem;
      background:rgba(37,99,235,.06);
    }
    .guides a:hover { border-color:var(--accent); }
    .cookie-help { background:rgba(37,99,235,.05); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:0 0 12px; }
    .cookie-help h4 { margin:0 0 8px; font-size:.88rem; }
    .cookie-help ol { margin:0; padding-left:18px; color:var(--muted); font-size:.8rem; line-height:1.65; }
    .cookie-help code { color:var(--text); font-size:.76rem; word-break:break-all; }
    .hist { margin-top:16px; }
    .hist h3 { margin:0 0 8px; font-size:.92rem; }
    .hist-row {
      border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px;
    }
    .hist-top { display:flex; justify-content:space-between; gap:8px; font-size:.82rem; }
    .hist-st { font-weight:600; }
    .hist-st.run { color:var(--accent); }
    .hist-st.ok { color:var(--ok); }
    .hist-st.bad { color:var(--bad); }
    .hist-st.part { color:var(--warn); }
    .hist-sub { color:var(--muted); font-size:.75rem; margin-top:4px; word-break:break-all; }
    [v-cloak] { display: none !important; }
    #boot-skel { position:fixed; inset:0; z-index:20; background:var(--bg); overflow:auto; }
    .boot-skel { max-width:760px; margin:0 auto; padding:12px 16px 40px; }
    .skel-top { display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
    .skel-brand { display:flex; align-items:center; gap:10px; }
    .skel-logo { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, rgba(37,99,235,.35), rgba(14,165,233,.3)); }
    .skel-line { height:14px; border-radius:8px; background:rgba(100,116,139,.18); }
    .skel-card { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:22px 20px; }
    .skel-steps { display:flex; gap:8px; margin-bottom:18px; }
    .skel-steps i { flex:1; height:32px; border-radius:10px; background:rgba(37,99,235,.08); }
    .skel-rows { display:grid; gap:12px; }
    .skel-rows i { display:block; height:40px; border-radius:10px; background:rgba(100,116,139,.12); }
    .skel-rows i.lg { height:88px; }
    @media (max-width: 520px) {
      .card { padding: 18px 14px; }
      .fm .toolbar { flex-wrap: wrap; }
      .fm .crumbs { flex: 1 1 100%; }
      .fm .file-list { max-height: min(48vh, 360px); }
      .fm-foot { flex-direction: column; align-items: stretch; }
      .fm-foot .el-button { width: 100%; }
      .dir-dialog { width: calc(100vw - 16px) !important; margin: 6vh auto 0 !important; }
    }

    .share-breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; min-width:0; line-height:1.5; }
    .share-breadcrumbs .el-breadcrumb__item { float:none; display:flex; align-items:baseline; max-width:100%; min-width:0; }
    .share-breadcrumbs .el-breadcrumb__inner { min-width:0; }
    .share-breadcrumbs .el-breadcrumb__separator { margin:0 6px; }
    .folder-navigation { display:flex; gap:6px; }
    .folder-navigation .el-button + .el-button { margin-left:0; }
    .share-list-meta { color:var(--el-text-color-secondary); font-size:12px; padding:6px 0; }
    .share-files .file-thumb { overflow:hidden; background:var(--el-fill-color-light); color:var(--el-text-color-secondary); border-color:var(--el-border-color-lighter); }
    .share-files .file-thumb img { width:100%; height:100%; object-fit:cover; }
    .share-files .kind-folder, .share-files .kind-archive { color:var(--el-color-warning); background:var(--el-color-warning-light-9); }
    .share-files .kind-image, .share-files .kind-slides { color:var(--el-color-success); background:var(--el-color-success-light-9); }
    .share-files .kind-video, .share-files .kind-word { color:var(--el-color-primary); background:var(--el-color-primary-light-9); }
    .share-files .kind-sheet, .share-files .kind-audio { color:var(--el-color-success); background:var(--el-color-success-light-9); }
    .share-files .kind-pdf { color:var(--el-color-danger); background:var(--el-color-danger-light-9); }
    .share-files .file-name-button { display:block; width:100%; border:0; background:none; padding:0; font-family:inherit; font-size:.9rem; text-align:left; cursor:pointer; }
    .share-files .file-name-button:focus-visible { outline:2px solid var(--el-color-primary); outline-offset:2px; }
    .share-files .file-actions { flex-wrap:wrap; justify-content:flex-end; max-width:55%; }
    @media (max-width:640px) {
      .share-files .file-row { flex-wrap:wrap; gap:10px; }
      .share-files .file-main { flex-basis:calc(100% - 64px); }
      .share-files .file-actions { max-width:100%; width:100%; }
      .share-files .file-actions .el-button + .el-button { margin-left:0; }
    }