/* IG GRID designer — Midnight studio. Interface colors are separate from artwork. */
:root{color-scheme:dark;--accent:#cde8ee;--accent-dark:#e5f6f8;--accent-soft:#293c49;--ink:#e8edf3;--muted:#9aa7b7;--line:#2b3645;--surface:#1d2935;--workspace:#101625;--danger:#f1a3a8}
body{padding:16px;background:linear-gradient(115deg,#7590ab 0%,#9fc9d5 55%,#b1e8e7 100%);height:100dvh;overflow:hidden}
button,input,select,textarea{transition:background-color .16s,border-color .16s,color .16s}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #b8e2ed;outline-offset:3px}
input,textarea,select{background:#16202d;border-color:#354353;color:var(--ink);border-radius:6px}input::placeholder,textarea::placeholder{color:#8190a3}input[type=checkbox],input[type=range]{accent-color:#b6d9e4}input[type=color]{background:#16202d;border-color:#3a4655;color-scheme:dark}
.topbar{height:68px;border-radius:18px 18px 0 0;background:#111827;border-color:#283444;padding:0 22px;gap:28px}.brand{font-size:17px;letter-spacing:-.5px;font-weight:650}.brand em{color:#a7b4c2;font-weight:400}.brand-mark{background:transparent;border:1px solid #526474;color:#d4eef1;width:34px;height:34px;border-radius:8px;font-size:23px}.brand-mark svg{width:21px;height:21px;stroke-width:1.3}.project-meta{border-color:#34404f}.project-meta input{color:#dbe4ec;font-size:13px;font-weight:500}.project-meta span{font-size:11px;color:#8e9baa}.top-actions{gap:7px}.divider{background:#2d3949}.top-actions .icon-button{color:#9cacbc}
.app-shell{height:calc(100dvh - 100px);min-height:0;border-radius:0 0 18px 18px;overflow:hidden;box-shadow:0 24px 64px #12213030}.rail{background:#1b2733;border-color:#2e3946;padding-top:18px}.rail-button{color:#a2afbd;border-radius:6px;font-size:11px;gap:8px}.rail-button:hover{background:#273440;color:#eef4f8}.rail-button.active{background:#34414f;color:#e5f3f5;box-shadow:inset 2px 0 #c4e2eb}.rail-button svg{width:21px;height:21px;stroke-width:1.5}.library-panel,.inspector{background:#1d2935;border-color:#303c4a}.library-panel{padding-top:23px}.inspector{padding-top:23px}.panel-title{font-size:16px;font-weight:600;letter-spacing:-.25px;color:#edf2f7}.panel-subtitle{color:#9eabba;font-size:13px;line-height:1.6;margin-bottom:20px}.section-label{color:#aab7c6;font-size:11px;letter-spacing:1px}.section-label span{color:#8c9bac}.mini-note{color:#99a8b8}.tip-card{background:#182330;border-color:#344151;color:#9dabb9;border-radius:7px}.tip-card strong{color:#d1dee8;font-weight:500}
.button{background:#263341;color:#dce6ee;border-color:#3b4959;border-radius:6px;font-weight:500}.button:hover{background:#344352;border-color:#667b8d}.button.primary{background:#d0e8ed;color:#172330;border-color:#d0e8ed;font-weight:600}.button.primary:hover{background:#e3f4f6;border-color:#e3f4f6}.button.soft{background:#304551;border-color:#3b5663;color:#dcf0f3}.button.soft:hover{background:#3a535f;border-color:#638391}.icon-button{color:#b5c2d0;border-radius:6px}.icon-button:hover{background:#30424f;color:#edf7f9}.text-button{color:#c6e3eb}.text-button:hover{color:#fff}.danger{color:var(--danger)}
.upload-zone{background:#18232f;border:1px dashed #536675;color:#d0e5ec;border-radius:7px;min-height:115px}.upload-zone:hover,.upload-zone.drag-over{background:#293d4b;border-color:#b7dbe4}.upload-zone strong{font-weight:500}.upload-zone span{color:#91a1b2}.upload-zone svg{stroke-width:1.5}.media-card{background:#101824;border-radius:5px;border:1px solid #465160}.media-card:hover{box-shadow:0 0 0 1px #c5e7ee}.media-card .media-add{background:#d5eaf0;color:#203140}.tip-card{margin-top:22px}
.workspace{background:#101625}.workspace-heading{padding-top:22px;padding-bottom:20px}.eyebrow{font-size:10px;letter-spacing:1.6px;color:#8293a6}.workspace-heading h1{font-size:21px;font-weight:550;color:#e8eef5;letter-spacing:-.5px;margin-top:7px}.local-badge{color:#96aabb}.canvas-toolbar{border-bottom:1px solid #293446;margin-bottom:8px}.segmented{background:#17212f;border:1px solid #2e3a4b;border-radius:7px;padding:3px}.segmented button{color:#9caebe;border-radius:4px}.segmented button.active{background:#344351;color:#e7f2f5;box-shadow:none}.toolbar-right{color:#a1b3c4}.ratio-select select{color:#b9c8d5;background:transparent}.ratio-select select option{background:#1b2836;color:#e4edf4}.canvas-scroll{background-color:#101625;background-image:none;padding-top:8px}.board-label{color:#8fa3b5;font-size:10px;letter-spacing:1.2px}.board-label span:last-child{color:#a3b4c3}.feed{color:#25252c;color-scheme:light;border-color:#4a5765;border-radius:9px 9px 3px 3px;box-shadow:0 10px 35px #0004}.feed .highlight.selected canvas{border-color:#698896}.feed .feed-tabs{border-color:#e9e8ee}.feed .profile-more{color:#8d879b}.feed .highlight-add{color:#748592;border-color:#b4c0c7}.tile.selected{outline:2px solid #d0f1fb;outline-offset:-2px}.tile:hover{outline:2px solid #9fc7d7;outline-offset:-2px}.tile .tile-check{background:#cce6ee;color:#1b2d3b;box-shadow:0 1px 4px #0004;border-radius:4px}.tile.drag-over,.highlight.drag-over{outline-color:#c6eaf3}.add-row{background:#172130;border:1px dashed #435263;color:#c9dde6;border-radius:5px;margin-top:12px}.add-row span{color:#8b9cae}.add-row:hover{background:#263847;border-color:#7a9bab}.canvas-hint{color:#8e9fb1}.workspace-footer{background:#141e2c;border-color:#2b3748;color:#93a6b8}.workspace-footer #selection-status{color:#b4c7d5}.keyboard-key{border-color:#465669;color:#bfd0dc}
.inspector-section{border-color:#34414f}.inspector-section h3{color:#dce7ef;font-weight:500}.pill{background:#31424f;color:#cae3eb;border:1px solid #435a69;font-size:10px;border-radius:4px}.selection-pills button{border-color:#435260;color:#afbfcc;border-radius:5px;background:#23313e}.selection-pills button:hover{background:#344755}.selection-pills button.active{background:#405969;border-color:#a1c7d5;color:#f0f7fa}.field>span,.control-row label,.toggle-row{color:#aebdcb}.field small{color:#91a5b6}.color-row input[type=text]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#c7d6e2}.swatch{border-color:#263440;outline-color:#667280}.swatch:hover{outline-color:#d1edf4}.layer-row{background:#182430;border-color:#344352;color:#c5d2de;border-radius:5px}.layer-row.active{background:#304451;border-color:#7497a8;color:#edf7fa}.empty-selection{color:#a0b2c4}.empty-selection svg{color:#a4c5d5}.empty-thumb{color:#91a9bb}.layer-row .icon-button:hover{background:#4a3740;color:#f1bdc1}
.text-preset{background:#192531;border-color:#3b4958;color:#e1eaf2;border-radius:7px}.text-preset:hover{border-color:#a9cbd8}.shape-options button{background:#182431;border-color:#3a4858;color:#b4cfdd;border-radius:6px}.shape-options button:hover{background:#2c414f;border-color:#aacdda}.palette-card{background:#192532;border-color:#394858;border-radius:6px}.palette-card p{color:#d6e1ea}.palette-strip{border:1px solid #4a5867}.toast{background:#d4e9ed;color:#15232f;border:1px solid #f2fcff;box-shadow:0 8px 30px #0005;border-radius:7px}
dialog{background:#182330;color:#e6eef5;border-color:#435464;border-radius:14px;box-shadow:0 30px 110px #0009}dialog::backdrop{background:#070e19bb;backdrop-filter:blur(6px)}.modal-header{background:#15202e;border-color:#364656}.modal-header h2{font-weight:550}.modal-header p,.modal-body p{color:#a5b5c5}.modal-footer{background:#15202e;border-color:#364656}.editor-tools{background:#1d2b39;border-color:#3a4959}.editor-tools .hint{color:#a3b6c8}.editor-stage{background-color:#101824;background-image:radial-gradient(#344555 .65px,transparent .65px);background-size:16px 16px}.editor-canvas-wrap{box-shadow:0 12px 44px #0006}.editor-settings{background:#1c2936;border-color:#3c4b5c}.editor-settings h3{color:#dce8f1}.editor-settings h3 small{color:#95aabb!important}.editor-selection{border-color:#c4eaff!important}.editor-selection:before{background:#122333;border-color:#c4eaff}.editor-selection #resize-handle{background:#142536;border-color:#c4eaff}.export-option{background:#213140;border-color:#3c4d5d;color:#e1ecf3;border-radius:7px}.export-option:hover{background:#2c4453;border-color:#7d9cac}.export-option>svg{color:#bedde8}.export-option small{color:#acbdcc}.progress-line{color:#c7e6ee}.help-grid strong{color:#dce9f2}.help-grid span{color:#a4b5c7}.preview-shell{background:#101824}.preview-phone{background:#fff;color:#25252c;border-color:#394b5c;box-shadow:0 18px 40px #0006}.preview-phone .feed{box-shadow:none}.preview-phone .phone-top,.preview-phone .preview-bottom{background:#fff;color:#25252c}.error-banner{background:#422933;color:#ffc7cb}
*{scrollbar-width:thin;scrollbar-color:#4b5b6b transparent}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-thumb{background:#4b5b6b;border-radius:8px}::-webkit-scrollbar-track{background:transparent}::selection{background:#456372;color:#f0faff}
@media(min-width:1650px){body{padding:22px}.app-shell{height:calc(100dvh - 112px)}.topbar{border-radius:22px 22px 0 0}.app-shell{border-radius:0 0 22px 22px}}
@media(max-width:1020px){.inspector{background:#1d2935;border-color:#4c5d6e;box-shadow:0 18px 70px #0008;top:96px;bottom:66px}.project-meta{padding-left:14px}.workspace-heading h1{font-size:20px}}
@media(max-width:700px){body{padding:0;background:#101625}.topbar{height:64px;border-radius:0;padding:0 12px;gap:12px}.app-shell{height:calc(100dvh - 64px);border-radius:0;box-shadow:none}.brand-mark{width:30px;height:30px}.rail{padding:10px 3px}.rail-button{font-size:10px}.library-panel{background:#1d2935;border-color:#415063;box-shadow:14px 0 36px #0006;top:64px;bottom:0}.inspector{top:75px;bottom:52px;right:8px}.workspace-heading h1{font-size:18px}.workspace-heading{padding:18px 15px 14px}.canvas-toolbar{margin:0 12px}.editor-settings{border-color:#3c4b5c}.top-actions .button{padding:8px 11px}.canvas-scroll{padding-top:4px}.post-badges svg{width:19px;height:19px}}
@media(prefers-reduced-motion:reduce){button,input,select,textarea{transition:none}}