@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --bg: #07070f;
  --surface: #0e0e1c;
  --surface-2: #161628;
  --border: #222238;
  --border-bright: #333358;
  --text: #e4e4f0;
  --text-muted: #6a6a90;
  --text-dim: #383858;
  --accent: #00f5c8;
  --accent-dim: rgba(0,245,200,0.08);
  --accent-glow: rgba(0,245,200,0.2);
  --warn: #ffb020;
  --danger: #ff4560;
  --success: #00f5c8;
  --info: #5eaaff;
  --font-display: 'Syne', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-body: 'DM Sans', sans-serif;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
  --glow: 0 0 30px rgba(0,245,200,0.12);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,245,200,0.04) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='0.5' fill='rgba(255,255,255,0.025)'/%3E%3C/svg%3E");
}

/* ─── NAV ────────────────────────────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7,7,15,0.92);
  backdrop-filter: blur(12px);
}
.nav-logo { display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text) }
.nav-logo-mark { width:32px;height:32px;background:var(--accent);border-radius:6px;display:grid;place-items:center }
.nav-logo-mark svg { width:18px;height:18px }
.nav-logo-name { font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-0.02em }
.nav-logo-name span { color:var(--accent) }
.nav-links { display:flex;align-items:center;gap:6px;list-style:none }
.nav-links a { color:var(--text-muted);text-decoration:none;font-size:0.88rem;font-weight:500;padding:7px 14px;border-radius:7px;transition:all 0.2s;letter-spacing:0.01em }
.nav-links a:hover,.nav-links a.active { color:var(--text);background:var(--surface-2) }
.nav-links a.active { color:var(--accent) }
.nav-badge { font-size:0.7rem;font-family:var(--font-mono);padding:2px 8px;background:var(--accent-dim);color:var(--accent);border:1px solid rgba(0,245,200,0.2);border-radius:20px }

/* ─── LAYOUT ─────────────────────────────────────────────────────────────── */
.main { max-width:1280px;margin:0 auto;padding:40px 32px }
.grid-main { display:grid;grid-template-columns:1fr 400px;gap:24px;align-items:start }
.left-col { display:flex;flex-direction:column;gap:16px }
.right-col { position:sticky;top:88px;display:flex;flex-direction:column;gap:16px }

/* ─── CARDS ──────────────────────────────────────────────────────────────── */
.card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;transition:border-color 0.2s,box-shadow 0.2s }
.card:hover { border-color:var(--border-bright) }
.card.glow { box-shadow:var(--glow);border-color:rgba(0,245,200,0.2) }
.card-title { font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--text);margin-bottom:18px;display:flex;align-items:center;gap:8px }
.card-title .dot { width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 8px var(--accent);flex-shrink:0 }

/* ─── TABS ───────────────────────────────────────────────────────────────── */
.tabs { display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto;scrollbar-width:none }
.tabs::-webkit-scrollbar { display:none }
.tab { padding:8px 14px;font-size:0.78rem;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:color 0.2s;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;background:none;border-top:none;border-left:none;border-right:none }
.tab:hover { color:var(--text) }
.tab.active { color:var(--accent);border-bottom-color:var(--accent) }

/* ─── FORM ELEMENTS ──────────────────────────────────────────────────────── */
.field { margin-bottom:14px }
.field:last-child { margin-bottom:0 }
label { display:block;font-size:0.78rem;font-weight:500;color:var(--text-muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.06em;font-family:var(--font-mono) }
input[type="text"],input[type="url"],input[type="number"],input[type="email"],input[type="tel"],textarea,select {
  width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-body);font-size:0.92rem;padding:10px 14px;outline:none;transition:border-color 0.2s,box-shadow 0.2s;appearance:none
}
input:focus,textarea:focus,select:focus { border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim) }
select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236a6a90' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer }
textarea { resize:vertical;min-height:80px }
input[type="color"] { width:38px;height:36px;padding:2px;cursor:pointer;border-radius:var(--radius);background:var(--bg);border:1px solid var(--border) }
input[type="range"] { width:100%;appearance:none;height:4px;background:var(--border);border-radius:2px;outline:none;cursor:pointer;padding:0 }
input[type="range"]::-webkit-slider-thumb { appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);cursor:pointer }
input[type="checkbox"] { width:15px;height:15px;accent-color:var(--accent);cursor:pointer;flex-shrink:0 }
.color-row { display:flex;align-items:center;gap:8px }
.color-row input[type="text"] { flex:1 }

