:root {
  --ink: #1e1b2d;
  --muted: #79758d;
  --line: #ebe8f4;
  --paper: #ffffff;
  --canvas: #f8f7fc;
  --lavender: #7662e9;
  --lavender-dark: #5a48c7;
  --lavender-soft: #eeeaff;
  --lavender-pale: #f8f6ff;
  --green: #49a782;
  --shadow: 0 18px 55px rgba(81, 64, 145, .10);
  --radius-lg: 26px;
  --radius-md: 16px;
  --radius-sm: 11px;
  font-family: Manrope, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.serif { font-family: "Noto Serif SC", serif; }
.mono { font-family: "DM Mono", monospace; }

.landing-view { min-height: 100vh; overflow: hidden; }
.landing-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1240px; padding: 27px 32px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; letter-spacing: -.04em; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; color: #fff; background: var(--lavender); border-radius: 12px; box-shadow: 0 7px 18px rgba(118, 98, 233, .25); }
.brand-mark span { display: block; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 5px; transform: rotate(45deg); }
.search-icon { position: relative; display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; left:-2px;top:-2px;}
.search-icon::after { content: ""; position: absolute; right: -6px; bottom: -3px; width: 8px; height: 2px; border-radius: 99px; background: currentColor; transform: rotate(45deg); transform-origin: left center; }
.sparkle-icon, .preview-card:nth-child(1) > span { display: inline-block; width: 18px; height: 18px; font-size: 0; background: currentColor; clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%); }
.computer-icon, .preview-card:nth-child(4) > span { position: relative; display: inline-block; width: 19px; height: 14px; font-size: 0; border: 2px solid currentColor; border-radius: 3px; }
.computer-icon::before, .preview-card:nth-child(4) > span::before { content: ""; position: absolute; left: 5px; bottom: -5px; width: 5px; height: 3px; background: currentColor; }
.computer-icon::after, .preview-card:nth-child(4) > span::after { content: ""; position: absolute; left: 2px; bottom: -7px; width: 11px; height: 2px; border-radius: 99px; background: currentColor; }
.brand-name { font-size: 17px; }
.nav-actions { display: flex; align-items: center; gap: 13px; }
.link-btn, .ghost-btn { color: var(--muted); background: transparent; border: 0; font-weight: 700; }
.primary-btn, .secondary-btn, .ghost-btn, .tool-btn { border-radius: 12px; padding: 12px 17px; border: 1px solid transparent; font-weight: 800; transition: .2s ease; }
.primary-btn { color: white; background: var(--lavender); box-shadow: 0 9px 18px rgba(118, 98, 233, .22); }
.primary-btn:hover { background: var(--lavender-dark); transform: translateY(-1px); }
.secondary-btn { color: var(--lavender-dark); background: var(--lavender-soft); }
.secondary-btn:hover, .ghost-btn:hover { border-color: #d9d1ff; background: #f5f2ff; }
.hero { max-width: 1240px; margin: 0 auto; padding: 57px 32px 85px; display: grid; grid-template-columns: 1.04fr .96fr; gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; gap: 8px; align-items: center; color: var(--lavender-dark); background: var(--lavender-soft); border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 800; }
.eyebrow::before { content: "✦"; }
.hero h1 { max-width: 640px; margin: 20px 0 20px; font-size: clamp(42px, 6.1vw, 76px); line-height: 1.05; letter-spacing: -.075em; }
.hero h1 em { color: var(--lavender); font-style: normal; }
.hero-copy { max-width: 650px; color: var(--muted); font-size: 17px; line-height: 1.9; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 29px; }
.hero-note { margin-top: 17px; font-size: 12px; color: #a09bb2; }
.hero-preview { position: relative; min-height: 440px; padding: 26px; background: linear-gradient(145deg, #f0edff, #fff); border: 1px solid #e2ddf8; border-radius: 34px; box-shadow: var(--shadow); }
.orb { position: absolute; width: 220px; height: 220px; right: -42px; top: -48px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d8d0ff, #a69af6 60%, #cfc6ff); opacity: .75; filter: blur(1px); }
.preview-window { position: relative; z-index: 1; background: rgba(255,255,255,.86); border: 1px solid rgba(224, 219, 242, .95); border-radius: 22px; overflow: hidden; box-shadow: 0 18px 50px rgba(82, 67, 135, .11); }
.preview-top { height: 48px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.window-dots { display: flex; gap: 5px; }.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d9d5e5; }
.preview-body { display: grid; grid-template-columns: 82px 1fr; min-height: 325px; }
.preview-rail { padding: 16px 12px; border-right: 1px solid var(--line); }.preview-rail span { display: block; height: 9px; margin: 13px 4px; border-radius: 5px; background: #e5e0f7; }.preview-rail span:first-child { background: var(--lavender); }
.preview-main { padding: 28px; }.preview-main h3 { margin: 0 0 6px; font-family: "Noto Serif SC", serif; font-size: 26px; }.preview-main p { margin: 0; color: var(--muted); font-size: 12px; }
.preview-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }.preview-card { min-height: 105px; padding: 14px; border: 1px solid #e9e4f5; border-radius: 15px; background: #fff; }.preview-card b { display: block; margin-top: 18px; font-size: 12px; }.preview-card span { color: var(--lavender); font-size: 18px; }.preview-card:nth-child(2) > span { position: relative; display: inline-block; width: 16px; height: 16px; font-size: 0; border: 2px solid currentColor; border-radius: 50%; }.preview-card:nth-child(2) > span::after { content: ""; position: absolute; right: -6px; bottom: -3px; width: 8px; height: 2px; border-radius: 99px; background: currentColor; transform: rotate(45deg); transform-origin: left center; }
.section { max-width: 1240px; margin: 0 auto; padding: 0 32px 75px; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }.section-heading h2 { margin: 0; font-size: 28px; letter-spacing: -.05em; }.section-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }.feature-card { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }.feature-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--lavender-dark); background: var(--lavender-soft); border-radius: 13px; font-size: 19px; }.feature-card h3 { margin: 22px 0 7px; font-size: 16px; }.feature-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.landing-footer { max-width: 1240px; padding: 25px 32px 40px; margin: 0 auto; display: flex; justify-content: space-between; color: #9d98ac; font-size: 12px; border-top: 1px solid var(--line); }
.pen-icon, .preview-card:nth-child(3) > span { position: relative; display: inline-block; width: 6px; height: 20px; font-size: 0; background: currentColor; border-radius: 3px; transform: rotate(45deg); }
.pen-icon::before, .preview-card:nth-child(3) > span::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 6px solid currentColor;
}
.pen-icon::after, .preview-card:nth-child(3) > span::after {
    content: "";
    position: absolute;
    left: 0;
    top: -4px;
    width: 6px;
    height: 5px;
    background: currentColor;
    border-radius: 3px 3px 0 0;
}

.auth-view { position: fixed; z-index: 1000; inset: 0; min-height: 100dvh; display: grid; place-items: center; padding: 30px; overflow-y: auto; background: rgba(31, 25, 52, .48); backdrop-filter: blur(8px); }.auth-card { position: relative; width: min(455px, 100%); max-height: calc(100dvh - 60px); padding: 37px; overflow-y: auto; border: 1px solid rgba(231, 226, 246, .95); border-radius: 24px; background: #fff; box-shadow: 0 26px 90px rgba(35, 25, 64, .25); }.auth-close { position: absolute; top: 17px; right: 17px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: #756f83; border: 1px solid #e5e0ee; border-radius: 50%; background: #fff; font-size: 24px; line-height: 1; cursor: pointer; }.auth-close:hover { color: var(--lavender-dark); border-color: #cec4ff; background: var(--lavender-pale); }.auth-close:focus-visible { outline: 3px solid rgba(118, 98, 233, .28); outline-offset: 2px; }.auth-modal-open { overflow: hidden; }.auth-card .brand { margin-bottom: 35px; }.auth-card h1 { margin: 0 0 8px; font-family: "Noto Serif SC", serif; font-size: 29px; }.auth-card > p { margin: 0 0 28px; color: var(--muted); font-size: 14px; }.auth-form { display: grid; gap: 16px; }.field { display: grid; gap: 8px; color: #605b73; font-size: 13px; font-weight: 700; }.field input, .field select, .field textarea { width: 100%; color: var(--ink); border: 1px solid #e4e0ee; outline: none; border-radius: 11px; background: #fcfbff; padding: 13px 14px; }.field input:focus, .field select:focus, .field textarea:focus { border-color: #aa9cf3; box-shadow: 0 0 0 4px #f0edff; }.field input[readonly] { color: var(--muted); background: #f6f4fb; }.auth-submit { width: 100%; margin-top: 6px; }.auth-resend { width: 100%; }.auth-code-sent { margin: -5px 0 0; color: var(--muted); font-size: 12px; }.auth-error { min-height: 18px; color: #bd4c5b; font-size: 12px; line-height: 1.5; }.auth-switch { margin-top: 22px; text-align: center; color: var(--muted); font-size: 13px; }.auth-switch button { color: var(--lavender-dark); border: 0; background: none; font-weight: 800; }.auth-hint { margin-top: 18px; padding: 11px 13px; color: #746d92; background: var(--lavender-pale); border-radius: 10px; font-size: 12px; line-height: 1.6; }

.app-view { min-height: 100vh; display: flex; }.app-sidebar { position: sticky; top: 0; width: 252px; height: 100vh; flex: 0 0 252px; padding: 25px 16px 18px; display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--line); }.app-sidebar .brand { padding: 0 11px 25px; }.sidebar-label { margin: 19px 11px 8px; color: #a29caf; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.nav-list { display: grid; gap: 4px; }.nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 12px; color: #726d80; border: 1px solid transparent; border-radius: 11px; background: transparent; text-align: left; font-size: 13px; font-weight: 700; }.nav-item:hover { background: #faf9ff; }.nav-item.active { color: var(--lavender-dark); background: var(--lavender-soft); border-color: #ded7ff; }.nav-icon { width: 20px; text-align: center; font-size: 16px; }.sidebar-bottom { margin-top: auto; }.usage-box { padding: 15px; margin: 12px 6px; border: 1px solid var(--line); border-radius: 16px; background: #fbfaff; }.usage-box .usage-head { display: flex; justify-content: space-between; margin-bottom: 10px; color: #746f85; font-size: 11px; }.progress { height: 7px; overflow: hidden; border-radius: 99px; background: #e9e5f1; }.progress span { display: block; width: 33%; height: 100%; border-radius: inherit; background: var(--lavender); }.usage-box p { margin: 10px 0 0; color: #9993a8; font-size: 10px; line-height: 1.5; }.profile-box { display: flex; gap: 10px; align-items: center; padding: 12px 9px 2px; border-top: 1px solid var(--line); }.avatar { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; color: var(--lavender-dark); background: var(--lavender-soft); border-radius: 12px; font-weight: 800; }.profile-text { min-width: 0; }.profile-text b, .profile-text span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.profile-text b { font-size: 12px; }.profile-text span { margin-top: 3px; color: var(--muted); font-size: 10px; }.profile-menu { margin-left: auto; border: 0; background: none; color: var(--muted); }.app-main { min-width: 0; flex: 1; padding: 22px clamp(20px, 4vw, 58px) 80px; overflow: hidden; }.app-topbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 25px; }.mobile-menu { display: none; }.top-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }.status-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; }.app-content { max-width: 1150px; margin: 0 auto; }.welcome-panel { padding: clamp(26px, 4vw, 46px); border: 1px solid #e4defd; border-radius: var(--radius-lg); background: linear-gradient(130deg, #fff, #faf8ff); box-shadow: var(--shadow); }.welcome-panel .eyebrow { background: transparent; padding: 0; font-size: 11px; }.welcome-panel h1 { margin: 14px 0 8px; font-family: "Noto Serif SC", serif; font-size: clamp(31px, 4.3vw, 52px); letter-spacing: -.07em; }.welcome-panel p { margin: 0; color: var(--muted); font-size: 14px; }.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }.tool-card { position: relative; min-height: 208px; padding: 22px; border: 1px solid var(--line); border-radius: 19px; background: #fff; transition: .2s ease; }.tool-card:hover { transform: translateY(-3px); border-color: #d8d0ff; box-shadow: 0 15px 35px rgba(81,64,145,.09); }.tool-card .tool-icon { display: grid; place-items: center; width: 41px; height: 41px; color: var(--lavender-dark); border: 1px solid #ded7ff; border-radius: 13px; background: var(--lavender-soft); }.tool-card h3 { margin: 22px 0 6px; font-size: 17px; }.tool-card p { min-height: 42px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }.tool-card .tool-arrow { position: absolute; right: 20px; bottom: 20px; color: var(--lavender); font-size: 18px; }.dashboard-lower { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; margin-top: 18px; }.panel { padding: 23px; border: 1px solid var(--line); border-radius: 19px; background: #fff; }.panel-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 18px; }.panel-heading h2 { margin: 0; font-size: 15px; }.panel-heading span { color: var(--muted); font-size: 11px; }.invite-panel { background: linear-gradient(135deg, #f7f3ff, #fff); border-color: #e5dcff; }.invite-panel h2 { font-family: "Noto Serif SC", serif; font-size: 18px; }.invite-panel p { color: var(--muted); font-size: 12px; line-height: 1.7; }.invite-link { display: flex; gap: 9px; align-items: center; padding: 10px 11px; margin-top: 17px; border: 1px solid #e5defb; border-radius: 10px; background: #fff; }.invite-link span { flex: 1; overflow: hidden; color: #716a86; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.copy-btn { padding: 7px 9px; color: var(--lavender-dark); border: 0; border-radius: 8px; background: var(--lavender-soft); font-size: 11px; font-weight: 800; }.history-empty { color: #a09aaa; font-size: 12px; }.credit-row { display: flex; align-items: end; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }.credit-row strong { font-size: 31px; letter-spacing: -.06em; }.credit-row span { color: var(--green); font-size: 11px; }.stat-list { display: grid; gap: 12px; margin-top: 17px; }.stat { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }.stat b { color: var(--ink); }.view-title { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }.view-title h1 { margin: 0; font-family: "Noto Serif SC", serif; font-size: 34px; letter-spacing: -.06em; }.view-title p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }.tool-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.editor-panel { min-height: 515px; }.editor-panel textarea { min-height: 335px; resize: vertical; line-height: 1.8; }.editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; color: var(--muted); font-size: 11px; }.result-box { min-height: 335px; padding: 16px; color: #5f5a6f; border: 1px solid #e4e0ed; border-radius: 11px; background: #fcfbff; line-height: 1.9; white-space: pre-wrap; }.result-box.ready { color: var(--ink); background: #fff; }.status-banner { display: none; align-items: center; gap: 9px; padding: 10px 12px; margin-bottom: 12px; color: var(--lavender-dark); border-radius: 10px; background: var(--lavender-soft); font-size: 12px; }.status-banner.visible { display: flex; }.status-banner::before { content: ""; width: 14px; height: 14px; flex: 0 0 14px; border: 2px solid rgba(118,98,233,.24); border-top-color: var(--lavender-dark); border-radius: 50%; animation: wenjing-spin .8s linear infinite; }.status-banner:not(.visible)::before { display: none; }.select-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.writer-layout { display: grid; grid-template-columns: 330px 1fr; gap: 18px; }.control-panel { display: grid; align-content: start; gap: 15px; }.control-panel .primary-btn { width: 100%; margin-top: 5px; }.writer-output { min-height: 590px; }.writer-result { min-height: 465px; }.meter { margin: 20px 0 8px; }.meter-head { display: flex; justify-content: space-between; margin-bottom: 10px; color: var(--muted); font-size: 12px; }.meter-track { height: 12px; overflow: hidden; border-radius: 99px; background: #eeeaf6; }.meter-track span { display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #aca0fa, var(--lavender)); }.risk-list { display: grid; gap: 8px; margin-top: 20px; }.risk-line { padding: 12px; color: #706b7e; border-radius: 10px; background: #fff8e8; font-size: 12px; line-height: 1.7; }.typing-stage { display: grid; gap: 18px; }.typing-screen { min-height: 350px; padding: 22px; color: #403b51; border: 1px solid #e4e0ed; border-radius: 14px; background: #fff; font-size: 16px; line-height: 2; white-space: pre-wrap; }.typing-cursor { display: inline-block; width: 2px; height: 19px; margin-left: 3px; vertical-align: -3px; background: var(--lavender); animation: blink 1s step-end infinite; }.typing-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }.speed-control { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: 12px; }.speed-control input { accent-color: var(--lavender); }.history-list { display: grid; gap: 10px; }.history-item { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }.history-item h3 { margin: 0 0 5px; font-size: 13px; }.history-item p { margin: 0; color: var(--muted); font-size: 11px; }.history-item button { flex: 0 0 auto; }.placeholder-panel { padding: 55px 25px; text-align: center; }.placeholder-icon { display: grid; place-items: center; width: 55px; height: 55px; margin: 0 auto 17px; color: var(--lavender); border-radius: 18px; background: var(--lavender-soft); font-size: 25px; }.placeholder-panel h2 { margin: 0 0 8px; font-family: "Noto Serif SC", serif; font-size: 24px; }.placeholder-panel p { max-width: 450px; margin: 0 auto; color: var(--muted); font-size: 13px; line-height: 1.8; }
.bottom-nav { display: none; }
.toast-region { position: fixed; z-index: 30; right: 22px; bottom: 22px; display: grid; gap: 8px; pointer-events: none; }
.toast { padding: 12px 16px; color: #fff; border-radius: 11px; background: #2d2940; box-shadow: 0 12px 30px rgba(26,21,48,.2); font-size: 12px; animation: toast-in .2s ease-out; }
.env-badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 3px 7px; color: #7662e9; border: 1px solid #d8d0ff; border-radius: 999px; background: #f2efff; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 980px) { .hero { grid-template-columns: 1fr; padding-top: 35px; }.hero-preview { max-width: 670px; }.feature-grid, .tool-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-lower { grid-template-columns: 1fr; }.writer-layout { grid-template-columns: 1fr; }.writer-output { min-height: 430px; } }

.writer-workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.writer-chat-panel, .writer-draft-panel { min-width: 0; }
.writer-chat-panel { display: flex; min-height: 710px; flex-direction: column; }
.writer-chat-list { display: grid; min-height: 360px; max-height: 480px; gap: 12px; overflow-y: auto; padding: 4px 2px 16px; }
.writer-empty { display: grid; align-content: center; min-height: 330px; padding: 20px; color: var(--muted); border: 1px dashed #ddd6f6; border-radius: 14px; background: #fcfbff; text-align: center; }
.writer-empty strong { color: var(--ink); font-size: 18px; }
.writer-empty p { max-width: 390px; margin: 10px auto 0; line-height: 1.7; }
.writer-quick-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.writer-message { max-width: 88%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; color: #5f5a6f; background: #fcfbff; line-height: 1.7; font-size: 13px; white-space: normal; }
.writer-message.user { justify-self: end; color: #fff; border-color: var(--lavender); background: var(--lavender); }
.writer-message-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.writer-message.user .writer-message-label { color: #eeeaff; }
.writer-file-list { display: grid; gap: 8px; margin: auto 0 12px; }
.writer-file-card { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e5defb; border-radius: 11px; background: #fbfaff; }
.writer-file-card.error { border-color: #f0caca; background: #fff8f8; }
.writer-file-icon { display: grid; place-items: center; width: 42px; height: 32px; flex: 0 0 42px; color: var(--lavender-dark); border-radius: 8px; background: var(--lavender-soft); font-size: 9px; font-weight: 800; }
.writer-file-card > div:nth-child(2) { min-width: 0; flex: 1; }
.writer-file-card b, .writer-file-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.writer-file-card b { font-size: 12px; }
.writer-file-card span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.writer-file-card .ghost-btn { padding: 3px 8px; }
.writer-composer { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.writer-composer.busy { opacity: .78; }
.writer-composer textarea { min-height: 78px; resize: vertical; line-height: 1.6; }
.writer-composer-actions { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.writer-composer-actions .primary-btn { margin-left: auto; }
.writer-upload-hint { color: var(--muted); font-size: 10px; }
.writer-draft-panel { min-height: 710px; }
.writer-draft-editor { width: 100%; min-height: 430px; resize: vertical; color: var(--ink); border-color: #e4e0ed; background: #fcfbff; line-height: 1.85; }
.writer-draft-editor:focus { background: #fff; }
.writer-draft-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.writer-detection-summary { display: flex; justify-content: space-between; gap: 10px; padding: 11px 13px; margin-top: 13px; color: var(--lavender-dark); border-radius: 10px; background: var(--lavender-soft); font-size: 11px; }
.writer-detection-details { display: grid; gap: 7px; margin-top: 9px; }
.writer-detection-details div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 11px; color: var(--muted); border-radius: 9px; background: #fff8e8; font-size: 10px; line-height: 1.6; }
.writer-detection-details span { flex: 0 0 auto; color: #9c7c32; font-weight: 800; }
.writer-generate-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line); }
.writer-generate-bar span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.writer-settings { margin-top: 17px; border-top: 1px solid var(--line); }
.writer-settings summary { padding: 14px 0; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 800; }
.writer-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 4px; }
.writer-settings-grid .writer-requirement { grid-column: 1 / -1; }
.writer-settings-grid .field { font-size: 11px; }
.writer-settings-grid input, .writer-settings-grid select, .writer-settings-grid textarea { margin-top: 6px; font-size: 12px; }

@media (max-width: 980px) { .writer-workbench { grid-template-columns: 1fr; }.writer-chat-panel, .writer-draft-panel { min-height: auto; }.writer-chat-list { max-height: 390px; }.writer-draft-editor { min-height: 330px; } }
@media (max-width: 620px) { .writer-composer-actions { flex-wrap: wrap; }.writer-upload-hint { order: 3; width: 100%; }.writer-composer-actions .primary-btn { margin-left: 0; }.writer-generate-bar { align-items: stretch; flex-direction: column; }.writer-generate-bar .primary-btn { width: 100%; }.writer-settings-grid { grid-template-columns: 1fr; }.writer-settings-grid .writer-requirement { grid-column: auto; }.writer-message { max-width: 96%; } }
@media (max-width: 720px) { .landing-nav, .hero, .section, .landing-footer { padding-left: 18px; padding-right: 18px; }.landing-nav { padding-top: 18px; }.nav-actions .link-btn { display: none; }.hero { padding-top: 33px; padding-bottom: 55px; gap: 35px; }.hero h1 { font-size: 44px; }.hero-preview { min-height: 330px; padding: 15px; border-radius: 23px; }.preview-body { grid-template-columns: 57px 1fr; min-height: 260px; }.preview-main { padding: 18px; }.preview-main h3 { font-size: 20px; }.preview-cards { margin-top: 16px; gap: 8px; }.preview-card { min-height: 80px; padding: 10px; }.preview-card b { margin-top: 11px; font-size: 10px; }.feature-grid, .tool-grid { grid-template-columns: 1fr; }.section-heading { display: block; }.section-heading p { margin-top: 8px; }.landing-footer { display: block; line-height: 2; }.auth-view { align-items: start; padding: 12px; }.auth-card { max-height: calc(100dvh - 24px); padding: 27px 20px; border-radius: 20px; }.auth-close { top: 13px; right: 13px; }.app-view { display: block; }.app-sidebar { position: fixed; z-index: 10; left: -285px; top: 0; transition: left .25s ease; box-shadow: 10px 0 35px rgba(41,31,79,.15); }.app-sidebar.open { left: 0; }.app-main { padding: 15px 15px 92px; }.app-topbar { margin-bottom: 18px; }.mobile-menu { display: inline-flex; align-items: center; justify-content: center; width: 39px; height: 39px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 19px; }.app-topbar .brand { display: inline-flex; }.app-topbar .brand-name { font-size: 15px; }.top-status { display: none; }.welcome-panel { padding: 25px 20px; }.welcome-panel h1 { font-size: 34px; }.tool-card { min-height: 175px; }.dashboard-lower { gap: 13px; }.panel { padding: 18px; }.bottom-nav { position: fixed; z-index: 9; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 7px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.94); box-shadow: 0 12px 30px rgba(41,31,79,.13); backdrop-filter: blur(12px); }.bottom-nav button { padding: 8px 2px; color: var(--muted); border: 0; background: none; font-size: 10px; }.bottom-nav button.active { color: var(--lavender-dark); font-weight: 800; }.bottom-nav button span { display: block; margin-bottom: 4px; font-size: 16px; }.view-title { display: block; }.view-title .ghost-btn { margin-top: 13px; }.tool-workspace { grid-template-columns: 1fr; }.editor-panel { min-height: auto; }.editor-panel textarea { min-height: 230px; }.result-box { min-height: 240px; }.select-row { grid-template-columns: 1fr; }.speed-control { width: 100%; margin-left: 0; }.typing-screen { min-height: 270px; }.history-item { align-items: flex-start; flex-direction: column; } }

/* Keep the original-text editor visually aligned with the result box. */
.editor-panel > textarea { width: 100%; min-height: 335px; padding: 16px; color: #5f5a6f; border: 1px solid #e4e0ed; border-radius: 11px; background: #fcfbff; line-height: 1.9; }
@media (max-width: 720px) { .editor-panel > textarea { min-height: 230px; } }
 .language-switcher {
  position: fixed;
  top: 22px;
  right: 28px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 7px;
  border: 1px solid rgba(118, 98, 233, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 20px rgba(20, 17, 35, .18);
  color: #8b849d;
  font-size: 14px;
  line-height: 1;
  backdrop-filter: blur(10px);
}
.language-switcher button { min-width: 30px; padding: 6px 8px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.language-switcher button.active { background: #eeeaff; color: #5947d0; }
body:has(.app-view:not(.hidden)) .language-switcher { top: 84px; }
@media (max-width: 640px) { .language-switcher { top: 14px; right: 14px; } body:has(.app-view:not(.hidden)) .language-switcher { top: 70px; } }
 .pricing-icon { position: relative; display: inline-block; width: 19px; height: 13px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 2px; }
.pricing-icon::before { content: ""; position: absolute; top: 3px; left: 1px; right: 1px; height: 2px; background: currentColor; }
.account-icon { position: relative; display: inline-block; width: 19px; height: 19px; box-sizing: border-box; }
.account-icon::before { content: ""; position: absolute; top: 0; left: 5px; width: 9px; height: 9px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; }
.account-icon::after { content: ""; position: absolute; left: 3px; bottom: 1px; width: 13px; height: 9px; box-sizing: border-box; border: 2px solid currentColor; border-bottom: 0; border-radius: 9px 9px 0 0; }
.history-icon { position: relative; display: inline-block; width: 19px; height: 19px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; }
.history-icon::before { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 6px; border-radius: 2px; background: currentColor; transform: translate(-50%, -100%); transform-origin: 50% 100%; }
.history-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 2px; border-radius: 2px; background: currentColor; transform: translateY(-50%) rotate(25deg); transform-origin: 0 50%; }

/* Make the conversation composer the primary writing surface. */
.writer-chat-list { min-height: 150px; max-height: 220px; }
.writer-empty { min-height: 145px; padding: 16px; }
.writer-empty strong { font-size: 15px; }
.writer-empty p { margin-top: 6px; font-size: 12px; }
.writer-quick-actions { gap: 6px; margin-top: 12px; }
.writer-quick-actions .ghost-btn { padding: 7px 11px; border: 1px solid #e5defb; border-radius: 999px; background: #fff; font-size: 11px; }
.writer-quick-actions .ghost-btn.selected { color: var(--lavender-dark); border-color: #d4c6f7; background: var(--lavender-soft); box-shadow: inset 0 0 0 1px rgba(118,98,233,.05); }
.writer-quick-actions .ghost-btn.selected::after { content: "✓"; margin-left: 5px; color: var(--lavender-dark); font-weight: 800; }
.writer-composer { display: flex; flex: 1; flex-direction: column; margin-top: 10px; padding-top: 18px; }
.writer-composer textarea { min-height: 430px; height: 100%; padding: 18px; font-size: 15px; line-height: 1.8; }
.writer-composer-actions { flex: 0 0 auto; margin-top: 12px; }
.writer-settings summary { display: inline-flex; padding: 10px 0; }
@media (max-width: 720px) { .writer-draft-editor { min-height: 430px; } }

/* Match the conversation input to the soft result editor surface. */
.writer-composer textarea { color: #5f5a6f; border: 1px solid #e4e0ed; border-radius: 11px; background: #fcfbff; outline: none; box-shadow: none; }
.writer-composer textarea:focus { border-color: #e4e0ed; background: #fcfbff; box-shadow: 0 0 0 3px #f0edff; }

.writer-workbench .writer-chat-panel { height: min(900px, max(680px, 85dvh)); min-height: 0; }
.writer-workbench .writer-chat-list { display: flex; flex-direction: column; flex: 1; min-height: 180px; max-height: none; overflow-y: auto; }
.writer-workbench .writer-message { flex: 0 0 auto; align-self: flex-start; overflow-wrap: anywhere; }
.writer-workbench .writer-message.user { align-self: flex-end; }
.writer-workbench .writer-quick-actions { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.writer-workbench .writer-composer { flex: 0 0 auto; margin-top: auto; padding-top: 12px; }
.writer-workbench .writer-composer textarea { height: 140px; min-height: 100px; max-height: 220px; width: 100%; box-sizing: border-box; border-radius: 18px; }
.writer-ready-card p { margin: 0 0 12px; }
.writer-plan-card { flex: 0 0 auto; margin: 12px 0; padding: 14px; border: 1px solid #e6def8; border-radius: 16px; background: #fbf9ff; color: var(--ink); }
.writer-plan-card > strong { display: block; margin-bottom: 4px; font-size: 14px; }
.writer-plan-card > p { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.writer-plan-group { margin-top: 10px; }
.writer-plan-group > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.writer-plan-group > div { display: flex; flex-wrap: wrap; gap: 6px; }
.writer-plan-group .ghost-btn { padding: 7px 10px; font-size: 11px; }
.writer-plan-group .ghost-btn.selected { color: var(--lavender-dark); border-color: #c9b9f5; background: #eee8ff; }
.writer-workbench .writer-file-list { max-height: 150px; overflow-y: auto; flex-shrink: 0; }
@media (max-width: 620px) { .writer-workbench .writer-chat-panel { height: 760px; max-height: none; } .writer-quick-actions button { max-width: 100%; white-space: normal; } }

/* Humanizer mode and free-user limit controls. */
.human-upgrade-dialog { position: fixed; inset: 0; width: min(740px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: auto; color: var(--ink); background: #fff; border: 1px solid #e7e0f7; border-radius: 26px; box-shadow: 0 24px 90px rgba(35,25,64,.22); }
.human-upgrade-dialog::backdrop { background: rgba(28,23,44,.46); backdrop-filter: blur(5px); }
.settings-layout { display: grid; gap: 16px; max-width: 920px; }
.settings-section { padding: 24px; }
.settings-section .panel-heading { margin-bottom: 20px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-check { display: flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--ink); font-size: 13px; }
.settings-check input { width: 16px; height: 16px; accent-color: var(--lavender-dark); }
.settings-help { margin: 15px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.settings-account { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
.settings-account > div { display: flex; flex-direction: column; gap: 5px; padding: 14px; background: var(--lavender-soft); border-radius: 12px; }
.settings-account span, .settings-account small { color: var(--muted); font-size: 12px; }
.settings-account b { font-size: 16px; }
.settings-data-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.settings-name-row { display: flex; align-items: center; gap: 8px; }
.settings-name-row input { flex: 1; min-width: 0; }
.settings-name-row .secondary-btn { flex: 0 0 auto; min-height: 42px; }
.settings-section .danger { color: #b14e5a; }
.gift-icon { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
.gift-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.settings-icon { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
.settings-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="dark"] { color-scheme: dark; --paper: #1b1830; --ink: #f5f1ff; --muted: #b7afcd; --line: #39324d; --lavender-soft: #2c2547; }
html[data-theme="dark"] body { background: #12101e; }
html[data-theme="dark"] .panel, html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] textarea { background: #1b1830; color: var(--ink); border-color: var(--line); }
@media (max-width: 640px) { .settings-grid, .settings-account { grid-template-columns: 1fr; } .settings-section { padding: 18px; } }
#smart-workspace textarea { width: 100%; min-height: 280px; box-sizing: border-box; border: 1px solid #e4e0ed; border-radius: 14px; padding: 20px; background: #fcfbff; color: var(--ink); font: inherit; line-height: 1.7; resize: vertical; }
#smart-workspace progress { width: 100%; height: 12px; accent-color: #7562e8; }
#smart-workspace .typing-controls { flex-wrap: wrap; }
#smart-workspace p, #smart-workspace details { line-height: 1.7; overflow-wrap: anywhere; }
#smart-error { color: #ae3654; }
.human-upgrade-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: var(--muted); background: rgba(255,255,255,.7); border: 1px solid #e7e0f7; border-radius: 50%; font-size: 25px; cursor: pointer; }
.human-upgrade-close:hover { color: var(--lavender-dark); background: #fff; }
.human-upgrade-dialog button:focus-visible { outline: 3px solid var(--lavender); outline-offset: 3px; }
.human-upgrade-hero { padding: 36px 42px 28px; text-align: center; background: radial-gradient(ellipse at top left, #e7dfff, transparent 65%), linear-gradient(130deg, #faf8ff, #f4efff); border-bottom: 1px solid #ede7fa; }
.human-upgrade-eyebrow { color: var(--lavender-dark); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.human-upgrade-hero h2 { margin: 16px 0 12px; font-size: clamp(27px, 4vw, 38px); line-height: 1.25; letter-spacing: -.03em; }
.human-upgrade-hero h2 em { color: var(--lavender-dark); font-style: normal; }
.human-upgrade-hero p { max-width: 510px; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.7; }
.human-upgrade-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 26px; margin-top: 24px; }
.human-upgrade-logos img { display: block; height: 24px; width: auto; max-width: 100%; object-fit: contain; }
.human-upgrade-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 21px; }
.human-upgrade-tags span { padding: 6px 11px; color: #6a5c91; background: rgba(255,255,255,.8); border: 1px solid #e6ddf8; border-radius: 999px; font-size: 11px; }
.human-upgrade-body { padding: 28px 34px 24px; }
.human-upgrade-features { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.human-upgrade-features article { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.human-upgrade-check { display: grid; place-items: center; flex: 0 0 26px; height: 26px; color: var(--lavender-dark); background: var(--lavender-soft); border-radius: 9px; font-size: 15px; font-weight: 700; }
.human-upgrade-features h3 { margin: 2px 0 6px; font-size: 14px; line-height: 1.4; }
.human-upgrade-features p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.human-upgrade-plans { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 50px; font-size: 15px; }
.human-upgrade-note { margin: 16px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center; }
@media (max-width: 540px) { .human-upgrade-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 20px; }.human-upgrade-hero { padding: 45px 20px 22px; }.human-upgrade-body { padding: 22px 20px; }.human-upgrade-features { grid-template-columns: 1fr; gap: 18px; margin-bottom: 24px; }.human-upgrade-hero p { font-size: 13px; } }
.humanizer-footer { align-items: center; gap: 12px; }
.humanizer-footer-left, .humanizer-footer-right { display: flex; align-items: center; gap: 8px; }
.humanizer-footer-right { margin-left: auto; }
.human-mode-chip, .human-enhanced-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 35px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.human-mode-chip { color: var(--muted); border: 1px solid var(--line); background: #fff; }
.human-mode-chip span:last-child { font-size: 15px; line-height: 10px; }
.human-enhanced-btn { color: var(--lavender-dark); border: 1px solid #d8c9f5; background: #fffaff; cursor: pointer; }
.human-enhanced-btn:hover { background: var(--lavender-soft); }
.human-enhanced-lock { display: block; width: 15px; height: 17px; overflow: visible; color: currentColor; }
.human-enhanced-lock rect, .human-enhanced-lock path { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.human-limit { min-width: 42px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.human-limit.limit-exceeded { color: #c45151; font-weight: 800; }
@media (max-width: 720px) { .humanizer-footer { align-items: stretch; flex-wrap: wrap; }.humanizer-footer-left, .humanizer-footer-right { width: 100%; }.humanizer-footer-right { justify-content: space-between; margin-left: 0; }.humanizer-footer-right .primary-btn { margin-left: auto; } }

.profile-box[data-view] { cursor: pointer; }
.profile-box[data-view]:focus-visible { outline: 2px solid #7562e8; outline-offset: 2px; }

.history-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }.history-item summary { min-width: 0; cursor: pointer; list-style: none; }.history-item summary::-webkit-details-marker { display: none; }.history-content { grid-column: 1 / -1; padding: 14px; margin-top: 5px; color: var(--muted); border-radius: 10px; background: #fcfbff; }.history-content pre { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; font: inherit; line-height: 1.7; }.history-item > button { white-space: nowrap; }`r`n`r`n@keyframes wenjing-spin { to { transform: rotate(360deg); } }
.subscription-management { max-width: 780px; }.subscription-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line); }.subscription-hero h2 { width: 100%; margin: 0; font-size: 30px; }.subscription-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }.subscription-details div { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fcfbff; }.subscription-details span, .subscription-details b { display: block; }.subscription-details span { color: var(--muted); font-size: 11px; }.subscription-details b { margin-top: 6px; font-size: 14px; }.subscription-notice { padding: 14px; margin: 20px 0; color: #5f548f; border-radius: 12px; background: var(--lavender-soft); line-height: 1.7; font-size: 12px; }.subscription-notice.canceling { color: #8b6827; background: #fff7e5; }.subscription-empty { padding: 25px 0; color: var(--muted); }.subscription-actions { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }.subscription-settings-card .settings-account { margin-top: 4px; }
@media (max-width: 620px) { .subscription-details { grid-template-columns: 1fr; } .subscription-hero h2 { font-size: 25px; } }

#smart-connection { color: var(--muted); font-size: 11px; }
#smart-connection[data-state="checking"] { color: var(--muted); }
#smart-connection[data-state="connected"] { color: var(--green); }
#smart-connection[data-state="version_mismatch"] { color: #9a651c; }
#smart-connection[data-state="disconnected"] { color: #a33d4b; }
#smart-connection-detail { margin: -8px 0 14px; color: var(--muted); font-size: 11px; }
.humanizer-language-note{display:inline-flex;align-items:center;gap:7px;color:var(--muted)}
.humanizer-language-pill{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border:1px solid #ddd7ff;border-radius:999px;background:#f6f3ff;color:#5947d0;font-size:12px;font-weight:700}

/* Unified animated loading indicator for every processing status. */
.status-banner{align-items:center;gap:10px;padding:10px 12px;margin-bottom:12px;color:var(--lavender-dark);border-radius:10px;background:var(--lavender-soft);font-size:12px;line-height:1.5}
.status-banner.visible{display:flex}
.status-banner::before{content:"";width:16px;height:16px;flex:0 0 16px;border:2px solid rgba(118,98,233,.24);border-top-color:var(--lavender-dark);border-right-color:#9b8ff0;border-radius:50%;animation:status-ring-spin .8s linear infinite;box-sizing:border-box}
.status-banner:not(.visible)::before{display:none}
@keyframes status-ring-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.status-banner::before{animation-duration:2.4s}}

.writer-auto-notice{margin:10px 0 0;padding:10px 12px;color:#7652a8;border:1px solid #ded7ff;border-radius:10px;background:#f6f2ff;font-size:12px;line-height:1.6}
.smart-google-panel { margin-top: 18px; }
.smart-google-panel .panel-heading { align-items: flex-start; }
.smart-google-panel .panel-heading h2 { margin-bottom: 5px; }
.smart-google-panel .panel-heading span { display: block; }
.smart-google-controls { display: grid; gap: 14px; margin-top: 15px; }
.smart-google-file-row { display: flex; align-items: end; gap: 10px; }
.smart-google-file-row .field { flex: 1; }
.smart-google-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.smart-google-progress-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.smart-google-panel progress { width: 100%; height: 9px; accent-color: var(--lavender); }
.smart-google-error { min-height: 18px; color: #b64f61; font-size: 12px; line-height: 1.6; }
.smart-google-link { min-height: 18px; font-size: 12px; }
.smart-google-note, .smart-google-recent { color: var(--muted); font-size: 11px; line-height: 1.7; }
.smart-google-recent { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.smart-google-recent strong { color: var(--ink); }
.smart-google-panel .text-action { justify-self: start; margin-top: 8px; }
@media (max-width: 640px) { .smart-google-file-row { align-items: stretch; flex-direction: column; } .smart-google-file-row .ghost-btn { align-self: flex-start; } }