:root{
  --bg0:#f7f7f7;
  --bg1:#ffffff;
  --card:#ffffff;
  --card2:#ffffff;
  --border:#e5e5e5;
  --border2:#d9d9d9;
  --text:#111111;
  --muted:#6b7280;
  --muted2:#374151;
  --brand:#0064d2;
  --brand2:#1e90ff;
  --danger:#e53238;
  --success:#86b817;
  --warning:#f5af02;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;margin:0;background:var(--bg0);color:var(--text)}
a{color:inherit;text-decoration:none}

.app-layout{display:flex;min-height:100vh}
.sidebar{width:220px;background:var(--bg1);border-right:1px solid var(--border);padding:16px 12px;position:sticky;top:0;height:100vh;overflow:auto}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);font-weight:900;letter-spacing:.14em;padding:8px 10px}
.sidebar-head-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-toggle{width:36px;height:36px;border-radius:12px;border:1px solid var(--border2);background:var(--bg1);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.sidebar-toggle:active{transform:translateY(1px)}
.burger{position:relative;display:block;width:18px;height:2px;background:var(--muted2);border-radius:999px}
.burger:before,.burger:after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--muted2);border-radius:999px}
.burger:before{top:-6px}
.burger:after{top:6px}
.sidebar-nav{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.sidebar-link{display:block;padding:10px 10px;border-radius:12px;border:1px solid transparent;font-weight:850;color:var(--muted2)}
.sidebar-link:hover{background:#f3f4f6}
.sidebar-link.active{background:rgba(0,100,210,.08);border-color:rgba(0,100,210,.22);color:var(--brand)}
.sidebar.collapsed{width:60px;padding:12px 8px}
.sidebar.collapsed .sidebar-head{padding:8px 6px}
.sidebar.collapsed .sidebar-head-text{display:none}
.sidebar.collapsed .sidebar-nav{display:none}
.app-main{flex:1;min-width:0}

@media (max-width: 960px){
  .app-layout{flex-direction:column}
  .sidebar{width:auto;height:auto;position:relative;border-right:0;border-bottom:1px solid var(--border)}
  .sidebar.collapsed{width:auto}
  .sidebar-nav{flex-direction:row;flex-wrap:wrap}
}

.container{max-width:1180px;margin:0 auto;padding:22px}
.topbar{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.topbar-inner{max-width:1180px;margin:0 auto;padding:18px 22px;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.top-actions{display:flex;gap:10px;align-items:center}

.brand{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 8px 24px rgba(0,100,210,.18)}
.title{font-size:18px;font-weight:800;margin:0;letter-spacing:.2px}
.subtitle{color:var(--muted);font-size:13px;margin-top:2px}

.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.field{display:flex;align-items:center;gap:8px;background:var(--bg1);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.field label{font-size:12px;color:var(--muted)}
.input{appearance:none;background:transparent;border:0;color:var(--text);outline:none;min-width:180px}
.input.small{min-width:88px;width:88px}
select.input{min-width:120px}

.btn{background:var(--brand);border:0;color:white;border-radius:12px;padding:11px 14px;font-weight:750;cursor:pointer;box-shadow:0 10px 22px rgba(0,100,210,.22)}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:var(--bg1);border:1px solid var(--border2);box-shadow:none;font-weight:800;color:var(--text)}
.btn.sm{padding:10px 12px;font-weight:850;box-shadow:none}
.btn.disabled{opacity:.5;pointer-events:none}

.stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.stats.flush{margin-top:0}
.stats-panel{padding:12px;border-radius:16px;border:2px solid var(--border);background:rgba(255,255,255,.55)}
.stats-panel.stats-success{border-color:rgba(134,184,23,.75);box-shadow:0 14px 38px rgba(134,184,23,.10)}
.stats-panel.stats-danger{border-color:rgba(229,50,56,.65);box-shadow:0 14px 38px rgba(229,50,56,.10)}
.stat{background:var(--bg1);border:1px solid var(--border);border-radius:14px;padding:12px 14px}
.stat.full{flex:1 1 100%}
.stat.gridfull{grid-column:1/-1}
.stat .k{color:var(--muted);font-size:12px}
.stat .v{font-weight:800;margin-top:6px}

.alert{border-radius:14px;padding:12px 14px;margin-top:16px}
.alert.error{background:rgba(229,50,56,.08);border:1px solid rgba(229,50,56,.55);color:#7a0a0f}
.alert.success{background:rgba(134,184,23,.10);border:1px solid rgba(134,184,23,.65);color:#1f3a06;margin-top:0}
.alert.mt0{margin-top:0}
.alert.mt12{margin-top:12px}
.muted{color:var(--muted);font-size:12px}

.grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:14px;margin-top:18px}
@media (min-width: 760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width: 1120px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));}}

.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.pagination-left{display:flex;gap:10px;align-items:center}
.pagination-right{color:var(--muted);font-size:13px;font-weight:700}
.pagination-pages{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.page-link{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border-radius:12px;background:var(--bg1);border:1px solid var(--border2);color:var(--text);font-weight:850}
.page-link:hover{border-color:rgba(0,100,210,.35);color:var(--brand)}
.page-link.active{background:rgba(0,100,210,.10);border-color:rgba(0,100,210,.35);color:var(--brand);pointer-events:none}
.page-ellipsis{color:var(--muted);font-weight:800;padding:0 4px}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,.08);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.card:hover{transform:translateY(-2px);border-color:rgba(0,100,210,.35);box-shadow:0 18px 46px rgba(0,0,0,.12)}
.media{position:relative;background:#f1f1f1}
.media .main{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.media .noimg{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
.badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);border:1px solid var(--border);color:var(--muted2);border-radius:999px;padding:7px 10px;font-size:12px;backdrop-filter:blur(8px)}
.badge strong{color:var(--text)}
.body{padding:14px}
.h{font-weight:850;margin:0;line-height:1.35;font-size:14.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.kv{background:#fafafa;border:1px solid var(--border);border-radius:14px;padding:10px}
.kv.full{grid-column:1/-1}
.kv .k{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.kv .v{margin-top:6px;font-weight:850;word-break:break-word}
.desc{margin:12px 0 0 0;color:var(--muted2);font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.thumbs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.thumbs button{padding:0;border:0;background:transparent;cursor:pointer}
.thumbs img{width:46px;height:46px;object-fit:cover;border-radius:12px;border:1px solid var(--border);opacity:.94}
.thumbs img:hover{opacity:1;border-color:rgba(0,100,210,.35)}

.codebox{margin:0;background:#0b1020;color:#e5e7eb;border-radius:14px;padding:12px;overflow:auto;min-height:100%;font-size:12px;line-height:1.45}
.actions{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:12px}
.link{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--bg1);border:1px solid var(--border);font-weight:800;font-size:13px;color:var(--brand)}
.copy{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--bg1);border:1px solid var(--border);font-weight:800;font-size:13px;cursor:pointer}
.copy:active{transform:translateY(1px)}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);z-index:100}
.modal.open{display:flex}
.dialog{width:min(980px,100%);max-height:calc(100vh - 36px);background:var(--bg1);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 30px 120px rgba(0,0,0,.35);display:flex;flex-direction:column}
.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border)}
.dialog-top .t{font-weight:850;font-size:13px;color:var(--muted2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dialog-top button{background:var(--bg1);border:1px solid var(--border2);color:var(--text);border-radius:12px;padding:10px 12px;font-weight:800;cursor:pointer}
.dialog-main{display:grid;grid-template-columns:1fr;gap:0;flex:1;min-height:0}
@media (min-width: 860px){.dialog-main{grid-template-columns:1fr minmax(200px,280px)}}
.dialog-media{background:#f7f7f7;display:flex;align-items:center;justify-content:center;padding:12px;min-height:240px;min-width:0}
.dialog-media img{width:100%;height:100%;max-height:100%;object-fit:contain;display:block}
.dialog-side{padding:12px;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto}
@media (max-width: 859px){.dialog-side{border-left:0;border-top:1px solid var(--border)}}
.nav{display:flex;gap:10px}
.nav button{flex:1}
.mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mini button{padding:0;border:0;background:transparent;cursor:pointer}
.mini img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:1px solid var(--border);opacity:.94}
.mini img:hover{opacity:1;border-color:rgba(0,100,210,.35)}
@media (max-width: 520px){
  .dialog{max-height:calc(100vh - 24px)}
  .modal{padding:12px}
  .dialog-media{padding:10px}
  .mini{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .mini button{flex:0 0 72px}
  .mini img{width:72px;height:72px}
}

.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:180px;background:var(--bg1);border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.12);display:none;overflow:hidden;z-index:30}
.menu.open{display:block}
.menu button,.menu a{display:flex;width:100%;padding:11px 12px;background:transparent;border:0;cursor:pointer;font-weight:800;color:var(--text);text-align:left}
.menu button:hover,.menu a:hover{background:#f3f4f6}
.menu-sep{height:1px;background:var(--border)}

.form-row{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.panel-body{padding:14px}

.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px}
.auth-card{width:min(460px,100%);background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.08);overflow:hidden}
.auth-top{padding:18px 18px 0 18px}
.auth-body{padding:18px}
.auth-title{margin:0;font-size:18px;font-weight:900;letter-spacing:.2px}
.auth-sub{margin:6px 0 0 0;color:var(--muted);font-size:13px;line-height:1.4}
.auth-field{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.auth-label{font-size:12px;color:var(--muted);font-weight:700}
.auth-input{border:1px solid var(--border2);border-radius:12px;padding:12px 12px;font-size:14px;outline:none}
.auth-input:focus{border-color:rgba(0,100,210,.45);box-shadow:0 0 0 4px rgba(0,100,210,.10)}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.auth-check{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.auth-hint{margin-top:12px;font-size:12px;color:var(--muted);line-height:1.4}
.auth-hint code{background:#f3f4f6;border:1px solid var(--border);padding:1px 6px;border-radius:8px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;font-size:12px}
.lang-actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}