/* ============================================================
   PERSONAL STUDY STUDIO
   A calm, warm interface: the AI cue is a quiet assistant, not a theme.
   ============================================================ */

:root {
  --sidebar-w: 272px;
  --studio-ink: var(--text-primary);
  --study-copy: var(--text-secondary);
  --studio-muted: var(--text-muted);
  --studio-line: var(--border);
  --studio-surface: var(--bg-card);
  --studio-wash: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
  --studio-wash-strong: color-mix(in srgb, var(--accent) 18%, var(--bg-card));
  --studio-shadow: 0 18px 46px color-mix(in srgb, var(--text-primary) 9%, transparent);
}

/* Sidebar: closer to a focused learning app than an administration dashboard. */
.sidebar {
  padding:18px 14px 14px;
  background:color-mix(in srgb, var(--bg-primary) 97%, transparent);
  border-right:1px solid var(--studio-line);
  box-shadow:8px 0 30px color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.sidebar-brand { margin:0 0 14px; padding:6px 8px 18px; border-bottom-color:var(--studio-line); }
.sidebar-logo { gap:11px; }
.sidebar-logo-icon {
  position:relative;
  width:42px;
  height:42px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius:15px;
  color:#fff;
  background:linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #8d342d));
  box-shadow:0 9px 18px color-mix(in srgb, var(--accent) 22%, transparent);
}
.sidebar-logo-icon::after {
  position:absolute;
  top:5px;
  right:6px;
  width:7px;
  height:7px;
  border:2px solid rgba(255,255,255,.72);
  border-radius:99px;
  content:'';
}
.sidebar-logo-name { font-size:1rem; letter-spacing:-.035em; }
.sidebar-logo-sub { margin-top:2px; font-size:.56rem; font-weight:750; letter-spacing:.105em; }
.theme-toggle { margin:0 4px 16px; width:calc(100% - 8px); border-radius:13px; }
.sidebar-section-label { margin:8px 0 7px; padding:0 10px; color:var(--studio-muted); font-size:.58rem; font-weight:800; letter-spacing:.13em; }
.sidebar-nav { gap:4px; margin-bottom:8px; }
.sidebar-link { min-height:46px; gap:11px; padding:7px 10px; border-radius:13px; font-size:.79rem; font-weight:650; }
.sidebar-link:hover { background:var(--studio-wash); border-color:transparent; }
.sidebar-link.active { border-color:transparent; background:var(--studio-wash-strong); color:var(--accent); font-weight:800; }
.sidebar-link.active::before { left:5px; top:30%; bottom:30%; width:4px; border-radius:99px; background:var(--accent); }
.sidebar-link-icon { width:31px; height:31px; border:1px solid color-mix(in srgb, var(--studio-line) 78%, transparent); border-radius:10px; background:color-mix(in srgb, var(--bg-card) 82%, var(--accent)); }
.sidebar-link-icon .material-icons { font-size:17px; }
.sidebar-link.active .sidebar-link-icon { background:color-mix(in srgb, var(--accent) 16%, var(--bg-card)); box-shadow:none; }
.sidebar-footer { gap:8px; padding:14px 4px 2px; border-top-color:var(--studio-line); }
.sidebar-stat { padding:8px 10px; border-color:transparent; background:color-mix(in srgb, var(--bg-card) 89%, var(--accent)); }
.sidebar-stat-value { font-size:.94rem; }
.account-badge { border-color:color-mix(in srgb, var(--accent) 24%, var(--studio-line)); background:var(--studio-wash); }

/* Main study studio */
.study-studio-page { padding:30px 36px 64px; background:var(--bg-primary); }
.study-studio-shell { width:min(1200px, 100%); margin:0 auto; }
.study-studio-hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(270px, .7fr);
  gap:22px;
  overflow:hidden;
  min-height:235px;
  padding:31px 34px;
  border:1px solid color-mix(in srgb, var(--accent) 28%, var(--studio-line));
  border-radius:24px;
  background:linear-gradient(125deg, color-mix(in srgb, var(--accent) 14%, var(--studio-surface)), var(--studio-surface) 57%, color-mix(in srgb, var(--accent) 8%, var(--studio-surface)));
  box-shadow:var(--studio-shadow);
  isolation:isolate;
}
.study-studio-hero::before {
  position:absolute;
  z-index:-1;
  top:-168px;
  right:-113px;
  width:420px;
  height:420px;
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius:50%;
  box-shadow:0 0 0 36px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 0 72px color-mix(in srgb, var(--accent) 3%, transparent);
  content:'';
}
.study-studio-hero::after {
  position:absolute;
  z-index:-1;
  right:25px;
  bottom:22px;
  width:95px;
  height:65px;
  opacity:.45;
  background-image:radial-gradient(circle, var(--accent) 1.5px, transparent 1.8px);
  background-size:14px 14px;
  content:'';
}
.study-studio-title { max-width:670px; }
.study-studio-kicker { display:inline-flex; align-items:center; gap:7px; color:var(--accent); font-size:.61rem; font-weight:850; letter-spacing:.13em; }
.study-studio-kicker .material-icons { font-size:16px; }
.study-studio-title h1 { margin-top:12px; color:var(--studio-ink); font-size:clamp(2rem, 4vw, 3.1rem); line-height:1.03; letter-spacing:-.06em; }
.study-studio-title p { max-width:590px; margin-top:12px; color:var(--study-copy); font-size:.88rem; line-height:1.65; }
.study-studio-next { align-self:end; display:flex; gap:11px; min-width:0; padding:15px; border:1px solid color-mix(in srgb, var(--accent) 19%, var(--studio-line)); border-radius:16px; background:color-mix(in srgb, var(--studio-surface) 82%, transparent); backdrop-filter:blur(12px); }
.study-studio-next>.material-icons { display:grid; width:37px; height:37px; place-items:center; flex:none; border-radius:11px; color:var(--accent); background:var(--studio-wash-strong); font-size:20px; }
.study-studio-next small,.study-studio-next strong,.study-studio-next p { display:block; }
.study-studio-next small { color:var(--studio-muted); font-size:.56rem; font-weight:800; letter-spacing:.08em; }
.study-studio-next strong { overflow:hidden; margin-top:4px; color:var(--studio-ink); font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
.study-studio-next p { margin-top:3px; color:var(--study-copy); font-size:.64rem; }

.study-studio-suggestion { display:grid; grid-template-columns:43px minmax(0, 1fr) auto; align-items:center; gap:14px; margin:15px 0 22px; padding:14px 16px; border:1px solid color-mix(in srgb, var(--accent) 20%, var(--studio-line)); border-radius:17px; background:var(--studio-wash); }
.study-studio-suggestion-icon { display:grid; width:43px; height:43px; place-items:center; border-radius:13px; color:var(--accent); background:var(--studio-surface); }
.study-studio-suggestion-icon .material-icons { font-size:22px; }
.study-studio-suggestion>div:nth-child(2)>span { color:var(--accent); font-size:.56rem; font-weight:850; letter-spacing:.1em; }
.study-studio-suggestion h2 { margin-top:3px; color:var(--studio-ink); font-size:.92rem; letter-spacing:-.025em; }
.study-studio-suggestion p { margin-top:3px; color:var(--study-copy); font-size:.67rem; line-height:1.45; }
.study-studio-suggestion button,.study-studio-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid var(--studio-line);
  border-radius:10px;
  color:var(--studio-ink);
  background:var(--studio-surface);
  font:750 .69rem inherit;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.study-studio-suggestion button:hover,.study-studio-button:hover { border-color:color-mix(in srgb, var(--accent) 65%, var(--studio-line)); transform:translateY(-1px); }
.study-studio-suggestion button .material-icons,.study-studio-button .material-icons { font-size:17px; }
.study-studio-button.primary { border-color:var(--accent); color:#fff; background:var(--accent); box-shadow:0 6px 14px color-mix(in srgb, var(--accent) 22%, transparent); }
.study-studio-button:disabled,.study-studio-suggestion button:disabled { cursor:not-allowed; opacity:.56; transform:none; }

.study-studio-tabs { display:flex; gap:5px; width:max-content; max-width:100%; margin-bottom:14px; padding:4px; overflow:auto; border:1px solid var(--studio-line); border-radius:14px; background:color-mix(in srgb, var(--studio-surface) 93%, var(--bg-primary)); }
.study-studio-tabs button { display:inline-flex; align-items:center; gap:6px; min-height:37px; padding:7px 12px; border:0; border-radius:10px; color:var(--studio-muted); background:transparent; font:750 .69rem inherit; white-space:nowrap; cursor:pointer; }
.study-studio-tabs button .material-icons { font-size:17px; }
.study-studio-tabs button[aria-selected="true"] { color:var(--accent); background:var(--studio-wash-strong); box-shadow:0 2px 8px color-mix(in srgb, var(--text-primary) 5%, transparent); }
.study-studio-tabs button:focus-visible,.study-studio-button:focus-visible,.study-plan-open:focus-visible,.study-plan-remove:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset:2px; }

.study-studio-panel { overflow:hidden; padding:25px; border:1px solid var(--studio-line); border-radius:20px; background:var(--studio-surface); box-shadow:0 8px 28px color-mix(in srgb, var(--text-primary) 4%, transparent); }
.study-studio-panel[hidden] { display:none; }
.study-studio-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:20px; }
.study-studio-panel-head>div>span { color:var(--accent); font-size:.57rem; font-weight:850; letter-spacing:.12em; }
.study-studio-panel-head h2 { margin-top:5px; color:var(--studio-ink); font-size:1.35rem; line-height:1.2; letter-spacing:-.04em; }
.study-studio-panel-head p { max-width:680px; margin-top:7px; color:var(--study-copy); font-size:.72rem; line-height:1.6; }
.study-studio-local-note { display:inline-flex; align-items:center; gap:5px; flex:none; padding:6px 9px; border:1px solid color-mix(in srgb, var(--accent) 22%, var(--studio-line)); border-radius:99px; color:var(--study-copy); background:var(--studio-wash); font-size:.58rem; font-weight:700; white-space:nowrap; }
.study-studio-local-note .material-icons { color:var(--accent); font-size:14px; }

