*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--sn-bg);color:var(--sn-text);font-family:var(--sn-font);font-size:var(--sn-fs-md);line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit}
.sn-app{min-height:100vh;display:flex;flex-direction:column}
.sn-header{position:sticky;top:0;z-index:100;height:var(--sn-header-h);display:flex;align-items:center;gap:var(--sn-s-3);padding:0 var(--sn-gutter);background:rgba(11,13,18,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--sn-line)}
.sn-header-brand{display:flex;align-items:center;gap:10px;font-weight:var(--sn-fw-bold);font-size:var(--sn-fs-lg);text-decoration:none;color:var(--sn-text);flex-shrink:0}
.sn-header-brand .mark{width:28px;height:28px;border-radius:8px;background:var(--sn-brand-soft);border:1px solid var(--sn-brand-border);display:grid;place-items:center;color:var(--sn-brand-text);font-size:14px}
.sn-header-search{flex:1 1 auto;max-width:480px;margin:0 auto;display:flex;gap:8px}
.sn-header-search input{flex:1;min-width:0}
.sn-header-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
.sn-main{flex:1 1 auto;width:100%;max-width:var(--sn-max);margin:0 auto;padding:var(--sn-s-6) var(--sn-gutter) var(--sn-s-10)}
.sn-footer{border-top:1px solid var(--sn-line);background:var(--sn-surface);padding:var(--sn-s-8) var(--sn-gutter) var(--sn-s-6);margin-top:auto}
.sn-footer-grid{max-width:var(--sn-max);margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sn-s-6)}
.sn-footer h4{margin:0 0 var(--sn-s-3);font-size:var(--sn-fs-sm);color:var(--sn-text)}
.sn-footer a{display:block;color:var(--sn-text-muted);text-decoration:none;font-size:var(--sn-fs-sm);margin-bottom:8px}
.sn-footer a:hover{color:var(--sn-text)}
.sn-footer-bottom{max-width:var(--sn-max);margin:var(--sn-s-6) auto 0;padding-top:var(--sn-s-4);border-top:1px solid var(--sn-line);color:var(--sn-text-dim);font-size:var(--sn-fs-xs);display:flex;justify-content:space-between;gap:var(--sn-s-4);flex-wrap:wrap}
.sn-account{position:relative}
.sn-account-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 10px 0 6px;border-radius:var(--sn-r-full);border:1px solid var(--sn-line);background:var(--sn-surface-2);color:var(--sn-text);cursor:pointer;font:var(--sn-fw-med) var(--sn-fs-sm)/1 var(--sn-font)}
.sn-account-avatar{width:28px;height:28px;border-radius:50%;background:var(--sn-brand-soft);border:1px solid var(--sn-brand-border);display:grid;place-items:center;color:var(--sn-brand-text);font-size:12px;font-weight:700}
.sn-account-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--sn-elevated);border:1px solid var(--sn-line);border-radius:var(--sn-r-lg);box-shadow:var(--sn-shadow-md);padding:6px;display:none;z-index:200}
.sn-account.open .sn-account-menu{display:block}
.sn-account-menu a{display:flex;width:100%;align-items:center;gap:10px;padding:10px 12px;color:var(--sn-text);text-decoration:none;font:var(--sn-fs-sm)/1.2 var(--sn-font);border-radius:var(--sn-r-md)}
.sn-account-menu a:hover{background:rgba(255,255,255,.06)}
.sn-account-menu .danger{color:#fecaca}
.sn-account-sep{height:1px;background:var(--sn-line);margin:6px 4px}
@media (max-width:800px){.sn-header-search{display:none}.sn-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sn-account-btn .sn-account-label{display:none}}
@media (max-width:480px){.sn-footer-grid{grid-template-columns:1fr}}


/* sn-header-sticky-rule */
.sn-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  box-sizing: border-box;
}
.sn-header .sn-search { flex: 1 1 200px; min-width: 140px; max-width: 420px; }
.sn-header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }