:root {
    --accent:#00ff41;--accent-dim:rgba(0,255,65,0.12);
    --accent2:#7c3aed;--accent3:#16a34a;--accent4:#ea580c;
    --bg:#0d1117;--bg2:#161b22;--bg3:#1f2937;--card:#1c2333;
    --text:#e2e8f0;--text-dim:#8b949e;--border:#30363d;
    --sidebar-w:220px;--topbar-h:56px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}

/* TOPBAR */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 1.5rem;gap:1.5rem;z-index:200}
.topbar-logo{display:flex;align-items:center;gap:.55rem;font-family:'Fira Code',monospace;font-size:1.05rem;font-weight:700;color:var(--accent);min-width:var(--sidebar-w)}
.topbar-center{flex:1;display:flex;align-items:center;gap:.8rem;justify-content:center}
.role-label{font-size:.78rem;color:var(--text-dim);font-family:'Fira Code',monospace}
.role-switcher{display:flex;gap:.3rem}
.role-btn{background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:.3rem .8rem;border-radius:8px;cursor:pointer;font-size:.78rem;transition:.2s;display:flex;align-items:center;gap:.35rem}
.role-btn:hover{border-color:var(--accent);color:var(--accent)}
.role-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.topbar-user{margin-left:auto;display:flex;align-items:center;gap:.7rem;font-size:.82rem;color:var(--text-dim)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-dim);border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:.8rem}

/* LAYOUT */
.layout{display:flex;padding-top:var(--topbar-h);min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);position:fixed;top:var(--topbar-h);left:0;bottom:0;z-index:100}
.sidenav{padding:.75rem .5rem}
.nav-item{width:100%;background:transparent;border:none;color:var(--text-dim);padding:.7rem .8rem;border-radius:10px;cursor:pointer;font-size:.88rem;display:flex;align-items:center;gap:.75rem;transition:.2s;text-align:left;font-family:'Inter',sans-serif}
.nav-item i{width:18px;text-align:center;font-size:.95rem;flex-shrink:0}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item.active{background:var(--accent-dim);color:var(--accent);border-left:2px solid var(--accent)}
.content{flex:1;margin-left:var(--sidebar-w);padding:2rem;min-height:calc(100vh - var(--topbar-h))}

