/* ===== 学渣の逆袭 - Design System ===== */
/* Based on UI/UX Pro Max: Dark Mode OLED + Gold Accent */
:root{
  --bg:#06060c;
  --bg2:#0a0a14;
  --bg3:#0e0e1a;
  --bg4:#141424;
  --b1:#1a1a30;
  --b2:#2a2a48;
  --t1:#eae4d6;
  --t2:#9e978a;
  --t3:#5c5850;
  --gold:#e8a810;
  --gold-dim:rgba(232,168,16,.08);
  --gold-glow:rgba(232,168,16,.25);
  --green:#4ade80;
  --red:#f87171;
  --blue:#60a5fa;
  --purple:#a855f7;
  --radius:10px;
  --radius-sm:7px;
  --shadow:0 2px 16px rgba(0,0,0,.4);
  --shadow-lg:0 8px 32px rgba(0,0,0,.6);
}
[data-theme="light"]{
  --bg:#f4f4f6;
  --bg2:#fff;
  --bg3:#fff;
  --bg4:#f0f0f4;
  --b1:#e2e2e8;
  --b2:#ccc;
  --t1:#1a1a2e;
  --t2:#555;
  --t3:#888;
  --gold:#c8860b;
  --gold-dim:rgba(200,134,11,.06);
  --gold-glow:rgba(200,134,11,.2);
  --green:#16a34a;
  --red:#dc2626;
  --blue:#2563eb;
  --purple:#9333ea;
  --shadow:0 2px 12px rgba(0,0,0,.08);
  --shadow-lg:0 8px 24px rgba(0,0,0,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Noto Sans SC',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--t1);
  height:100vh;
  overflow:hidden;
  transition:background .3s,color .3s;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:3px;transition:background .2s}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* Layout */
.app{display:flex;height:100vh}

/* Sidebar */
.side{
  width:240px;flex-shrink:0;background:var(--bg2);
  border-right:1px solid var(--b1);
  display:flex;flex-direction:column;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.side.collapsed{width:56px}
.side.collapsed .side-label,.side.collapsed .side-user-info,.side.collapsed .side-title{display:none}
.side.collapsed .side-item{justify-content:center;padding:9px 0}
.side.collapsed .side-item span:first-child{margin:0}

.side-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:var(--radius-sm);
  cursor:pointer;color:var(--t2);font-size:13px;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.side-item:hover{background:var(--bg4);color:var(--t1);transform:translateX(2px)}
.side-item.on{background:var(--gold-dim);color:var(--gold)}
.side-item.on::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;
  background:linear-gradient(180deg,var(--gold),transparent);
  border-radius:0 3px 3px 0;
}

/* Main */
.main{
  flex:1;overflow-y:auto;padding:28px 48px;
  transition:padding .3s;text-align:justify;
  scroll-behavior:smooth;
}

/* Cards */
.card{
  background:var(--bg3);border:1px solid var(--b1);
  border-radius:var(--radius);padding:14px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-glow),transparent);
  opacity:0;transition:opacity .3s;
}
.card:hover{
  border-color:var(--b2);
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}
.card:hover::before{opacity:1}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--radius-sm);
  font-size:13px;cursor:pointer;border:none;
  font-family:inherit;
  transition:all .2s cubic-bezier(.4,0,.2,1);
}
.btn:active{transform:scale(.97)}
.btn-g{
  background:linear-gradient(135deg,#e8a810,#d4980e);
  color:#000;font-weight:500;
  box-shadow:0 2px 8px rgba(232,168,16,.2);
}
.btn-g:hover{
  box-shadow:0 4px 20px var(--gold-glow);
  transform:translateY(-1px);
}
.btn-o{
  background:transparent;color:var(--t2);
  border:1px solid var(--b1);
}
.btn-o:hover{color:var(--t1);border-color:var(--b2);background:var(--bg4)}

/* Tags */
.tag{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:500;transition:all .2s}
.tag-g{background:rgba(232,168,16,.1);color:var(--gold);border:1px solid rgba(232,168,16,.2)}
.tag-b{background:rgba(96,165,250,.1);color:var(--blue);border:1px solid rgba(96,165,250,.2)}
.tag-p{background:rgba(168,85,247,.1);color:var(--purple);border:1px solid rgba(168,85,247,.2)}
.tag-r{background:rgba(74,222,128,.1);color:var(--green);border:1px solid rgba(74,222,128,.2)}

/* Input */
.inp{
  background:var(--bg2);border:1px solid var(--b1);
  border-radius:var(--radius-sm);padding:9px 12px;
  color:var(--t1);font-size:13px;outline:none;
  width:100%;font-family:inherit;
  transition:all .2s;
}
.inp:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-dim);
}
textarea.inp{resize:vertical;min-height:90px;line-height:1.7}

/* Content / Markdown */
.np h3{font-size:1.1em;font-weight:600;margin:.6em 0 .3em;color:var(--t1)}
.np p{margin:.4em 0;line-height:1.8}
.np ul,.np ol{margin:.4em 0 .4em 1.4em}
.np li{margin:.2em 0;line-height:1.7}
.np code{
  background:var(--bg4);padding:1px 5px;border-radius:3px;
  font-size:.88em;color:var(--gold);
  border:1px solid var(--b1);
}
.np pre{
  background:var(--bg2);border:1px solid var(--b1);
  border-radius:var(--radius);padding:14px;
  overflow-x:auto;margin:.7em 0;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
}
.np pre code{background:0 0;padding:0;color:var(--t1);border:none}
.np strong{color:var(--t1);font-weight:600}
.np table{width:100%;border-collapse:collapse;margin:.7em 0;font-size:13px}
.np th{
  background:var(--bg4);padding:7px 10px;text-align:left;
  font-weight:600;border:1px solid var(--b2);color:var(--gold);
}
.np td{padding:7px 10px;border:1px solid var(--b1);transition:background .15s}
.np tr:hover td{background:var(--bg4)}

/* Quiz Options */
.q-opt{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--radius);
  border:1px solid var(--b1);cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);font-size:13px;
}
.q-opt:hover{border-color:var(--b2);background:var(--bg4);transform:translateX(4px)}
.q-opt.ok{
  border-color:var(--green);
  background:rgba(74,222,128,.06);
  box-shadow:0 0 12px rgba(74,222,128,.1);
}
.q-opt.no{
  border-color:var(--red);
  background:rgba(248,113,113,.06);
  box-shadow:0 0 12px rgba(248,113,113,.1);
}

/* Animations */
.fade{animation:fadeIn .3s cubic-bezier(.4,0,.2,1)}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Glow pulse for active stats */
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 8px var(--gold-dim)}
  50%{box-shadow:0 0 20px var(--gold-glow)}
}

/* ===== Responsive ===== */
@media(max-width:1023px){
  .side{
    position:fixed;left:0;top:0;height:100%;
    z-index:50;transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .side.open{transform:translateX(0)}
  .side.collapsed{width:240px}
}
@media(max-width:768px){
  .main{padding:68px 16px 16px;max-width:100%}
  .card{padding:12px}
  .btn{padding:10px 16px;font-size:14px}
  .inp{font-size:16px;padding:12px}
  textarea.inp{min-height:100px}
  .q-opt{padding:14px;font-size:14px}
  .np table{font-size:12px}
  .np td,.np th{padding:5px 6px}
  .mobile-header{display:flex !important}
  .side.collapsed{width:240px}
  .side{width:80%;max-width:280px}
  .dash-grid{grid-template-columns:repeat(2,1fr) !important}
  .dash-grid3{grid-template-columns:1fr !important}
  .tab-bar{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;gap:0}
  .tab-bar button{flex-shrink:0;padding:10px 14px !important;font-size:14px !important}
  .slide-page-btns{gap:2px !important}
  .slide-page-btns button{width:28px !important;height:28px !important;font-size:12px !important}
  .slide-nav{flex-wrap:wrap;gap:8px}
  .slide-nav .btn{flex:1;min-width:80px;justify-content:center}
  .search-input{font-size:16px !important;padding:14px !important}
}
.mobile-overlay{display:none !important}
@media(max-width:768px){
  .mobile-overlay{
    display:block !important;position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
    z-index:45;
  }
}