/* ─── TOGGLE LABEL ───────────────────────────────────────────────────────── */
.toggle-label { display:flex;align-items:center;gap:8px;cursor:pointer;font-size:0.83rem;color:var(--text-muted);user-select:none;margin-bottom:8px }
.toggle-label:hover { color:var(--text) }

/* ─── STYLE GRID (patterns / eyes) ──────────────────────────────────────── */
.style-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px }
.style-grid-4 { display:grid;grid-template-columns:repeat(4,1fr);gap:8px }
.style-option { display:none }
.style-label { display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all 0.2s;font-size:0.72rem;color:var(--text-muted);text-align:center;line-height:1.2 }
.style-label svg { opacity:0.7 }
.style-label:hover { border-color:var(--border-bright);color:var(--text) }
.style-label:hover svg { opacity:1 }
.style-option:checked + .style-label { border-color:var(--accent);background:var(--accent-dim);color:var(--accent) }
.style-option:checked + .style-label svg { opacity:1 }

/* ─── GRADIENT PANEL ─────────────────────────────────────────────────────── */
.gradient-panel { display:none;flex-direction:column;gap:10px;padding:14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);margin-top:8px }
.gradient-panel.open { display:flex }
.gradient-row { display:grid;grid-template-columns:1fr 1fr;gap:10px }