/* VIEWS */
.view{display:none}.view.active{display:block}
.view-header{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;margin-bottom:2rem;border-bottom:1px solid var(--border);padding-bottom:1rem}
.breadcrumb{font-family:'Fira Code',monospace;font-size:.78rem;color:var(--accent);padding:.2rem .6rem;background:var(--accent-dim);border-radius:6px}
.view-header h1{font-size:1.5rem;font-weight:700;margin-right:auto}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:2rem}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.2rem;display:flex;align-items:center;gap:1rem;transition:.2s}
.stat-card:hover{border-color:var(--accent);box-shadow:0 0 20px var(--accent-dim)}
.stat-icon{width:44px;height:44px;border-radius:12px;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.stat-icon.accent2{background:rgba(124,58,237,.12);color:#a78bfa}
.stat-icon.accent3{background:rgba(22,163,74,.12);color:#4ade80}
.stat-icon.accent4{background:rgba(234,88,12,.12);color:#fb923c}
.stat-num{font-size:1.8rem;font-weight:700;line-height:1;color:var(--accent)}
.stat-label{font-size:.78rem;color:var(--text-dim);margin-top:.2rem}

/* DASH */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.dash-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.2rem}
.dash-card h3{font-size:.9rem;color:var(--text-dim);margin-bottom:.9rem;display:flex;align-items:center;gap:.5rem}
.mini-list{list-style:none}
.mini-list li{padding:.5rem 0;border-bottom:1px solid var(--border);font-size:.85rem;color:var(--text-dim);display:flex;align-items:center;gap:.5rem}
.mini-list li:last-child{border-bottom:none}
.mini-list li i{color:var(--accent);font-size:.7rem}
.mini-list .empty{font-style:italic;padding:.5rem 0}

/* MODAL */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:300;align-items:center;justify-content:center}
.modal.open{display:flex}
.modal-box{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:1.8rem;width:100%;max-width:420px;display:flex;flex-direction:column;gap:1rem}
.modal-box h3{font-size:1rem;color:var(--text)}
.field{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:.7rem .9rem;font-size:.88rem;font-family:'Inter',sans-serif;outline:none;transition:.2s}
.field:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}
textarea.field{resize:vertical}
.modal-actions{display:flex;gap:.7rem;justify-content:flex-end}

/* BUTTONS */
.btn-add{background:var(--accent);color:#000;border:none;padding:.5rem 1.1rem;border-radius:9px;cursor:pointer;font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:.4rem;transition:.2s}
.btn-add:hover{filter:brightness(1.1)}
.btn-save{background:var(--accent);color:#000;border:none;padding:.55rem 1.2rem;border-radius:8px;cursor:pointer;font-weight:600;font-size:.85rem}
.btn-cancel{background:transparent;color:var(--text-dim);border:1px solid var(--border);padding:.55rem 1.1rem;border-radius:8px;cursor:pointer;font-size:.85rem;transition:.2s}
.btn-cancel:hover{border-color:var(--text-dim);color:var(--text)}
.btn-icon-sm{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:.85rem;padding:.3rem;border-radius:6px;transition:.2s}
.btn-icon-sm:hover{color:#f43f5e}
.btn-icon-sm.edit:hover{color:var(--accent)}

/* SEARCH */
.search-bar{display:flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.6rem 1rem;margin-bottom:1.2rem}
.search-bar i{color:var(--text-dim)}
.search-bar input{background:transparent;border:none;color:var(--text);font-size:.88rem;font-family:'Inter',sans-serif;outline:none;width:100%}
.search-bar input::placeholder{color:var(--text-dim)}

/* TABLE */
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:.87rem}
.data-table th{text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--border);color:var(--text-dim);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.data-table td{padding:.75rem 1rem;border-bottom:1px solid var(--border);color:var(--text)}
.data-table tr:hover td{background:var(--bg3)}
.td-actions{display:flex;gap:.4rem}
.badge-class{background:var(--accent-dim);color:var(--accent);padding:.15rem .55rem;border-radius:99px;font-size:.72rem;font-family:'Fira Code',monospace}

/* TASKS */
.tasks-filters{display:flex;gap:.5rem;margin-bottom:1.2rem}
.filter-btn{background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:.35rem .85rem;border-radius:99px;cursor:pointer;font-size:.8rem;transition:.2s}
.filter-btn.active,.filter-btn:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.tasks-list{display:flex;flex-direction:column;gap:.75rem}
.task-item{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem 1.2rem;display:flex;align-items:flex-start;gap:1rem}
.task-item.done{opacity:.5}
.task-check{width:20px;height:20px;border-radius:6px;border:2px solid var(--border);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#000;transition:.2s;margin-top:2px}
.task-check.checked{background:var(--accent);border-color:var(--accent)}
.task-body{flex:1;min-width:0}
.task-title{font-weight:600;font-size:.92rem;margin-bottom:.25rem}
.task-item.done .task-title{text-decoration:line-through;color:var(--text-dim)}
.task-meta{font-size:.76rem;color:var(--text-dim);display:flex;gap:.8rem;flex-wrap:wrap}
.task-meta span{display:flex;align-items:center;gap:.3rem}
.task-desc{font-size:.82rem;color:var(--text-dim);margin-top:.35rem;line-height:1.5}
.task-del{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:.85rem;padding:.2rem;transition:.2s}
.task-del:hover{color:#f43f5e}

/* NOTICES */
.notices-list{display:flex;flex-direction:column;gap:.9rem}
.notice-item{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.2rem}
.notice-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}
.notice-title{font-weight:600;font-size:.95rem}
.notice-date{font-size:.75rem;color:var(--text-dim);font-family:'Fira Code',monospace}
.notice-content{font-size:.85rem;color:var(--text-dim);line-height:1.6}

/* SCHEDULE */
.schedule-grid{display:grid;grid-template-columns:auto repeat(5,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.sch-header{background:var(--bg3);padding:.6rem .8rem;font-size:.75rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;text-align:center}
.sch-time{background:var(--bg3);padding:.6rem .8rem;font-family:'Fira Code',monospace;font-size:.75rem;color:var(--text-dim);display:flex;align-items:center}
.sch-cell{background:var(--card);padding:.6rem .5rem;min-height:60px;display:flex;align-items:center;justify-content:center}
.sch-subject{background:var(--accent-dim);border:1px solid rgba(0,255,65,.15);border-radius:6px;padding:.3rem .5rem;color:var(--accent);font-size:.72rem;font-weight:500;line-height:1.3;text-align:center}

.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-dim)}
.empty-state i{font-size:2.5rem;margin-bottom:1rem;opacity:.3;display:block}

/* AUTH OVERLAY */
.auth-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:400;display:flex;align-items:center;justify-content:center}
.auth-card{background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:2.2rem;width:100%;max-width:380px;display:flex;flex-direction:column;gap:1rem}
.auth-logo{display:flex;align-items:center;gap:.6rem;font-family:'Fira Code',monospace;font-size:1.2rem;font-weight:700;color:var(--accent)}
.auth-subtitle{font-size:.82rem;color:var(--text-dim);margin-bottom:.2rem}
.auth-btn{width:100%;padding:.65rem;font-size:.9rem;margin-top:.2rem}
.auth-switch{font-size:.78rem;color:var(--text-dim);text-align:center}
.auth-error{font-size:.78rem;color:#f43f5e;min-height:1.1rem;text-align:center}
.btn-link{background:none;border:none;color:var(--accent);cursor:pointer;font-size:.78rem;padding:0;text-decoration:underline}

/* TOPBAR — user info */
.user-name{font-size:.82rem;color:var(--text)}
.role-badge{font-size:.68rem;background:var(--accent-dim);color:var(--accent);border:1px solid rgba(0,255,65,.2);padding:.1rem .45rem;border-radius:99px;font-family:'Fira Code',monospace}
.btn-logout{background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:.3rem .55rem;border-radius:7px;cursor:pointer;font-size:.8rem;transition:.2s}
.btn-logout:hover{border-color:#f43f5e;color:#f43f5e}

/* TOAST */
.ts-toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:.7rem 1.2rem;border-radius:10px;font-size:.85rem;box-shadow:0 4px 20px rgba(0,0,0,.4);transform:translateY(120%);opacity:0;transition:.25s cubic-bezier(.4,0,.2,1);z-index:500;pointer-events:none}
.ts-toast.show{transform:translateY(0);opacity:1}
.ts-toast-success{border-color:var(--accent);color:var(--accent)}
.ts-toast-error{border-color:#f43f5e;color:#f43f5e}
.ts-toast-warn{border-color:#fbbf24;color:#fbbf24}

/* EXPORT BUTTON */
.btn-export{background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:.3rem .8rem;border-radius:8px;cursor:pointer;font-size:.78rem;display:flex;align-items:center;gap:.35rem;transition:.2s;font-family:'Inter',sans-serif}
.btn-export:hover{border-color:var(--accent);color:var(--accent)}

@media(max-width:768px){
    :root{--sidebar-w:58px}
    .nav-item span{display:none}
    .role-label,.topbar-user span{display:none}
    .content{padding:1.2rem}
    .topbar-logo span{display:none}
}

@media print {
    .auth-overlay, .modal, header.topbar, aside.sidebar,
    .btn-add, .task-del, .btn-icon-sm, .btn-cancel,
    .btn-save, .btn-logout, .btn-export, .filter-btn,
    .search-bar { display: none !important; }

    body { background: #fff !important; color: #111 !important; font-family: Arial, sans-serif; }

    .layout { display: block !important; }

    .content { padding: 0 !important; margin: 0 !important; }

    .view { display: none !important; }
    .view.active { display: block !important; }

    .view-header h1 { font-size: 1.4rem; border-bottom: 2px solid #111; padding-bottom: .4rem; margin-bottom: 1rem; }
    .breadcrumb { display: none; }

    .stats-grid { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: 1rem; }
    .stat-card { border: 1px solid #ccc !important; background: #f9f9f9 !important; border-radius: 6px; padding: .6rem; }
    .stat-num { color: #111 !important; font-size: 1.4rem !important; }
    .stat-label { color: #555 !important; font-size: .75rem !important; }

    .task-item { border: 1px solid #ddd; border-radius: 6px; padding: .5rem .8rem; margin-bottom: .4rem; background: #fff !important; }
    .task-title { color: #111 !important; }
    .task-meta { color: #555 !important; font-size: .8rem; }

    .notice-item { border: 1px solid #ddd; border-radius: 6px; padding: .6rem .8rem; margin-bottom: .5rem; background: #fff !important; }
    .notice-title { color: #111 !important; }
    .notice-content { color: #333 !important; }

    .data-table { border-collapse: collapse; width: 100%; }
    .data-table th, .data-table td { border: 1px solid #ccc; padding: .4rem .6rem; color: #111 !important; }
    .data-table th { background: #eee !important; }

    .sch-header, .sch-time, .sch-cell { border: 1px solid #ccc; padding: .3rem .5rem; color: #111 !important; }
    .sch-subject { color: #111 !important; }

    a { color: #111 !important; text-decoration: none; }

    @page { margin: 1.5cm; }
}