.study-voice-workspace { display:grid; grid-template-columns:minmax(270px, .78fr) minmax(0, 1.22fr); gap:15px; }
.study-voice-card,.study-voice-result { min-width:0; padding:14px; border:1px solid var(--studio-line); border-radius:15px; background:color-mix(in srgb, var(--studio-surface) 86%, var(--bg-primary)); }
.study-studio-status { min-height:18px; margin-top:9px; color:var(--studio-muted); font-size:.62rem; line-height:1.45; }
.study-studio-status[data-tone="success"] { color:var(--success); }.study-studio-status[data-tone="error"] { color:var(--danger); }.study-studio-status[data-tone="busy"] { color:var(--accent); }
.study-voice-result-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
.study-voice-result-head>div { display:flex; align-items:center; gap:7px; min-width:0; }
.study-voice-result-head .material-icons { display:grid; width:30px; height:30px; place-items:center; flex:none; border-radius:9px; color:var(--accent); background:var(--studio-wash); font-size:17px; }
.study-voice-result-head h3 { color:var(--studio-ink); font-size:.81rem; letter-spacing:-.015em; }
.study-voice-card textarea,.study-voice-result textarea {
  width:100%;
  resize:vertical;
  padding:11px;
  border:1px solid var(--studio-line);
  border-radius:10px;
  outline:0;
  color:var(--studio-ink);
  background:var(--bg-card);
  font:500 .73rem/1.6 'Be Vietnam Pro', sans-serif;
}
.study-voice-card textarea:focus,.study-voice-result textarea:focus,.study-plan-form input:focus,.study-plan-form select:focus,.study-voice-language select:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.study-voice-controls { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.study-plan-form label,.study-voice-card>label,.study-voice-language { display:grid; gap:5px; color:var(--studio-muted); font-size:.6rem; font-weight:700; }
.study-plan-form input,.study-plan-form select,.study-voice-language select { width:100%; min-height:37px; padding:7px 9px; border:1px solid var(--studio-line); border-radius:9px; outline:0; color:var(--studio-ink); background:var(--bg-card); font:600 .7rem inherit; }

.study-voice-workspace { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.study-voice-card>label { margin-bottom:8px; }.study-voice-language { min-width:142px; }.study-voice-language select { min-height:38px; }
.study-text-button { border:0; color:var(--accent); background:transparent; font:750 .62rem inherit; cursor:pointer; }
.study-text-button:hover { text-decoration:underline; }
.study-voice-feedback { min-height:54px; margin-top:10px; padding:11px; border:1px solid var(--studio-line); border-radius:10px; color:var(--study-copy); background:var(--studio-wash); font-size:.66rem; line-height:1.55; }
.study-voice-feedback[data-tone="success"] { border-color:color-mix(in srgb, var(--success) 37%, var(--studio-line)); color:var(--success); background:color-mix(in srgb, var(--success) 8%, transparent); }
.study-voice-privacy { margin-top:10px; color:var(--studio-muted); font-size:.58rem; line-height:1.5; }

.study-plan-summary { display:grid; grid-template-columns:repeat(2, minmax(150px, .35fr)) minmax(0, 1.3fr); gap:9px; margin-bottom:14px; }
.study-plan-summary>div { display:flex; align-items:center; gap:8px; padding:11px; border:1px solid var(--studio-line); border-radius:12px; background:color-mix(in srgb, var(--studio-surface) 83%, var(--bg-primary)); }
.study-plan-summary>div>.material-icons { display:grid; width:31px; height:31px; place-items:center; flex:none; border-radius:9px; color:var(--accent); background:var(--studio-wash); font-size:17px; }.study-plan-summary small,.study-plan-summary strong { display:block; }.study-plan-summary small { color:var(--studio-muted); font-size:.52rem; font-weight:800; letter-spacing:.06em; }.study-plan-summary strong { margin-top:2px; color:var(--studio-ink); font-size:.75rem; }.study-plan-summary>.study-studio-status { align-self:center; margin:0; }
.study-plan-form { display:grid; grid-template-columns:repeat(4, minmax(105px, 1fr)) minmax(150px, 1.3fr) auto; gap:9px; align-items:end; padding:14px; border:1px solid var(--studio-line); border-radius:15px; background:color-mix(in srgb, var(--studio-surface) 88%, var(--bg-primary)); }
.study-plan-note-field { grid-column:auto; }.study-plan-form>.study-studio-button { min-height:37px; white-space:nowrap; }
.study-plan-list { display:grid; gap:8px; margin-top:15px; }
.study-plan-item { display:grid; grid-template-columns:36px minmax(0, 1fr) auto auto; gap:10px; align-items:center; padding:10px; border:1px solid var(--studio-line); border-radius:13px; background:color-mix(in srgb, var(--studio-surface) 88%, var(--bg-primary)); }
.study-plan-item-icon { display:grid; width:36px; height:36px; place-items:center; border-radius:11px; color:var(--accent); background:var(--studio-wash); }.study-plan-item-icon .material-icons { font-size:18px; }.study-plan-item-copy { min-width:0; }.study-plan-item-copy span,.study-plan-item-copy b,.study-plan-item-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.study-plan-item-copy span { color:var(--accent); font-size:.53rem; font-weight:800; letter-spacing:.05em; }.study-plan-item-copy b { margin-top:2px; color:var(--studio-ink); font-size:.73rem; }.study-plan-item-copy small { margin-top:3px; color:var(--studio-muted); font-size:.58rem; }
.study-plan-open,.study-plan-remove { display:grid; width:31px; height:31px; place-items:center; border:1px solid var(--studio-line); border-radius:9px; color:var(--study-copy); background:var(--studio-surface); cursor:pointer; }.study-plan-open:hover { border-color:var(--accent); color:var(--accent); }.study-plan-remove:hover { border-color:color-mix(in srgb, var(--danger) 55%, var(--studio-line)); color:var(--danger); }.study-plan-open .material-icons,.study-plan-remove .material-icons { font-size:17px; }
.study-plan-empty { display:flex; align-items:center; gap:11px; padding:22px 14px; border:1px dashed color-mix(in srgb, var(--accent) 32%, var(--studio-line)); border-radius:13px; color:var(--study-copy); background:var(--studio-wash); }.study-plan-empty>.material-icons { color:var(--accent); font-size:27px; }.study-plan-empty b { display:block; color:var(--studio-ink); font-size:.74rem; }.study-plan-empty p { margin-top:3px; font-size:.62rem; line-height:1.45; }

html[data-theme="light"] .study-studio-page { background:var(--bg-primary); }
html[data-theme="light"] .sidebar { background:color-mix(in srgb, var(--bg-card) 98%, transparent) !important; }
html[data-theme="light"] .sidebar-link.active { background:var(--studio-wash-strong) !important; }
html:not([data-theme="light"]) .study-studio-hero { background:linear-gradient(125deg, color-mix(in srgb, var(--accent) 14%, var(--studio-surface)), var(--studio-surface) 62%, color-mix(in srgb, var(--accent) 6%, var(--studio-surface))); }
html:not([data-theme="light"]) .study-voice-card textarea,html:not([data-theme="light"]) .study-voice-result textarea,html:not([data-theme="light"]) .study-plan-form input,html:not([data-theme="light"]) .study-plan-form select,html:not([data-theme="light"]) .study-voice-language select { background:color-mix(in srgb, var(--bg-primary) 58%, var(--bg-card)); }

@media (max-width:1180px) {
  .study-plan-form { grid-template-columns:repeat(3, minmax(120px, 1fr)); }
  .study-plan-note-field { grid-column:span 2; }
}
@media (max-width:930px) {
  .study-studio-hero,.study-voice-workspace { grid-template-columns:1fr; }
  .study-studio-next { max-width:420px; }
}
@media (max-width:900px) {
  :root { --sidebar-w:0px; }
  .sidebar { width:272px; }
  .study-studio-page { padding:72px 20px 46px; }
}
@media (max-width:640px) {
  .study-studio-page { padding:70px 13px 38px; }.study-studio-hero { min-height:0; padding:24px 19px; border-radius:19px; }.study-studio-title h1 { font-size:2.05rem; }.study-studio-title p { font-size:.76rem; }.study-studio-suggestion { grid-template-columns:39px minmax(0, 1fr); padding:12px; }.study-studio-suggestion-icon { width:39px; height:39px; }.study-studio-suggestion button { grid-column:1 / -1; width:100%; }.study-studio-tabs { width:100%; }.study-studio-tabs button { flex:1; justify-content:center; padding-inline:8px; }.study-studio-tabs button .material-icons { display:none; }.study-studio-panel { padding:17px 13px; border-radius:16px; }.study-studio-panel-head { align-items:flex-start; flex-direction:column; }.study-studio-panel-head h2 { font-size:1.14rem; }.study-studio-local-note { white-space:normal; }.study-plan-summary { grid-template-columns:1fr 1fr; }.study-plan-summary>.study-studio-status { grid-column:1 / -1; }.study-plan-form { grid-template-columns:1fr 1fr; }.study-plan-note-field { grid-column:1 / -1; }.study-plan-form>.study-studio-button { grid-column:1 / -1; width:100%; }.study-plan-item { grid-template-columns:34px minmax(0, 1fr) auto; }.study-plan-remove { grid-column:3; grid-row:1; }.study-plan-open { display:none; }
}