:root { --ink:#171717; --paper:var(--background-color); --line:var(--border-color); --accent:var(--primary-color); }
.story-studio { width:min(1200px,100%); margin:0 auto; padding:32px 20px 64px; }
.studio-heading { display:block; padding:0 0 28px; text-align:center; background:transparent; border-radius:0; box-shadow:none; margin-bottom:0; }
.studio-heading > div { max-width:none; }
.eyebrow { display:block; color:var(--primary-color); font-size:12px; font-weight:800; margin-bottom:8px; }
.studio-heading h1 { margin:0 0 8px; color:var(--text-primary); font-size:2.5rem; line-height:1.2; letter-spacing:0; }
.studio-heading p { max-width:620px; margin:0 auto; color:var(--text-secondary); line-height:1.7; }
.studio-layout { display:grid; grid-template-columns:340px minmax(0,1fr); gap:28px; padding-top:28px; align-items:start; }
.control-panel { border:1px solid var(--border-color); border-radius:var(--border-radius); background:var(--surface-color); box-shadow:var(--shadow-light); overflow:hidden; }
.control-section { padding:22px; border-bottom:1px solid var(--line); }
.control-section:last-child { border-bottom:0; }
.section-title { display:flex; gap:10px; align-items:center; margin-bottom:16px; }
.section-title span { color:var(--primary-color); font:700 11px/1 Arial,sans-serif; }
.section-title h2 { margin:0; font-size:15px; }
.style-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.style-option { appearance:none; border:1px solid var(--border-color); border-radius:8px; background:var(--surface-color); color:var(--text-primary); padding:7px; cursor:pointer; text-align:left; font:inherit; transition:var(--transition); }
.style-option:hover,.style-option.active { border-color:var(--primary-color); box-shadow:inset 0 0 0 1px var(--primary-color); background:rgba(33,150,243,.05); }
.style-option span { display:block; margin-top:7px; font-size:12px; font-weight:700; }
.swatch { display:block; height:42px; }
.swatch-collage { background:linear-gradient(135deg,#ff5b36 0 48%,#1b49d8 48%); }
.swatch-swiss { background:linear-gradient(90deg,#f1eee5 0 68%,#f1402f 68%); }
.swatch-calm { background:linear-gradient(#9ec9ce,#f0b594 60%,#da735e); }
.swatch-neon { background:linear-gradient(135deg,#0b0b16,#7037ff 58%,#d7ff39); }
.swatch-editorial { background:linear-gradient(135deg,#f5eab7 0 52%,#5195b7 52%); }
.swatch-minimal { background:linear-gradient(135deg,#f7f7f4,#dfe7e4); border:1px solid #eee; }
.palette-label { margin-top:18px; }
.palette-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.palette-option { border:1px solid var(--border-color); border-radius:8px; padding:3px; background:var(--surface-color); cursor:pointer; }
.palette-option:hover,.palette-option.active { border-color:var(--primary-color); box-shadow:0 0 0 1px var(--primary-color); }
.palette-option i { display:block; height:26px; border-radius:5px; background:linear-gradient(135deg,var(--p1) 0 48%,var(--p2) 48% 76%,var(--p3) 76%); }
.custom-colors { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.custom-colors label { color:var(--text-secondary); font-size:11px; text-align:center; }
.custom-colors input { display:block; width:100%; height:32px; margin-top:5px; padding:2px; border:1px solid var(--border-color); border-radius:6px; background:white; cursor:pointer; }
.reset-colors { width:100%; margin-top:10px; border:0; background:transparent; color:var(--primary-color); font:600 12px inherit; cursor:pointer; }
.field-label { display:flex; justify-content:space-between; color:#55524c; font-size:12px; margin-bottom:8px; }
.field-label small { font:inherit; }
#custom-message { box-sizing:border-box; width:100%; resize:none; border:1px solid var(--border-color); background:var(--background-color); color:var(--text-primary); padding:12px; font:14px/1.6 inherit; border-radius:8px; }
#custom-message:focus { outline:2px solid var(--primary-color); outline-offset:-2px; }
.refresh-phrase-btn { width:100%; margin-top:9px; padding:9px 12px; border:1px solid var(--primary-color); border-radius:8px; background:transparent; color:var(--primary-color); font:700 12px inherit; cursor:pointer; transition:var(--transition); }
.refresh-phrase-btn:hover { background:var(--primary-color); color:white; }
.mood-row { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-top:12px; }
.mood-option { aspect-ratio:1; border:1px solid var(--border-color); border-radius:8px; background:var(--surface-color); color:var(--text-primary); font-size:18px; cursor:pointer; }
.mood-option:hover,.mood-option.active { background:var(--primary-color); color:white; border-color:var(--primary-color); }
.switch-row { display:flex; min-height:38px; justify-content:space-between; align-items:center; font-size:13px; cursor:pointer; }
.switch-row input { position:absolute; opacity:0; }
.switch-row i { width:34px; height:19px; border-radius:12px; background:#cbc8c1; position:relative; transition:.2s; }
.switch-row i:after { content:""; position:absolute; width:13px; height:13px; top:3px; left:3px; border-radius:50%; background:#fff; transition:.2s; }
.switch-row input:checked+i { background:var(--primary-color); }
.switch-row input:checked+i:after { transform:translateX(15px); }
.preview-workspace { background:var(--surface-color); border:1px solid var(--border-color); border-radius:var(--border-radius); box-shadow:var(--shadow-light); padding:18px; margin-bottom:0; }
.preview-toolbar { display:flex; justify-content:space-between; padding:2px 2px 14px; color:#5e5b55; font-size:12px; font-weight:700; }
.live-dot:before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:#33a56b; margin-right:7px; }
.story-frame { display:flex; align-items:center; justify-content:center; min-height:680px; padding:22px; background:var(--background-color); border:1px solid var(--border-color); border-radius:8px; }
.weather-story { width:360px; height:640px; overflow:hidden; position:relative; box-shadow:0 24px 60px rgba(31,29,25,.18); color:var(--story-ink); background:var(--story-bg); isolation:isolate; }
.story-content { height:100%; box-sizing:border-box; padding:30px 28px 26px; display:flex; flex-direction:column; position:relative; z-index:2; }
.story-top { display:flex; justify-content:space-between; align-items:flex-start; font-size:11px; font-weight:800; text-transform:uppercase; }
.story-location { max-width:210px; }
.story-index { opacity:.7; }
.story-hero { margin-top:76px; }
.weather-symbol { font:400 50px/1 Arial,sans-serif; }
.story-temp { display:flex; align-items:flex-start; margin-top:4px; }
.story-temp strong { font:800 138px/.82 Arial,sans-serif; letter-spacing:-8px; }
.story-temp sup { font:700 25px/1 Arial,sans-serif; margin:7px 0 0 8px; }
.story-condition { margin:12px 0 0; font-size:22px; font-weight:800; }
.story-message { margin:auto 0 20px; max-width:280px; font-size:22px; line-height:1.35; font-weight:700; }
.story-mood { display:inline-block; margin-bottom:14px; font-size:11px; font-weight:800; text-transform:uppercase; }
.weather-metrics { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid currentColor; padding-top:14px; gap:9px; }
.metric { min-width:0; }
.metric span { display:block; font-size:9px; opacity:.68; margin-bottom:4px; }
.metric strong { display:block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.story-brand { display:flex; justify-content:space-between; margin-top:22px; font-size:10px; font-weight:800; }
.theme-collage { --story-bg:#ff5a36; --story-ink:#101010; }
.theme-collage:before { content:""; position:absolute; z-index:0; width:230px; height:760px; right:-112px; top:-55px; background:var(--story-accent,#2450d5); transform:rotate(13deg); }
.theme-collage:after { content:"TODAY"; position:absolute; z-index:1; color:#f7e53e; font:900 82px/1 Arial,sans-serif; transform:rotate(-90deg); right:-112px; top:260px; }
.theme-swiss { --story-bg:#f1eee5; --story-ink:#171717; border-top:20px solid #ed3c2c; }
.theme-swiss .story-content { padding-top:20px; }
.theme-swiss:after { content:""; position:absolute; width:150px; height:150px; border-radius:50%; background:var(--story-accent,#ed3c2c); right:-65px; bottom:110px; }
.theme-calm { --story-bg:#afcdd0; --story-ink:#24302e; }
.theme-calm:before { content:""; position:absolute; inset:52% 0 0; background:#df8b72; border-radius:55% 55% 0 0/22% 22% 0 0; }
.theme-calm:after { content:""; position:absolute; width:120px; height:120px; border-radius:50%; background:#f5d58f; right:25px; top:210px; box-shadow:0 0 45px rgba(245,213,143,.5); }
.theme-neon { --story-bg:#0c0b18; --story-ink:#f6f4ff; }
.theme-neon:before { content:""; position:absolute; width:310px; height:310px; border:2px solid #8b5cff; border-radius:50%; left:80px; top:100px; box-shadow:0 0 55px #6332ef,inset 0 0 55px #6332ef; }
.theme-neon .story-condition,.theme-neon .story-mood { color:#d9ff43; }
.theme-editorial { --story-bg:#f2e8b7; --story-ink:#163943; }
.theme-editorial:before { content:""; position:absolute; left:0; right:0; bottom:0; height:185px; background:#4e91ae; clip-path:polygon(0 22%,18% 5%,38% 26%,57% 2%,76% 19%,100% 0,100% 100%,0 100%); }
.theme-editorial .story-temp strong { font-family:Georgia,serif; font-weight:400; }
.theme-minimal { --story-bg:#f5f6f2; --story-ink:#252b29; }
.theme-minimal:before { content:""; position:absolute; width:270px; height:270px; border-radius:50%; border:1px solid #9ca8a4; left:45px; top:120px; }
.theme-minimal .story-hero { margin-top:105px; }
.weather-story.custom-palette { --story-bg:var(--custom-story-bg); --story-ink:var(--custom-story-ink); --story-accent:var(--custom-story-accent); background:var(--custom-story-bg); color:var(--custom-story-ink); }
.card-placeholder { height:100%; display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; padding:30px; text-align:center; background:#f5f6f2; color:#252b29; }
.loading-spinner { width:26px; height:26px; border:2px solid rgba(0,0,0,.15); border-top-color:currentColor; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.action-buttons { display:grid; grid-template-columns:1fr 1.6fr; gap:10px; margin-top:14px; }
.action-btn { min-height:48px; border:1px solid var(--primary-color); border-radius:8px; padding:0 18px; font:700 14px inherit; cursor:pointer; transition:var(--transition); }
.action-btn.primary { color:white; background:var(--primary-color); }
.action-btn.secondary { color:var(--primary-color); background:var(--surface-color); }
.action-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-medium); }
.loading-overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(244,242,236,.9); z-index:1000; }
.loading-overlay[hidden],.toast[hidden] { display:none; }
.loading-content { text-align:center; }
.loading-content .loading-spinner { margin:0 auto 12px; }
.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:1001; background:var(--ink); color:#fff; padding:12px 18px; display:flex; gap:9px; font-size:13px; }
@media (max-width:900px) { .studio-layout { grid-template-columns:1fr; } .control-panel { position:static; } }
@media (max-width:520px) { .story-studio { width:100%; padding:28px 12px 48px; } .studio-heading h1 { font-size:2rem; } .story-frame { min-height:0; padding:12px; } .weather-story { width:min(100%,360px); height:auto; aspect-ratio:9/16; } .story-content { padding:8% 7% 7%; } .story-hero { margin-top:18%; } .story-temp strong { font-size:clamp(96px,34vw,138px); } .story-message { font-size:18px; } .preview-workspace { padding:10px; } }