body{min-height:100vh;background:var(--color-bg);color:var(--color-text)}
.site-header{position:sticky;top:0;z-index:var(--z-nav);background:color-mix(in srgb,var(--color-bg) 88%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--color-divider)}
.nav-wrap{min-height:52px;display:flex;align-items:center;gap:var(--space-5)}.brand{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text);min-width:max-content}.brand img{width:28px;height:28px;border-radius:var(--radius-full);object-fit:cover}.brand span{display:grid;line-height:var(--lh-tight)}.brand b{font-size:var(--fs-caption)}.brand small{font-size:var(--fs-legal);color:var(--color-text-secondary)}
.main-nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-4)}.main-nav>a,.nav-drop-trigger{font-size:var(--fs-caption);color:var(--color-text)}.main-nav>a:hover,.nav-drop-trigger:hover{color:var(--color-link)}.nav-toggle{display:none;margin-left:auto}
.icon-btn{appearance:none;border:1px solid var(--color-border-light);background:var(--color-bg-alt);color:var(--color-text);width:36px;height:36px;border-radius:var(--radius-full);display:inline-grid;place-items:center;cursor:pointer;font:inherit}.theme-icon{margin-left:var(--space-1)}.theme-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.moon-icon{display:none}html[data-theme="dark"] .sun-icon{display:none}html[data-theme="dark"] .moon-icon{display:block}
.nav-dropdown{position:relative}.nav-drop-trigger{border:0;background:transparent;padding:var(--space-2);cursor:pointer;font-family:var(--font-main)}.nav-drop-menu{position:absolute;top:calc(100% + var(--space-2));left:50%;transform:translateX(-50%) translateY(-4px);width:260px;background:var(--color-bg);border:1px solid var(--color-border-light);border-radius:var(--radius-card-sm);box-shadow:var(--shadow-lg);padding:var(--space-2);opacity:0;visibility:hidden;transition:all var(--duration-fast) var(--ease-standard)}.nav-dropdown:hover .nav-drop-menu,.nav-dropdown.open .nav-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.nav-drop-menu a{display:grid;gap:var(--space-1);padding:var(--space-3);border-radius:var(--radius-card-sm);color:var(--color-text)}.nav-drop-menu a:hover{background:var(--color-bg-alt)}.nav-drop-menu b{font-size:var(--fs-caption)}.nav-drop-menu small{font-size:var(--fs-legal);color:var(--color-text-secondary)}
.hero{padding:var(--space-20) 0 var(--space-16)}.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:var(--space-10);align-items:center}.hero h1{font-size:var(--fs-hero-fluid);max-width:900px}.hero p{font-size:var(--fs-body-lg);color:var(--color-text-secondary);max-width:760px}.hero-actions,.tool-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5)}.hero-media{aspect-ratio:4/3;border-radius:var(--radius-card);overflow:hidden;background:var(--color-bg-alt);border:1px solid var(--color-border-light)}.hero-media img{width:100%;height:100%;object-fit:cover}.hero-placeholder{height:100%;padding:var(--space-8);display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.hero-placeholder::before{content:"";position:absolute;width:55%;aspect-ratio:1;border-radius:var(--radius-full);background:var(--color-link);opacity:.14;right:-8%;top:-18%;filter:blur(6px)}.hero-placeholder b{font-size:var(--fs-h3)}.hero-placeholder span{color:var(--color-text-secondary)}
.eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow);color:var(--color-link);margin-bottom:var(--space-3)}.btn{appearance:none;border:1px solid transparent;background:var(--color-link);color:var(--color-text-onDark);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);font-family:var(--font-main);font-size:var(--fs-caption);font-weight:var(--fw-medium);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);transition:all var(--duration-fast) var(--ease-standard)}.btn:hover{background:var(--color-link-hover);color:var(--color-text-onDark);transform:translateY(-1px)}.btn.secondary{background:var(--color-bg-alt);border-color:var(--color-border-light);color:var(--color-text)}.btn.secondary:hover{background:var(--color-bg-alt-2);color:var(--color-link)}.btn-compact{min-height:38px}.section-head{max-width:780px;margin-bottom:var(--space-6)}.section-head p,.text-secondary{color:var(--color-text-secondary)}
.tool-intro{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-3)}.tool-intro h3{margin-bottom:var(--space-1)}.tool-intro p{margin:0}.tool-shell{background:var(--color-bg-alt);border:1px solid var(--color-border-light);border-radius:var(--radius-card);padding:var(--space-5);box-shadow:var(--shadow-sm)}
.chat-messages{height:390px;overflow:auto;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3)}.bubble{max-width:min(82%,720px);padding:var(--space-3) var(--space-4);border-radius:var(--radius-card);white-space:pre-wrap;word-break:break-word;box-shadow:var(--shadow-sm)}.bubble.ai{align-self:flex-start;background:var(--color-bg);color:var(--color-text);border-bottom-left-radius:6px}.bubble.user{align-self:flex-end;background:var(--color-link);color:var(--color-text-onDark);border-bottom-right-radius:6px}.bubble.loading{color:var(--color-text-secondary)}
.chat-form{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-2);align-items:end;border-top:1px solid var(--color-border-light);padding-top:var(--space-3)}.chat-form textarea{min-height:46px;max-height:150px;resize:vertical}.attach{display:flex;align-items:center;gap:var(--space-1);height:42px;padding:0 var(--space-3);border-radius:var(--radius-pill);background:var(--color-bg);border:1px solid var(--color-border);cursor:pointer;font-size:var(--fs-caption);font-weight:var(--fw-medium)}.attach-plus{font-size:var(--fs-h4);font-weight:var(--fw-regular);line-height:1}.attach-label{font-size:var(--fs-caption)}
.image-preview{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-3) 0}.image-preview .preview-item{position:relative}.image-preview img{width:84px;height:84px;object-fit:cover;border-radius:var(--radius-card-sm);border:1px solid var(--color-border)}.image-preview button{position:absolute;right:var(--space-1);top:var(--space-1);border:0;border-radius:var(--radius-full);background:var(--color-bg);color:var(--color-text);cursor:pointer}
.generator-step{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border-light)}.generator-step:last-of-type{border-bottom:0}.step-number{width:28px;height:28px;border-radius:var(--radius-full);display:grid;place-items:center;background:var(--color-bg);border:1px solid var(--color-border);font-size:var(--fs-caption);font-weight:var(--fw-semibold)}.mode-row{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}.mode-btn{border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);cursor:pointer;font-family:var(--font-main);font-size:var(--fs-caption)}.mode-btn.active{background:var(--color-link);border-color:var(--color-link);color:var(--color-text-onDark)}.generator-step textarea{width:100%;min-height:120px;resize:vertical;margin-top:var(--space-3)}.upload-zone{border:1px dashed var(--color-border);border-radius:var(--radius-card-sm);padding:var(--space-4);display:block;text-align:center;background:var(--color-bg);cursor:pointer;margin-top:var(--space-3);font-size:var(--fs-caption)}.generator-output{margin-top:var(--space-5);padding:var(--space-5);background:var(--color-bg);border:1px solid var(--color-border-light);border-radius:var(--radius-card);white-space:pre-wrap;max-height:700px;overflow:auto}.generator-output:empty{display:none}
.guide-modal[hidden]{display:none}.guide-modal{position:fixed;inset:0;background:color-mix(in srgb,var(--color-bg-dark) 36%,transparent);z-index:var(--z-modal);display:grid;place-items:center;padding:var(--space-4);backdrop-filter:blur(8px)}.guide-card{position:relative;width:min(620px,100%);max-height:85vh;overflow:auto;background:var(--color-bg);border:1px solid var(--color-border-light);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);padding:var(--space-8)}.guide-close{position:absolute;right:var(--space-4);top:var(--space-4);font-size:var(--fs-h4)}.guide-card li{margin-bottom:var(--space-3)}
.cards{display:grid;gap:var(--space-4)}.article-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.related-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.card{min-width:0;background:var(--color-bg-alt);border:1px solid var(--color-border-light);border-radius:var(--radius-card);padding:var(--space-5);display:flex;flex-direction:column}.card h2,.card h3{font-size:var(--fs-h4);line-height:var(--lh-h4)}.card p{color:var(--color-text-secondary);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-meta{font-size:var(--fs-legal);color:var(--color-text-secondary);margin-bottom:var(--space-2)}.read{font-size:var(--fs-caption);font-weight:var(--fw-medium);margin-top:auto}.page-hero{padding:var(--space-12) 0 var(--space-8);background:var(--color-bg-alt)}.filters{display:grid;grid-template-columns:1fr 240px auto;gap:var(--space-3);margin-bottom:var(--space-6)}.pagination{display:flex;gap:var(--space-2);margin-top:var(--space-8);flex-wrap:wrap}.pagination a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);background:var(--color-bg-alt)}.pagination a.active{background:var(--color-link);color:var(--color-text-onDark)}
.article{padding-bottom:var(--space-12)}.article-head{padding-top:var(--space-12);padding-bottom:var(--space-6);max-width:var(--max-width-narrow)}.article-head h1{font-size:var(--fs-h1-fluid)}.lead{font-size:var(--fs-body-lg);color:var(--color-text-secondary)}.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--space-8)}.article-body{max-width:var(--max-width-narrow);min-width:0}.article-body h2{margin-top:var(--space-10)}.article-body h3{margin-top:var(--space-8)}.article-body li{margin-bottom:var(--space-2)}.article-body img,.featured{max-width:100%;height:auto;border-radius:var(--radius-card)}.article-body p,.article-body li{overflow-wrap:anywhere}.sidebox{background:var(--color-bg-alt);padding:var(--space-5);border-radius:var(--radius-card);position:sticky;top:72px}.article-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-8)}.article-tags span{padding:var(--space-2) var(--space-3);background:var(--color-bg-alt);border-radius:var(--radius-pill);font-size:var(--fs-caption)}
.content-block{max-width:var(--max-width-narrow)}.center{text-align:center;margin-top:var(--space-6)}.muted{color:var(--color-text-secondary);font-size:var(--fs-caption)}.empty{padding:var(--space-8);background:var(--color-bg-alt);border-radius:var(--radius-card)}.ad-slot{margin:var(--space-6) auto;overflow:hidden}.site-footer{background:var(--color-bg-alt);border-top:1px solid var(--color-border-light);padding:var(--space-10) 0 var(--space-5)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-8)}.footer-grid div{display:flex;flex-direction:column;gap:var(--space-2)}.footer-grid p,.footer-grid a{font-size:var(--fs-caption);color:var(--color-text-secondary)}.copyright{padding-top:var(--space-5);margin-top:var(--space-5);border-top:1px solid var(--color-border-light);font-size:var(--fs-legal);color:var(--color-text-secondary)}
.contact-form{margin-top:var(--space-8);padding:var(--space-6);background:var(--color-bg-alt);border-radius:var(--radius-card);border:1px solid var(--color-border-light)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.contact-grid label{display:grid;gap:var(--space-2);font-size:var(--fs-caption);font-weight:var(--fw-medium)}.span2{grid-column:1/-1}.hp-field{position:absolute!important;left:-9999px!important;opacity:0!important}.public-notice{padding:var(--space-3) var(--space-4);border-radius:var(--radius-card-sm);margin:var(--space-5) 0}.public-notice.success{background:color-mix(in srgb,var(--color-success) 12%,var(--color-bg));color:var(--color-success)}.public-notice.error{background:color-mix(in srgb,var(--color-error) 12%,var(--color-bg));color:var(--color-error)}
@media(max-width:1180px){.article-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-grid{gap:var(--space-8)}}
@media(max-width:900px){.main-nav{position:fixed;left:var(--container-padding);right:var(--container-padding);top:60px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:var(--space-3);display:none;flex-direction:column;align-items:stretch;box-shadow:var(--shadow-lg)}.main-nav.open{display:flex}.nav-toggle{display:grid}.theme-icon{margin-left:0}.nav-dropdown{width:100%}.nav-drop-trigger{width:100%;display:flex;justify-content:space-between;padding:var(--space-3)}.nav-drop-menu{position:static;transform:none!important;width:100%;box-shadow:none;margin-top:var(--space-1);display:none;opacity:1;visibility:visible;border-color:var(--color-border-light)}.nav-dropdown.open .nav-drop-menu{display:block}.hero-grid,.article-layout{grid-template-columns:1fr}.article-grid,.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebox{position:static}.filters{grid-template-columns:1fr 1fr}.filters .btn{grid-column:1/-1}.footer-grid{grid-template-columns:1fr 1fr}.hero-media{max-height:520px}.article-head{padding-top:var(--space-10)}}
@media(max-width:734px){.hero{padding:var(--space-12) 0}.hero-grid{gap:var(--space-6)}.tool-shell{padding:var(--space-4)}.tool-intro{align-items:flex-start}.chat-messages{height:340px;padding:var(--space-2)}.bubble{max-width:92%;font-size:var(--fs-caption)}.chat-form{grid-template-columns:auto minmax(0,1fr) auto}.attach-label{display:none}.attach{width:42px;padding:0;justify-content:center}.filters,.contact-grid,.footer-grid{grid-template-columns:1fr}.filters .btn,.span2{grid-column:auto}.article-grid,.related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.article-card{padding:var(--space-3);border-radius:var(--radius-card-sm)}.article-card h2,.article-card h3{font-size:clamp(15px,4vw,18px);line-height:1.22}.article-card p{font-size:var(--fs-legal);-webkit-line-clamp:2}.article-card .read{font-size:var(--fs-legal)}.card-meta{font-size:var(--fs-legal)}.page-hero{padding:var(--space-8) 0}.article-head{padding-top:var(--space-8)}.article-body h2{font-size:var(--fs-h3)}.guide-card{padding:var(--space-6)}.generator-step{grid-template-columns:28px minmax(0,1fr)}}
@media(max-width:360px){.article-grid,.related-grid{grid-template-columns:1fr}.chat-form{grid-template-columns:auto 1fr}.chat-form .btn{grid-column:1/-1}.tool-intro{display:grid}}

/* ===== v1.2.1 UI refinements ===== */
.nav-drop-trigger{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);line-height:1;padding:var(--space-2) var(--space-1)}
.nav-chevron{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--duration-fast) var(--ease-standard)}
.nav-dropdown.open .nav-chevron{transform:rotate(180deg)}
.menu-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.chat-form{display:block;border-top:1px solid var(--color-border-light);padding-top:var(--space-3)}
.chat-composer{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:end;gap:var(--space-1);padding:4px;border:1px solid var(--color-border);border-radius:28px;background:var(--color-bg);transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}
.chat-composer:focus-within{border-color:var(--color-link);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-link) 14%,transparent)}
.chat-composer textarea{border:0!important;box-shadow:none!important;background:transparent!important;min-height:38px;max-height:150px;resize:none;padding:9px 8px;line-height:1.35;width:100%}
.chat-composer textarea:focus{border:0!important;box-shadow:none!important}
.composer-icon{appearance:none;width:34px;height:34px;border:0;border-radius:var(--radius-full);display:grid;place-items:center;align-self:end;cursor:pointer;font-family:var(--font-main);transition:transform var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}
.composer-icon:active{transform:scale(.94)}
.attach.composer-icon{padding:0;background:var(--color-bg-alt);color:var(--color-text);font-size:22px;font-weight:var(--fw-regular)}
.attach-plus{font-size:22px;line-height:1;transform:translateY(-1px)}
.send-arrow{background:var(--color-link);color:var(--color-text-onDark)}
.send-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bubble.ai{background:var(--color-bg);border:1px solid var(--color-border-light)}

