@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
/* =============================================================================
 *  TSFI SETTINGS MODULE — styles (scoped under .tsfi-settings)
 *  Same design tokens as tsfi_gift.css / tsfi_entry.css. Dark mode: body.ss-dark.
 * ============================================================================= */
.tsfi-settings{
  --bg:#EEF1F6; --surface:#FFFFFF; --ink:#1B1F2A; --muted:#6B7280; --faint:#9AA2B1;
  --line:#E2E6EE; --line-strong:#CDD4E0; --zebra:#F8FAFC;
  --accent:#1F5FA8; --accent-ink:#16487E; --accent-soft:#E8F0FA;
  --ok:#1F7A3D; --ok-bg:#E6F4EB; --dark:#111418;
  color:var(--ink); background:var(--bg); min-height:100vh;
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
body.ss-dark .tsfi-settings{
  --bg:#0E1521; --surface:#161F2E; --ink:#E7ECF3; --muted:#93A1B3; --faint:#6B7889;
  --line:#27313F; --line-strong:#374253; --zebra:#1A2433;
  --accent:#4C8DD6; --accent-ink:#A6C8EE; --accent-soft:#1C2A3D;
  --ok:#62CD86; --ok-bg:#15291D; --dark:#0B0F14;
}
.tsfi-settings *{box-sizing:border-box}

.tsfi-settings .bar{background:var(--surface);border-bottom:1px solid var(--line);padding:14px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.tsfi-settings .brand .eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin:0;}
.tsfi-settings .brand h1{font-size:18px;font-weight:650;margin:2px 0 0;letter-spacing:-.01em;}
.tsfi-settings .theme-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.tsfi-settings .theme-btn:hover{background:var(--zebra);}

.tsfi-settings .page{max-width:1180px;margin:0 auto;padding:24px 26px 60px;}
.tsfi-settings .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:0 1px 2px rgba(20,30,55,.04);}

.tsfi-settings .row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.tsfi-settings .lbl{flex:0 0 220px;max-width:220px;font-size:14px;font-weight:600;color:var(--ink);line-height:1.35;}
.tsfi-settings .field{flex:1 1 320px;min-width:220px;}
.tsfi-settings .field select{width:100%;height:46px;border:1px solid var(--line-strong);border-radius:10px;padding:0 36px 0 14px;font-family:inherit;font-size:14px;background:var(--surface);color:var(--ink);cursor:pointer;}
.tsfi-settings .field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

.tsfi-settings .actions{display:flex;flex-direction:column;gap:10px;flex:0 0 auto;}
.tsfi-settings .btn-dark{min-width:150px;height:42px;padding:0 22px;border-radius:9px;border:1px solid var(--dark);background:var(--dark);color:#fff;font-family:inherit;font-size:13.5px;font-weight:650;cursor:pointer;transition:opacity .12s;}
.tsfi-settings .btn-dark:hover{opacity:.88;}
.tsfi-settings .btn-dark:disabled{opacity:.5;cursor:default;}
.tsfi-settings .btn-dark.ghost-dark{background:var(--surface);color:var(--ink);border-color:var(--line-strong);}
.tsfi-settings .btn-dark.ghost-dark:hover{background:var(--zebra);opacity:1;}

.tsfi-settings .meta{margin-top:16px;font-size:12.5px;color:var(--muted);}
.tsfi-settings .hint{margin-top:6px;font-size:12.5px;color:var(--faint);}

/* history drawer */
.tsfi-settings-scrim{position:fixed;inset:0;background:rgba(18,26,45,.42);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40;}
.tsfi-settings-scrim.open{opacity:1;pointer-events:auto;}
.tsfi-settings-drawer{position:fixed;top:0;right:0;height:100%;width:min(460px,100%);background:var(--bg);box-shadow:-8px 0 30px rgba(15,22,40,.18);transform:translateX(100%);transition:transform .24s ease;z-index:50;display:flex;flex-direction:column;}
.tsfi-settings-drawer.open{transform:translateX(0);}
.tsfi-settings .dhead{background:var(--surface);border-bottom:1px solid var(--line);padding:18px 22px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.tsfi-settings .dhead h2{margin:0;font-size:18px;font-weight:650;}
.tsfi-settings .dhead .sub{color:var(--muted);font-size:12.5px;margin-top:3px;font-family:ui-monospace,Menlo,monospace;}
.tsfi-settings .x{border:none;background:var(--zebra);width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:17px;color:var(--muted);line-height:1;flex:none;}
.tsfi-settings .x:hover{color:var(--ink);}
.tsfi-settings .dbody{overflow-y:auto;padding:14px 18px 28px;flex:1;}

.tsfi-settings .logitem{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line);}
.tsfi-settings .logitem:last-child{border-bottom:none;}
.tsfi-settings .chip{display:inline-block;font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;color:var(--accent-ink);background:var(--accent-soft);}
.tsfi-settings .lmeta{text-align:right;display:flex;flex-direction:column;gap:2px;}
.tsfi-settings .lmeta .who{font-size:12.5px;color:var(--ink);font-weight:500;}
.tsfi-settings .lmeta .when{font-size:11.5px;color:var(--muted);}
.tsfi-settings .empty{padding:42px 16px;text-align:center;color:var(--muted);}
.tsfi-settings .empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px;}
.tsfi-settings .loading{padding:34px;text-align:center;color:var(--muted);}

/* toast */
.tsfi-settings-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,80px);background:#0F1622;color:#fff;padding:12px 20px;border-radius:11px;font-size:13.5px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transition:all .25s;z-index:95;pointer-events:none;display:flex;align-items:center;gap:9px;}
.tsfi-settings-toast.show{transform:translate(-50%,0);opacity:1;}
.tsfi-settings-toast .dot{width:8px;height:8px;border-radius:50%;background:#3FCF73;}

@media(prefers-reduced-motion:reduce){.tsfi-settings *{transition:none!important;}}
@media(max-width:760px){
  .tsfi-settings .bar{padding:12px 16px;}
  .tsfi-settings .page{padding:16px 14px 44px;}
  .tsfi-settings .row{flex-direction:column;align-items:stretch;gap:14px;}
  .tsfi-settings .lbl{flex:none;max-width:none;}
  .tsfi-settings .actions{flex-direction:row;}
  .tsfi-settings .btn-dark{flex:1 1 auto;min-width:0;}
}