: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; }
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; }.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); }
.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); }
.panel { background:rgba(251,249,242,.78); border:1px solid var(--line); box-shadow:var(--shadow); }
.timeline { margin:28px 0 28px 28px; padding:32px 27px; box-shadow:none; border-top:3px solid var(--ink); }
.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; }
.countdown-wrap { background:var(--ink); color:#fff; padding:15px 17px; display:flex; align-items:center; justify-content:space-between; margin-bottom:27px; }.countdown-wrap span { font-size:10px; color:#b9c1bd; text-transform:uppercase; letter-spacing:.1em; }.countdown-wrap strong { font-family:"Noto Serif JP",serif; font-size:17px; }
.lesson-list { display:grid; }.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 { 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 { 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; }
.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)}
.edit-action{border:1px solid var(--line);background:transparent;color:var(--jade);padding:10px 14px;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:130px;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-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.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}}
@media(max-width:900px){.shell{grid-template-columns:1fr}.timeline{margin:18px;}.lesson-list{grid-template-columns:repeat(4,1fr);gap:8px}.lesson-item{border-left:0;border-top:1px solid #c5cbc6;padding:18px 4px 8px}.lesson-item::before{left:4px;top:-5px}.lesson-item .badge{display:none}.workspace{padding-top:18px}.lower-grid{grid-template-columns:1fr}}
@media(max-width:600px){.topbar{height:auto;min-height:72px;padding:10px 18px;gap:12px}.top-actions{gap:7px;flex-wrap:wrap;justify-content:flex-end}.top-menu{order:3;width:100%;justify-content:flex-end}.system-status{display:none}.shell{min-height:calc(100vh - 72px)}.timeline{margin:12px;padding:24px 18px}.timeline h1{font-size:26px}.lesson-item strong{font-size:11px}.lesson-item small{font-size:8px}.workspace{padding:18px}.lesson-heading{display:block}.lesson-heading h2{font-size:27px}.lesson-heading .button{margin-top:15px}.feature-panel,.drills,.terminal{padding:20px}.toggles{max-width:220px;flex-wrap:wrap;justify-content:flex-end}.japanese{font-size:25px}.full-dialogue-line{grid-template-columns:55px 1fr 34px;gap:9px}.full-japanese{font-size:18px}.lower-grid{display:block}.terminal{margin-top:18px}}