:root { color-scheme: dark; --bg:#090b10; --panel:#11151d; --panel-2:#171c26; --line:#293140; --text:#f5f7fb; --muted:#929cad; --accent:#6ee7b7; --accent-strong:#34d399; --danger:#fca5a5; --warning:#fbbf24; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:radial-gradient(circle at 80% 0%,#14241f 0,transparent 32rem),var(--bg); color:var(--text); }
button,input,select { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
html:not(.tauri) .tauri-only { display:none !important; }
.splash { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; }
.splash h1 { margin:4px 0 0; font-size:32px; }
.splash p { color:var(--muted); margin:0 0 8px; }
.splash #splash-message { max-width:min(760px,100%); max-height:50vh; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
.spinner { width:36px; height:36px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.app-shell { min-height:100vh; display:grid; grid-template-columns:220px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; padding:28px 18px 20px; border-right:1px solid var(--line); background:rgba(9,11,16,.86); backdrop-filter:blur(18px); display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:11px; padding:0 10px 28px; font-size:20px; font-weight:700; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:var(--accent); color:#06241a; }
nav { display:grid; gap:7px; }
.nav-item { border:0; border-radius:10px; padding:11px 13px; text-align:left; color:var(--muted); background:transparent; }
.nav-item:hover,.nav-item.active { background:var(--panel-2); color:var(--text); }
.account-navigation { display:grid; gap:5px; min-height:0; }
.account-subnav { display:grid; gap:3px; max-height:min(38vh,280px); overflow-y:auto; scrollbar-width:none; }
.account-subnav::-webkit-scrollbar { display:none; }
.account-nav-item { width:100%; border:0; border-radius:9px; padding:8px 13px 8px 27px; text-align:left; color:var(--muted); background:transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account-nav-item::before { content:""; display:inline-block; width:5px; height:5px; margin:0 9px 2px 0; border-radius:50%; background:#4b5563; }
.account-nav-item:hover,.account-nav-item.active { color:var(--text); background:rgba(23,28,38,.72); }
.account-nav-item.active::before { background:var(--accent-strong); }
.account-nav-empty { padding:5px 13px 7px 27px; color:#667085; font-size:12px; }
.sidebar-status { margin-top:auto; color:var(--muted); font-size:12px; display:flex; align-items:center; gap:8px; padding:10px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--accent-strong); box-shadow:0 0 14px var(--accent-strong); }
.content { width:100%; max-width:1120px; margin:0 auto; padding:56px 48px; }
.page-header { margin-bottom:30px; }
.page-header h1 { margin:5px 0 10px; font-size:34px; letter-spacing:-.03em; }
.page-header p:not(.eyebrow) { margin:0; color:var(--muted); }
.eyebrow { margin:0; color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.14em; }
.home-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:20px; }
.single-card-grid { grid-template-columns:minmax(0,720px); }
.card { background:linear-gradient(145deg,rgba(23,28,38,.96),rgba(15,19,27,.96)); border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:0 22px 55px rgba(0,0,0,.18); }
.card h2 { font-size:17px; margin:0 0 20px; }
.card-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.badge { display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; background:#252d3b; color:#cbd5e1; font-size:12px; }
.badge.success { color:#a7f3d0; background:#064e3b; }
.field { display:grid; gap:8px; margin-top:17px; }
.field>span,.field-heading>span { color:#cbd2dd; font-size:13px; font-weight:600; }
.field small { color:var(--muted); }
input,select,.value-box { width:100%; min-height:43px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:#0d1118; padding:10px 12px; outline:none; }
input:focus,select:focus { border-color:var(--accent-strong); box-shadow:0 0 0 3px rgba(52,211,153,.1); }
.mono { font-family:"SFMono-Regular",Consolas,monospace; }
.ellipsis { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.copy-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.icon-button,.text-button { border:1px solid var(--line); border-radius:9px; color:#dce3ec; background:var(--panel-2); padding:0 13px; }
.text-button { min-height:32px; }
.qr-card { text-align:center; }
.qr-frame { width:min(100%,270px); aspect-ratio:1; margin:12px auto 18px; padding:12px; display:grid; place-items:center; border-radius:16px; background:white; overflow:hidden; color:#475569; }
.qr-frame img { width:100%; height:100%; object-fit:contain; }
.qr-frame img:not([src]) { display:none; }
.qr-card p,.muted { color:var(--muted); font-size:13px; line-height:1.55; }
.notice { padding:11px 13px; border-radius:10px; font-size:13px; line-height:1.5; }
.notice.warning { color:#fde68a; background:#422006; }
.login-card { max-width:620px; }
.login-step h2 { margin-bottom:20px; }
.button-stack { display:grid; gap:10px; }
.button-row { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.button-row.wrap { flex-wrap:wrap; }
.button { min-height:42px; border-radius:10px; border:1px solid transparent; padding:10px 16px; font-weight:650; }
.button.primary { color:#06241a; background:var(--accent); }
.button.primary:hover { background:#a7f3d0; }
.button.secondary { color:var(--text); border-color:var(--line); background:var(--panel-2); }
.button:disabled { opacity:.5; cursor:not-allowed; }
.segment { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:5px; border-radius:12px; background:#0d1118; }
.segment button { border:0; border-radius:8px; padding:9px; color:var(--muted); background:transparent; }
.segment button.active { background:#f8fafc; color:#10131a; }
.segment.locked button:not(.active) { display:none; }
.login-qr { width:230px; position:relative; }
.message { min-height:20px; color:var(--muted); font-size:13px; text-align:center; }
.message.success { color:var(--accent); }
.message.error { color:var(--danger); }
.switch-row { margin-top:19px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.switch-row,.switch-row * { cursor:pointer; }
.switch-row span { display:grid; gap:4px; }
.switch-row small { color:var(--muted); }
input[type="checkbox"] { appearance:none; width:44px; min-height:25px; height:25px; padding:2px; border:0; border-radius:999px; background:#384152; transition:.2s; }
input[type="checkbox"]::after { content:""; display:block; width:21px; height:21px; border-radius:50%; background:white; transition:.2s; }
input[type="checkbox"]:checked { background:var(--accent-strong); }
input[type="checkbox"]:checked::after { transform:translateX(19px); }
.field-heading { display:flex; align-items:center; justify-content:space-between; }
.source-list { display:grid; gap:8px; }
.source-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.source-row button { min-width:52px; }
.account-identity { display:grid; grid-template-columns:minmax(0,1fr) 140px; align-items:start; gap:22px; }
.account-identity-fields { min-width:0; }
.account-qr-panel { text-align:center; color:var(--muted); font-size:12px; }
.account-qr { width:132px; margin:17px auto 8px; padding:8px; border-radius:13px; }
.account-qr span { font-size:12px; }
.tauri body { overflow:hidden; }
.tauri .app-shell { height:100vh; min-height:0; }
.tauri .content { height:100vh; min-height:0; padding-block:clamp(20px,6vh,56px); overflow:auto; }
.tauri body[data-page="login"] .content { overflow:hidden; }
.tauri #login-page:not(.hidden) { height:100%; min-height:0; display:flex; flex-direction:column; }
.tauri #login-page .page-header { flex:0 0 auto; margin-bottom:clamp(12px,3vh,30px); }
.tauri #login-page .login-card { flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:none; }
.tauri #login-page .login-card::-webkit-scrollbar { display:none; }
@media (max-height:680px) {
  .tauri #login-page .page-header .eyebrow,
  .tauri #login-page .page-header p:not(.eyebrow) { display:none; }
  .tauri #login-page .page-header h1 { margin:0; font-size:28px; }
  .tauri #login-page .login-card { padding:18px 20px; }
  .tauri #login-page .card h2 { margin-bottom:14px; }
  .tauri #login-page .field { margin-top:12px; }
  .tauri #login-page .switch-row { margin-top:12px; }
  .tauri #login-page .button-row { margin-top:14px; }
  .tauri #login-page .login-qr { width:clamp(160px,32vh,210px); margin-block:8px 12px; }
  .tauri #login-page .account-qr { width:clamp(112px,20vh,128px); }
}
@media (max-width:900px) { .account-identity { grid-template-columns:1fr; } .account-qr-panel { display:flex; align-items:center; gap:12px; text-align:left; } .account-qr { width:128px; margin:14px 0 0; flex:0 0 auto; } }
@media (max-width:760px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:static; width:100%; height:auto; padding:14px 18px; flex-direction:row; align-items:center; gap:16px; }
  .brand { padding:0; }
  nav { display:flex; }
  .sidebar-status { display:none; }
  .content { padding:32px 20px; }
  .home-grid { grid-template-columns:1fr; }
  .tauri .app-shell { grid-template-columns:220px minmax(0,1fr); }
  .tauri .sidebar { position:sticky; width:auto; height:100vh; padding:28px 18px 20px; flex-direction:column; align-items:stretch; gap:0; }
  .tauri .brand { padding:0 10px 28px; }
  .tauri nav { display:grid; }
  .tauri .sidebar-status { display:flex; }
}