/* Desktop/tablet navigation stays inline; hamburger is mobile-only. */
@media (min-width:721px){
 .nav-toggle{display:none!important}
 .main-nav{position:static!important;inset:auto!important;margin-left:auto!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:var(--space-4)!important;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important}
 .nav-dropdown{position:relative!important;width:auto!important;display:block!important}
 .nav-drop-trigger{display:inline-flex!important;width:auto!important;justify-content:center!important;padding:var(--space-2) var(--space-1)!important}
 .nav-drop-menu{position:absolute!important;top:calc(100% + var(--space-2))!important;left:50%!important;transform:translateX(-50%) translateY(-4px)!important;width:260px!important;display:block!important;opacity:0!important;visibility:hidden!important;background:var(--color-bg)!important;border:1px solid var(--color-border-light)!important;border-radius:var(--radius-card-sm)!important;box-shadow:var(--shadow-lg)!important;padding:var(--space-2)!important}
 .nav-dropdown:hover .nav-drop-menu,.nav-dropdown.open .nav-drop-menu{opacity:1!important;visibility:visible!important;transform:translateX(-50%) translateY(0)!important}
}
@media (max-width:720px){
 .nav-toggle{display:grid!important}
 .main-nav{position:fixed!important;left:var(--container-padding)!important;right:var(--container-padding)!important;top:60px!important;display:none!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;background:var(--color-bg)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius-card)!important;padding:var(--space-2)!important;box-shadow:var(--shadow-lg)!important;max-height:calc(100dvh - 76px);overflow:auto}
 .main-nav.open{display:flex!important}
 .main-nav>a{display:block;padding:var(--space-3);border-radius:var(--radius-card-sm)}
 .main-nav>a:hover{background:var(--color-bg-alt)}
 .nav-dropdown{display:contents!important}
 .nav-drop-trigger{display:none!important}
 .nav-drop-menu{display:contents!important;position:static!important;width:auto!important;opacity:1!important;visibility:visible!important;transform:none!important;border:0!important;box-shadow:none!important;padding:0!important;background:transparent!important}
 .nav-drop-menu a{display:block!important;padding:var(--space-3)!important;border-radius:var(--radius-card-sm)!important;color:var(--color-text)!important}
 .nav-drop-menu a:hover{background:var(--color-bg-alt)!important}
 .nav-drop-menu b{font-size:var(--fs-caption)!important;font-weight:var(--fw-regular)!important}
 .nav-drop-menu small{display:none!important}
 .theme-icon{margin:var(--space-1) 0 0 var(--space-2)!important}
 .chat-composer{grid-template-columns:34px minmax(0,1fr) 34px;border-radius:24px}
 .composer-icon{width:32px;height:32px}
}


/* ===== v1.2.2 header + chat composer polish ===== */
.header-theme{margin-left:var(--space-2);flex:0 0 auto}
.chat-composer{align-items:center;min-height:48px;padding:5px 6px}
.chat-composer textarea{align-self:center;min-height:38px;height:38px;padding:9px 8px;line-height:20px;overflow-y:auto}
.composer-icon{align-self:center!important;display:grid!important;place-items:center!important}
.attach.composer-icon,.send-arrow{margin:0!important}
.send-arrow svg{width:17px;height:17px}
@media(min-width:721px){.main-nav{margin-left:auto}.header-theme{order:3}.nav-toggle{display:none!important}}
@media(max-width:720px){
 .nav-wrap{gap:var(--space-2)}
 .brand{margin-right:auto}
 .header-theme{order:2;margin-left:0}
 .nav-toggle{order:3;margin-left:0!important;display:grid!important}
 .main-nav{order:4}
 .chat-composer{grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;padding:5px}
 .chat-composer textarea{min-height:36px;height:36px;padding:8px 6px;line-height:20px}
 .composer-icon{width:32px;height:32px;align-self:center!important}
}