:root {
  --red: #C8392B; --red-light: #F5E8E7;
  --orange: #D4690A; --orange-light: #FDF0E3;
  --green: #2E7D4F; --green-light: #E5F4EC;
  --blue: #1A5FA8; --blue-light: #E4EEF9;
  --ink: #0F0F0F; --ink-60: rgba(15,15,15,.6); --ink-20: rgba(15,15,15,.12);
  --paper: #F7F5F0; --card-bg: #FFFFFF; --border: rgba(15,15,15,.1);
  --font-display: 'Syne', sans-serif; --font-mono: 'DM Mono', monospace;
  --radius: 4px; --radius-lg: 8px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: 13px; min-height: 100vh; }
body::before { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events:none; z-index:1000; opacity:.4; }

.wrap { max-width: 680px; margin: 0 auto; padding: 0 20px 80px; }

/* LOGIN */
#loginScreen { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.login-box { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px; width:100%; max-width:360px; }
.login-logo { display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.logo-badge { background:var(--red); color:#fff; font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:1.5px; padding:5px 9px; border-radius:var(--radius); }
.login-box h1 { font-family:var(--font-display); font-size:20px; font-weight:700; margin-bottom:24px; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-60); margin-bottom:5px; }
.field input { width:100%; font-family:var(--font-mono); font-size:13px; padding:9px 11px; border:1px solid var(--border); border-radius:var(--radius); background:var(--paper); color:var(--ink); outline:none; }
.field input:focus { border-color:var(--ink); }
.login-err { color:var(--red); font-size:12px; margin-bottom:12px; display:none; }
.login-err.show { display:block; }
.tab-row { display:flex; gap:0; margin-bottom:24px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.tab { flex:1; padding:8px; text-align:center; font-size:12px; cursor:pointer; background:transparent; border:none; font-family:var(--font-mono); color:var(--ink-60); }
.tab.active { background:var(--ink); color:#fff; }

/* APP */
#appScreen { display:none; }
header { padding:40px 0 32px; border-bottom:1px solid var(--border); margin-bottom:32px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.logo-row { display:flex; align-items:center; gap:12px; }
h1 { font-family:var(--font-display); font-size:26px; font-weight:700; letter-spacing:-.5px; line-height:1; }
h1 span { color:var(--red); }
.header-actions { display:flex; gap:8px; align-items:center; }
.user-badge { font-size:11px; color:var(--ink-60); padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius); }

.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; font-family:var(--font-mono); font-size:12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--card-bg); cursor:pointer; color:var(--ink); transition:background .15s,border-color .15s; white-space:nowrap; }
.btn:hover { background:var(--ink); color:#fff; border-color:var(--ink); }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn.primary { background:var(--red); color:#fff; border-color:var(--red); }
.btn.primary:hover { background:#a52d22; border-color:#a52d22; }
.btn.ghost { background:transparent; border-color:transparent; color:var(--ink-60); }
.btn.ghost:hover { background:var(--red-light); color:var(--red); border-color:transparent; }

.sync-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius); margin-bottom:24px; font-size:12px; color:var(--ink-60); }
.dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; background:#aaa; transition:background .3s; }
.dot.loading { background:var(--blue); animation:blink 1s infinite; }
.dot.ok { background:var(--green); }
.dot.error { background:var(--red); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:24px; }
.stat { background:var(--card-bg); padding:16px; }
.stat-label { font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-60); margin-bottom:6px; }
.stat-val { font-family:var(--font-display); font-size:24px; font-weight:700; line-height:1; }
.stat-val.danger { color:var(--red); }
.stat-val.warn { color:var(--orange); }

.filters { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.ftag { padding:4px 12px; border:1px solid var(--border); border-radius:999px; font-family:var(--font-mono); font-size:11px; cursor:pointer; background:transparent; color:var(--ink-60); transition:all .15s; }
.ftag:hover { border-color:var(--ink-60); color:var(--ink); }
.search-wrap { position:relative; margin-bottom:12px; }
.search-input { width:100%; font-family:var(--font-mono); font-size:13px; padding:8px 36px 8px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--card-bg); color:var(--ink); outline:none; }
.search-input:focus { border-color:var(--ink); }
.search-clear { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--ink-60); font-size:14px; display:none; }
.search-clear.show { display:block; }
.sort-bar { display:flex; align-items:center; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.sort-label { font-size:11px; color:var(--ink-60); margin-right:2px; }
.stag { padding:4px 10px; border-radius:999px; border:1px solid var(--border); font-family:var(--font-mono); font-size:11px; cursor:pointer; background:transparent; color:var(--ink-60); transition:all .15s; display:flex; align-items:center; gap:4px; }
.stag:hover { border-color:var(--ink-60); color:var(--ink); }
.stag.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.ftag.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }

.cards-wrap { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.card { background:var(--card-bg); border-left:3px solid transparent; padding:14px 16px; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; transition:transform .1s; }
.card+.card { border-top:1px solid var(--border); }
.card:hover { transform:translateX(2px); }
.card.urgent { border-left-color:var(--red); }
.card.soon { border-left-color:var(--orange); }
.card.ok { border-left-color:var(--green); }
.card.expired,.card.used { border-left-color:#ccc; opacity:.55; }
.card-amount { font-family:var(--font-display); font-size:18px; font-weight:700; line-height:1; margin-bottom:4px; }
.card-meta { font-size:11px; color:var(--ink-60); line-height:1.6; }
.card-meta span { display:inline-block; margin-right:10px; }
.card-note { font-size:11px; color:var(--ink-60); font-style:italic; margin-top:2px; }
.card-source { font-size:10px; letter-spacing:.5px; color:var(--blue); margin-top:3px; }
.card-code { display:inline-flex; align-items:center; gap:6px; margin-top:4px; background:var(--ink); color:var(--paper); border-radius:var(--radius); padding:3px 8px; font-size:12px; font-family:var(--font-mono); cursor:pointer; border:none; }
.card-code:hover { background:#333; }
.card-code-label { letter-spacing:1px; }
.card-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.badge { font-size:10px; letter-spacing:.5px; text-transform:uppercase; padding:3px 8px; border-radius:999px; white-space:nowrap; font-weight:500; }
.badge.urgent { background:var(--red-light); color:var(--red); }
.badge.soon { background:var(--orange-light); color:var(--orange); }
.badge.ok { background:var(--green-light); color:var(--green); }
.badge.expired,.badge.used { background:#eee; color:#888; }
.card-actions { display:flex; gap:4px; }
.icon-btn { background:none; border:none; cursor:pointer; color:var(--ink-60); font-size:14px; padding:2px 4px; border-radius:var(--radius); transition:all .15s; }
.icon-btn:hover { color:var(--red); background:var(--red-light); }
.icon-btn.ok-btn:hover { color:var(--green); background:var(--green-light); }
.empty { text-align:center; padding:48px 20px; color:var(--ink-60); font-size:13px; border:1px dashed var(--border); border-radius:var(--radius-lg); }

.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:var(--radius); font-size:12px; opacity:0; transition:all .25s; pointer-events:none; white-space:nowrap; z-index:999; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.overlay { display:none; position:fixed; inset:0; background:rgba(15,15,15,.55); z-index:500; align-items:center; justify-content:center; padding:20px; }
.overlay.open { display:flex; }
.modal { background:var(--card-bg); border-radius:var(--radius-lg); padding:28px; width:100%; max-width:380px; border:1px solid var(--border); }
.modal h2 { font-family:var(--font-display); font-size:18px; font-weight:700; margin-bottom:20px; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }
.field textarea { width:100%; font-family:var(--font-mono); font-size:13px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--paper); color:var(--ink); outline:none; height:60px; resize:vertical; }

.bar-row { display:grid; grid-template-columns:1fr 3fr auto; gap:10px; align-items:center; padding:10px 14px; background:var(--card-bg); font-size:12px; }
.bar-row+.bar-row { border-top:1px solid var(--border); }
.bar-track { background:var(--ink-20); border-radius:999px; height:6px; overflow:hidden; }
.bar-fill { height:100%; border-radius:999px; transition:width .4s; }
.bar-fill.green { background:var(--green); }
.bar-fill.red { background:var(--red); }
.bar-fill.orange { background:var(--orange); }
.month-row { display:grid; grid-template-columns:60px 1fr 1fr auto; gap:10px; align-items:center; padding:10px 14px; background:var(--card-bg); font-size:12px; }
.month-row+.month-row { border-top:1px solid var(--border); }
@media (max-width:500px) { .stats { grid-template-columns:repeat(2,1fr); } h1 { font-size:20px; } .stat-val { font-size:20px; } }