:root{
  --bg:#fff7ed;
  --card-bg:#ffffff;
  --accent:#111827;
  --radius:14px;
  --font: "Segoe UI", Tahoma, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font);background:linear-gradient(135deg,#fff7ed,#f0f9ff);color:#111827}
.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:rgba(255,255,255,0.6);backdrop-filter:blur(6px)}
.icon-btn{background:transparent;border:0;font-size:18px;padding:6px;cursor:pointer}
#subjectTitle{font-weight:700;font-size:18px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:16px}
.subject-card{height:110px;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;box-shadow:0 6px 18px rgba(0,0,0,0.08);cursor:pointer;position:relative}
.subject-card .edit-hint{position:absolute;top:6px;left:8px;font-size:12px;opacity:0.9}
.panel{position:fixed;inset:56px 0 0 0;background:#fff;border-top-left-radius:16px;border-top-right-radius:16px;box-shadow:0 -8px 30px rgba(0,0,0,0.12);display:flex;flex-direction:column;overflow:hidden}
.hidden{display:none}
.panel-header{padding:12px;border-bottom:1px solid #eee}
.panel-header .tabs{display:flex;gap:8px;margin-top:8px;justify-content:space-between}
.tab{flex:1;padding:8px;border-radius:10px;background:#f3f4f6;border:0;cursor:pointer}
.tab-active{box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.tab-content{padding:12px;overflow:auto;flex:1}
.tab-panel{display:flex;flex-wrap:wrap;gap:10px}
.fab{position:absolute;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;border:0;font-size:28px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 10px 30px rgba(5,150,105,0.25);cursor:pointer}

.note-card, .pdf-card, .img-thumb, .audio-card{
  background:var(--card-bg);padding:10px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.note-card{width:120px;height:90px;overflow:hidden;cursor:pointer}
.pdf-card{width:220px;height:70px;display:flex;align-items:center;gap:12px;padding:12px;cursor:pointer}
.img-thumb{width:100px;height:100px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.img-thumb img{max-width:100%;max-height:100%}
.audio-card{width:220px;height:70px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:8px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center}
.modal-inner{position:relative;background:#000;padding:10px;border-radius:8px}
.modal-inner img{max-width:80vw;max-height:80vh;display:block;transform-origin:center center;transition:transform .12s}
.img-controls{position:absolute;right:8px;top:8px;display:flex;gap:6px}
.img-controls button{background:#fff;border:0;padding:6px;border-radius:6px;cursor:pointer}

.subject-actions{position:absolute;bottom:8px;left:8px;font-size:12px;background:rgba(255,255,255,0.2);padding:4px 8px;border-radius:8px}

.header-small{display:flex;align-items:center;justify-content:space-between}