/* ─── PRESET THEMES ──────────────────────────────────────────────────────── */
.theme-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px }
.theme-btn { display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:0.72rem;color:var(--text-muted);transition:all 0.2s;font-family:var(--font-mono) }
.theme-btn:hover { border-color:var(--border-bright);color:var(--text) }
.theme-swatch { width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,0.1) }

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--radius);border:none;font-family:var(--font-display);font-weight:700;font-size:0.88rem;letter-spacing:0.03em;cursor:pointer;transition:all 0.2s;text-decoration:none;white-space:nowrap }
.btn-primary { background:var(--accent);color:#050510 }
.btn-primary:hover { background:#00ddb5;box-shadow:0 4px 20px rgba(0,245,200,0.35);transform:translateY(-1px) }
.btn-secondary { background:var(--surface-2);color:var(--text);border:1px solid var(--border) }
.btn-secondary:hover { border-color:var(--border-bright);background:var(--border) }
.btn-ghost { background:transparent;color:var(--text-muted);border:1px solid var(--border) }
.btn-ghost:hover { color:var(--text);border-color:var(--border-bright) }
.btn-danger { background:rgba(255,69,96,0.15);color:var(--danger);border:1px solid rgba(255,69,96,0.3) }
.btn-danger:hover { background:rgba(255,69,96,0.25) }
.btn:disabled { opacity:0.4;cursor:not-allowed;transform:none !important;box-shadow:none !important }
.btn-sm { padding:7px 14px;font-size:0.8rem }
.btn-lg { padding:14px 28px;font-size:1rem }
.btn-full { width:100% }
.btn-group { display:flex;gap:8px;flex-wrap:wrap }

/* ─── PROGRESS / BADGES / ALERTS ─────────────────────────────────────────── */
.progress-bar { height:6px;background:var(--border);border-radius:3px;overflow:hidden }
.progress-fill { height:100%;background:var(--accent);border-radius:3px;transition:width 0.3s ease;box-shadow:0 0 10px var(--accent-glow) }
.badge { display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:0.72rem;padding:3px 9px;border-radius:20px }
.badge-success { background:rgba(0,245,200,0.1);color:var(--accent);border:1px solid rgba(0,245,200,0.2) }
.badge-warn { background:rgba(255,176,32,0.1);color:var(--warn);border:1px solid rgba(255,176,32,0.2) }
.badge-danger { background:rgba(255,69,96,0.1);color:var(--danger);border:1px solid rgba(255,69,96,0.2) }
.badge-info { background:rgba(94,170,255,0.1);color:var(--info);border:1px solid rgba(94,170,255,0.2) }
.badge-muted { background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border) }
.alert { padding:12px 16px;border-radius:var(--radius);font-size:0.85rem;display:flex;gap:10px;align-items:flex-start;line-height:1.5 }
.alert-info { background:rgba(94,170,255,0.08);border:1px solid rgba(94,170,255,0.2);color:var(--info) }
.alert-warn { background:rgba(255,176,32,0.08);border:1px solid rgba(255,176,32,0.2);color:var(--warn) }
.alert-danger { background:rgba(255,69,96,0.08);border:1px solid rgba(255,69,96,0.2);color:var(--danger) }
.alert-success { background:rgba(0,245,200,0.08);border:1px solid rgba(0,245,200,0.2);color:var(--accent) }

/* ─── QR DISPLAY ─────────────────────────────────────────────────────────── */
.qr-display { display:flex;align-items:center;justify-content:center;padding:20px;background:#fff;border-radius:var(--radius-lg);min-height:340px;position:relative }
.qr-display canvas,.qr-display svg { max-width:100%;height:auto }
.qr-placeholder { text-align:center;opacity:0.35 }
.qr-placeholder div { font-size:3rem;margin-bottom:8px }

/* ─── HASH / MONO ─────────────────────────────────────────────────────────── */
.mono { font-family:var(--font-mono);font-size:0.82rem;color:var(--text-muted) }
.hash-display { font-family:var(--font-mono);font-size:0.7rem;color:var(--text-dim);word-break:break-all;padding:8px 12px;background:var(--bg);border-radius:6px;border:1px solid var(--border) }
.hash-display.valid { color:var(--accent);border-color:rgba(0,245,200,0.2) }
.hash-display.invalid { color:var(--danger);border-color:rgba(255,69,96,0.2) }

/* ─── FILE DROP ──────────────────────────────────────────────────────────── */
.drop-zone { border:2px dashed var(--border);border-radius:var(--radius-lg);padding:32px;text-align:center;cursor:pointer;transition:all 0.2s;background:var(--bg) }
.drop-zone:hover,.drop-zone.drag-over { border-color:var(--accent);background:var(--accent-dim) }
.drop-zone-icon { font-size:2rem;margin-bottom:10px;opacity:0.5 }
.drop-zone h3 { font-family:var(--font-display);font-weight:700;margin-bottom:5px;font-size:0.95rem }
.drop-zone p { color:var(--text-muted);font-size:0.8rem;line-height:1.5 }

/* ─── FILE LIST ──────────────────────────────────────────────────────────── */
.file-list { display:flex;flex-direction:column;gap:6px }
.file-item { display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);font-size:0.83rem }
.file-item-icon { font-size:1.1rem;flex-shrink:0 }
.file-item-name { flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.file-item-size { color:var(--text-muted);font-family:var(--font-mono);font-size:0.72rem;flex-shrink:0 }
.file-item-remove { background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:1rem;padding:0 4px;transition:color 0.2s;line-height:1 }
.file-item-remove:hover { color:var(--danger) }

/* ─── CAMERA ──────────────────────────────────────────────────────────────── */
.camera-container { position:relative;background:#000;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3 }
.camera-container video { width:100%;height:100%;object-fit:cover }
.camera-overlay { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none }
.scan-frame { width:220px;height:220px;position:relative }
.scan-corner { position:absolute;width:28px;height:28px;border-color:var(--accent);border-style:solid }
.scan-corner.tl { top:0;left:0;border-width:3px 0 0 3px;border-radius:4px 0 0 0 }
.scan-corner.tr { top:0;right:0;border-width:3px 3px 0 0;border-radius:0 4px 0 0 }
.scan-corner.bl { bottom:0;left:0;border-width:0 0 3px 3px;border-radius:0 0 0 4px }
.scan-corner.br { bottom:0;right:0;border-width:0 3px 3px 0;border-radius:0 0 4px 0 }
.scan-line { position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:scan 2s linear infinite;box-shadow:0 0 8px var(--accent) }
@keyframes scan { 0%{top:4px} 100%{top:calc(100% - 4px)} }

/* ─── STEPS ──────────────────────────────────────────────────────────────── */
.steps { display:flex;align-items:center;gap:0;margin-bottom:24px;flex-wrap:wrap }
.step { display:flex;align-items:center;gap:7px;font-size:0.78rem;color:var(--text-dim);font-family:var(--font-mono) }
.step-num { width:24px;height:24px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;font-size:0.72rem;font-weight:700;flex-shrink:0 }
.step.active { color:var(--text) }
.step.active .step-num { background:var(--accent);color:#050510;border-color:var(--accent) }
.step.done { color:var(--accent) }
.step.done .step-num { background:var(--accent-dim);border-color:var(--accent);color:var(--accent) }
.step-sep { flex:1;height:1px;background:var(--border);margin:0 8px;min-width:16px;max-width:40px }

/* ─── STATS ──────────────────────────────────────────────────────────────── */
.stats { display:flex;gap:24px;flex-wrap:wrap }
.stat { text-align:center }
.stat-value { font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--text);line-height:1 }
.stat-label { font-size:0.7rem;color:var(--text-muted);margin-top:3px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.06em }

/* ─── DIVIDER ─────────────────────────────────────────────────────────────── */
hr.divider { border:none;border-top:1px solid var(--border);margin:16px 0 }

/* ─── SECTION HEADER ─────────────────────────────────────────────────────── */
.section-header { margin-bottom:28px }
.section-header h1 { font-family:var(--font-display);font-weight:800;font-size:2rem;letter-spacing:-0.03em;line-height:1.1;margin-bottom:8px }
.section-header h1 .highlight { color:var(--accent) }
.section-header p { color:var(--text-muted);font-size:0.92rem;max-width:520px }

/* ─── SCAN TEST RESULT ───────────────────────────────────────────────────── */
.scan-result { margin-top:10px;padding:10px 14px;border-radius:var(--radius);font-size:0.83rem;font-family:var(--font-mono);word-break:break-all;display:none }

/* ─── TOAST ──────────────────────────────────────────────────────────────── */
.toast { position:fixed;top:78px;right:20px;z-index:500;max-width:380px;padding:12px 18px;border-radius:var(--radius);font-size:0.85rem;animation:fade-in 0.25s ease;pointer-events:none;backdrop-filter:blur(8px) }

/* ─── FOOTER ──────────────────────────────────────────────────────────────── */
.footer { border-top:1px solid var(--border);padding:24px 40px;display:flex;align-items:center;justify-content:space-between;color:var(--text-dim);font-size:0.78rem;font-family:var(--font-mono) }
.footer a { color:var(--text-muted);text-decoration:none }
.footer a:hover { color:var(--accent) }

/* ─── ANIMATIONS ─────────────────────────────────────────────────────────── */
@keyframes fade-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.fade-in { animation:fade-in 0.4s ease both }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 10px var(--accent-glow)} 50%{box-shadow:0 0 24px rgba(0,245,200,0.4)} }
.pulse { animation:pulse-glow 2s ease-in-out infinite }

/* ─── SCROLLBAR ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--border);border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--border-bright) }

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .grid-main { grid-template-columns:1fr }
  .right-col { position:static }
  .nav { padding:14px 20px }
  .nav-links { display:none }
  .main { padding:24px 16px }
  .theme-grid { grid-template-columns:repeat(4,1fr) }
}
@media (max-width:480px) {
  .section-header h1 { font-size:1.5rem }
  .style-grid { grid-template-columns:repeat(3,1fr) }
  .style-grid-4 { grid-template-columns:repeat(2,1fr) }
  .theme-grid { grid-template-columns:repeat(3,1fr) }
  .stats { gap:16px }
}

/* ─── PRINT ──────────────────────────────────────────────────────────────── */
@media print {
  .nav,.footer,.btn-group,.left-col,#transferCard,.card-title .dot { display:none !important }
  body { background:white;color:black }
  .main { max-width:100%;padding:0 }
  .right-col { position:static;width:100% }
  .card.glow { box-shadow:none;border:none }
  .qr-display { padding:0;background:transparent }
}