:root { color-scheme: light; --bg:#f6f7f9; --ink:#15202b; --muted:#647083; --line:#dde3ea; --surface:#fff; --soft:#eef3f2; --accent:#0f766e; --accent-dark:#0a5f59; --danger:#b42318; --shadow:0 18px 48px rgba(24,36,52,.08); }
    * { box-sizing: border-box; }
    body { margin:0; min-height:100svh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--bg); color:var(--ink); letter-spacing:0; }
    a { color: inherit; text-decoration: none; }
    .topbar { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.9); backdrop-filter:blur(14px); position:sticky; top:0; z-index:10; }
    .brand { display:flex; align-items:center; gap:12px; font-weight:800; }
    .mark { width:22px; height:22px; border-radius:6px; background:var(--accent); box-shadow:inset 0 0 0 6px rgba(255,255,255,.28); }
    nav { display:flex; gap:18px; color:var(--muted); font-size:14px; }
    nav a, .text-link, .name-link { transition:color .16s ease; }
    nav a:hover, .text-link:hover, .name-link:hover { color:var(--accent); }
    .nav-back { color:var(--ink); font-weight:800; }
    .workspace { max-width:1200px; margin:0 auto; padding:30px 24px 54px; }
    .workspace.detail { padding-top:24px; }
    .page-head, .detail-head { display:flex; justify-content:space-between; gap:28px; align-items:flex-start; margin-bottom:22px; }
    .page-head h1, .detail-head h1, .login-panel h1, .live-hero h1 { margin:4px 0 8px; font-size:42px; line-height:1.06; letter-spacing:0; }
    .eyebrow { margin:0; color:var(--accent); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0; }
    .muted, .sub, .tip { color:var(--muted); line-height:1.6; }
    .sub { font-size:13px; margin-top:4px; }
    .summary-strip { display:grid; grid-template-columns:repeat(2, minmax(116px, 1fr)); border:1px solid var(--line); background:var(--surface); min-width:280px; }
    .summary-strip div { padding:15px 18px; border-left:1px solid var(--line); }
    .summary-strip div:first-child { border-left:0; }
    .summary-strip span { display:block; color:var(--muted); font-size:13px; }
    .summary-strip strong { display:block; margin-top:4px; font-size:28px; line-height:1; }
    .console-grid { display:grid; grid-template-columns:320px minmax(0,1fr); gap:20px; align-items:start; }
    .surface { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:20px; margin-bottom:20px; box-shadow:var(--shadow); }
    .create-panel { position:sticky; top:82px; }
    .entry-list-panel { min-width:0; }
    .section-line { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:14px; color:var(--muted); font-size:13px; }
    .section-line span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    h2 { font-size:18px; margin:0; color:var(--ink); letter-spacing:0; }
    .split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
    .table-wrap { overflow:auto; }
    table { width:100%; border-collapse:collapse; min-width:680px; }
    th, td { padding:14px 12px; border-bottom:1px solid #edf0f3; text-align:left; vertical-align:middle; }
    th { color:var(--muted); font-size:12px; font-weight:800; letter-spacing:0; }
    tr { transition:background .18s ease; }
    tbody tr:hover { background:#f8fafb; }
    .name-link { font-weight:800; font-size:18px; }
    .entry-list { display:grid; gap:12px; }
    .entry-item { display:grid; grid-template-columns:108px minmax(0,1fr) auto; gap:16px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:8px; background:#fff; transition:border-color .16s ease, transform .16s ease; }
    .entry-item:hover { border-color:#b9c7d4; transform:translateY(-1px); }
    .entry-preview { display:block; width:96px; min-height:0; padding:0; border:0; border-radius:6px; background:transparent; cursor:zoom-in; }
    .entry-preview img { display:block; width:96px; height:auto; border:1px solid var(--line); border-radius:6px; background:#fff; }
    .entry-main { min-width:0; }
    .entry-meta { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:8px; color:var(--muted); font-size:13px; }
    .entry-meta strong { color:var(--ink); }
    .entry-url { margin-top:8px; color:var(--muted); font-size:13px; word-break:break-all; }
    .entry-actions, .qr-actions, .actions { display:flex; flex-wrap:wrap; gap:8px; }
    .entry-actions { justify-content:flex-end; min-width:236px; }
    .thumb { width:72px; height:72px; object-fit:cover; border:1px solid var(--line); border-radius:6px; }
    .settings-form { display:grid; gap:10px; }
    label { color:var(--muted); font-size:13px; }
    .input { width:100%; min-height:40px; padding:9px 11px; border:1px solid #cdd5df; border-radius:6px; background:#fff; color:var(--ink); font:inherit; transition:border-color .18s ease, box-shadow .18s ease; }
    .input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,118,110,.14); }
    .dropzone { position:relative; display:flex; align-items:center; gap:14px; min-height:116px; padding:18px; border:1.5px dashed #b9c6d2; border-radius:8px; background:#f8fafb; color:var(--ink); cursor:pointer; transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
    .dropzone:hover, .dropzone:focus-within, .dropzone.is-dragover { border-color:var(--accent); background:#eff7f5; box-shadow:0 0 0 3px rgba(15,118,110,.12); transform:translateY(-1px); }
    .dropzone.has-file { border-style:solid; border-color:#8fbdb6; background:#f0f8f6; }
    .dropzone.is-loading { border-color:#7aa7c7; background:#f1f7fb; cursor:progress; }
    .dropzone.is-error { border-color:#d92d20; background:#fff5f4; }
    .file-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
    .dropzone-mark { width:44px; height:44px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto; background:#e1f1ee; color:var(--accent); font-size:28px; font-weight:800; line-height:1; }
    .dropzone-copy { display:grid; gap:4px; min-width:0; }
    .dropzone-copy strong { color:var(--ink); font-size:15px; line-height:1.3; }
    .dropzone-copy span { color:var(--muted); font-size:13px; line-height:1.45; word-break:break-all; }
    .dropzone.is-error .dropzone-copy span { color:var(--danger); }
    button, .button-link { min-height:38px; border:0; border-radius:6px; padding:8px 13px; font:inherit; font-weight:800; cursor:pointer; background:#e7ebef; color:#263442; transition:transform .16s ease, background .16s ease, color .16s ease; display:inline-flex; align-items:center; justify-content:center; text-align:center; }
    button:hover, .button-link:hover { transform:translateY(-1px); }
    button.entry-preview, button.entry-qr-preview { display:block; min-height:0; padding:0; border:0; background:transparent; color:inherit; cursor:zoom-in; }
    button.entry-preview { width:96px; }
    button.entry-qr-preview { width:100%; }
    .primary { background:var(--accent); color:#fff; }
    .primary:hover { background:var(--accent-dark); }
    .danger { background:#fff0ee; color:var(--danger); }
    .full { width:100%; }
    .link-line { display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:14px; color:var(--muted); font-size:13px; }
    .link-line a { color:var(--accent); word-break:break-all; }
    .back-link { display:inline-flex; align-items:center; min-height:36px; margin-bottom:12px; padding:8px 12px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--accent); font-weight:800; box-shadow:0 10px 24px rgba(24,36,52,.06); transition:transform .16s ease, border-color .16s ease, color .16s ease; }
    .back-link:hover { transform:translateY(-1px); border-color:#b8c6d2; color:var(--accent-dark); }
    .entry-qr-card { width:280px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px; box-shadow:var(--shadow); }
    .entry-qr-preview { display:block; width:100%; min-height:0; padding:0; border:0; border-radius:6px; background:transparent; cursor:zoom-in; }
    .entry-qr-large { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:6px; background:#fff; }
    .qr-actions { margin-top:12px; }
    .qr-actions .button-link { flex:1 1 120px; }
    .delete-zone { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
    .empty-cell { color:var(--muted); padding:34px 12px; text-align:center; }
    .login-shell { min-height:100svh; display:grid; place-items:center; padding:24px; background:#eef3f2; }
    .login-panel { width:min(420px,100%); background:#fff; border:1px solid var(--line); border-radius:8px; padding:28px; box-shadow:var(--shadow); animation:rise .28s ease both; }
    .stack { display:grid; gap:12px; margin-top:18px; }
    .alert { background:#fff0ee; color:#9f1d14; padding:10px 12px; margin-top:14px; border:1px solid #ffd1cc; border-radius:6px; }
    .live-shell { min-height:100svh; max-width:640px; margin:0 auto; padding:34px 18px 46px; display:grid; align-content:start; gap:18px; }
    .live-hero { animation:rise .28s ease both; }
    .live-panel { background:#fff; border:1px solid var(--line); border-radius:8px; padding:22px; text-align:center; box-shadow:var(--shadow); animation:rise .34s ease .04s both; }
    .live-index { color:var(--accent); font-size:13px; font-weight:800; }
    .live-panel h2 { margin:6px 0 16px; font-size:24px; }
    .live-qr { width:min(100%,360px); display:block; margin:0 auto; }
    .live-panel.empty { color:#8a4b00; background:#fff8e6; border-color:#f4d47c; }
    .modal-open { overflow:hidden; }
    .qr-modal[hidden] { display:none; }
    .qr-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; background:rgba(15,23,42,.52); backdrop-filter:blur(8px); animation:fade .16s ease both; }
    .qr-modal-panel { width:min(440px, 100%); max-height:calc(100svh - 48px); overflow:auto; background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px; box-shadow:0 28px 90px rgba(2,6,23,.28); animation:rise .2s ease both; }
    .qr-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
    .qr-modal-head h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .icon-button { width:34px; height:34px; min-height:34px; padding:0; border-radius:50%; font-size:22px; line-height:1; background:#eef2f5; color:#334155; flex:0 0 auto; }
    .qr-modal-image { display:block; width:min(100%, 390px); height:auto; margin:0 auto; border:1px solid var(--line); border-radius:6px; background:#fff; }
    .qr-modal-actions { display:flex; gap:10px; margin-top:14px; }
    .qr-modal-actions .button-link { flex:1 1 0; }
    @keyframes fade { from { opacity:0; } to { opacity:1; } }
    @keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
    @media (max-width: 900px) {
      .page-head, .detail-head, .split, .console-grid { grid-template-columns:1fr; display:grid; }
      .create-panel { position:static; }
      .summary-strip, .entry-qr-card { width:100%; min-width:0; }
      .entry-item { grid-template-columns:92px minmax(0,1fr); }
      .entry-preview, .entry-preview img { width:82px; }
      .entry-actions { grid-column:1 / -1; justify-content:flex-start; min-width:0; }
    }
    @media (max-width: 560px) {
      .topbar { padding:0 18px; }
      .workspace { padding:24px 14px 42px; }
      .surface { padding:16px; }
      .page-head h1, .detail-head h1, .login-panel h1, .live-hero h1 { font-size:32px; }
      .summary-strip { grid-template-columns:1fr 1fr; }
      .entry-item { grid-template-columns:1fr; }
      .entry-preview, .entry-preview img { width:132px; }
      .entry-actions .button-link { flex:1 1 96px; }
      .section-line { align-items:flex-start; flex-direction:column; gap:4px; }
    }