:root { color-scheme: light; --canvas:#f5f6f8; --surface:#fff; --ink:#182332; --muted:#788294; --stroke:#e6eaf0; --primary:#2362eb; --primary-hover:#1852d6; --shadow:0 18px 70px rgba(30,47,72,.075),0 2px 10px rgba(31,45,75,.035); --radius:18px; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled { opacity:.55; cursor:wait; }
[hidden] { display:none !important; }
.shell { min-height:100dvh; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; justify-content:space-between; width:100%; padding:16px max(24px,env(safe-area-inset-right)) 16px max(24px,env(safe-area-inset-left)); border-bottom:1px solid #e8ebf0; background:rgba(255,255,255,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:10px; }
.brand-icon { display:grid; place-items:center; width:39px; height:39px; border-radius:12px; color:white; background:linear-gradient(145deg,#3274f5,#2253c8); box-shadow:0 3px 12px rgba(30,93,220,.19); }
.brand-icon svg { width:23px; height:23px; }
.brand-name { font-size:16px; font-weight:760; letter-spacing:-.5px; line-height:1.28; }
.brand-subtitle { margin-top:2px; color:#98a0ac; font-size:10px; letter-spacing:.15px; }
.top-actions { display:flex; align-items:center; gap:6px; }
.button { border:0; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:10px; padding:10px 14px; font-size:13px; font-weight:660; white-space:nowrap; transition:background .15s,transform .15s; }
.button:active { transform:scale(.98); }
.button svg { width:17px; height:17px; stroke:currentColor; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.button-quiet { padding:9px 12px; background:#f1f4f8; color:#606b7b; }
.button-icon { width:39px; height:39px; padding:0; border:1px solid transparent; background:transparent; color:#647080; }
.button-icon:hover { background:#edf1f7; }
.button-secondary { border:1px solid var(--stroke); background:#fff; color:#394759; }
.button-secondary:hover { background:#f7f9fc; }
.button-primary { color:white; background:var(--primary); box-shadow:0 3px 12px rgba(35,98,235,.15); }
.button-primary:hover { background:var(--primary-hover); }
.dot { height:7px; width:7px; border-radius:50%; background:#c7ced9; }
.dot.online { background:#30a67c; box-shadow:0 0 0 3px rgba(48,166,124,.1); }
.workspace { flex:1; width:min(1020px,100%); margin:0 auto; padding:38px 28px 30px; }
.hero { margin:0 0 24px; }
.eyebrow { color:#4582dc; font-size:10px; font-weight:800; letter-spacing:1.7px; }
.sparkle { font-size:13px; margin-right:4px; }
h1 { font-size:31px; line-height:1.5; margin:5px 0 8px; letter-spacing:-1.5px; font-weight:800; }
.hero p { color:#7a8594; margin:0; font-size:13px; line-height:1.8; }
.mobile-break { display:none; }
.editor-card { background:var(--surface); border:1px solid #e7ebf1; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.document-bar { padding:15px 18px; display:flex; align-items:center; gap:16px; justify-content:space-between; border-bottom:1px solid var(--stroke); }
.document-identity { display:flex; align-items:center; flex:1; gap:12px; min-width:0; }
.file-symbol { display:grid; place-items:center; width:42px; height:46px; flex:none; border-radius:10px; color:#266add; background:#eaf1fe; font-size:11px; font-weight:850; letter-spacing:.3px; }
.document-detail { min-width:0; flex:1; }
.document-label { color:#929ba8; display:block; font-size:10px; margin-bottom:3px; }
.filename { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:17px; font-weight:730; letter-spacing:-.3px; text-overflow:ellipsis; }
.filename:focus { background:#f3f7fd; border-radius:4px; }
.document-toolbar { display:flex; align-items:center; gap:7px; }
.metadata-row { background:#fbfcfe; border-bottom:1px solid var(--stroke); padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:11px; color:#8793a3; }
.file-meta-left { display:flex; gap:12px; align-items:center; min-width:0; }
#fileLocation { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#driveLink { color:var(--primary); text-decoration:none; white-space:nowrap; }
.encoding-group { display:flex; align-items:center; gap:8px; flex:none; }
.encoding-group select { border:1px solid #e8ebf1; border-radius:6px; color:#4e5c70; padding:4px 18px 4px 7px; font-size:11px; background:white; max-width:112px; }
.save-encoding { margin-left:6px; color:#3b9b78; font-size:11px; font-weight:700; }
.editor { display:block; resize:vertical; outline:0; border:0; width:100%; min-height:390px; padding:30px 29px 35px; background:transparent; color:#223048; line-height:1.85; font-size:16px; font-weight:420; letter-spacing:.15px; tab-size:4; }
.editor::placeholder { color:#bbc3cf; }
.editor:focus { box-shadow:inset 0 0 0 1px rgba(35,98,235,.07); }
.editor-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 20px; border-top:1px solid var(--stroke); font-size:11px; color:#8996a5; }
.status { display:flex; align-items:center; gap:8px; min-width:0; }
#statusMessage { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.status-pulse { width:6px; height:6px; flex:none; border-radius:50%; background:#30ad81; }
.status.busy .status-pulse { background:#eea546; }
.status.error .status-pulse { background:#ee6771; }
.stats { display:flex; gap:8px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.under-editor { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 5px; }
.hint { color:#a0a9b5; font-size:11px; line-height:1.7; }
.other-actions { white-space:nowrap; display:flex; gap:8px; align-items:center; }
.link-button { background:none; border:0; color:#607aab; padding:5px 0; text-decoration:none; font-size:11px; cursor:pointer; }
.separator { color:#c5cbd6; font-size:12px; }
.footer { text-align:center; padding:25px 20px max(22px,env(safe-area-inset-bottom)); color:#b4bdc8; font-size:10px; font-weight:700; letter-spacing:1px; }
.footer span { padding:0 5px; }
.modal { width:min(465px,calc(100% - 28px)); border:1px solid #e9ecf2; border-radius:18px; padding:0; box-shadow:0 24px 90px rgba(20,38,70,.25); max-height:calc(100dvh - 35px); overflow-y:auto; }
.modal::backdrop { background:rgba(18,35,55,.44); backdrop-filter:blur(3px); }
.modal-content { padding:25px; }
.modal-top { display:flex; justify-content:space-between; align-items:flex-start; }
h2 { margin:6px 0 0; font-size:21px; letter-spacing:-.6px; }
.modal-help { font-size:13px; color:#7d8997; line-height:1.8; margin:16px 0 18px; }
.field-label { display:block; color:#536276; font-size:12px; font-weight:700; margin:15px 0 7px; }
#settingsForm input { display:block; width:100%; border:1px solid #dce2ea; border-radius:9px; padding:12px; background:#fff; outline:0; font-size:16px; }
#settingsForm input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(35,98,235,.12); }
.setup-note { background:#f5f8fe; color:#66778e; line-height:1.7; font-size:11px; border-radius:9px; padding:12px; margin:18px 0; }
.settings-save { width:100%; padding:14px; }
.toast { position:fixed; bottom:calc(env(safe-area-inset-bottom) + 25px); left:50%; transform:translateX(-50%); z-index:100; width:max-content; max-width:calc(100% - 36px); padding:13px 19px; border-radius:12px; background:#24354b; color:white; font-size:13px; line-height:1.5; box-shadow:0 10px 38px rgba(20,30,50,.2); text-align:center; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:700px) {
  .topbar { padding:12px 15px; }
  .workspace { padding:24px 12px 0; }
  .hero { padding:0 10px; margin-bottom:19px; }
  h1 { font-size:27px; letter-spacing:-1.2px; line-height:1.3; margin:8px 0; }
  .hero p { font-size:12px; line-height:1.7; }
  .mobile-break { display:block; }
  .wide-break { display:none; }
  .document-bar { padding:13px 12px; flex-wrap:wrap; gap:13px; }
  .document-identity { flex-basis:100%; }
  .filename { font-size:17px; }
  .file-symbol { width:37px; height:40px; }
  .document-toolbar { width:100%; display:grid; grid-template-columns:1fr 1.55fr 1.5fr; gap:6px; }
  .button { font-size:12px; padding:11px 8px; }
  .button-icon { padding:0; }
  .document-toolbar .button { min-width:0; }
  .text-desktop { display:inline; }
  .metadata-row { flex-wrap:wrap; padding:10px 14px; gap:9px; }
  .file-meta-left { flex:1 1 100%; }
  .encoding-group { width:100%; flex-wrap:wrap; }
  .save-encoding { margin-left:auto; }
  .editor { min-height:calc(100dvh - 476px); height:47dvh; resize:vertical; padding:21px 18px; line-height:1.76; }
  .editor-footer { padding:12px 14px; }
  .under-editor { flex-direction:column; align-items:flex-start; gap:8px; padding:11px 10px; }
  .hint { font-size:10px; }
  .brand-subtitle { font-size:9px; }
  .auth-button { font-size:11px; }
}
@media(max-width:365px) { .document-toolbar { grid-template-columns:.7fr 1.5fr 1.45fr; } .brand-subtitle { display:none; } .save-encoding { margin-left:0; } }
@media(prefers-color-scheme:dark) { :root { color-scheme:dark; --canvas:#101722; --surface:#1b2635; --ink:#eff4fa; --muted:#aab7c5; --stroke:#344154; --shadow:0 18px 70px rgba(0,0,0,.22); } .topbar { background:rgba(27,38,53,.83); border-color:#324053; } .button-quiet,.button-secondary { background:#283649; color:#e2e9f3; border-color:#3c4b5e; } .button-icon { color:#e0e8ef; } .button-icon:hover { background:#2f3c4f; } .editor-card,.modal { border-color:#344154; } .metadata-row { background:#212d3e; } .file-symbol { background:#293d61; color:#aac5ff; } .filename,.editor { color:#f0f5fa; } .filename:focus { background:#334258; } .editor::placeholder { color:#5f7185; } .encoding-group select,#settingsForm input { background:#1c293b; color:#e3eaf2; border-color:#475568; } .setup-note { background:#263a53; } .footer { color:#748195; } }