:root{--paper:#f7f8f4;--white:#fff;--ink:#233c35;--muted:#6f7e76;--line:#e3e8df;--green:#173e36;--lime:#e8efb0;--coral:#e78164;--soft:#edf2e9;--amber:#936129;--radius:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;font-size:14px;line-height:1.5}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.48;cursor:not-allowed}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #b98531;outline-offset:4px}input:focus,textarea:focus,select:focus{outline:2px solid #769988;outline-offset:1px}button{border:0}svg{width:20px;height:20px;flex-shrink:0;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.skip{position:fixed;top:-100px;left:20px;background:white;z-index:20;padding:12px}.skip:focus{top:8px}.loading{padding:50px}
.shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:var(--green);color:#e7ede8;padding:32px 22px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:29px;letter-spacing:-1.3px;margin-bottom:45px}.brand-mark{display:grid;place-items:center;background:var(--lime);width:34px;height:34px;border-radius:11px;color:var(--green);font-family:Georgia,serif;font-size:32px;line-height:1;padding-bottom:8px}.brand small{font-family:inherit;letter-spacing:1.3px;font-size:9px;color:#a6beb2;display:block;margin-top:-5px}.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:1.7px;color:#a0b8aa;margin-bottom:12px}.nav{display:flex;flex-direction:column;gap:5px}.nav button{display:flex;align-items:center;gap:12px;color:#c4d3ca;background:transparent;text-align:left;border-radius:8px;padding:12px;font-size:13px;white-space:nowrap}.nav button.active{background:#31534a;color:white}.nav button:hover{background:#294d43}.nav .number{margin-left:auto;background:#547066;padding:1px 7px;border-radius:5px;font-size:11px}.sidebar-foot{margin-top:auto}.side-note{border:1px solid #486356;border-radius:12px;padding:16px;margin-bottom:24px;font-size:12px;color:#b6c9bf}.side-note svg{color:var(--lime);margin-bottom:8px}.side-note strong{display:block;color:#e6ebdf;font-size:13px;margin-bottom:5px}.side-note p{margin:0 0 12px}.side-note button{padding:0;background:transparent;color:var(--lime);font-weight:600}.profile{display:flex;gap:10px;align-items:center;font-size:12px}.avatar{width:33px;height:33px;border-radius:50%;background:#c3d0b9;color:#24463c;display:grid;place-items:center;font-family:Georgia,serif;font-size:19px}.profile small{display:block;color:#a6beb2;font-size:10px}
.workspace{min-width:0}.topbar{min-height:50px;padding:7px 26px;gap:14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:#fafbf8;position:sticky;top:0;z-index:20}.topbar h1{font-size:15px;font-weight:600;color:var(--ink);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crumb{min-width:0}.crumb svg{flex-shrink:0}.top-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.crumb{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:12px}.crumb strong{font-weight:500;color:var(--ink)}.top-actions{display:flex;gap:14px;align-items:center;font-size:11px;color:var(--muted)}.dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:#78a37b;margin-right:6px}.icon-btn{display:inline-flex;align-items:center;justify-content:center;background:white;border:1px solid var(--line);border-radius:9px;padding:8px;color:var(--ink)}main{max-width:1540px;margin:0 auto;padding:35px 38px 45px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:1.9px;font-weight:600;color:var(--muted);margin-bottom:8px}h1{font-size:32px;font-weight:550;line-height:1.2;letter-spacing:-1.2px;margin:0 0 9px}h2{font-size:19px;letter-spacing:-.4px;font-weight:600;margin:0}h3{font-size:14px;margin:0;font-weight:600}p{margin:0}.page-head p{color:var(--muted);font-size:13px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:10px 14px;background:white;text-decoration:none;font-size:12px;font-weight:600;white-space:nowrap;color:var(--ink);min-height:38px}.btn:hover{background:var(--soft)}.btn.primary{background:var(--green);color:white;border-color:var(--green)}.btn.primary:hover{background:#2d5849}.btn.coral{background:var(--coral);border-color:var(--coral);color:#253b30}.btn.small{padding:7px 10px;min-height:32px;font-size:11px}.btn svg{width:16px;height:16px}.text-btn{background:transparent;color:var(--green);padding:3px;font-size:12px;font-weight:600}.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero{border:1px solid #dce4cf;border-radius:var(--radius);background:#eef2e5;display:flex;align-items:center;justify-content:space-between;padding:23px 26px;gap:22px;margin-bottom:24px;position:relative;overflow:hidden}.hero-copy{max-width:590px;z-index:1}.hero h2{font-size:21px;margin-bottom:7px}.hero p{font-size:12px;line-height:1.75;color:#61705f;max-width:480px}.hero .steps{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:10px;font-weight:600;color:#64705a}.steps b{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:#d9e3c7;border-radius:50%;margin-right:3px;font-size:9px}.hero-art{width:205px;height:110px;position:relative;flex-shrink:0}.art-card{position:absolute;width:62px;height:86px;border:4px solid white;border-radius:8px;box-shadow:0 6px 15px #2a4f3220;display:grid;place-items:center;top:10px}.art-card.a{left:8px;background:#c7d1b8;transform:rotate(-15deg)}.art-card.b{left:65px;background:#e1ac87;transform:rotate(8deg);top:3px}.art-card.c{left:120px;background:var(--green);transform:rotate(17deg);color:var(--lime)}.art-card svg{width:29px;height:29px}.art-badge{position:absolute;bottom:0;left:56px;background:white;border-radius:6px;padding:5px 10px;font-size:10px;box-shadow:0 2px 10px #31533214}.art-badge svg{width:13px;height:13px;color:#4a7554;margin-right:4px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}.stats.stats-4{grid-template-columns:repeat(4,1fr)}@media(max-width:1000px){.stats.stats-4{grid-template-columns:repeat(2,1fr)}}.stat{background:white;border:1px solid var(--line);border-radius:12px;padding:17px 19px;display:flex;justify-content:space-between;align-items:center}.stat-title{font-size:11px;color:var(--muted);margin-bottom:4px}.stat strong{font-size:26px;font-weight:500;letter-spacing:-.7px}.stat small{font-size:10px;color:var(--muted);margin-left:8px}.stat-icon{width:38px;height:38px;display:grid;place-items:center;background:#eef3ea;color:#597354;border-radius:10px}.stat:nth-child(2) .stat-icon{background:#faf0e4;color:#ac7c4a}.stat:nth-child(3) .stat-icon{background:#ecf1ef;color:#53786c}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}.content-grid:not(.workspace-expanded)>.detail,.collection-grid:not(.workspace-expanded)>.collection-detail{display:none}.workspace-expanded>.detail{position:static}.panel{background:white;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.panel-head{padding:19px 21px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-head h2{font-size:15px}.panel-head p{font-size:11px;color:var(--muted);margin-top:3px}.pill{font-size:10px;font-weight:600;padding:4px 8px;display:inline-flex;align-items:center;gap:5px;border-radius:5px;background:#edf2e9;color:#657b50;white-space:nowrap}.pill.amber{background:#fcf0e0;color:#96682e}.pill.gray{background:#f0f2ef;color:#768078}.pill svg{width:12px;height:12px}.tools{padding:14px 18px 0}.tools-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tools-row .search{flex:1;min-width:170px}.sort{display:flex;align-items:center;gap:7px;margin:0;font-size:11px;font-weight:600;color:var(--muted);flex-shrink:0}.sort select{width:auto;padding:9px 10px;font-size:11px;background:#f9faf7}@media(max-width:520px){.sort{width:100%}.sort select{flex:1}}.search{position:relative}.search svg{position:absolute;left:11px;top:10px;color:#869084;width:16px;height:16px}.search input{padding-left:35px!important;background:#f9faf7!important}.tabs{display:flex;gap:16px;border-bottom:1px solid var(--line);padding:0 18px;margin-top:7px;overflow:auto}.tabs button{padding:12px 0;background:transparent;color:var(--muted);white-space:nowrap;font-size:11px;border-bottom:2px solid transparent}.tabs button.active{border-color:var(--green);color:var(--green);font-weight:600}.video-list{padding:6px 0}.video-row{width:100%;display:flex;align-items:center;gap:13px;border-left:3px solid transparent;text-align:left;background:white;padding:16px 52px 16px 18px;position:relative}.video-row-wrap{position:relative}.video-row-wrap+.video-row-wrap .video-row{border-top:1px solid #f0f2ec}.video-row-wrap.aside .video-row{background:#fbfbf7}.video-row-wrap.aside .row-title{color:#7c8579}.row-aside{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:transparent;color:#a9b4a7;opacity:0;transition:opacity .12s}.video-row-wrap:hover .row-aside,.row-aside:focus-visible,.row-aside.on{opacity:1}.row-aside:hover{background:#e8eede;color:var(--green)}.row-aside.on{color:#96682e;background:#fcf0e0}.row-aside svg{width:16px;height:16px}.toolbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.aside-btn.on{background:#fcf0e0;border-color:#eed9b6;color:#96682e}@media(hover:none){.row-aside{opacity:1}}.video-row.selected{background:#f4f7ef;border-left-color:#63805a}.video-row:hover{background:#f7f9f3}.video-row .arrow{margin-left:auto;color:#9baa9b;width:16px}.thumb{width:53px;height:65px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#e5e8db;color:#60735d}.thumb:before{content:'';position:absolute;width:70px;height:70px;border:1px solid #fff7;border-radius:50%;left:-20px;bottom:-20px}.thumb .play{position:absolute;right:4px;bottom:4px;width:15px;height:15px;background:#fff9;border-radius:50%;padding:3px;fill:currentColor}.thumb.t1{background:#eed6c4;color:#9a7156}.thumb.t2{background:#dce6de;color:#496a5b}.thumb.t3{background:#ece4c9;color:#8c7b46}.thumb.t4{background:#dedee9;color:#767395}.row-copy{min-width:0;flex:1}.row-title{font-size:12px;font-weight:600;line-height:1.45;margin-bottom:4px;display:block}.filename{display:block;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}.row-meta{display:flex;align-items:center;gap:7px;margin-top:7px;flex-wrap:wrap;font-size:10px;color:var(--muted)}.list-foot{padding:12px 20px;color:var(--muted);font-size:10px;background:#fcfdfb;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.list-foot{gap:10px;flex-wrap:wrap}.scan-status{display:inline-flex;align-items:center;gap:5px}.scan-status svg{width:12px;height:12px}.scan-status.stale{color:#96682e;font-weight:600}.detail{position:sticky;top:22px}.detail .panel-head{padding:17px 18px}.detail-body{padding:18px}.detail-title{margin-bottom:16px}.detail-title h3{font-size:15px;margin:8px 0 4px;line-height:1.4}.detail-title p{font-size:11px;color:var(--muted)}.step-label{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;display:flex;gap:7px;align-items:center;margin:18px 0 9px}.step-label .circle{width:17px;height:17px;border:1px solid #ccd7c8;border-radius:50%;display:grid;place-items:center;font-size:9px;letter-spacing:0}.hint{font-size:11px;line-height:1.65;color:var(--muted);margin-top:7px}.muted{color:var(--muted)}input[type=text],input[type=url],input[type=email],input[type=password],input[type=search],textarea,select{width:100%;border:1px solid #dce3d8;border-radius:7px;padding:10px 11px;background:white;color:var(--ink);font-size:12px;min-width:0}textarea{resize:vertical;min-height:110px;line-height:1.7}label{display:block;font-size:11px;font-weight:600;margin:13px 0 5px}input[type=checkbox]{accent-color:var(--green)}.candidate{border:1px solid var(--line);border-radius:9px;margin-top:9px;padding:12px;background:#fcfdf9}.candidate .candidate-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}.merchant{font-size:10px;font-weight:700;display:inline-flex;align-items:center;gap:6px}.merchant b{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:#eee5e1;color:#b16557;font-size:12px}.merchant.amazon b{background:#fbedd5;color:#9a6c26}.candidate h4{font-size:12px;font-weight:600;margin:0 0 5px}.candidate .meta{font-size:10px;color:var(--muted);margin-bottom:10px}.candidate.confirmed{background:#f0f5ea;border-color:#d6e1c9}.candidate.catalog-hit{background:#fbfdf7;border-color:#d9e3cd}.catalog-row{display:flex;gap:11px;align-items:flex-start}.catalog-row>div{min-width:0}.catalog-thumb{width:54px;height:54px;object-fit:contain;border-radius:7px;background:white;border:1px solid var(--line);flex-shrink:0}.row-thumb{width:100%;height:100%;object-fit:cover;border-radius:7px;display:block}.post-list .video-row{border-left-width:3px}.price-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;margin:4px 0 2px}.price-line b{font-size:14px}.price-line s{color:var(--muted)}.price-label{font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:600}.candidate .actions{justify-content:space-between}.candidate a{font-size:11px}.divider{height:1px;background:var(--line);margin:17px 0}.detail-footer{padding:16px 18px;background:#fafbf7;border-top:1px solid var(--line)}.detail-footer .btn{width:100%}.note{font-size:11px;color:#74613e;background:#faf4e8;padding:10px 12px;border-radius:7px;line-height:1.7;margin-top:10px}.dup-list{padding:14px 18px 18px;display:flex;flex-direction:column;gap:14px}.dup-group{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fcfdf9}.dup-head{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line);background:white;font-size:11px}.dup-head strong{font-weight:600;color:var(--muted)}.dup-member{width:100%;display:flex;align-items:center;gap:11px;text-align:left;padding:12px 14px;background:transparent;border-bottom:1px solid #f0f2ec}.dup-member:hover{background:#f4f7ef}.dup-member.keep{background:#f0f5ea}.dup-mark{width:19px;height:19px;flex-shrink:0;border:1px solid #ccd7c8;border-radius:50%;display:grid;place-items:center;background:white;color:var(--green)}.dup-member.keep .dup-mark{border-color:var(--green);background:var(--green);color:white}.dup-mark svg{width:12px;height:12px}.dup-copy{flex:1;min-width:0}.dup-copy strong{display:block;font-size:12px;font-weight:600;line-height:1.45}.dup-copy small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.dup-tag{font-size:10px;color:var(--muted);white-space:nowrap;flex-shrink:0}.dup-member.keep .dup-tag{color:var(--green);font-weight:600}.dup-actions{padding:12px 14px;gap:8px;flex-wrap:wrap}@media(max-width:600px){.dup-tag{display:none}}.crumb-link{background:transparent;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer}.crumb-link:hover{color:var(--ink);text-decoration:underline}.home-card{cursor:pointer;text-align:left;font:inherit;width:100%}.home-card:hover{border-color:var(--green);background:#fbfdf7}.home-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}.progress-bar{display:flex;height:11px;border-radius:6px;overflow:hidden;background:#eef1ea;margin:14px 0 12px}.progress-bar .seg{display:block}.seg-identify{background:#e3b578}.seg-link{background:#9fb98c}.seg-ready{background:#5f8a63}.seg-posted{background:#2f5943}.progress-key{display:flex;flex-wrap:wrap;gap:8px}.progress-key .key{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:6px;padding:5px 9px;cursor:pointer}.progress-key .key:hover{border-color:var(--green);color:var(--ink)}.progress-key .key i{width:9px;height:9px;border-radius:2px;display:inline-block}.progress-key .key b{color:var(--ink)}.report-figures{display:flex;gap:26px;margin:12px 0 6px}.report-figures strong{display:block;font-size:23px;line-height:1.3}.report-figures small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px}.report-row{display:flex;align-items:center;gap:9px;justify-content:space-between;font-size:11px;padding:7px 0;border-top:1px solid #f0f2ec}.report-row span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-title{font-size:11px;font-weight:600;margin:16px 0 2px}@media(max-width:900px){.home-grid{grid-template-columns:minmax(0,1fr)}}.empty{padding:40px 25px;text-align:center;color:var(--muted);font-size:12px}.empty svg{width:30px;height:30px;margin-bottom:10px}.empty h3{margin-bottom:7px;color:var(--ink)}.empty .btn{margin-top:15px}.bottom-note{font-size:10px;color:var(--muted);margin-top:17px;display:flex;align-items:center;gap:6px}.bottom-note svg{width:13px;height:13px}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.padded{padding:23px}.padded>p{color:var(--muted);font-size:12px;margin:7px 0 15px}.settings-grid .panel{align-self:start}.full{grid-column:1/-1}.channel-row{display:grid;grid-template-columns:1fr 1fr 30px;gap:8px;align-items:center;margin-top:8px}.post-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}.post-row{background:white;text-align:left;padding:18px;width:100%;border-bottom:1px solid var(--line);color:var(--ink)}.post-row.selected{background:#edf3e7}.post-row h3{font-size:13px;margin-bottom:6px}.post-row p{font-size:10px;color:var(--muted);margin-bottom:8px}.post-editor{padding:25px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.check{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:400}.link-output{border:1px solid var(--line);padding:14px;border-radius:9px;margin:10px 0}.link-output .head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.link-output strong{font-size:11px}.link-output code{display:block;word-break:break-all;font-size:10px;line-height:1.7;color:var(--muted);background:#f7f9f4;padding:8px;border-radius:4px}.link-output .actions{margin-top:8px}.post-editor .section-title{font-size:14px;margin:22px 0 8px}.manual-row{display:flex;gap:7px;margin-top:8px}.manual-row input{min-width:0}.manual-row .btn{padding:9px;flex-shrink:0}.mini-form{margin-top:8px}.mini-form summary{font-size:11px;color:var(--muted);cursor:pointer;margin-top:12px}.status-line{display:flex;align-items:center;gap:7px;font-size:11px;margin:10px 0}.error{color:#9b4938}.success{color:#47703e}
dialog{border:1px solid var(--line);border-radius:18px;width:min(670px,calc(100vw - 28px));max-height:90vh;padding:0;color:var(--ink);box-shadow:0 25px 100px #16372d30}dialog::backdrop{background:#133e3560;backdrop-filter:blur(3px)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:23px 27px;border-bottom:1px solid var(--line)}.modal-head h2{font-size:21px}.modal-body{padding:24px 27px}.modal-body>p{font-size:12px;color:var(--muted);margin-bottom:16px}.modal-body .section{padding:19px;border:1px solid var(--line);border-radius:11px;margin-bottom:15px}.section h3{display:flex;gap:8px;align-items:center}.modal-body .actions{margin-top:14px}.modal-body pre{white-space:pre-wrap;word-break:break-word;font-size:11px;max-height:55vh;overflow:auto;background:#f6f8f1;padding:17px;border-radius:9px}.help-list{font-size:12px;line-height:1.9;padding-left:20px}.help-list a{color:#427553}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,25px);background:var(--green);color:#fff;padding:12px 20px;border-radius:10px;font-size:12px;opacity:0;pointer-events:none;z-index:50;transition:opacity .2s,transform .2s;max-width:90vw;box-shadow:0 4px 20px #173e3622}#toast.show{opacity:1;transform:translate(-50%,0)}#storage-error{position:fixed;bottom:0;left:0;right:0;padding:14px;background:#993e30;color:white;z-index:60;font-size:13px}.small-text{font-size:11px}.demo-banner{font-size:10px;color:#8b6a39;display:flex;gap:6px;align-items:center}.loading-inline{font-size:12px;padding:14px;color:var(--muted)}
@media(min-width:1450px){.content-grid{grid-template-columns:minmax(0,1fr)}.filename{max-width:450px}.video-row{padding:19px 56px 19px 22px}.thumb{width:60px;height:73px}}
@media(max-width:1150px){.shell{grid-template-columns:185px minmax(0,1fr)}.sidebar{padding:28px 15px}main{padding:28px 24px}.topbar{padding:7px 18px}.content-grid{grid-template-columns:minmax(0,1fr);gap:16px}.hero-art{width:165px}.art-card.c{left:100px}.art-card.b{left:52px}.page-head h1{font-size:29px}.filename{max-width:200px}.stat{padding:13px}.stat small{display:block;margin:0}.post-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:940px){.shell{grid-template-columns:75px minmax(0,1fr)}.sidebar{padding:25px 12px}.brand{justify-content:center}.brand>span:last-child,.nav-label,.nav button span,.sidebar-foot{display:none}.nav button{justify-content:center;padding:13px}.brand-mark{flex-shrink:0}.content-grid{grid-template-columns:minmax(0,1fr)}.hero-art{display:none}.top-actions>span{display:none}.settings-grid{grid-template-columns:1fr}.post-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:720px){.shell{display:block}.sidebar{position:static;width:100%;height:auto;padding:13px 18px;flex-direction:row;align-items:center;gap:22px}.brand{margin:0;font-size:23px}.brand>span:last-child{display:block}.brand small{display:none}.brand-mark{width:28px;height:28px;font-size:27px;padding-bottom:7px}.nav{flex-direction:row;margin-left:auto;gap:3px}.nav button{padding:8px}.nav button svg{width:19px}.topbar{min-height:44px;padding:6px 14px}.topbar h1{font-size:14px}.topbar .crumb-link,.topbar .crumb>svg{display:none}.crumb{font-size:10px}.top-actions{gap:8px}main{padding:24px 18px}.page-head{align-items:flex-start;gap:10px;margin-bottom:20px}.page-head h1{font-size:27px}.page-head p{font-size:11px}.page-head .btn{font-size:11px;padding:9px 10px}.page-head .btn svg{display:none}.hero{padding:20px;margin-bottom:18px}.hero h2{font-size:19px}.hero .steps{font-size:9px;gap:6px}.hero .steps svg{width:12px}.stats{gap:7px;margin-bottom:22px}.stats.stats-4{grid-template-columns:repeat(2,1fr)}.stat{padding:12px 10px}.stat-icon{display:none}.stat-title{font-size:10px}.stat strong{font-size:23px}.stat small{font-size:9px}.content-grid{grid-template-columns:1fr}.detail{position:static}.filename{max-width:65vw}.settings-grid{display:block}.settings-grid .panel{margin-bottom:18px}.post-grid{grid-template-columns:1fr}.field-row{grid-template-columns:1fr;gap:0}.post-editor{padding:19px}.modal-body{padding:19px}.modal-head{padding:19px}.full{grid-column:auto}.hero-copy{max-width:none}.step-label{margin-top:20px}.panel-head{padding:17px}.row-title{font-size:12px}.topbar .icon-btn{padding:5px}.topbar .icon-btn svg{width:16px;height:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.hero{position:relative}
.hero-close{position:absolute;top:10px;right:10px;width:30px;height:30px;display:grid;place-items:center;
  border:1px solid rgba(0,0,0,.12);border-radius:50%;background:rgba(255,255,255,.65);cursor:pointer;color:inherit}
.hero-close svg{width:15px;height:15px}
.hero-close:hover{background:#fff}
.hero-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}

.handoff{border:1px solid var(--line,#d9ded6);border-radius:14px;padding:14px;margin-bottom:16px;background:rgba(23,62,54,.04)}
.handoff.done{background:rgba(23,62,54,.09)}
.handoff-head{display:flex;align-items:center;gap:8px;font-size:1rem;margin-bottom:6px}
.handoff-head svg{width:18px;height:18px}
.handoff-steps{margin:0 0 12px;padding-left:20px;font-size:.86rem;line-height:1.55;opacity:.85}
.handoff .actions{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:720px){.handoff .actions .btn{flex:1 1 100%;justify-content:center;padding:13px}}

.player{margin:10px 0 14px}
.player-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.player-frame{display:block;width:auto;height:200px;aspect-ratio:9/16;max-width:100%;margin:0 auto;border:0;border-radius:12px;background:#000}.detail-media{min-width:0}.detail-fields{min-width:0}
@media (max-width:720px){.player-frame{height:38vh}}

/* Two-pane inbox behaviour.
   .detail is position:sticky, and a sticky element taller than the viewport pins
   at the top with its bottom below the fold and no way to reach it. The manual
   product form and Create post draft were unreachable on any long video. Giving
   it its own scroll is the fix; the panel pins, its contents scroll inside it.
   The video list gets the same treatment so 25+ rows stop driving page height. */

.detail .panel-head,.detail .detail-footer{flex:none}
/* The open video used to sit beside the list with its own scrollbar, so its body
   scrolled on its own and was told not to hand the scroll on to the page. It now
   only ever opens full width with no height limit, so that inner scroll had
   nothing to do — and 'contain' still stopped the wheel reaching the page, which
   is why scrolling died with the pointer over the form and worked everywhere
   else. The page is the only scroll now. */
.detail .detail-body{overflow:visible;flex:1 1 auto;min-height:0}
/* So the video can stay beside the form while you scroll it. A sticky element
   cannot stick inside anything with overflow:hidden, and the panel had it for its
   rounded corners; clip keeps the corners without creating a scroll container.
   The video pins just under the sticky top bar. The 123px "Prepare this video"
   toolbar was set to stick too but never could, and pinning it now would take a
   fifth of the screen, so it keeps scrolling as it always has. */
.workspace-expanded>.detail{overflow:clip}
.detail .workspace-toolbar{position:static}

.detail .detail-body::-webkit-scrollbar,.video-list::-webkit-scrollbar{width:10px}
.detail .detail-body::-webkit-scrollbar-thumb,.video-list::-webkit-scrollbar-thumb{background:#d7ded3;border-radius:6px;border:3px solid white}
@media(max-width:720px){
  /* stacked on a phone, so the page scroll is the only scroll */
  .detail{max-height:none;display:block}
  
  
}

.bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px;padding:11px 12px;
  border:1px solid #d6e1c9;background:#f3f7ec;border-radius:9px;font-size:11px;line-height:1.6}
.bulk svg{width:15px;height:15px;color:#5d7a52;flex:none}
.bulk span{flex:1;min-width:140px}
.bulk .btn{flex:none}

/* Touch targets. .btn.small is 32px and .text-btn is barely 20px, both well under
   the 44px Apple recommends, and these are the controls the phone workflow leans
   on: Copy link, Mark posted, Remove. Desktop keeps the tighter sizing. */
@media(max-width:720px){
  .btn.small{min-height:44px;padding:11px 14px;font-size:12px}
  .text-btn{min-height:44px;padding:11px 8px;display:inline-flex;align-items:center}
  .check{min-height:44px}
  .check input[type=checkbox]{width:20px;height:20px}
  .tabs button{padding:14px 0}
  .video-row{padding:15px 16px}
  /* the fixed storage banner sat over the last row of content */
  #storage-error{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  main{padding-bottom:calc(45px + env(safe-area-inset-bottom))}
}

.bulk-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.bulk-summary div{background:#f3f7ec;border:1px solid #d6e1c9;border-radius:9px;padding:12px;text-align:center}
.bulk-summary strong{display:block;font-size:24px;font-weight:550;letter-spacing:-.5px}
.bulk-summary span{font-size:10px;color:var(--muted);line-height:1.4;display:block;margin-top:3px}
.bulk-list{max-height:210px;overflow:auto;margin:12px 0 0;padding-left:22px;font-size:11px;line-height:1.85;color:var(--muted)}
@media(max-width:720px){.bulk-summary{grid-template-columns:1fr;gap:7px}.bulk-summary div{display:flex;align-items:center;gap:10px;text-align:left}.bulk-summary strong{font-size:19px}.bulk-summary span{margin:0}}

.bulk-frame{height:300px;margin-bottom:12px}
.bulk-items{max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:9px}
.bulk-item{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:11px;line-height:1.5;cursor:pointer;margin:0}
.bulk-item+.bulk-item{border-top:1px solid #f0f2ec}
.bulk-item.previewing{background:#f4f7ef}
.bulk-item-title{flex:1;min-width:0}
.bulk-item .btn{flex:none}
.bulk-item input[type=checkbox]{flex:none;width:17px;height:17px}
@media(max-width:720px){.bulk-frame{height:42vh}.bulk-items{max-height:none}.bulk-item{padding:12px}.bulk-item input[type=checkbox]{width:22px;height:22px}}

/* Expand the selected workspace without rebuilding its player or unsaved fields. */

.workspace-toolbar{flex-wrap:wrap}
.workspace-toolbar h2{flex:1;min-width:120px}
.workspace-navigation{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.workspace-navigation[hidden]{display:none}
.workspace-navigation .hint{margin:0;text-align:center}
.content-grid.workspace-expanded{grid-template-columns:minmax(0,1fr)}
.workspace-expanded>.inbox-panel{display:none}

.workspace-expanded>.detail{min-width:0}
.collection-grid{align-items:start}
.collection-grid>.collection-detail,.collection-grid>.collection-list{min-width:0}
.library-grid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
.library-grid.has-selection{grid-template-columns:minmax(0,1fr)}
.collection-grid.workspace-expanded{grid-template-columns:minmax(0,1fr)}
.collection-grid.workspace-expanded>.collection-list{display:none}
.workspace-toolbar{position:sticky;top:0;z-index:5;background:white}

@media(max-width:720px){
 .library-grid.has-selection,.collection-grid.workspace-expanded{grid-template-columns:minmax(0,1fr)}
}
.workspace-expanded .detail-body.has-media{display:grid;grid-template-columns:clamp(190px,22vw,290px) minmax(0,1fr);gap:22px;align-items:start}.workspace-expanded .detail-body.has-media .detail-media{position:sticky;top:66px}.workspace-expanded .detail-media .player{margin-top:0}.workspace-expanded .player-frame{width:100%;height:auto;aspect-ratio:9/16;max-height:calc(100vh - 190px)}
@media(max-width:720px){
 .content-grid.workspace-expanded{grid-template-columns:minmax(0,1fr)}
 
 .workspace-expanded .detail-body.has-media{grid-template-columns:minmax(0,1fr)}
 .workspace-expanded .detail-body.has-media .detail-media{position:static}
 .workspace-expanded .player-frame{width:auto;height:38vh}
 .workspace-navigation{flex-wrap:wrap}
}

/* Caption: read and copied far more often than written, so it reads as text
   until the Edit button turns it into a field. */
.caption-card{border:1px solid var(--line);border-radius:9px;padding:14px;background:#fbfdf9;margin-top:6px}
.caption-body{font-size:12px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.caption-card .actions{margin-top:12px}

/* Product record. The affiliate link rows print no URL: it is 90 characters of
   tracking parameters and Copy is the only thing anyone does with it. */
.product-hero{display:flex;gap:16px;align-items:flex-start;margin-bottom:6px}
.product-shot{width:118px;height:118px;flex-shrink:0;object-fit:contain;border-radius:9px;background:white;border:1px solid var(--line)}
.product-shot.blank{display:grid;place-items:center;background:#eef1ea;color:#7e8b7c}
.product-shot.blank svg{width:30px;height:30px}
.product-hero-copy{min-width:0;flex:1}
.product-hero-copy h3{font-size:17px;line-height:1.4}
.product-hero-copy .row-meta{margin-top:9px}
.link-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-top:8px;background:white}
.link-row-copy{min-width:0;flex:1}
.link-row-copy strong{display:block;font-size:12px;font-weight:600}
.link-row-copy small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.link-row .actions{margin:0;flex-shrink:0}
.dest-card{border:1px solid var(--line);border-radius:9px;padding:13px;margin-top:9px;background:#fcfdf9}
.dest-head{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:4px}
.facts{margin-top:4px}
.fact{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:7px 0;border-top:1px solid #f0f2ec;font-size:11px;line-height:1.6}
.fact dt{color:var(--muted);font-weight:600}
.fact dd{min-width:0;word-break:break-word}
.fact code{font-size:11px;background:#f3f6f0;padding:2px 5px;border-radius:4px}
.fact a{display:inline-flex;align-items:center;gap:5px}
.fact svg{width:12px;height:12px;flex-shrink:0}
.use-row{width:100%;display:flex;align-items:center;gap:11px;text-align:left;background:white;border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-top:8px}
.use-row:hover{background:#f7f9f3;border-color:#cdd8c6}
.use-row .use-copy{min-width:0;flex:1}
.use-row strong{display:block;font-size:12px;font-weight:600;line-height:1.45}
.use-row small{display:block;font-size:10px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.use-row .arrow{width:15px;color:#9baa9b;flex-shrink:0}
@media(max-width:520px){
 .product-hero{gap:13px}
 .product-shot{width:86px;height:86px}
 .fact{grid-template-columns:minmax(0,1fr);gap:2px}
 .link-row .actions{width:100%}
}

/* ---- pages outside the studio: sign in, sign up, onboarding, account, admin ---- */
.shot{--shot-bg:#fff;--shot-line:#dde4d9;--shot-dot:#d7ddd3;--shot-pill:#f1f4ee;--shot-row:#f5f7f3;
 --shot-field:#fff;--shot-sel:#eaf0e4;--shot-mark:#b4762c;--shot-btn:#2f6ad9}
.wordmark{display:flex;align-items:center;gap:11px}
.wordmark-logo{display:grid;place-items:center;background:var(--green);color:var(--lime);width:34px;height:34px;border-radius:11px;font-family:Georgia,serif;font-size:30px;line-height:1;padding-bottom:7px;flex-shrink:0}
.wordmark-copy{min-width:0}
.wordmark b{display:block;font-size:19px;letter-spacing:-.6px;line-height:1.2}
.wordmark small{display:block;font-size:10.5px;color:var(--muted);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Sign in and sign up: one column, centred, nothing to read but the form. */
.auth{max-width:430px;margin:0 auto;padding:44px 18px 60px;display:flex;flex-direction:column;gap:22px}
.auth-card h1{font-size:23px;margin-bottom:8px}
.lede{font-size:12.5px;line-height:1.75;color:var(--muted);margin-bottom:16px}
.auth-card label:first-of-type{margin-top:4px}
.full-width{width:100%;justify-content:center;margin-top:18px}
.auth-foot{font-size:11px;color:var(--muted);display:flex;gap:8px;align-items:flex-start;line-height:1.6}
.auth-foot svg{width:15px;height:15px;flex-shrink:0;margin-top:1px}
.auth-points{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.auth-points li{display:flex;gap:11px;font-size:11.5px;line-height:1.7;color:var(--muted)}
.auth-points svg{width:17px;height:17px;flex-shrink:0;margin-top:2px;color:#5d7a63}
.auth-points b{color:var(--ink)}

/* The wizard: steps down the side, one step at a time in the pane. */
.wizard{max-width:1120px;margin:0 auto;padding:0 18px 70px}
.wizard-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0 24px;flex-wrap:wrap}
.wizard-top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wizard-body{display:grid;grid-template-columns:238px minmax(0,1fr);gap:26px;align-items:start}
.wizard-rail{position:sticky;top:20px}
.wizard-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.wizard-step{width:100%;display:flex;align-items:center;gap:11px;text-align:left;background:transparent;border-radius:9px;padding:10px 12px;color:var(--muted)}
.wizard-step:hover{background:#eef2ea}
.wizard-step.current{background:white;border:1px solid var(--line);color:var(--ink)}
.wizard-step b{display:block;font-size:12px;font-weight:600;line-height:1.35}
.wizard-step small{display:block;font-size:10px;margin-top:2px}
.wizard-num{width:23px;height:23px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;border:1px solid #ccd7c8;font-size:11px;background:white}
.wizard-step.done .wizard-num{background:var(--green);border-color:var(--green);color:var(--lime)}
.wizard-step.done .wizard-num svg{width:13px;height:13px}
.wizard-progress{font-size:10.5px;color:var(--muted);padding:12px 12px 0;line-height:1.6}
.wizard-pane h1{font-size:25px;line-height:1.3;margin-bottom:9px}
.wizard-pane h2.section-title{font-size:14px;margin:30px 0 9px;padding-top:18px;border-top:1px solid var(--line)}
.wizard-pane p{font-size:12.5px;line-height:1.8;color:var(--muted)}
.wizard-pane p b,.wizard-pane p i{color:var(--ink)}
.wizard-pane code{font-size:11px;background:#f1f4ee;padding:2px 6px;border-radius:4px;word-break:break-all}
.wizard-pane a{color:#3c6b52;text-decoration:underline;text-underline-offset:2px}
.wizard-pane a svg{width:12px;height:12px}
.stack{display:grid;gap:0;margin-top:6px}
.stack .actions{margin-top:16px}
.wizard-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}

/* A numbered walkthrough where every step can carry a picture. */
.walk{margin:14px 0 0;padding-left:0;list-style:none;counter-reset:walk;display:grid;gap:26px}
.walk>li{counter-increment:walk;position:relative;padding-left:42px}
.walk>li:before{content:counter(walk);position:absolute;left:0;top:0;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:var(--lime);font-size:12px;font-weight:600}
.walk.plain>li:before{background:#e8eede;color:#4d6650}
.walk h3{font-size:13.5px;margin:4px 0 6px;line-height:1.45}
.walk .pill{margin-left:6px;vertical-align:2px}
.shot-figure{margin:13px 0 0}
.shot,.shot-photo{width:100%;height:auto;border-radius:10px;display:block;border:1px solid var(--line);background:white}
.shot text{font-family:Inter,sans-serif}
.shot-url{font-size:9px;fill:#8a948a}
.shot-rail{font-size:9.5px;fill:#7b857b}
.shot-rail.on{fill:#2c4a3a;font-weight:600}
.shot-heading{font-size:13px;fill:#233c35;font-weight:600}
.shot-row-text{font-size:9.5px;fill:#5b675d}
.shot-row-text.mono{font-family:ui-monospace,Menlo,monospace;font-size:9px}
.shot-label{font-size:8.5px;fill:#8a948a}
.shot-badge{font-size:10px;fill:#fff;font-weight:700;text-anchor:middle}
.shot-btn-text{font-size:10px;fill:#fff;font-weight:600;text-anchor:middle}
.shot-figure figcaption{font-size:10.5px;color:var(--muted);margin-top:7px;line-height:1.6}
.copy-row{display:flex;align-items:center;gap:9px;margin:10px 0;flex-wrap:wrap}
.copy-row code{flex:1;min-width:0;padding:9px 11px;background:#f1f4ee;border-radius:7px;font-size:11.5px}

/* A claim about what the software does, which deserves more weight than a hint. */
.claim{display:flex;gap:12px;align-items:flex-start;border:1px solid #dbe4d4;background:#f5f8f2;border-radius:10px;padding:14px 15px;margin:16px 0}
.claim.good{border-color:#cfe0c5;background:#f0f6ea}
.claim svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;color:#4e7355}
.claim b{font-size:12px;display:block;margin-bottom:3px}
.claim p{font-size:11.5px;line-height:1.75;color:var(--muted);margin:0}
.faq details{border-top:1px solid var(--line);padding:11px 0}
.faq summary{font-size:12px;font-weight:600;cursor:pointer;line-height:1.5}
.faq p{margin:8px 0 2px;font-size:11.5px}
.scopes{margin:10px 0 0;padding-left:18px;display:grid;gap:7px}
.scopes li{font-size:11.5px;line-height:1.7;color:var(--muted)}
.scopes b{color:var(--ink)}
.scopes span{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;color:#7d8a7f;margin-left:4px}
.warn-text{color:var(--amber)}

/* Brands discovered from Impact. */
.brand-list{display:grid;gap:8px;margin:14px 0}
.brand-row{display:flex;align-items:flex-start;gap:11px;border:1px solid var(--line);border-radius:10px;padding:13px 14px;background:white;cursor:pointer}
.brand-row:hover{border-color:#cdd8c6}
.brand-row.static,.brand-row.inactive{cursor:default;background:#fbfcf9}
.brand-row input{margin-top:2px;flex-shrink:0}
.brand-copy{min-width:0}
.brand-copy b{font-size:12.5px;display:block;line-height:1.4}
.brand-copy small{display:block;font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.6}
.brand-mark-sm{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;background:#eef1ea;color:#5d7a63;flex-shrink:0}
.brand-mark-sm svg{width:15px;height:15px}

/* Plans. */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:16px 0}
.plan{border:1px solid var(--line);border-radius:12px;padding:18px;background:white}
.plan h3{font-size:13px;margin-bottom:8px}
.plan-price{margin:0 0 4px}
.plan-price b{font-size:27px;letter-spacing:-1px}
.plan-price span{font-size:11px;color:var(--muted)}
.plan .btn{width:100%;justify-content:center;margin-top:14px}

/* Account and admin. */
.account-body{max-width:640px}
.admin-body{padding-bottom:20px}
.stat-plain{padding:16px 18px;display:grid;gap:3px}
.stat-plain small{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)}
.stat-plain strong{font-size:25px;font-weight:500;letter-spacing:-.8px}
.admin-table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:11.5px}
.admin-table th{text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.admin-table td{padding:12px 14px;border-bottom:1px solid #f0f2ec;vertical-align:top}
.admin-table tr:hover td{background:#fafbf7}
.admin-table b{font-size:12px;font-weight:600}
.admin-table small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.admin-actions{white-space:nowrap}
.admin-actions .btn{margin-right:6px}
.empty-cell{text-align:center;color:var(--muted);padding:30px!important}

@media(max-width:820px){
 .wizard-body{grid-template-columns:minmax(0,1fr)}
 .wizard-rail{position:static}
 .wizard-rail ol{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px}
 .wizard-rail li{flex-shrink:0}
 .wizard-step{padding:9px 11px}
 .wizard-step small{display:none}
 .wizard-progress{padding:8px 0 0}
 .walk>li{padding-left:34px}
 .wizard-pane h1{font-size:21px}
}
.side-trial{display:flex;align-items:center;gap:7px;font-size:10.5px;color:#b9cdc0;text-decoration:none;padding:9px 0 0}
.side-trial svg{width:13px;height:13px}
.side-trial.warn{color:#e8c79a}
.side-links{display:flex;gap:14px;flex-wrap:wrap;padding-top:11px;margin-top:11px;border-top:1px solid #2b4f45}
.side-links a,.side-links button{font-size:10.5px;color:#a6beb2;background:transparent;padding:0;text-decoration:none}
.side-links a:hover,.side-links button:hover{color:var(--lime);text-decoration:underline}

/* Standing in for someone. Amber and full width because the failure is not
   noticing, and every other warning in this app is a small grey line. */
.impersonating{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:11px;flex-wrap:wrap;
 background:#7a4a13;color:#fdf3e2;padding:9px 18px;font-size:11.5px;line-height:1.6}
.impersonating svg{width:16px;height:16px;flex-shrink:0}
.impersonating span{flex:1;min-width:200px}
.impersonating b{color:#fff}
.impersonating .btn{background:#fdf3e2;border-color:#fdf3e2;color:#5d380c;min-height:30px;padding:6px 12px}
.impersonating .btn:hover{background:#fff}

/* A Google refusal is a configuration problem in another console. It stays on
   screen until it is fixed, rather than passing by as a toast. */
.drive-problem{border:1px solid #e6d3ae;background:#fdf7ea;border-radius:12px;padding:16px 18px;margin-bottom:20px}
.drive-problem-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.drive-problem-head strong{flex:1;font-size:13px}
.drive-problem-head svg{width:17px;height:17px;color:#a97722}
.drive-problem p{font-size:12px;line-height:1.75;color:#6d5a3a;margin:0 0 8px}
.drive-problem code{background:#fff;border:1px solid #e6d3ae;padding:2px 6px;border-radius:4px;font-size:11.5px}
.drive-problem a{color:#7a5312;text-decoration:underline}
.drive-problem .copy-row code{flex:1;padding:9px 11px}

/* Google's own button, with a divider that does not pretend to be a heading. */
.google-slot{margin:6px 0 2px;display:grid;justify-items:center;gap:2px}
.or-line{display:flex;align-items:center;gap:10px;width:100%;margin:12px 0 0;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.or-line:before,.or-line:after{content:'';flex:1;height:1px;background:var(--line)}

/* Account: one control at the foot of the nav, at every width. On a desktop it
   reads like a nav row with the person's name; in the collapsed layouts the
   label hides with the others and the avatar stays. */
.nav-account{display:flex;align-items:center;gap:11px;width:100%;order:99;flex-shrink:0;text-align:left;
 margin-top:14px;padding-top:14px!important;border-top:1px solid var(--line);border-radius:0 0 8px 8px;background:transparent}
.nav-account .avatar{width:30px;height:30px;font-size:16px;background:var(--green);color:#fff;flex-shrink:0}
/* The narrow layouts hide every span inside a nav button — that is how the text
   labels disappear — and the avatar is a span. More specific, so it survives. */
.nav .nav-account span.avatar{display:grid;place-items:center}
.nav-account-copy{min-width:0;display:flex;flex-direction:column;gap:1px}
.nav-account-copy b{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-account-copy small{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-account:hover .avatar,.nav-account[aria-expanded="true"] .avatar{outline:2px solid var(--green);outline-offset:2px}
.account-menu-scrim{position:fixed;inset:0;z-index:60;background:transparent}
/* Placed by script against the button that opened it; these are only a fallback. */
.account-menu{position:fixed;z-index:61;top:62px;right:14px;width:min(290px,calc(100vw - 24px));
 background:var(--white,#fff);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
 box-shadow:0 18px 40px -18px rgba(41,32,63,.35)}
.account-menu .profile small,.account-menu .side-trial,.account-menu .side-links a,.account-menu .side-links button{color:var(--muted)}
.account-menu .side-links{border-color:var(--line);margin-top:12px}
.account-menu .side-links a,.account-menu .side-links button{font-size:13px;padding:6px 0}
.account-menu .side-links button{font-weight:600;color:var(--ink)}
@media(max-width:940px){.nav-account{display:grid;place-items:center;width:auto;margin:10px auto 0;border-top:0;padding-top:8px!important;border-radius:50%}}
@media(max-width:720px){.nav-account{margin:0;padding-top:4px!important}}
/* A 375px phone is a few pixels short of the brand, five icons and the avatar,
   and the avatar was the one that gave way. The icons give instead. */
@media(max-width:420px){.sidebar{gap:10px;padding:12px 14px}.nav{gap:0}.nav button{padding:7px}.brand{font-size:21px}}

/* A merchant that is neither QVC nor Amazon: its own initial, in the brand colour. */
.merchant.brand b{background:var(--soft);color:var(--green)}

/* Affiliate networks — the anchor card. Each network is a section; each brand
   is a row saying what Impact issued for it and what it can do. */
.affiliate-card .network{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.network-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.network-head h3{font-size:14px}
.affiliate-card .mini-form{margin-top:10px}
.brand-table{display:grid;gap:10px;margin-top:8px}
.brand-line{display:grid;grid-template-columns:minmax(120px,1fr) minmax(160px,1.3fr) minmax(150px,1.2fr) minmax(140px,1.2fr) auto;
 gap:16px;align-items:start;border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:#fcfbff}
.brand-name b{display:block;font-size:13px}
.brand-name small,.brand-cell small{display:block;font-size:10.5px;color:var(--muted);line-height:1.55;margin-top:2px}
.brand-cell{display:grid;gap:3px;min-width:0}
.cell-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:600}
.brand-cell code{font-size:11px;background:var(--soft);padding:3px 6px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-cell .check{margin:0;font-size:12px}
.brand-actions{align-self:center}
@media(max-width:900px){.brand-line{grid-template-columns:1fr 1fr}.brand-actions{grid-column:1/-1}}
@media(max-width:520px){.brand-line{grid-template-columns:1fr}}

/* A page's one-line purpose. Quiet on purpose: it is read once and then it is
   furniture, which is why it can be hidden. */
.page-tip{display:flex;align-items:flex-start;gap:12px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px 12px 12px 15px;margin-bottom:18px}
.page-tip>svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--green)}
.page-tip p{flex:1;margin:0;font-size:12.5px;line-height:1.65;color:var(--muted)}
.page-tip b{color:var(--ink);font-weight:600}
.page-tip .btn{min-height:28px;padding:4px 6px;flex-shrink:0}
.page-tip .btn svg{width:14px;height:14px}
@media(max-width:720px){.page-tip{margin-bottom:14px;padding:11px 10px 11px 13px}.page-tip p{font-size:12px}}

/* ---- onboarding, second pass: written for people who are not technical ---- */
.wizard-pane p,.wizard-pane li{font-size:14px;line-height:1.75}
.wizard-pane .lede{font-size:15.5px;line-height:1.7;color:var(--ink)}
.wizard-pane .hint{font-size:12.5px}
.wizard-pane h3{font-size:15px}

/* "Why this step?" — the answer to the question everybody has and nobody asks. */
.why{display:flex;gap:10px;align-items:flex-start;background:#f6f2fd;border-left:3px solid var(--green);border-radius:8px;padding:11px 14px;margin:10px 0 4px}
.why svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;color:var(--green)}
.why p{margin:0;font-size:13.5px!important;line-height:1.65!important;color:#4a4060}
.why b{color:var(--ink)}

/* The journey: TikTok → Repurpose.io → Drive → Gather → Instagram & Facebook. */
.flow{list-style:none;margin:18px 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:flow}
.flow-node{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 12px 13px;display:flex;flex-direction:column;gap:4px}
.flow-node b{font-size:13.5px;line-height:1.3}
.flow-node span{font-size:12px;line-height:1.5;color:var(--muted)}
.flow-node:before{content:'';display:block;width:26px;height:4px;border-radius:2px;margin-bottom:4px;background:var(--line)}
.flow-node.tiktok:before{background:#111}.flow-node.repurpose:before{background:#ff6b3d}.flow-node.drive:before{background:#1a73e8}
.flow-node.gather:before{background:var(--green)}.flow-node.social:before{background:linear-gradient(90deg,#e1306c,#1877f2)}
.flow-node.gather{border-color:var(--green);background:#fbf9ff}
.flow-node:not(:last-child):after{content:'→';position:absolute;right:-10px;top:50%;transform:translate(50%,-50%);font-size:14px;color:var(--muted);z-index:1}
@media(max-width:900px){.flow{grid-template-columns:minmax(0,1fr);gap:8px}
 .flow-node{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 8px}.flow-node:before{display:none}
 .flow-node:not(:last-child):after{content:'↓';right:auto;left:22px;top:auto;bottom:-15px;transform:none}}

/* A recommended thing to do first, and plain numbered steps. */
.prereq{border:1px solid var(--line);border-radius:12px;padding:6px 18px 14px;margin:10px 0;background:#fff}
.plain-steps{margin:10px 0;padding-left:22px}
.plain-steps li{margin:6px 0;padding-left:4px}
.plain-steps li::marker{color:var(--green);font-weight:700}
.fill-in{margin:8px 0;padding-left:18px}
.fill-in li{margin:3px 0}
.subhead{font-size:15px;margin:26px 0 6px}
.walk>li{padding-bottom:6px}
.walk .copy-row{margin:10px 0}
.channel-head{display:grid;grid-template-columns:1fr 1fr 30px;gap:8px;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-top:10px}

/* The drawings: large enough to read the words on them, which is their whole job. */
.shot-figure{margin:14px 0 4px}
.shot{border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 30px -18px rgba(41,32,63,.35)}
.shot-figure figcaption{font-size:13px;color:var(--ink);margin-top:9px;line-height:1.6}
.shot-figure figcaption b{color:var(--green)}
/* The app styles every <svg> as an outlined icon (stroke 1.7px, no fill). The
   drawings are SVGs too, so every letter in them inherited an outline and read as
   smudged bold. They carry their own colours; nothing should be inherited. */
.shot{stroke:none;stroke-width:1;fill:initial;width:100%;height:auto}
.shot text{stroke:none}
/* On a phone the drawings shrink until their words are about 4px tall. They keep a
   readable size instead, inside a strip you can swipe, and say so. */
.shot-swipe{display:none;font-size:11.5px;color:var(--muted);margin:6px 0 0}
@media(max-width:720px){
 .walk>li{padding-left:30px}
 .shot-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-right:-8px;padding-bottom:4px}
 .shot-scroll .shot{min-width:600px}
 .shot-swipe{display:block}
 .flow{gap:16px}
 .flow-node:not(:last-child):after{bottom:-17px}
}
/* The step list is a grid, and a grid item grows to fit its widest child — so the
   swipe strip became 600px wide and was clipped rather than scrollable. */
.walk>li,.shot-figure{min-width:0;max-width:100%}
.shot-scroll{max-width:100%}
/* The pane is a <main>, and the app gives every <main> margin:0 auto. In a grid,
   auto margins switch off stretching, so the pane sized itself to its content and
   could not be narrower than the 600px drawing — the whole page, text included,
   was clipped on the right on a phone. No auto margins here; it fills its column. */
.wizard-pane{min-width:0;margin:0}

/* ---- plans: monthly or yearly ---- */
.interval-switch{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:9px;background:#f7f8f4;margin-top:14px}
.interval-switch button{background:transparent;border:0;border-radius:7px;padding:7px 13px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}
.interval-switch button[aria-pressed="true"]{background:white;color:var(--ink);box-shadow:0 1px 2px #0001}
.interval-switch span{font-size:10px;font-weight:600;color:var(--green);margin-left:4px}
.plan.featured{border-color:var(--green)}
.plan-allowance{font-size:12px;font-weight:600;margin-top:10px}
.usage{margin-top:6px}
.usage-bar{height:6px;border-radius:3px;background:#eef1ea;overflow:hidden;margin-top:6px;max-width:260px}
.usage-bar i{display:block;height:100%;background:var(--green)}
.usage-bar.full i{background:#c98a3a}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.code-hint{padding:0 18px 12px}
.allowance-note{margin:0 0 14px}
.allowance-note a{font-weight:600}
.mail-body{white-space:pre-wrap;word-break:break-all;max-width:420px}

/* ---- Post Studio: the draft opens like an inbox video — preview, then the product ---- */
.post-detail{padding:18px}
.post-detail .post-editor{padding:0;margin-top:16px}
.post-products{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.post-product{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fcfaff}
.post-product img,.post-product-blank{width:84px;height:84px;object-fit:contain;border-radius:10px;background:#fff;border:1px solid var(--line);flex:none}
.post-product-blank{display:grid;place-items:center;color:var(--muted)}
.post-product-blank svg{width:26px;height:26px}
.post-product>div{min-width:0}
.post-product strong{display:block;font-size:13px;line-height:1.45}
.post-product-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 4px;font-size:11px}
.post-product .text-link{font-size:11px}
/* On a phone the job is copy-and-post, so the product and the buttons come first
   and the preview follows. The inbox keeps its order: there, watching is the job. */
@media(max-width:720px){
 .post-detail.has-media .detail-media{order:2}
 .post-detail.has-media .detail-fields{order:1}
 .post-detail{padding:14px}
 .post-product img,.post-product-blank{width:68px;height:68px}
}
.post-product strong{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.send-back{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.send-back .btn{font-size:11px}