:root { --ink:#17231f; --cream:#f3efe5; --paper:#fbf9f2; --sage:#789084; --jade:#275c4b; --red:#c7543d; --line:rgba(23,35,31,.14); --shadow:0 18px 55px rgba(28,42,35,.11); }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; min-height:100vh; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.16; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
button,input { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; }
.topbar { height:88px; display:flex; align-items:center; justify-content:space-between; padding:0 3.5vw; border-bottom:1px solid var(--line); }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:13px; font-size:20px; font-weight:700; letter-spacing:-.03em; }
.brand small { display:block; font-size:10px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:#68756f; margin-top:2px; }
.seal { width:46px; height:46px; display:grid; place-items:center; background:var(--red); color:#fff; font-family:"Noto Serif JP",serif; font-size:16px; box-shadow:inset 0 0 0 3px rgba(255,255,255,.16); }
.top-actions { display:flex; align-items:center; gap:20px; }.system-status { font-size:12px; color:#68756f; text-decoration:none; white-space:nowrap; }.system-status i,.live i { display:inline-block; width:7px; height:7px; background:#d39834; border-radius:50%; margin-right:7px; }.system-status.ready i,.live i { background:#59a67f; box-shadow:0 0 0 4px rgba(89,166,127,.12); }.system-status.error i { background:#b23d36; box-shadow:0 0 0 4px rgba(178,61,54,.12); }
.top-menu { display:flex; gap:6px; }.top-menu a { color:#68756f; text-decoration:none; padding:8px 10px; font-size:12px; font-weight:600; border-bottom:2px solid transparent; }.top-menu a.active { color:var(--ink); border-color:var(--red); }
.button { border:1px solid var(--line); padding:11px 16px; text-decoration:none; color:inherit; border-radius:3px; font-weight:600; cursor:pointer; background:transparent; }.button.primary { color:#fff; background:var(--jade); padding:14px 20px; border:0; box-shadow:0 8px 24px rgba(39,92,75,.22); }.button:disabled { opacity:.55; cursor:wait; }
.shell { max-width:1520px; margin:0 auto; display:grid; grid-template-columns:330px 1fr; min-height:calc(100vh - 88px); transition:grid-template-columns .2s ease; }
.panel { background:rgba(251,249,242,.78); border:1px solid var(--line); box-shadow:var(--shadow); }
.timeline { align-self:start; height:calc(100dvh - 144px); margin:28px 0 28px 28px; padding:32px 27px; box-shadow:none; border-top:3px solid var(--ink); display:flex; flex-direction:column; }
.timeline-content{display:flex;flex:1;min-height:0;flex-direction:column}
.timeline-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.timeline-toggle { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--jade); font-size:25px; line-height:1; cursor:pointer; }
.timeline-toggle:hover,.timeline-toggle:focus-visible { background:var(--jade); color:#fff; outline:none; }
.lesson-nav-collapsed .shell { grid-template-columns:76px minmax(0,1fr); }
.lesson-nav-collapsed .timeline { margin-right:0; padding:24px 8px; }
.lesson-nav-collapsed .timeline-toolbar { justify-content:center; }
.lesson-nav-collapsed .timeline-toolbar .eyebrow,.lesson-nav-collapsed .timeline-content { display:none; }
.eyebrow { color:var(--red); font-size:10px; text-transform:uppercase; font-weight:700; letter-spacing:.17em; }
h1 { font-family:"Noto Serif JP",serif; font-size:31px; line-height:1.25; margin:13px 0 25px; font-weight:500; } h1 em { color:var(--sage); font-style:normal; }
.lesson-count{flex:0 0 auto;margin:0 0 12px;color:#7d8882;font-size:10px}.lesson-list{display:grid;flex:1;min-height:180px;overflow-y:auto;overscroll-behavior:contain;padding-right:8px;scrollbar-width:thin}.lesson-group-label{position:sticky;top:0;z-index:1;margin:0 0 12px;padding:7px 0;background:var(--paper);color:var(--red);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.lesson-group-label:not(:first-child){margin-top:8px}.lesson-item { position:relative; border:0; border-left:1px solid #c5cbc6; background:transparent; padding:0 0 24px 25px; text-align:left; cursor:pointer; color:inherit; }.lesson-item::before { content:""; position:absolute; left:-5px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--cream); border:1px solid #9ba69f; }.lesson-item.active::before { background:var(--red); border-color:var(--red); box-shadow:0 0 0 4px rgba(199,84,61,.12); }.lesson-item:last-child { border-left-color:transparent; }.lesson-item strong { display:block; font-family:"Noto Serif JP",serif; font-size:15px; margin:3px 0 5px; }.lesson-item small { color:#7d8882; font-size:10px; }.badge { float:right; color:var(--jade); background:#dfe9df; font-size:8px; padding:4px 6px; text-transform:uppercase; letter-spacing:.08em; }.badge.drafting { color:#916a28; background:#f0e3c7; }
.theme-form { flex:0 0 auto; border-top:1px solid var(--line); padding-top:20px; }.theme-form label { font-family:"Noto Serif JP",serif; display:block; font-size:14px; margin-bottom:10px; }.theme-form div { display:flex; }.theme-form input { min-width:0; width:100%; border:1px solid var(--line); border-right:0; background:#fff; padding:11px; outline:none; }.theme-form input:focus { border-color:var(--sage); }.theme-form button { width:42px; border:0; background:var(--red); color:#fff; cursor:pointer; }.theme-form small { display:block; color:#839089; line-height:1.4; margin-top:8px; }
.workspace { min-width:0; padding:42px 3.5vw 34px; }.lesson-heading { min-height:93px; display:flex; align-items:flex-start; justify-content:space-between; gap:30px; }.lesson-heading h2 { font-family:"Noto Serif JP",serif; font-weight:500; font-size:33px; margin:5px 0 4px; }.lesson-heading p { margin:0; color:#728078; }
.feature-panel { margin-top:20px; min-height:430px; padding:27px 32px; position:relative; overflow:hidden; }.feature-panel::after { content:"日本語"; position:absolute; right:-15px; bottom:-32px; font-family:"Noto Serif JP",serif; color:rgba(39,92,75,.045); font-size:130px; writing-mode:vertical-rl; pointer-events:none; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding-bottom:15px; }.section-head>div:first-child { display:flex; align-items:center; gap:12px; }.section-head h3 { margin:0; font-family:"Noto Serif JP",serif; font-size:17px; font-weight:600; }.section-number { color:var(--red); font-size:10px; font-weight:700; letter-spacing:.1em; }
.toggles { display:flex; gap:6px; }.toggle { border:1px solid var(--line); color:#829087; background:transparent; padding:6px 9px; font-size:9px; text-transform:uppercase; letter-spacing:.07em; cursor:pointer; }.toggle.active,.view-toggle { color:#fff; background:var(--sage); border-color:var(--sage); }
.empty-state { max-width:450px; margin:75px auto 30px; text-align:center; }.empty-state span { font-family:"Noto Serif JP",serif; font-size:50px; color:#c7cec7; }.empty-state h3 { font-family:"Noto Serif JP",serif; font-size:21px; margin:8px; }.empty-state p { color:#79847e; font-size:13px; line-height:1.7; }
#dialogueViewer { max-width:760px; margin:38px auto 0; }.slide-meta { display:flex; justify-content:space-between; color:var(--red); text-transform:uppercase; font-size:10px; letter-spacing:.12em; font-weight:700; }.japanese { font-family:"Noto Serif JP",serif; font-size:33px; line-height:1.8; margin:20px 0 4px; }.japanese rt,.card-japanese rt { color:var(--red); font-size:.42em; }.romaji { color:var(--sage); font-style:italic; font-size:15px; }.english { margin-top:17px; font-size:16px; }.slide-controls { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:28px; }.round { width:38px; height:38px; border-radius:50%; background:transparent; border:1px solid var(--line); cursor:pointer; }.listen { border:0; background:var(--jade); color:#fff; padding:11px 18px; cursor:pointer; }
.scene-image { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; margin:0 0 24px; border:1px solid var(--line); }.approval-actions { display:flex; justify-content:flex-end; max-width:900px; margin:22px auto 18px; }.check-field { grid-template-columns:auto 1fr!important; align-items:center; }.check-field input { width:auto!important; }
.full-dialogue { max-width:900px; margin:24px auto 0; }.full-dialogue-line { display:grid; grid-template-columns:80px 1fr 38px; gap:18px; padding:18px 0; border-bottom:1px solid var(--line); align-items:start; }.full-speaker { color:var(--red); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding-top:8px; }.full-japanese { font-family:"Noto Serif JP",serif; font-size:22px; line-height:1.7; }.full-japanese rt { color:var(--red); font-size:.42em; }.full-content .english { margin-top:6px; }.line-actions{display:grid;gap:7px}.line-audio,.line-edit { width:34px; height:34px; border-radius:50%; border:0; background:var(--jade); color:#fff; cursor:pointer; }.line-edit{background:transparent;color:var(--jade);border:1px solid var(--line)}
.full-dialogue-actions { display:flex; justify-content:flex-end; max-width:900px; margin:22px auto 0; }
.edit-action{border:0;background:var(--jade);color:#fff;padding:11px 18px;cursor:pointer}.editor-dialog{width:min(620px,calc(100vw - 32px));border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:30px;box-shadow:var(--shadow)}.editor-dialog::backdrop{background:rgba(23,35,31,.58)}.editor-dialog h2{font-family:"Noto Serif JP",serif;font-weight:500;margin:10px 0}.editor-dialog p{color:#728078;font-size:13px;line-height:1.6}.editor-dialog textarea{width:100%;min-height:110px;resize:vertical;border:1px solid var(--line);background:#fff;padding:15px;font-family:"Noto Serif JP",serif;font-size:20px;line-height:1.7}.editor-field{display:grid;gap:7px;margin-top:16px;color:#53615b;font-size:12px;font-weight:600}.editor-field textarea{min-height:82px}.editor-field small{color:#728078;font-weight:400;line-height:1.5}.editor-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.restore-progress-dialog{text-align:center}.restore-progress-dialog .editor-actions{justify-content:center}.restore-spinner{width:42px;height:42px;margin:0 auto 18px;border:4px solid var(--line);border-top-color:var(--jade);border-radius:50%;animation:restore-spin .8s linear infinite}@keyframes restore-spin{to{transform:rotate(360deg)}}
.lower-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:20px; margin-top:20px; }.drills,.terminal { min-height:355px; padding:25px; }.muted { color:#87918c; font-size:11px; }.mini-empty { margin:80px auto; color:#87918c; text-align:center; font-size:13px; }.flashcard { perspective:1000px; height:215px; margin:22px 0 14px; cursor:pointer; }.card-inner { position:relative; height:100%; transition:transform .55s; transform-style:preserve-3d; }.flashcard.flipped .card-inner { transform:rotateY(180deg); }.card-face { position:absolute; inset:0; backface-visibility:hidden; padding:24px; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--line); background:#f7f1e4; }.card-front small { color:var(--red); text-transform:uppercase; letter-spacing:.1em; }.card-front p { font-family:"Noto Serif JP",serif; font-size:22px; margin:14px 0; }.card-front span { color:#8a948e; font-size:11px; }.card-back { transform:rotateY(180deg); background:var(--ink); color:white; }.card-japanese { font-family:"Noto Serif JP",serif; font-size:22px; }.card-back p { color:#cbd2ce; font-size:12px; margin:12px 0 7px; }.card-back small { color:#9caaa2; line-height:1.45; }.card-controls { display:flex; justify-content:space-between; }.card-controls button { border:0; background:transparent; color:var(--jade); font-size:11px; font-weight:700; cursor:pointer; }
.live { color:#688579; font-size:9px; text-transform:uppercase; letter-spacing:.14em; }.agent-log { height:255px; overflow:auto; padding:12px 3px; scrollbar-width:thin; }.log-placeholder { color:#87918c; font-size:12px; }.log-entry { display:grid; grid-template-columns:73px 1fr; gap:9px; margin:10px 0; font-family:ui-monospace,SFMono-Regular,monospace; font-size:10px; line-height:1.45; }.log-entry strong { color:var(--red); font-weight:600; }.log-entry p { margin:0; color:#59655f; }.log-entry.success strong { color:#39785f; }.log-entry.error strong { color:#b23d36; }
.toast { position:fixed; z-index:20; right:24px; bottom:24px; background:var(--ink); color:#fff; padding:13px 18px; font-size:12px; opacity:0; transform:translateY(10px); transition:.25s; pointer-events:none; box-shadow:var(--shadow); }.toast.show { opacity:1; transform:none; }
.config-shell { max-width:1120px; margin:0 auto; padding:48px 28px 70px; }.config-heading { max-width:720px; margin-bottom:28px; }.config-heading h1 { font-size:38px; margin-bottom:10px; }.config-heading p,.config-help { color:#728078; line-height:1.65; }.config-section { padding:28px; margin-bottom:20px; }.config-section .section-head h2 { margin:0; font-family:"Noto Serif JP",serif; font-size:20px; }.config-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px; }.audio-config-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.config-section fieldset { border:1px solid var(--line); padding:17px; }.config-section legend { color:var(--red); font-size:12px; font-weight:700; padding:0 6px; }.config-section label { display:grid; gap:7px; color:#66736c; font-size:11px; font-weight:600; }.config-section fieldset label+label { margin-top:13px; }.config-section input,.config-section select { width:100%; border:1px solid var(--line); background:#fff; color:var(--ink); padding:11px; }.config-inline { max-width:330px; margin-top:20px; }.credential-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:20px; }.credential-grid div { background:#f4f0e6; padding:17px; font-size:13px; }.credential-grid strong { float:right; color:var(--jade); }.config-actions { display:flex; justify-content:flex-end; align-items:center; gap:16px; }
@media(max-width:750px){.config-grid{grid-template-columns:1fr}.credential-grid{grid-template-columns:1fr}.config-shell{padding:30px 18px}.config-heading h1{font-size:30px}}

.current-user { color:var(--muted); font-size:12px; white-space:nowrap; text-decoration:none; }.current-user:hover,.active-account { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.auth-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--cream); }
.auth-card { width:min(430px,100%); padding:38px; }
.auth-brand { display:flex; margin-bottom:38px; }
.auth-card h1 { margin:8px 0; font-family:"Noto Serif JP",serif; font-size:36px; }
.auth-card>p { color:var(--muted); margin-bottom:26px; }
.auth-card form,.user-form { display:grid; gap:18px; }
.auth-card label,.user-form label { display:grid; gap:7px; color:#66736c; font-size:12px; font-weight:600; }
.auth-card input,.user-form input,.user-form select { width:100%; border:1px solid var(--line); background:#fff; color:var(--ink); padding:12px; }
.auth-card .button { justify-content:center; }
.form-error { min-height:20px; color:var(--red); font-size:13px; }
.user-form { grid-template-columns:1fr 1fr 180px auto; align-items:end; margin-top:22px; }
.user-list { display:grid; margin-top:22px; border-top:1px solid var(--line); }
.user-list article { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:17px 4px; border-bottom:1px solid var(--line); }
.user-list article div { display:grid; gap:3px; }
.user-list article .user-actions { display:flex; align-items:center; gap:8px; }
.user-list small { color:var(--muted); }
.role-badge { border:1px solid var(--line); border-radius:999px; padding:5px 10px; color:var(--jade); font-size:11px; font-weight:700; }
.password-form { display:grid; gap:18px; max-width:560px; }
.password-form label { display:grid; gap:7px; color:#66736c; font-size:12px; font-weight:600; }
.password-form input { width:100%; border:1px solid var(--line); background:#fff; color:var(--ink); padding:12px; }
.agent-room-panel { min-height:430px; }.agent-log-page { height:min(58vh,560px); }
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .timeline{height:auto;margin:18px;display:block}
  .timeline-content{display:block}
  .lesson-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .lesson-item{border-left:0;border-top:1px solid #c5cbc6;padding:18px 4px 8px;min-width:0}
  .lesson-item::before{left:4px;top:-5px}
  .lesson-item .badge{display:none}
  .lesson-item strong{overflow-wrap:anywhere}
  .workspace{padding-top:18px}
  .user-form{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  body{overflow-x:hidden}
  .topbar{height:auto;min-height:0;display:block;padding:12px 14px}
  .brand{width:max-content;margin-bottom:12px}
  .brand small{font-size:8px}
  .seal{width:40px;height:40px}
  .top-actions{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
  .system-status{grid-column:1;grid-row:1;align-self:center;overflow:hidden;text-overflow:ellipsis}
  .current-user{grid-column:1;grid-row:2;align-self:center;overflow:hidden;text-overflow:ellipsis}
  #logoutButton{grid-column:2;grid-row:1 / span 2;min-height:44px}
  .top-menu{grid-column:1 / -1;grid-row:3;display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));width:100%;gap:4px;border-top:1px solid var(--line);padding-top:8px}
  .top-menu a{text-align:center;padding:10px 6px;min-height:40px}
  .shell{display:block;width:100%;min-height:0}
  .timeline{width:100%;margin:0;padding:22px 16px;border-inline:0}
  .lesson-nav-collapsed .timeline{width:100%;margin:0;padding:12px 16px}
  .lesson-nav-collapsed .timeline-toolbar{justify-content:space-between}
  .lesson-nav-collapsed .timeline-toolbar .eyebrow{display:block}
  .lesson-list{grid-template-columns:1fr;gap:0}
  .lesson-list{max-height:none;overflow:visible;padding-right:0}
  .lesson-group-label{position:static;grid-column:1/-1}
  .lesson-item{border-top:0;border-left:1px solid #c5cbc6;padding:0 0 20px 24px;min-height:58px}
  .lesson-item::before{left:-5px;top:5px}
  .lesson-item:last-child{border-left-color:transparent}
  .lesson-item strong{font-size:14px}
  .lesson-item small{font-size:10px}
  .workspace{width:100%;padding:22px 12px 30px}
  .lesson-heading{display:block;min-height:0}
  .lesson-heading h2{font-size:27px;overflow-wrap:anywhere}
  .lesson-heading .button{width:100%;margin-top:15px}
  .feature-panel{width:calc(100% + 24px);margin-left:-12px;padding:20px 14px;min-height:0;border-inline:0;box-shadow:none}
  .feature-panel::after{font-size:90px}
  .section-head{align-items:stretch;flex-direction:column}
  .toggles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;width:100%;gap:7px}
  .toggle{min-height:42px;font-size:10px}
  #dialogueViewer{margin-top:26px;width:100%}
  .japanese{font-size:25px;line-height:1.7;overflow-wrap:anywhere}
  .english,.romaji{overflow-wrap:anywhere}
  .slide-controls{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:9px;margin-top:22px}
  #prevSlide{grid-column:1;grid-row:1}
  #speakDialogue{grid-column:2;grid-row:1}
  #nextSlide{grid-column:3;grid-row:1}
  #editDialogue{grid-column:1 / -1;grid-row:2;width:100%}
  .round{width:44px;height:44px}
  .listen,.edit-action{min-height:44px}
  .full-dialogue{width:100%}
  .full-dialogue-line{grid-template-columns:38px minmax(0,1fr) 34px;gap:8px}
  .full-japanese{font-size:18px;overflow-wrap:anywhere}
  .config-shell{width:100%;padding:24px 0 40px}
  .config-heading{padding:0 16px;margin-bottom:22px}
  .config-heading h1{font-size:29px}
  .config-section{width:100%;padding:22px 16px;margin-bottom:14px;border-inline:0;box-shadow:none}
  .config-grid,.audio-config-grid,.credential-grid,.user-form{grid-template-columns:1fr}
  .config-actions{align-items:stretch;flex-direction:column}
  .config-actions .button{width:100%}
  .password-form{max-width:none}
  .agent-room-panel{min-height:calc(100dvh - 300px)}
  .agent-log-page{height:55dvh}
  .agent-log .log-entry{grid-template-columns:64px minmax(0,1fr);overflow-wrap:anywhere}
  .editor-dialog{width:calc(100vw - 16px);max-height:94dvh;overflow:auto;padding:22px 16px}
  .editor-dialog textarea{font-size:18px}
  .editor-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .editor-actions .button{width:100%;min-height:44px}
  .toast{left:12px;right:12px;bottom:12px;text-align:center}
  .auth-page{display:block;padding:0}
  .auth-card{width:100%;min-height:100dvh;padding:30px 20px;border:0;box-shadow:none}
}