@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

  :root {
   
    --bg:         #000913;          
    --surface:    #0c0d0f;          
    --surface2:   #3c3e42;          
    --border:     #4a4c50;          
    --charcoal:   #2b2d2f;
    --charcoal-mid:#1e1f20;
    --navy:       #0f2240;          
    --navy-mid:   #131d33;         
    --navy-light: #080e1b;          
    --beige:      #ecdbbd;         
    --beige-dim:  #c4b89a;         
    --beige-pale: #f0e9db;        
    --text:       #ddd3be;         
    --muted:      #86682a;          
    --danger:     #c90909;
    --warn:       #e48f3a;
    --success:    #3d7a5a;
    --info:       #3c506d;
    --mono:       'IBM Plex Mono', monospace;
    --serif:      'Playfair Display', Georgia, serif;
  }

  * { box-sizing:border-box; margin:0; padding:0; }

  body {
    background: var(--bg); color: var(--text);
    font-family: var(--mono); min-height:100vh; overflow-x:hidden;
  }

  body::before {
    content:''; position:fixed; inset:0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='1' cy='1' r='0.5' fill='rgba(232,220,200,0.05)'/%3E%3Ccircle cx='3' cy='3' r='0.5' fill='rgba(232,220,200,0.05)'/%3E%3C/svg%3E");
    pointer-events:none; z-index:0;
  }
  
  body::after {
    content:''; position:fixed; top:0; left:0; right:0; height:3px;
    background: linear-gradient(90deg, var(--navy), var(--beige-dim), var(--navy));
    z-index:999;
  }

  .app { position:relative; z-index:1; min-height:100vh; }

  .screen { display:none; min-height:100vh; padding:20px; }
  .screen.active { display:flex; flex-direction:column; }

  #screen-setup, #screen-login {
    align-items:center; justify-content:center;
    background: radial-gradient(ellipse at 50% 0%, rgba(15,34,64,0.6) 0%, transparent 70%);
  }


  .auth-box {
    width:100%; max-width:400px;
    background:var(--surface); border:1px solid var(--border);
    border-top:3px solid var(--navy-light); padding:44px 40px;
    box-shadow:0 8px 40px rgba(0,0,0,0.5);
  }

  .vault-logo { text-align:center; margin-bottom:36px; }
  /* .logo-mark {
    width:52px; height:52px; border:2px solid var(--beige-dim);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:22px; margin-bottom:14px;
    box-shadow:0 0 0 4px rgba(232,220,200,0.06);
  } */
  .vault-logo h1 {
    font-family:var(--serif); font-size:30px; font-weight:700;
    letter-spacing:3px; color:var(--beige); line-height:1;
  }
  .vault-logo p { font-size:9px; letter-spacing:3px; color:var(--muted); text-transform:uppercase; margin-top:8px; }

  .form-group { margin-bottom:20px; }
  .form-group label { display:block; font-size:9px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; margin-bottom:7px; }
  .form-group input {
    width:100%; background:var(--bg); border:1px solid var(--border);
    border-bottom:1px solid var(--beige-dim); color:var(--text);
    font-family:var(--mono); font-size:14px; padding:11px 13px; outline:none;
    transition:border-color 0.2s, box-shadow 0.2s;
  }
  .form-group input:focus { border-color:var(--beige-dim); box-shadow:0 2px 0 rgba(196,184,154,0.3); }

  .strength-bar  { height:2px; background:var(--border); margin-top:8px; }
  .strength-fill { height:100%; width:0%; transition:width 0.35s, background 0.35s; }
  .strength-label { font-size:9px; letter-spacing:1px; margin-top:5px; text-align:right; }

  .btn-primary {
    width:100%; padding:13px; background:var(--navy-mid);
    border:1px solid var(--beige-dim); color:var(--beige);
    font-family:var(--mono); font-size:11px; letter-spacing:3px;
    text-transform:uppercase; cursor:pointer; transition:all 0.2s;
  }
  .btn-primary:hover { background:var(--beige-dim); color:var(--navy); box-shadow:0 4px 16px rgba(196,184,154,0.2); }
  .btn-primary:disabled { opacity:0.4; cursor:not-allowed; }

  .attempt-info { text-align:center; font-size:10px; color:var(--muted); margin-top:14px; min-height:18px; }
  .attempt-info.warn   { color:var(--warn); }
  .attempt-info.danger { color:var(--danger); }

  .lockout-msg {
    background:rgba(201,64,64,0.08); border:1px solid rgba(201,64,64,0.3);
    padding:14px; text-align:center; font-size:11px; line-height:1.9;
    margin-bottom:20px; display:none; color:var(--danger);
  }
  .divider { border:none; border-top:1px solid var(--border); margin:24px 0; }
  .small-link {
    font-size:9px; color:var(--muted); cursor:pointer;
    text-decoration:underline; text-underline-offset:3px;
    background:none; border:none; font-family:var(--mono);
    letter-spacing:1px; transition:color 0.2s;
  }
  .small-link:hover { color:var(--beige-dim); }

 
  .vault-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 24px; height:56px; border-bottom:1px solid var(--navy-light);
    background:var(--navy); position:sticky; top:0; z-index:10;
    box-shadow:0 2px 12px rgba(0,0,0,0.4);
  }
  .brand { font-family:var(--serif); font-size:20px; font-weight:700; letter-spacing:2px; color:var(--beige); display:flex; align-items:center; gap:10px; }
  .brand-dot { width:7px; height:7px; background:var(--beige-dim); display:inline-block; }
  .header-right { display:flex; align-items:center; gap:12px; }
  .score-badge { background:var(--navy-mid); border:1px solid var(--navy-light); padding:5px 14px; font-size:11px; display:flex; align-items:center; gap:8px; color:var(--beige-dim); letter-spacing:1px; }
  .score-badge .score-val { color:var(--beige-pale); font-weight:600; font-size:13px; }

  .score-delta { position:fixed; top:70px; right:24px; font-family:var(--serif); font-size:20px; font-style:italic; font-weight:500; pointer-events:none; opacity:0; z-index:999; }
  .score-delta.show { animation:floatScore 1.6s ease-out forwards; }
  @keyframes floatScore { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-50px)} }

  .btn-logout { background:transparent; border:1px solid var(--border); color:var(--muted); font-family:var(--mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; padding:6px 14px; cursor:pointer; transition:all 0.2s; }
  .btn-logout:hover { border-color:var(--beige-dim); color:var(--beige); }

  .idle-bar  { height:2px; background:var(--border); }
  .idle-fill { height:100%; width:100%; background:linear-gradient(90deg, var(--navy-mid), var(--beige-dim)); transition:width 1s linear, background 1s; }

  .vault-body { display:grid; grid-template-columns:260px 1fr; flex:1; min-height:0; }

  .sidebar { border-right:1px solid var(--border); background:var(--surface); display:flex; flex-direction:column; height:calc(100vh - 58px); position:sticky; top:58px; overflow:hidden; }
  .sidebar-top { padding:14px; border-bottom:1px solid var(--border); background:var(--surface2); }
  .btn-new-note { width:100%; background:transparent; border:1px dashed var(--beige-dim); color:var(--beige-dim); font-family:var(--mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:10px; cursor:pointer; transition:all 0.2s; }
  .btn-new-note:hover { background:rgba(196,184,154,0.09); color:var(--beige); border-color:var(--beige); }

  .note-list { flex:1; overflow-y:auto; padding:8px; }
  .note-list::-webkit-scrollbar { width:3px; }
  .note-list::-webkit-scrollbar-thumb { background:var(--border); }

  .note-item { padding:11px 12px; border:1px solid transparent; cursor:pointer; margin-bottom:3px; transition:all 0.15s; }
  .note-item:hover  { border-color:var(--border); background:var(--surface2); }
  .note-item.active { border-color:var(--beige-dim); background:rgba(196,184,154,0.07); }
  .note-item-title  { font-size:12px; font-weight:600; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
  .note-item.active .note-item-title { color:var(--beige); }
  .note-item-meta   { font-size:9px; color:var(--muted); display:flex; gap:6px; align-items:center; }

  .exp-badge { font-size:8px; padding:1px 5px; border:1px solid; letter-spacing:0.5px; }
  .exp-badge.soon    { border-color:var(--warn);    color:var(--warn); }
  .exp-badge.expired { border-color:var(--danger);  color:var(--danger); }
  .exp-badge.ok      { border-color:var(--success); color:var(--success); }

  .sidebar-footer { padding:10px 14px; border-top:1px solid var(--border); font-size:9px; color:var(--muted); letter-spacing:0.5px; }

  .note-editor { display:flex; flex-direction:column; padding:28px; gap:16px; background:var(--charcoal-mid); }
  .editor-toolbar { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
  .editor-title { background:transparent; border:none; border-bottom:1px solid var(--border); color:var(--beige); font-family:var(--serif); font-style:italic; font-size:24px; font-weight:500; padding:6px 0; outline:none; flex:1; min-width:200px; transition:border-color 0.2s; }
  .editor-title:focus { border-color:var(--beige-dim); }
  .editor-title::placeholder { color:var(--border); font-style:italic; }

  .expiry-select { background:var(--surface); border:1px solid var(--border); color:var(--muted); font-family:var(--mono); font-size:10px; padding:8px 10px; outline:none; cursor:pointer; transition:border-color 0.2s; }
  .expiry-select:focus { border-color:var(--beige-dim); color:var(--text); }

  textarea.note-body { flex:1; min-height:320px; background:var(--surface); border:1px solid var(--border); color:var(--text); font-family:var(--mono); font-size:13px; line-height:1.9; padding:18px; resize:none; outline:none; transition:border-color 0.2s; }
  textarea.note-body:focus { border-color:var(--beige-dim); }
  textarea.note-body::placeholder { color:var(--muted); }

  .editor-actions { display:flex; gap:8px; justify-content:flex-end; align-items:center; }
  .clipboard-hint { font-size:9px; color:var(--muted); letter-spacing:0.5px; margin-right:auto; }

  .btn-save { background:var(--navy-mid); border:1px solid var(--beige-dim); color:var(--beige); font-family:var(--mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:10px 22px; cursor:pointer; transition:all 0.2s; }
  .btn-save:hover { background:var(--beige-dim); color:var(--navy); box-shadow:0 2px 12px rgba(196,184,154,0.15); }
  .btn-del-note { background:transparent; border:1px solid var(--border); color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; padding:10px 18px; cursor:pointer; transition:all 0.2s; }
  .btn-del-note:hover { border-color:var(--danger); color:var(--danger); }

  .empty-state { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); gap:14px; text-align:center; }
  .empty-state .ei { width:56px; height:56px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:20px; opacity:0.4; }
  .empty-state p { font-size:10px; letter-spacing:2px; text-transform:uppercase; }

  /* Log */
  .log-toggle { position:fixed; bottom:20px; right:20px; background:var(--navy-mid); border:1px solid var(--navy-light); color:var(--beige-dim); font-family:var(--mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; padding:8px 14px; cursor:pointer; z-index:100; transition:all 0.2s; }
  .log-toggle:hover { background:var(--navy-light); border-color:var(--beige-dim); color:var(--beige); }
  .chain-ok  { color:var(--success); margin-left:4px; }
  .chain-bad { color:var(--danger);  margin-left:4px; font-weight:600; }

  .log-panel { position:fixed; bottom:0; left:0; right:0; height:240px; background:var(--navy); border-top:1px solid var(--navy-light); transform:translateY(100%); transition:transform 0.3s ease; z-index:99; display:flex; flex-direction:column; }
  .log-panel.open { transform:translateY(0); }
  .log-header { display:flex; justify-content:space-between; align-items:center; padding:9px 20px; border-bottom:1px solid var(--navy-light); font-size:9px; letter-spacing:2px; color:var(--beige-dim); text-transform:uppercase; }
  .log-entries { flex:1; overflow-y:auto; padding:6px 20px; font-size:10px; line-height:2.2; }
  .log-entries::-webkit-scrollbar { width:3px; }
  .log-entries::-webkit-scrollbar-thumb { background:var(--navy-light); }

  .log-entry { display:flex; gap:14px; opacity:0; animation:fadeIn 0.25s forwards; }
  @keyframes fadeIn { to { opacity:1; } }
  .log-ts    { color:var(--muted); min-width:76px; font-size:9px; }
  .log-type  { min-width:140px; }
  .log-type.success { color:var(--success); }
  .log-type.fail    { color:var(--danger); }
  .log-type.warn    { color:var(--warn); }
  .log-type.info    { color:var(--info); }
  .log-score        { min-width:40px; text-align:right; }
  .log-score.pos    { color:var(--success); }
  .log-score.neg    { color:var(--danger); }
  .log-chain        { font-size:8px; color:var(--muted); }

  /* Modal */
  .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index:200; }
  .modal-overlay.open { display:flex; }
  .modal-box { background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--navy-light); padding:32px; max-width:360px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
  .modal-box h3 { font-family:var(--serif); font-size:20px; color:var(--beige); margin-bottom:10px; }
  .modal-box p  { font-size:11px; line-height:1.8; color:var(--muted); margin-bottom:24px; }
  .modal-actions { display:flex; gap:10px; justify-content:flex-end; }
  .btn-mc { background:transparent; border:1px solid var(--border); color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:1px; padding:9px 18px; cursor:pointer; transition:all 0.2s; }
  .btn-mc:hover { border-color:var(--text); color:var(--text); }
  .btn-mok { background:rgba(201,64,64,0.12); border:1px solid var(--danger); color:var(--danger); font-family:var(--mono); font-size:10px; letter-spacing:1px; padding:9px 18px; cursor:pointer; transition:all 0.2s; }
  .btn-mok:hover { background:var(--danger); color:white; }

  /* Toast */
  .toast { position:fixed; top:72px; left:50%; transform:translateX(-50%) translateY(-12px); background:var(--surface2); border:1px solid var(--border); padding:9px 20px; font-size:11px; letter-spacing:0.5px; opacity:0; pointer-events:none; z-index:300; transition:all 0.3s; white-space:nowrap; }
  .toast.show    { opacity:1; transform:translateX(-50%) translateY(0); }
  .toast.success { border-color:var(--success); color:var(--success); }
  .toast.error   { border-color:var(--danger);  color:var(--danger); }
  .toast.info    { border-color:var(--info);    color:var(--info); }
  .toast.warn    { border-color:var(--warn);    color:var(--warn); }

  @keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
  .shake { animation:shake 0.38s ease; }

  @media(max-width:640px){
    .vault-body{grid-template-columns:1fr}
    .sidebar{height:auto;position:relative;top:0}
    .auth-box{padding:28px 22px}
  }