:root {
  --bg: #f4f0e8;
  --surface: #fffdf8;
  --surface-2: #ece6da;
  --ink: #18251f;
  --muted: #718078;
  --line: rgba(24, 37, 31, 0.12);
  --accent: #0e6b50;
  --accent-soft: #d8ece4;
  --accent-2: #e7a33e;
  --danger: #b84b4b;
  --shadow: 0 18px 50px rgba(36, 52, 44, 0.08);
  --radius: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.app-shell { display: grid; grid-template-columns: 268px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 30px 20px 22px;
  border-right: 1px solid var(--line); background: rgba(255,253,248,.78);
  backdrop-filter: blur(18px); display: flex; flex-direction: column; z-index: 20;
}
.brand-row { display:flex; align-items:center; gap:12px; padding: 0 8px 30px; }
.brand-mark { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:var(--ink); color:white; font-family:"Playfair Display"; font-size:24px; }
.brand { font-weight:800; font-size:18px; letter-spacing:-.02em; }
.brand-sub { font-size:11px; color:var(--muted); margin-top:2px; }
.nav-caption { padding:0 12px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:800; }
.side-nav { display:grid; gap:6px; }
.side-link, .nav-link, .icon-button, .mobile-menu { border:0; background:transparent; cursor:pointer; }
.side-link { width:100%; display:flex; gap:11px; align-items:center; padding:12px 13px; border-radius:14px; text-align:left; font-weight:600; color:#4a5b52; }
.side-link:hover { background:var(--surface-2); color:var(--ink); }
.side-link span { width:18px; text-align:center; }
.sidebar-spacer { flex:1; }
.profile-card { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:18px; padding:12px; background:var(--surface); margin-bottom:8px; }
.avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--accent-soft); color:var(--accent); font-weight:800; }
.profile-copy { flex:1; min-width:0; }
.profile-copy strong, .profile-copy span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-copy strong { font-size:12px; }
.profile-copy span { font-size:10px; color:var(--muted); margin-top:3px; }
.main-panel { min-width:0; }
.topbar { height:78px; padding:0 34px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:rgba(244,240,232,.9); backdrop-filter:blur(18px); z-index:10; }
.main-nav { display:flex; gap:8px; }
.nav-link { padding:10px 14px; border-radius:999px; color:var(--muted); font-weight:700; font-size:13px; }
.nav-link:hover, .nav-link.active { color:var(--ink); background:var(--surface); box-shadow:0 4px 16px rgba(0,0,0,.04); }
.topbar-actions { display:flex; gap:8px; }
.icon-button, .mobile-menu { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); }
.notification { position:relative; }
.notification span { width:7px; height:7px; border-radius:50%; background:var(--accent-2); position:absolute; top:7px; right:7px; }
.mobile-menu { display:none; }
.content { padding:34px; max-width:1480px; margin:0 auto; }
.eyebrow { color:var(--accent); font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:800; }
.hero { display:grid; grid-template-columns:1.45fr .8fr; gap:20px; margin-bottom:22px; }
.hero-card { background:var(--ink); color:white; border-radius:32px; padding:38px; min-height:300px; position:relative; overflow:hidden; box-shadow:var(--shadow); }
.hero-card:after { content:""; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.06); right:-90px; bottom:-150px; }
.hero h1 { font-family:"Playfair Display", serif; font-size:clamp(34px,4vw,58px); line-height:.98; margin:12px 0 18px; max-width:700px; letter-spacing:-.03em; }
.hero p { color:rgba(255,255,255,.68); max-width:620px; line-height:1.7; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.btn { border:0; border-radius:14px; padding:12px 17px; cursor:pointer; font-weight:800; }
.btn-primary { background:var(--accent); color:white; }
.btn-light { background:white; color:var(--ink); }
.btn-ghost { background:transparent; border:1px solid var(--line); }
.focus-card { border-radius:32px; padding:26px; background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; box-shadow:var(--shadow); }
.focus-time { font-size:48px; font-weight:800; letter-spacing:-.06em; margin:22px 0 8px; }
.progress-ring { width:100%; height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin-top:auto; }
.progress-ring span { display:block; height:100%; width:68%; background:var(--accent); border-radius:999px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:26px 0 14px; }
.section-head h2 { margin:3px 0 0; font-family:"Playfair Display"; font-size:30px; letter-spacing:-.02em; }
.muted { color:var(--muted); }
.grid { display:grid; gap:16px; }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:0 10px 30px rgba(22,40,31,.04); }
.card h3 { margin:0 0 7px; font-size:16px; }
.subject-card { min-height:185px; display:flex; flex-direction:column; cursor:pointer; transition:.2s ease; }
.subject-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.subject-icon { width:46px; height:46px; border-radius:15px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-weight:900; margin-bottom:24px; }
.subject-meta { display:flex; justify-content:space-between; align-items:center; margin-top:auto; font-size:11px; color:var(--muted); }
.meter { width:100%; height:7px; background:var(--surface-2); border-radius:999px; margin:12px 0 0; overflow:hidden; }
.meter span { display:block; height:100%; background:var(--accent); border-radius:999px; }
.stat { padding:22px; }
.stat b { display:block; font-size:28px; margin-top:12px; letter-spacing:-.04em; }
.schedule-list, .feed { display:grid; gap:10px; }
.schedule-item { display:grid; grid-template-columns:76px 1fr auto; gap:14px; align-items:center; padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.time-badge { font-weight:800; font-size:13px; }
.tag { display:inline-flex; padding:6px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:10px; font-weight:800; }
.room-card { display:flex; flex-direction:column; min-height:230px; }
.room-top { display:flex; justify-content:space-between; gap:10px; }
.room-members { display:flex; margin-top:auto; padding-top:20px; }
.mini-avatar { width:31px; height:31px; border-radius:10px; background:var(--surface-2); border:2px solid var(--surface); display:grid; place-items:center; font-size:10px; font-weight:800; margin-right:-7px; }
.post { display:grid; grid-template-columns:auto 1fr; gap:12px; }
.post p { margin:8px 0 0; line-height:1.6; color:#42534a; }
.post-actions { display:flex; gap:14px; margin-top:12px; color:var(--muted); font-size:11px; font-weight:700; }
.subnav { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.subnav button { border:1px solid var(--line); background:var(--surface); padding:10px 13px; border-radius:12px; cursor:pointer; font-weight:700; color:var(--muted); }
.subnav button.active { background:var(--ink); color:white; }
.page-title { font-family:"Playfair Display"; font-size:42px; margin:0 0 8px; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 24px; }
.search { flex:1; min-width:220px; border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:12px 14px; outline:none; }
.manager-banner { display:none; border:1px dashed rgba(14,107,80,.4); background:var(--accent-soft); color:var(--accent); padding:12px 14px; border-radius:14px; margin-bottom:16px; font-size:12px; font-weight:700; }
body.manager .manager-banner { display:block; }
body.manager .manager-only { display:inline-flex; }
.manager-only { display:none; }
.empty { padding:50px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:22px; }
dialog { border:0; padding:0; background:transparent; }
dialog::backdrop { background:rgba(14,24,20,.48); backdrop-filter:blur(5px); }
.modal-card { width:min(560px,calc(100vw - 28px)); border:1px solid var(--line); border-radius:28px; background:var(--surface); padding:28px; position:relative; box-shadow:0 30px 80px rgba(0,0,0,.2); }
.modal-close { position:absolute; right:18px; top:18px; border:0; background:var(--surface-2); width:34px; height:34px; border-radius:10px; cursor:pointer; }
.form-grid { display:grid; gap:12px; margin-top:18px; }
.form-grid input, .form-grid textarea, .form-grid select { width:100%; border:1px solid var(--line); background:white; border-radius:12px; padding:12px 13px; outline:none; }
.form-grid textarea { min-height:110px; resize:vertical; }
.toast { position:fixed; right:22px; bottom:22px; background:var(--ink); color:white; padding:12px 16px; border-radius:13px; font-size:12px; box-shadow:var(--shadow); z-index:100; animation:slideUp .2s ease; }
@keyframes slideUp { from { transform:translateY(8px); opacity:0; } }
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .hero { grid-template-columns:1fr; }
}
@media (max-width: 820px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:0; transform:translateX(-105%); transition:.25s ease; width:min(310px,88vw); box-shadow:var(--shadow); }
  .sidebar.open { transform:translateX(0); }
  .mobile-menu { display:grid; }
  .topbar { padding:0 18px; }
  .main-nav { overflow:auto; max-width:calc(100vw - 150px); scrollbar-width:none; }
  .main-nav::-webkit-scrollbar { display:none; }
  .content { padding:22px 18px 90px; }
  .topbar-actions .notification { display:none; }
}
@media (max-width: 560px) {
  .grid-4,.grid-3,.grid-2 { grid-template-columns:1fr; }
  .hero-card { padding:28px 22px; min-height:auto; }
  .hero h1 { font-size:39px; }
  .focus-time { font-size:40px; }
  .section-head { align-items:flex-start; flex-direction:column; }
  .schedule-item { grid-template-columns:58px 1fr; }
  .schedule-item .btn { grid-column:1/-1; }
  .page-title { font-size:36px; }
}