*{box-sizing:border-box} :root{font-family:Inter,Segoe UI,system-ui,sans-serif;color:#1c2541;background:#f5f6fa;font-size:14px}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #abc3ec;outline-offset:3px}.sidebar{width:225px;position:fixed;inset:0 auto 0 0;background:#10172c;color:#abb4cf;padding:34px 24px;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;color:white;text-decoration:none;font-weight:700;font-size:18px;margin-bottom:55px}.logo{font-size:32px;color:#bdd0f1}.brand small{font-size:10px;letter-spacing:4px;color:#9ba5c2}.nav{padding:15px 14px;border-radius:12px;margin-bottom:10px;font-size:13px;text-align:left;background:transparent;color:inherit}.active{background:#273143;color:#e3ebf9;border:1px solid #414e64}.sidebottom{margin-top:auto;font-size:12px}.sidebottom p{color:#7e89a6;font-size:11px;line-height:1.6}.dot{display:inline-block;background:#6ed6b6;width:6px;height:6px;border-radius:50%;margin-right:5px}main{margin-left:225px;padding:38px 38px 20px;max-width:1800px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:750;color:#7294ce}h1{font-size:32px;letter-spacing:-1px;margin:8px 0 7px}header p{color:#79839c;margin:0}.badge{background:#e9effa;color:#6380b1;border:1px solid #dae4f5;padding:8px 12px;border-radius:100px;font-size:11px;white-space:nowrap}.small{font-size:10px;padding:5px 8px}.steps{display:flex;gap:32px;border-bottom:1px solid #e1e5ed;padding-bottom:20px;margin-bottom:25px;color:#6f7890;font-size:12px}.steps b{color:#7693c5;margin-right:8px}.workspace{display:grid;grid-template-columns:minmax(195px,.75fr) minmax(320px,1.35fr) minmax(260px,1fr);gap:20px;align-items:start}.panel{background:#fff;border:1px solid #e6e9f1;border-radius:18px;padding:22px;box-shadow:0 6px 25px #26325204}.sectionhead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:22px}.sectionhead h2{font-size:14px;margin:0;font-weight:700}.sectionhead>span:not(.badge){color:#98a0b3;font-size:11px}.drop{display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;gap:12px;padding:34px 12px;border:1px dashed #bdcadf;border-radius:13px;background:linear-gradient(140deg,#f9fbfe,#f7f9fd);cursor:pointer;position:relative}.drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.drop:focus-within{outline:3px solid #abc3ec}.drop strong{font-size:12px}.drop span:not(.uploadicon){font-size:11px;color:#8b90a7}.drop small{color:#a1a6b6;font-size:10px}.uploadicon{font-size:24px;color:#7491c2;width:48px;height:48px;background:white;border-radius:14px;display:grid;place-items:center;border:1px solid #e0e7f4}.drag{border-color:#6591dd;background:#ecf2fb}.imagelist{display:flex;flex-direction:column;gap:8px;margin-top:16px}.imageitem{display:flex;align-items:center;gap:9px;background:#f7f8fb;border-radius:10px;padding:9px;width:100%;color:#596078;text-align:left;border:1px solid transparent}.imageitem.selected{border-color:#a7c0eb;background:#f6f9fd}.imageitem img{width:38px;height:38px;object-fit:cover;border-radius:6px}.imageitem span{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.remove{font-size:17px;background:transparent;color:#8891a7}.tip{margin-top:28px;font-size:11px;line-height:1.7;color:#9098ae}.tip strong{color:#5c6680}.tip p{margin-top:4px}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{display:block;color:#59647d;font-size:11px;font-weight:600;margin-bottom:16px}input,select,textarea{width:100%;margin-top:7px;padding:11px 12px;border:1px solid #e0e4ee;border-radius:9px;outline:none;color:#27324d;background:#fbfcfe;font-size:12px;font-weight:400}input:focus,textarea:focus,select:focus{border-color:#85a3d7;box-shadow:0 0 0 3px #a0b6db1a}textarea{resize:vertical;min-height:73px;line-height:1.6}input::placeholder,textarea::placeholder{color:#a6aec0}.labelnote{display:block;font-size:10px;font-weight:400;color:#949eb3;margin-top:3px}.secondary{padding:11px 14px;background:#eff3fb;border:1px solid #dce6f7;color:#617eb0;border-radius:9px;font-size:11px;width:100%}.helper{font-size:10px;line-height:1.6;color:#969eb1;margin:8px 0 16px}hr{border:0;border-top:1px solid #edf0f5;margin:20px 0}details{border-top:1px solid #edf0f5;padding-top:16px}summary{cursor:pointer;font-size:11px;font-weight:600;color:#68768f;padding-bottom:18px}.textbutton{background:transparent;color:#6883b1;font-size:11px;padding:12px 0}.previewpanel{position:sticky;top:20px}.preview{aspect-ratio:1;background:radial-gradient(ellipse at center,#f7f9fc,#edeff5);border-radius:12px;display:grid;place-items:center;overflow:hidden}.preview img{width:100%;height:100%;object-fit:contain}.placeholder{text-align:center;color:#a0a7bb;font-size:12px;line-height:1.8}.placeholder span{font-size:55px;color:#b8c5da}.stats{font-size:11px;color:#8e98af;line-height:1.8;padding:17px 0}.primary,.resultactions>button:first-child{width:100%;padding:14px;color:white;background:linear-gradient(115deg,#829ecf,#4b6a9f);border-radius:10px;font-size:12px;font-weight:600;box-shadow:0 5px 13px #6382b62b}.seoNote{margin-top:22px;padding:17px;border-radius:10px;background:#f7f8fc;color:#8993a9;font-size:11px;line-height:1.7}.seoNote strong{color:#647089}.seoNote p{margin-bottom:0}.result{background:#f1faf6;border:1px solid #d2e9df;border-radius:12px;padding:14px;margin-bottom:15px}.result h3{font-size:12px;color:#37876b;margin:0}.result p{font-size:11px;color:#668575;line-height:1.7}.resultactions{display:grid;gap:8px}#status{font-size:12px;line-height:1.7;margin-top:12px;color:#5b77a6;overflow-wrap:anywhere}footer{display:flex;justify-content:space-between;color:#a5aec0;font-size:10px;padding:26px 0}dialog{border:1px solid #e1e5ed;border-radius:20px;padding:32px;max-width:520px;color:#4b5670;line-height:1.8;box-shadow:0 20px 80px #0002}dialog::backdrop{background:#10172c80}dialog h2{font-size:21px;color:#27324d}.close{float:right;background:#f1f4f8;border-radius:50%;width:30px;height:30px;font-size:20px}dialog li{padding:6px 0}@media(min-width:1500px){main{padding:44px 55px}.workspace{gap:26px}.panel{padding:26px}}@media(max-width:1150px){.sidebar{width:180px;padding:30px 18px}main{margin-left:180px;padding:28px 22px}.workspace{grid-template-columns:1fr 1.6fr}.previewpanel{grid-column:1/-1;position:static;display:block}.preview{max-height:350px;aspect-ratio:auto;height:300px}.preview img{max-height:300px}.primary{max-width:400px}}@media(max-width:700px){.sidebar{position:static;width:100%;padding:16px 20px;flex-direction:row;align-items:center;gap:15px}.brand{margin:0;font-size:14px}.brand small{font-size:8px}.logo{font-size:25px}.sidebar .active,.sidebottom{display:none}.sidebar button{margin:0;margin-left:auto;padding:10px}main{margin:0;padding:24px 16px}h1{font-size:27px}header .badge{display:none}.steps{gap:12px;font-size:10px}.workspace{display:flex;flex-direction:column}.panel{width:100%;padding:20px}.previewpanel{position:static}.twocol{gap:10px}footer span{display:none}}

.headeractions{display:flex;align-items:center;gap:10px}.themeToggle{border:1px solid #d5deed;background:#fff;color:#5a729c;border-radius:100px;padding:9px 14px;font-size:11px;white-space:nowrap}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark;color:#e6e8f3;background:#0d1120}
[data-theme="dark"] .sidebar{background:#090d18;border-right:1px solid #232a3b;color:#aab5cf}
[data-theme="dark"] .active{background:linear-gradient(115deg,#232e42,#212937);border-color:#3e4d67;color:#ebf1fb}
[data-theme="dark"] .panel{background:linear-gradient(150deg,#191e30,#141a29);border-color:#2c3348;box-shadow:0 10px 30px #0002}
[data-theme="dark"] .steps{border-color:#2b3348;color:#b3bed4}
[data-theme="dark"] .steps b,[data-theme="dark"] .eyebrow{color:#a6bfeb}
[data-theme="dark"] header p{color:#a2aec8}
[data-theme="dark"] .badge{background:#243045;border-color:#37465f;color:#c4d5f2}
[data-theme="dark"] .themeToggle{background:#202939;border-color:#37465f;color:#d5e1f6}
[data-theme="dark"] .sectionhead>span:not(.badge){color:#a3afc7}
[data-theme="dark"] .drop{background:linear-gradient(135deg,#1e2838,#1a2235);border-color:#51627f;color:#d7e2f4}
[data-theme="dark"] .drop span:not(.uploadicon),[data-theme="dark"] .drop small{color:#adb7c9}
[data-theme="dark"] .uploadicon{background:#263144;border-color:#41526f;color:#cfddf4}
[data-theme="dark"] .drag{background:#29374e;border-color:#aac2ec}
[data-theme="dark"] .imageitem{background:#202639;color:#c0cbe0}
[data-theme="dark"] .imageitem.selected{background:#252f41;border-color:#6d85af}
[data-theme="dark"] .remove{color:#b2bdd6}
[data-theme="dark"] label{color:#c4cde1}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:#101727;border-color:#354059;color:#ecedf7}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#95a2be}
[data-theme="dark"] input:focus,[data-theme="dark"] select:focus,[data-theme="dark"] textarea:focus{border-color:#9ab7e9;box-shadow:0 0 0 3px #7794c52b}
[data-theme="dark"] .secondary{background:#242e40;border-color:#425575;color:#d1def5}
[data-theme="dark"] .helper,[data-theme="dark"] .labelnote,[data-theme="dark"] .tip,[data-theme="dark"] .stats{color:#a5b0ca}
[data-theme="dark"] .tip strong,[data-theme="dark"] .seoNote strong{color:#d3dbed}
[data-theme="dark"] hr,[data-theme="dark"] details{border-color:#30384d}
[data-theme="dark"] summary,[data-theme="dark"] .textbutton{color:#a9c2ec}
[data-theme="dark"] .preview{background:radial-gradient(ellipse at center,#212a39,#101625)}
[data-theme="dark"] .placeholder{color:#a7b0ca}
[data-theme="dark"] .placeholder span{color:#778cb0}
[data-theme="dark"] .seoNote{background:#1d2538;color:#b0bdd5}
[data-theme="dark"] .primary,[data-theme="dark"] .resultactions>button:first-child{background:linear-gradient(115deg,#546c96,#374e74);box-shadow:0 6px 20px #0003;color:#fff}
[data-theme="dark"] .result{background:#152f2d;border-color:#2c5c51}
[data-theme="dark"] .result h3{color:#8ae2be}
[data-theme="dark"] .result p{color:#b0d1c5}
[data-theme="dark"] #status{color:#b8ccef}
[data-theme="dark"] footer{color:#95a3bd}
[data-theme="dark"] dialog{background:#192033;border-color:#46506a;color:#c6d0e6}
[data-theme="dark"] dialog h2{color:#eaf0fa}
[data-theme="dark"] .close{background:#2b3546;color:#dde7f8}
@media(max-width:700px){.headeractions{align-self:flex-start}.themeToggle{padding:8px 10px;font-size:10px}header{gap:10px}h1{font-size:25px}}

.keywordbox{border:1px solid #354059;background:#101727;border-radius:9px;padding:8px;margin-top:7px;display:flex;flex-wrap:wrap;gap:6px}.keywordbox input{margin:0;border:0;background:transparent;box-shadow:none;flex:1;min-width:120px;width:auto;padding:6px}.keywordbox:focus-within{outline:2px solid #6493cc}.keywordchip{display:inline-flex;align-items:center;gap:6px;background:#1f3d60;border:1px solid #345a85;border-radius:7px;padding:5px 8px;color:#dfedff;font-size:11px}.keywordchip button{background:transparent;color:inherit;padding:0 3px;font-size:15px}.keywordbox.light{background:#fff}html[data-theme="light"] .keywordbox{background:#fbfcfe;border-color:#d6e0ed}html[data-theme="light"] .keywordchip{background:#eaf2fd;color:#29486c;border-color:#c4d8ef}