/* =========================================================================== GROWTH TOOL v2 - SOUNDCLOUD LAYER Loaded after v2.css. Derek 2026-09-17: "more of a soundcloud vibe." What is actually being borrowed, and why each one earns its place here: 1. DENSITY. SoundCloud runs 13-14px type, 4-8px radii and tight rows. Our pass was airy and editorial, which is right for a marketing page and wrong for a tool you sit in every day. This layer tightens the scale. 2. TILE SHELVES. SC shows content as artwork tiles with a title and a subtitle under them. Our target sources ARE artists, so a source reads far more naturally as a tile than as a table row. 3. TAB UNDERLINE. SC uses an underlined tab row (Overview / Likes / Playlists), not a pill segment. Underlines scale to many tabs; pills do not, and Research has five. 4. THE STAT ROW. SC Artist Studio puts plays / reposts / downloads / likes in one row of big number over small grey label, split by thin rules. That is exactly our analytics header. 5. OUTLINE ROW ACTIONS. SC puts a small outline "Follow" pill at the end of a list row. Ours is Add or Remove. What is NOT borrowed: the orange, and the light theme. Ground stays black, accent stays #b4ff3c. =========================================================================== */ :root{ --r-tile:6px; /* SoundCloud artwork radius, near square */ --r-ctl:6px; /* controls, much tighter than the pills */ } /* -- DENSITY OVERRIDE ------------------------------------------------------ The editorial rhythm was built for a page you read once. This is a page you live in, so the vertical scale comes down about a third. */ .sc .sect{padding:44px 0} .sc .sect.tight{padding:0 0 44px} .sc .shead{margin-bottom:20px} .sc .shead h2{font-size:clamp(22px,2.4vw,30px)} .sc .shead p{font-size:13px;margin-top:8px} .sc .folio{font-size:38px} .sc .srule{margin-bottom:20px} .sc .bound{max-width:1280px;padding:0 32px} /* -- TAB UNDERLINE ROW -----------------------------------------------------*/ .sctabs{display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--hair); overflow-x:auto;scrollbar-width:none} .sctabs::-webkit-scrollbar{display:none} /* P: the stray bar under the list */ /* FBI-EDITS 2026-09-19 #1: in a section head the tabs sat under the section rule with their own full-width line, two parallel rules around one title. There the only line is the active tab's; tabs bottom-align with the title. */ .shead:has(> .sctabs){align-items:flex-end} .shead > .sctabs{border-bottom:0} .shead > .sctabs button{padding-bottom:8px} .shead > .sctabs[hidden]{display:none} .sctabs::-webkit-scrollbar{display:none} .sctabs button{position:relative;flex:none;padding:0 0 13px;font-size:15px;font-weight:700; color:var(--ink-3);white-space:nowrap;transition:color .4s var(--ease)} .sctabs button:hover{color:var(--ink-2)} .sctabs button.on{color:var(--ink)} .sctabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px; background:var(--g);transform:scaleX(0);transform-origin:left; transition:transform .45s var(--ease)} .sctabs button.on::after{transform:scaleX(1)} .sctabs button em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-3); margin-left:7px} /* -- SHELF (a horizontal row of tiles) ------------------------------------- Scrolls sideways like a SoundCloud shelf. One scroller, never nested. */ .shelf{position:relative} .shelf-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(156px,1fr); gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px; scrollbar-width:none} .shelf-rail::-webkit-scrollbar{display:none} .shelf-rail > *{scroll-snap-align:start} .shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:18px 16px} /* -- TILE ------------------------------------------------------------------ Square artwork, then title, then a grey subtitle. The SoundCloud unit. */ .tile{position:relative;display:block;min-width:0;text-align:left} .tile .art{position:relative;aspect-ratio:1/1;border-radius:var(--r-tile);overflow:hidden; background:var(--card)} .tile .art img{width:100%;height:100%;object-fit:cover;display:block} .tile .art .ini{position:absolute;inset:0;display:grid;place-items:center; font-family:var(--display);font-weight:400;font-size:44px;color:var(--ink-3); letter-spacing:.01em} /* the type dot sits on the artwork, the way a SC badge does */ .tile .ty{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:6px; padding:4px 8px;border-radius:4px;background:rgba(0,0,0,.78); /* no backdrop blur: ~30 of these scroll in the grid, and blur on moving content repaints every frame on phones (pre-deploy review 2026-09-18) */ font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-2)} .tile .ty b{width:11px;height:11px;border-radius:50%;flex:none} /* the badge leads with GENRE, and the DOT carries the type. Derek 2026-09-17: the colour already says followers / likers / hashtag, so the words are free to say the thing you actually want to read - Techno, Afro House, Amapiano. A round dot, not a square, so it reads as a status light rather than a second swatch competing with the chart keys. */ .tile .ty{max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis; white-space:nowrap} /* untagged is a real state: genre_edm is a new column and most rows are empty, so it falls back to the type word rather than showing a blank chip */ .tile .ty.untagged{color:var(--ink-3)} /* the badge is the username now: real case, a touch larger, and a link */ /* on the bottom edge of the art, full width: the top edge is shared with the rank and cut 18 of 21 handles short */ .tile .ty.who,#srcs .tile .ty.who{top:auto;bottom:8px;right:8px;text-transform:none;letter-spacing:0;font-family:var(--sans); font-size:12px;font-weight:700;color:var(--ink);text-decoration:none;max-width:calc(100% - 16px);width:max-content;min-width:0} .tile .ty.who .u{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .tile a.ty.who:hover{color:var(--g)} .tile .n.nogenre{font-weight:400;color:var(--ink-3)} .tile .ty.untagged b{opacity:.55} .tile .n{display:block;font-size:13.5px;font-weight:700;margin-top:10px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tile .s{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tile .s b{color:var(--g);font-weight:700} /* the hover action, the way SC reveals a play button over artwork */ .tile .act{position:absolute;right:8px;bottom:8px;width:32px;height:32px;border-radius:50%; display:grid;place-items:center;background:var(--g);color:#0d1400; opacity:0;transform:translateY(6px); transition:opacity .35s var(--ease),transform .35s var(--ease)} .tile:hover .act,.tile:focus-within .act{opacity:1;transform:translateY(0)} .tile .act svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} .tile .act.rm{background:#ff5c93;color:#1a0009} /* -- STAT ROW (SoundCloud Artist Studio) -----------------------------------*/ .statrow{display:flex;align-items:stretch;flex-wrap:wrap; border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)} .statrow .st{flex:1 1 0;min-width:130px;padding:20px 24px;position:relative} .statrow .st + .st::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px; background:var(--hair-soft)} .statrow .st .v{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,36px); line-height:1;letter-spacing:.01em} .statrow .st .v.acc{color:var(--g)} .statrow .st .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-3);margin-top:9px} /* -- LIST ROW with an outline action ---------------------------------------*/ .lrow{display:flex;align-items:center;gap:13px;padding:11px 0} .lrow + .lrow{border-top:1px solid var(--hair-soft)} .lrow .pic{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none} .lrow .pic.sq{border-radius:var(--r-tile)} .lrow .t{min-width:0;flex:1} .lrow .n{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .lrow .s{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--ink-3); margin-top:4px} .lrow .s span{display:inline-flex;align-items:center;gap:5px} .lrow .s svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} /* the outline pill SC puts at the end of a row */ .obtn{flex:none;padding:7px 18px;border-radius:var(--r-ctl);border:1px solid var(--hair); background:transparent;font-size:12.5px;font-weight:700;color:var(--ink); transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)} .obtn:hover{background:var(--fill-1);border-color:rgba(255,255,255,.2)} .obtn.on{background:var(--g);border-color:var(--g);color:#0d1400} .obtn.rm:hover{border-color:rgba(255,92,147,.5);color:#ff9bbd;background:rgba(255,92,147,.1)} .obtn.sm{padding:5px 13px;font-size:11.5px} /* -- SQUARE CONTROLS ------------------------------------------------------- SoundCloud does not use big pills for filters. These are tight and square.*/ .sc .rng,.sc .secnav{border-radius:var(--r-ctl);padding:3px} .sc .rng .ind,.sc .secnav a.on{border-radius:4px} /* .secnav tracks .rng here too: same padding and type, so the two filters on a page can never read as different controls. Its min-height (v2.css) is not touched - it is primary navigation and keeps a real tap target. */ .sc .rng button,.sc .secnav a{padding:6px 14px;border-radius:4px;font-size:10.5px} .sc .chip{border-radius:4px;padding:3px 8px} .sc .tg{border-radius:var(--r-ctl);padding:5px 11px 5px 9px;font-size:11.5px} .sc .cta{border-radius:var(--r-ctl);padding:8px 8px 8px 16px;font-size:13px;font-weight:700} .sc .cta .kn{width:27px;height:27px;border-radius:4px} .sc .cta.quiet{padding:8px 0} .sc .cta.quiet .kn{width:auto;height:auto;background:transparent;border-radius:0} .sc .card{border-radius:10px} .sc .upsell{border-radius:8px} /* -- FORM (profile) --------------------------------------------------------*/ .fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px} .field{min-width:0} .field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-3);margin-bottom:8px} .field label .req{color:var(--g)} .field input,.field select{width:100%;padding:11px 14px;border-radius:var(--r-ctl); background:var(--fill-1);border:1px solid transparent;outline:none;color:var(--ink); font-family:var(--sans);font-size:14px; transition:background-color .35s var(--ease),border-color .35s var(--ease)} .field input:focus,.field select:focus{background:var(--fill-2);border-color:rgba(180,255,60,.45)} .field input::placeholder{color:var(--ink-3)} .field .hint{font-size:12px;color:var(--ink-3);margin-top:7px} .field.wide{grid-column:1 / -1} .field .pre{display:flex;align-items:center;gap:0;border-radius:var(--r-ctl); background:var(--fill-1);overflow:hidden} .field .pre span{flex:none;padding:11px 0 11px 14px;font-family:var(--mono);font-size:13px; color:var(--ink-3)} .field .pre input{background:none;border:0;padding-left:6px} .field .pre:focus-within{background:var(--fill-2)} /* a row of two switches, profile preferences */ .prefs{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:4px} .pref{display:flex;align-items:center;gap:12px} .pref .pl{font-size:13.5px;font-weight:700} .pref .ps{font-size:12px;color:var(--ink-3);margin-top:3px} /* -- BILLING -------------------------------------------------------------- */ .billhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .state{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:4px; font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase} .state.ok{color:var(--g);background:var(--g-soft)} .state.warn{color:#ffa23d;background:rgba(255,162,61,.12)} .state.bad{color:#ff5c93;background:rgba(255,92,147,.12)} .state i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} /* the plan picker, three across */ .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px} .plan{position:relative;padding:20px;border-radius:10px;background:var(--card);text-align:left; transition:background-color .45s var(--ease)} .plan:hover{background:var(--card-up)} .plan.on{outline:2px solid var(--g);outline-offset:-2px} .plan .pn{font-size:14px;font-weight:700} .plan .pp{font-family:var(--display);font-weight:400;font-size:32px;line-height:1; letter-spacing:.01em;margin-top:12px} .plan .pc{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:8px} .plan .badge2{position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:8.5px; letter-spacing:.12em;text-transform:uppercase;color:var(--g);background:var(--g-soft); border-radius:4px;padding:3px 7px} /* danger zone */ .danger{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; padding:20px 24px;border-radius:10px;background:rgba(255,92,147,.06)} .danger .dt{font-size:14px;font-weight:700} .danger .ds{font-size:12.5px;color:var(--ink-3);margin-top:5px} .danger .db{flex:none;padding:9px 18px;border-radius:var(--r-ctl); border:1px solid rgba(255,92,147,.35);background:transparent;color:#ff9bbd; font-size:12.5px;font-weight:700; transition:background-color .4s var(--ease),color .4s var(--ease)} .danger .db:hover{background:rgba(255,92,147,.16);color:#fff} /* -- SIDEBAR, SoundCloud treatment ----------------------------------------- Tighter rows, squarer, and the section labels sit closer to their group. */ .sc .side-scroll{padding:16px 8px 8px} .sc .acc,.sc .mod,.sc .sub a,.sc .badge{border-radius:var(--r-ctl)} .sc .sh-lab{padding:0 10px 8px;font-size:9px} .sc .side-sp{height:18px} .sc .mod{padding:8px 10px;font-size:13px} .sc .sub a{padding:7px 10px;font-size:12.5px} .sc .acc .av img{border-radius:50%} @media(max-width:1100px){ .plans{grid-template-columns:1fr} } @media(max-width:700px){ .sc .bound{padding:0 16px} .sc .sect{padding:32px 0} .sc .sect.tight{padding:0 0 32px} .fgrid{grid-template-columns:1fr} .shelf-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px 12px} .shelf-rail{grid-auto-columns:minmax(132px,1fr);gap:12px} .statrow .st{min-width:50%;padding:16px 18px} .statrow .st:nth-child(odd)::before{display:none} .danger{padding:16px 18px} .sctabs{gap:18px} .sctabs button{font-size:14px} } /* -- SIDE MENU, the SoundCloud read -------------------------------------- SoundCloud's rail is a dense list of small rows with a circular avatar and two lines of text, grouped under tiny grey caps labels. Ours already had that shape; this tightens it to the same rhythm and squares the corners. The badge in the foot is now the route to Profile, which is where SoundCloud puts the account too. */ .sc .badge.on{background:var(--g-soft)} .sc .badge.on .bn{color:var(--g)} /* the account row carries its live state the way a SC track row carries play count: a small mono line under the name, never a separate badge */ .sc .acc{padding:9px 10px} .sc .acc .n{font-size:13px} .sc .acc .s{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase} /* Modules read as a second list, not as buttons */ .sc .mod .tagx{font-size:8.5px;padding:2px 7px;border-radius:3px} /* the upsell stays the one saturated object, but squarer to match */ .sc .upsell{padding:11px 12px} .sc .upsell .ic{width:29px;height:29px;border-radius:6px;font-size:16px} .sc .upsell .n{font-size:12.5px} .sc .upsell .p{font-size:10px} /* == RANK BANDS · section 05, where you cut the bad and add the good ======== This is the live BAND rule, not a new one: 1-15 green, 16-20 amber, 21+ red (growth-tool-d2.php, Derek 2026-09-09). Ranked by new fans over the window. ON THE ONE COLOUR THAT DOES TWO JOBS: green is also "followers / new fans". A rank band is a VERDICT, not a metric, and it only ever appears inside the rank pill - never as a series, a type dot or a figure. Kept because red / amber / green is read without being learned, which is the whole point. */ .rank{display:inline-flex;align-items:center;gap:7px;padding:4px 9px 4px 7px; border-radius:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em} .rank b{width:6px;height:6px;border-radius:50%;flex:none;background:currentColor} .rank.b1{color:#b4ff3c;background:rgba(180,255,60,.12)} /* 1-15 keep */ .rank.b2{color:#ffc107;background:rgba(255,193,7,.12)} /* 16-20 watch */ .rank.b3{color:#ff4d4d;background:rgba(255,77,77,.12)} /* 21+ cut */ /* the legend that explains the bands, because the point is that people learn the rule rather than guess at it */ .bandkey{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 22px 0; font-size:12.5px;color:var(--ink-3)} .bandkey span{display:inline-flex;align-items:center;gap:8px} .bandkey i{width:8px;height:8px;border-radius:2px;flex:none;font-style:normal} tbody tr.cut td{opacity:.62} tbody tr.cut td:first-child{text-decoration:line-through;text-decoration-color:#ff4d4d} /* == DIALOG · add an account ============================================== The live flow is a Chargebee charge on the card already on file, with a fall back to hosted checkout. The dialog states that before you click, so nobody is surprised by an immediate charge. */ .ovl{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px; background:rgba(0,0,0,.72);opacity:0;visibility:hidden; transition:opacity .4s var(--ease),visibility .4s var(--ease)} .ovl.on{opacity:1;visibility:visible} .dlg{width:min(460px,100%);border-radius:14px;background:#121212;overflow:hidden; box-shadow:0 40px 100px -30px rgba(0,0,0,1); transform:translateY(14px) scale(.98);transition:transform .5s var(--ease)} .ovl.on .dlg{transform:none} .dlg-h{padding:24px 24px 0} .dlg-h .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-3)} .dlg-h h3{font-family:var(--display);font-weight:400;font-size:30px;line-height:.96; letter-spacing:.005em;text-transform:uppercase;margin-top:11px} .dlg-b{padding:18px 24px 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)} .dlg-b p{margin-bottom:11px} .dlg-price{display:flex;align-items:baseline;gap:10px;margin:16px 0 4px} .dlg-price .v{font-family:var(--display);font-weight:400;font-size:42px;line-height:1; letter-spacing:.01em;color:var(--g)} .dlg-price .u{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)} .dlg-list{margin-top:14px} .dlg-list div{display:flex;gap:10px;padding:5px 0;font-size:13px;color:var(--ink-2)} .dlg-list svg{width:14px;height:14px;flex:none;margin-top:3px;stroke:var(--g);fill:none; stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .dlg-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:22px 24px 24px; margin-top:8px} .dlg-f .note{flex:1;min-width:150px;font-size:11.5px;color:var(--ink-3);line-height:1.45} .dlg-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:6px; display:grid;place-items:center;color:var(--ink-3);background:var(--fill-1); transition:color .35s var(--ease),background-color .35s var(--ease)} .dlg-x:hover{color:var(--ink);background:var(--fill-2)} .dlg-x svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round} .dlg{position:relative} /* == SECTION 05 · the cut-and-replace bench ================================ Derek 2026-09-17: "this is essentially where the magic happens to delete the bad + add the good" and "the most important chart to filter our data". So this table is not a report, it is a bench: rank, filter, cut, replace. */ /* the row identity column carries the SAME two signals as a source tile: a coloured dot for the type, the genre as the words. */ .aname{display:flex;align-items:center;gap:10px;min-width:0} .aname .dot{width:7px;height:7px;border-radius:50%;flex:none} .aname .t{min-width:0} .aname .h{display:block;font-family:var(--mono);font-size:12.5px;color:var(--ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .aname .g{display:block;font-size:11px;color:var(--ink-3);margin-top:3px} .aname .g.untagged{opacity:.6} /* the action bar. Only appears when there is actually something to cut. */ .cutbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap; margin:0 0 14px;padding:14px 18px;border-radius:10px; background:rgba(255,77,77,.07)} .cutbar .ic{width:30px;height:30px;border-radius:50%;flex:none;display:grid; place-items:center;background:rgba(255,77,77,.16);color:#ff4d4d} .cutbar .ic svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .cutbar .t{flex:1;min-width:190px} .cutbar .t b{display:block;font-size:13.5px;font-weight:700} .cutbar .t span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:4px} .cutbar .go{flex:none;padding:9px 18px;border-radius:6px;font-size:12.5px;font-weight:700; background:#ff4d4d;color:#20000a; transition:filter .35s var(--ease),transform .35s var(--ease)} .cutbar .go:hover{filter:brightness(1.1)} .cutbar .go:active{transform:scale(.97)} /* the filter row above the table */ .afilt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 0 16px} .afilt .lab{font-family:var(--mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-3);margin-right:4px} .afilt button{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:6px; background:var(--fill-1);font-size:12px;font-weight:500;color:var(--ink-3); transition:color .4s var(--ease),background-color .4s var(--ease)} .afilt button b{width:7px;height:7px;border-radius:50%;flex:none} .afilt button:hover{color:var(--ink-2);background:var(--fill-2)} .afilt button.on{color:var(--ink);background:var(--fill-2)} /* sortable headers, because ranking by a different column is the whole job */ thead th.s{cursor:pointer;user-select:none;transition:color .35s var(--ease)} thead th.s:hover{color:var(--ink-2)} thead th.s .ar{opacity:0;margin-left:6px;transition:opacity .3s var(--ease)} thead th.s.on{color:var(--ink)} thead th.s.on .ar{opacity:1;color:var(--g)} /* == ANALYTICS TABLE ALIGNMENT ============================================= Only td:first-child is left-aligned by the base sheet. The analytics table has TWO identity columns (rank, then source), so the second one inherited text-align:right and the handle + genre sat ragged against the numbers. */ .atbl th:nth-child(1),.atbl td:nth-child(1){text-align:left;width:1%;padding-right:4px} .atbl th:nth-child(2),.atbl td:nth-child(2){text-align:left;padding-left:14px} .atbl td:nth-child(2){min-width:190px} .atbl .rank{min-width:52px;justify-content:center} /* the two identity lines share one baseline grid so genre never floats */ .aname .h{line-height:1.25} .aname .g{line-height:1.25} .atbl td{vertical-align:middle} /* == ENGINE STATE ========================================================== Four states, one colour each, and the avatar carries the same signal as the pill so they can never disagree. */ .eyeb .dot.warn{background:#ffc107;box-shadow:0 0 12px rgba(255,193,7,.5)} .eyeb .dot.bad{background:#ff4d4d;box-shadow:0 0 12px rgba(255,77,77,.55)} /* the account avatar in the rail */ .acc .av.stopped i{background:#5c5c5c;box-shadow:0 0 0 2.5px var(--ground)} .acc .av.idle i{background:#ffc107;box-shadow:0 0 0 2.5px var(--ground),0 0 12px rgba(255,193,7,.5)} .acc .av.alarm i{background:#ff4d4d;box-shadow:0 0 0 2.5px var(--ground),0 0 12px rgba(255,77,77,.6)} /* login_required dims the picture and rings it, because the account is not merely paused - it is locked out and needs the client to act */ .acc .av.alarm img{filter:grayscale(1) brightness(.62)} .acc .av.alarm::after{content:"";position:absolute;inset:-3px;border-radius:50%; border:1.5px solid #ff4d4d;pointer-events:none} .acc .s.warn{color:#ffc107} .acc .s.bad{color:#ff4d4d} /* the hero picture follows the same rule */ .hero .pic.alarm{filter:grayscale(1) brightness(.62); outline:2px solid #ff4d4d;outline-offset:3px} .hero .pic.stopped{filter:grayscale(.75) brightness(.8)} /* the re-login button replaces Stop engine when the account is locked out */ .cta.relog{background:#ff4d4d;color:#20000a} .cta.relog:hover{filter:brightness(1.1);background:#ff4d4d} .cta.relog .kn{background:rgba(32,0,10,.18)} /* a small state switcher so the four states can actually be reviewed */ .states{position:fixed;bottom:16px;right:16px;z-index:60;display:flex;align-items:center;gap:5px; padding:5px;border-radius:999px;background:rgba(18,18,18,.86); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); box-shadow:0 10px 34px -14px rgba(0,0,0,1)} .states i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-3);padding:0 7px 0 9px} .states button{padding:6px 11px;border-radius:999px;font-family:var(--mono);font-size:10px; letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3); transition:color .4s var(--ease),background-color .4s var(--ease)} .states button:hover{color:var(--ink-2)} .states button.on{color:#0d1400;background:var(--g)} @media(max-width:700px){.states{display:none}} /* == THE ACCOUNT HEADER · identical on every page ========================== Rendered by v2-shell.js so it cannot drift. Only the kicker changes. */ .ahead{padding:34px 0 0} .ahead .in{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .ahead .pic{width:104px;height:104px;border-radius:50%;object-fit:cover;flex:none; transition:filter .5s var(--ease)} .ahead .who{min-width:0;flex:1} .ahead .kick2{font-family:var(--mono);font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--ink-3)} .ahead h1{font-family:var(--display);font-weight:400; font-size:clamp(30px,4vw,54px);line-height:.96;letter-spacing:.005em; text-transform:uppercase;margin-top:9px;overflow-wrap:anywhere} .ahead .meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:11px; font-size:13.5px;color:var(--ink-2)} .ahead .meta b{color:var(--ink);font-weight:700} .ahead .meta .hdl{font-family:var(--mono);font-size:12px;color:var(--ink-3)} .ahead .meta .sep{width:4px;height:4px;border-radius:50%;background:var(--ink-3);opacity:.7} .ahead .act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:none} .ahead .pill{margin-bottom:12px} /* NO DIVIDERS on v2 pages (Derek 2026-09-23, "this is given moving forward"). Kept as a transparent 1px so the gap under the header stays the same. */ .ahead .rule{height:1px;background:transparent;margin-top:26px} @media(max-width:700px){ .ahead{padding:18px 0 0} .ahead .pic{width:72px;height:72px} .ahead .in{gap:16px} .ahead .meta{gap:5px 12px} .ahead .meta .sep{display:none} .ahead .act{width:100%} } /* == PROJECTION ============================================================ Same straight-line model /pricing uses, but driven by THIS account's own measured per-day rate rather than the fleet's 35/day. Six horizons, all visible at once, which is the layout Derek already picked on /pricing. */ .proj{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px; background:var(--hair-soft);border-radius:10px;overflow:hidden} .proj .ph{background:var(--card);padding:18px 16px;transition:background-color .45s var(--ease)} .proj .ph:hover{background:var(--card-up)} .proj .ph .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-3)} .proj .ph .v{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.3vw,30px); line-height:1;letter-spacing:.01em;margin-top:11px;color:var(--c-fans)} .proj .ph .s{font-size:11.5px;color:var(--ink-3);margin-top:7px} .projnote{font-size:12.5px;color:var(--ink-3);margin-top:14px;max-width:78ch;line-height:1.55} @media(max-width:1100px){.proj{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:700px){.proj{grid-template-columns:repeat(2,minmax(0,1fr))}} /* == RESEARCH FOOT · the tail of Target sources ============================ Research stopped being its own numbered section: a folio spent on a link is a wasted folio. It reads as the foot of the sources section instead, which matches the actual flow - see what you run, then go find more. */ .rfoot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px; padding:18px 22px;border-radius:10px;background:var(--card)} .rfoot .rf-t{flex:1;min-width:220px} .rfoot .rf-k{font-size:14px;font-weight:700} .rfoot .rf-s{font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.5} .rf-lab{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3);margin-bottom:12px} /* a tab panel head is not a section head */ .kick.sub{color:var(--ink-3)} .sect-lite{padding:26px 0 0} /* == ENGINE CONTROL · 2026-09-18 ============================================ Status lives in the eyebrow over the username; the control is ONE switch on the right. Same on every page because the shell renders both. */ .ahead .kick2{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .ahead .ebsep{width:3px;height:3px;border-radius:50%;background:var(--ink-3);opacity:.7} .ahead .ebst{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2)} .ahead .kick2 .dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--g); box-shadow:0 0 12px rgba(180,255,60,.5)} .ahead .kick2 .dot.live{animation:breathe 2.8s var(--ease) infinite} .ahead .kick2 .dot.off{background:#5c5c5c;box-shadow:none} .ahead .kick2 .dot.bad{background:#ff4d4d;box-shadow:0 0 12px rgba(255,77,77,.55)} .ahead .kick2 .dot.off + span{color:var(--ink-3)} .ahead .kick2 .dot.bad + span{color:#ff4d4d} .eng{display:inline-flex;align-items:center;gap:14px;cursor:pointer;position:relative; padding:8px 8px 8px 16px;border-radius:999px;background:var(--fill-1); transition:background-color .4s var(--ease)} .eng[hidden]{display:none} .eng:hover{background:var(--fill-2)} .eng-t{display:flex;flex-direction:column;align-items:flex-end;line-height:1} .eng-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3)} .eng-v{font-size:14px;font-weight:700;margin-top:5px} .eng input{position:absolute;opacity:0;width:1px;height:1px} .eng i{position:relative;width:52px;height:30px;border-radius:999px;flex:none; background:var(--fill-2);transition:background-color .35s var(--ease)} .eng i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px; border-radius:50%;background:#fff;transition:transform .45s var(--ease),background-color .35s} .eng input:checked + i{background:var(--g)} .eng input:checked + i::after{transform:translateX(22px);background:#0d1400} .eng input:focus-visible + i{outline:2px solid var(--g);outline-offset:3px} .cta.relog[hidden]{display:none} .autos{transition:opacity .45s var(--ease)} .autos.dim{opacity:.5} /* == SECTION HEADER VARIATIONS · 2026-09-18 ================================= Same markup, four renderings, one body class. The functional name (the kicker) is kept in all of them; what goes is the flavour H2 ("What we do for you"), which is where the height was. */ /* A · LABEL - one line: 01 Automations hint. Smallest that still teaches. */ .hd-a .shead{align-items:center;margin-bottom:16px} .hd-a .shead .sl{align-items:baseline;gap:12px} .hd-a .folio{font-family:var(--mono);font-size:11px;-webkit-text-stroke:0;color:var(--ink-3); letter-spacing:.08em;margin:0} .hd-a .shead .sl > div{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .hd-a .kick{font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:0; text-transform:none;color:var(--ink)} .hd-a .shead h2{display:none} .hd-a .shead p{margin:0;font-size:13px} .hd-a .srule{margin-bottom:18px} /* B · RULE - mono label that runs into its own hairline. No copy at all. */ .hd-b .srule{display:none} .hd-b .shead{align-items:center;margin-bottom:18px} .hd-b .shead .sl{flex:1;align-items:center;gap:10px} /* the hairline beside the label, running to the range control, STAYS (Derek 2026-09-23: "keep ... i liked it next to the tool tip"). "No dividers" means the rules ABOVE sections and under the header, not this one. */ .hd-b .shead .sl::after{content:"";flex:1;height:1px;background:var(--hair);min-width:24px} .hd-b .folio{font-family:var(--mono);font-size:11px;-webkit-text-stroke:0;color:var(--g); letter-spacing:.08em;margin:0} .hd-b .kick{font-size:11px;color:var(--ink)} .hd-b .shead h2{display:none} .hd-b .shead p:not([data-state-note]){display:none} .hd-b .shead p[data-state-note]{margin:6px 0 0} .hd-b .sect{padding-top:36px} /* C · TITLE - the kicker becomes the title, folio shrinks to sit beside it. */ .hd-c .shead{margin-bottom:18px} .hd-c .shead .sl{align-items:center;gap:12px} .hd-c .folio{font-size:24px;-webkit-text-stroke:1px rgba(255,255,255,.3);margin:0} .hd-c .kick{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.01em; line-height:.96;color:var(--ink)} .hd-c .shead h2{display:none} .hd-c .shead p{font-size:12.5px;margin-top:6px} /* the review toggle for the above */ .heads{position:fixed;bottom:62px;right:16px;z-index:60;display:flex;align-items:center;gap:5px; padding:5px;border-radius:999px;background:rgba(18,18,18,.86); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); box-shadow:0 10px 34px -14px rgba(0,0,0,1)} .heads i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-3);padding:0 7px 0 9px} .heads button{padding:6px 11px;border-radius:999px;font-family:var(--mono);font-size:10px; letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .heads button:hover{color:var(--ink-2)} .heads button.on{color:#0d1400;background:var(--g)} @media(max-width:700px){.heads{display:none}} /* every review bar (Account, Chart, DM state, Approval, Way in...) is for the mock only. v2-shell.js stamps html.v2-live when V2_LIVE is present. */ html.v2-live .heads,html.v2-live .sw{display:none!important} /* == HASHTAG ARTWORK · 2026-09-18 =========================================== A tag has no profile picture, so it shows what Instagram shows for a tag: its top posts, 2x2. The # mark sits bottom-left so it never fights the type badge (top-left) or the hover action (bottom-right). */ .tile .art .mosaic{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;gap:2px;background:var(--ground)} .tile .art .mosaic img{width:100%;height:100%;object-fit:cover;display:block} .tile .art .tagmark{position:absolute;left:8px;bottom:8px;width:28px;height:28px; border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.8); font-family:var(--mono);font-size:13px;font-weight:700;color:var(--c-views)} /* == ANALYTICS TABLE · 2026-09-18 =========================================== Rank is a quiet number now; the band shows only when it matters (watch / cut). Each count shares a colour with its ratio, so the eye pairs them: new fans + follow back green, new likes + like back in the likes colour. */ .rk{font-family:var(--mono);font-size:11px;color:var(--ink-3)} .rk.b2{color:#ffc107} .rk.b3{color:#ff4d4d} .atbl td.c-f b{color:var(--c-fans)} .atbl td.c-f2{color:color-mix(in srgb,var(--c-fans) 62%,var(--ink-3))} .atbl td.c-l b{color:var(--c-likes)} .atbl td.c-l2{color:color-mix(in srgb,var(--c-likes) 62%,var(--ink-3))} .atbl th.c-f.on,.atbl th.c-f2.on{color:var(--c-fans)} .atbl th.c-l.on,.atbl th.c-l2.on{color:var(--c-likes)} .atbl th.s.on .ar{color:currentColor} .atbl th.s.up .ar{display:inline-block;transform:rotate(180deg)} .atbl tr.empty td{text-align:center;padding:34px 16px;color:var(--ink-3);white-space:normal; font-family:var(--sans);font-size:13px} .statrow .st .v.lk{color:var(--c-likes)} /* review toggles stack: headers above state, account above headers */ .trialsw{bottom:108px} /* the header already ends on a rule, so the first section never draws a second one straight under it (it read as a double divider with dead space between) */ .ahead + .sect > .bound > .srule{display:none} /* ONE gap between the header rule and the first section heading, on every page. It was 0px on research (.sect.tight), 30px on targeting (.ahead + .sect) and 44px on reporting (plain .sect after the mobile upsell), so the heading moved on every navigation. Specific enough to beat all three. */ .sc main.page > .sect:first-of-type{padding-top:32px} /* == ADD ACCOUNT · quieter (2026-09-18) ===================================== "a little too much green". It was a solid lime block, the loudest thing on every page. Now a quiet card; the green is only on the + and on hover. */ .sc .upsell{background:var(--fill-1);color:var(--ink);filter:none} .sc .upsell:hover{background:var(--fill-2);filter:none} .sc .upsell .ic{background:var(--g-soft);color:var(--g)} .sc .upsell .p{color:var(--ink-3);opacity:1} .sc .upsell .go{color:var(--ink-3)} .sc .upsell:hover .go{color:var(--g)} /* == GENRE · 2026-09-18 ===================================================== Unset is loud on purpose: it drives the starter pack and Our picks. */ .gset{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:5px; background:var(--g-soft);color:var(--g);font-size:12.5px;font-weight:700; box-shadow:inset 0 0 0 1px rgba(180,255,60,.35);transition:background-color .3s var(--ease)} .gset:hover{background:rgba(180,255,60,.2)} .gset i{width:6px;height:6px;border-radius:50%;background:var(--g); animation:breathe 2.2s var(--ease) infinite} .gtag{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2)} .gtag:hover{color:var(--ink)} .gtag svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;opacity:.6} .side-genre{display:flex;align-items:center;gap:9px;width:100%;margin:6px 0 2px; padding:9px 12px;border-radius:8px;background:var(--g-soft);text-align:left;font-size:12px; color:var(--ink-2)} .side-genre[hidden]{display:none} .side-genre i{width:6px;height:6px;border-radius:50%;background:var(--g);flex:none; animation:breathe 2.2s var(--ease) infinite} .side-genre span{flex:1} .side-genre b{color:var(--g);font-weight:700} .gdlg{width:min(560px,100%)} .gchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .gchips button{padding:7px 12px;border-radius:6px;background:var(--fill-1);font-size:12.5px; color:var(--ink-2);transition:background-color .3s var(--ease),color .3s} .gchips button:hover{background:var(--fill-2);color:var(--ink)} .gchips button.on{background:var(--g);color:#0d1400;font-weight:700} .gchips button[disabled]{opacity:.35;pointer-events:none} .gmore{margin-top:12px;font-size:12px;font-weight:700;color:var(--ink-3)} .gmore:hover{color:var(--ink)} .gmore[hidden]{display:none} .gtype{display:flex;align-items:center;gap:8px;margin-top:14px;padding:6px 6px 6px 14px;border-radius:8px; background:var(--fill-1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} .gtype:focus-within{box-shadow:inset 0 0 0 1px rgba(180,255,60,.45)} .gtype input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:inherit;font-size:14px;padding:6px 0} .gtype input::placeholder{color:var(--ink-3)} .gtype input:disabled{opacity:.5} .gtype button{flex:none;padding:7px 12px;border-radius:6px;font-size:12.5px;font-weight:700;color:#0d1400;background:var(--g); max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gtype button:disabled{background:var(--fill-2);color:var(--ink-3)} .dlg-f .cta[disabled]{opacity:.45;pointer-events:none} .gensw{bottom:154px} /* == ENGINE IN THE EYEBROW · 2026-09-18 (supersedes the pill on the right) == Small switch, its state beside it. Green when running, grey when off, red link when Instagram signed the account out. */ .ahead .kick2 .eng{display:inline-flex;align-items:center;gap:9px;padding:0;background:none; border-radius:0;cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--g)} .ahead .kick2 .eng:hover{background:none} .ahead .kick2 .eng[hidden]{display:none} .ahead .kick2 .eng.off{color:var(--ink-3)} .ahead .kick2 .eng i{width:28px;height:16px;border-radius:999px;flex:none;position:relative; background:var(--fill-2);transition:background-color .3s var(--ease)} .ahead .kick2 .eng i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px; border-radius:50%;background:#fff;transition:transform .35s var(--ease),background-color .3s} .ahead .kick2 .eng input:checked + i{background:var(--g)} .ahead .kick2 .eng input:checked + i::after{transform:translateX(12px);background:#0d1400} .ahead .kick2 .eng input:focus-visible + i{outline:2px solid var(--g);outline-offset:3px} .relog-l{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px; letter-spacing:.2em;text-transform:uppercase;color:#ff4d4d} .relog-l[hidden]{display:none} .relog-l i{width:6px;height:6px;border-radius:50%;background:#ff4d4d; box-shadow:0 0 10px rgba(255,77,77,.6)} .relog-l b{margin-left:4px;padding:3px 8px;border-radius:4px;background:#ff4d4d;color:#20000a; letter-spacing:.12em} .ahead .act{display:none} /* == SECTION HEADS · no folio, no description (2026-09-18) ================ "remove 01" and "remove these, we will use tooltips". The explanation is one (i) away. Original keeps everything for comparison. */ body:not(.hd-o) .folio{display:none} .hd-b .shead .sl::before{content:none} .tipi{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:8px; vertical-align:middle;border-radius:50%;color:var(--ink-3);cursor:help; transition:color .25s var(--ease),background-color .25s} .tipi:hover,.tipi:focus-visible{color:var(--ink);background:var(--fill-1);outline:none} .tipi svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8; stroke-linecap:round} .kick .tipi{position:relative;top:-1px} /* THE TOOLTIP. Built to be read: 13.5px, 1.5 leading, 300px measure. */ .v2tip{position:fixed;z-index:90;max-width:300px;padding:11px 14px;border-radius:8px; background:#1c1e1a;color:#f2f2f2;font-family:var(--sans);font-size:13.5px;font-weight:400; line-height:1.5;letter-spacing:0;text-transform:none; box-shadow:0 14px 40px -12px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.06); opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none; transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s} .v2tip.on{opacity:1;visibility:visible;transform:none} .v2tip.below{transform:translateY(-4px)} .v2tip.below.on{transform:none} .v2tip::after{content:"";position:absolute;left:calc(var(--ax,50%) - 6px);top:100%; border:6px solid transparent;border-top-color:#1c1e1a} .v2tip.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#1c1e1a} /* the first section never draws a rule under the header's rule, on any page */ main.page > .sect:first-of-type > .bound > .srule{display:none} /* the stat row reads centred */ .statrow .st{text-align:center} /* == CARD MOTION · 2026-09-18 ============================================== */ /* the page footer's .foot padding (32/60) was leaking into the card footers */ .stat .foot{padding:0;margin:0} .spw{position:relative;display:block;flex:1;min-width:0;height:42px} .spw .spark{display:block} .sp-dot,.sp-live{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%; background:var(--c);box-shadow:0 0 10px var(--c);pointer-events:none;opacity:0} .sp-dot{transition:opacity .2s} .sp-dot.on{opacity:1} .spw.done .sp-live{opacity:1} .spw.scrub .sp-live{opacity:0} .sp-live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--c); opacity:0;animation:sp-ping 2.4s var(--ease) infinite} @keyframes sp-ping{0%{transform:scale(.5);opacity:.8}70%,100%{transform:scale(2.1);opacity:0}} .sp-hair{position:absolute;top:-6px;bottom:0;width:1px;margin-left:-.5px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.35));opacity:0; pointer-events:none;transition:opacity .2s} .spw.scrub .sp-hair{opacity:1} .stat .chip.day{color:var(--ink);background:var(--fill-2)} .dial .ring .fg{transition:none} .dial .ring .tick{stroke:rgba(255,255,255,.22);stroke-width:1.2;stroke-linecap:round} .dial .ring .knob{filter:drop-shadow(0 0 5px rgba(255,255,255,.35))} .b-fbr .dial .ring .fg{filter:drop-shadow(0 0 6px rgba(180,255,60,.35))} .b-lbr .dial .ring .fg{filter:drop-shadow(0 0 6px rgba(255,46,136,.35))} @media (prefers-reduced-motion: reduce){ .sp-live::after{animation:none} } /* == HEADING v3 + ENGINE ON THE ACCOUNT ROW · 2026-09-18 ===================== */ .ahead .kick2{display:none} .ahead .in{align-items:center;gap:26px} .ahead h1{margin-top:0} .ahead .meta{margin-top:12px;font-size:14px} .ahead .meta .today{color:var(--ink-2)} .ahead .meta .today b{color:var(--g);font-weight:700} .gline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px} .gchip{padding:4px 10px;border-radius:5px;background:var(--fill-1);font-size:12px; font-weight:500;color:var(--ink-2)} .gedit{width:26px;height:26px;border-radius:5px;display:grid;place-items:center;color:var(--ink-3)} .gedit:hover{color:var(--ink);background:var(--fill-1)} .gedit svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .gline .gset{font-size:12px} /* the picture's ring IS the engine state in the heading: quiet, not a control */ .picw{position:relative;display:block;flex:none;border-radius:50%;padding:4px; box-shadow:inset 0 0 0 2px rgba(180,255,60,.55);transition:box-shadow .4s var(--ease)} .picw.paused{box-shadow:inset 0 0 0 2px rgba(255,255,255,.14)} .picw.paused .pic{filter:grayscale(.75) brightness(.8)} .picw.locked{box-shadow:inset 0 0 0 2px #ff4d4d} .picw.locked .pic{filter:grayscale(1) brightness(.62)} .picw .pic{display:block;width:96px;height:96px;outline:none} .relog-l{margin-left:4px} /* rail: account row + its switch */ .accrow{position:relative;display:flex;align-items:center} .accrow .acc{flex:1;min-width:0;padding-right:54px} .sc .acc .s{color:var(--ink-3)} .sc .acc .s.bad{color:#ff4d4d} .eng2{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer} .eng2[hidden]{display:none} .eng2 input{position:absolute;opacity:0;width:1px;height:1px} .eng2 i{display:block;width:30px;height:17px;border-radius:999px;background:var(--fill-2); position:relative;transition:background-color .3s var(--ease)} .eng2 i::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%; background:#8a8a8a;transition:transform .35s var(--ease),background-color .3s} /* on = a quiet green, not the full lime block */ .eng2 input:checked + i{background:rgba(180,255,60,.28)} .eng2 input:checked + i::after{transform:translateX(13px);background:var(--g)} .eng2 input:focus-visible + i{outline:2px solid var(--g);outline-offset:3px} @media(max-width:700px){ .picw .pic{width:68px;height:68px} } /* whatever comes first under the header - a section, profile's stat row, engagement's hero - starts the same 32px below the header rule */ .sc main.page > .sect-lite:first-of-type,.sc main.page > .ehero{padding-top:32px} /* == RECONNECT ON THE PICTURE (2026-09-18) ================================= */ .relog-l{display:none!important} .picw .reconn{position:absolute;inset:4px;border-radius:50%;display:grid;place-items:center; background:rgba(20,0,4,.55);color:#ff4d4d;cursor:pointer;transition:background-color .25s} .picw .reconn[hidden]{display:none} .picw .reconn svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)} .picw .reconn:hover{background:rgba(40,0,8,.7)} .picw .reconn:hover svg{transform:rotate(-40deg)} .picw.locked{box-shadow:inset 0 0 0 2px #ff4d4d,0 0 0 0 rgba(255,77,77,.5); animation:rc-pulse 2.2s var(--ease) infinite} @keyframes rc-pulse{0%{box-shadow:inset 0 0 0 2px #ff4d4d,0 0 0 0 rgba(255,77,77,.45)} 70%,100%{box-shadow:inset 0 0 0 2px #ff4d4d,0 0 0 14px rgba(255,77,77,0)}} /* the callout points at the picture: the one thing they have to do */ .rc-call{display:flex;align-items:center;gap:10px;margin-top:12px;padding:9px 14px 9px 10px; border-radius:8px;background:rgba(255,77,77,.1);box-shadow:inset 0 0 0 1px rgba(255,77,77,.35); color:#ffd6d6;font-size:13px;line-height:1.4;text-align:left;cursor:pointer} .rc-call[hidden]{display:none} .rc-call b{color:#fff} .rc-call svg{width:18px;height:18px;flex:none;fill:none;stroke:#ff4d4d;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round;animation:rc-nudge 1.4s var(--ease) infinite} .rc-call:hover{background:rgba(255,77,77,.16)} @keyframes rc-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}} @media (prefers-reduced-motion: reduce){ .picw.locked,.rc-call{animation:none} } .acc .av.alarm{cursor:pointer} .rc-toast{position:fixed;left:50%;top:22px;z-index:95;transform:translate(-50%,-12px);opacity:0; display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;background:#1c1e1a; font-size:13px;box-shadow:0 14px 40px -12px #000;pointer-events:none; transition:opacity .25s,transform .25s var(--ease)} .rc-toast.on{opacity:1;transform:translate(-50%,0)} .rc-toast i{width:14px;height:14px;border-radius:50%;border:2px solid rgba(180,255,60,.25); border-top-color:var(--g);animation:rc-spin .8s linear infinite} @keyframes rc-spin{to{transform:rotate(360deg)}} /* QA item 2: the shared message toast. Same shell as .rc-toast, but it carries a message instead of a spinner, so nothing on a v2 page needs native alert(). */ .v2-toast{position:fixed;left:50%;top:22px;z-index:96;transform:translate(-50%,-12px); opacity:0;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:8px; background:#1c1e1a;border:1px solid var(--hair);font-size:13px;max-width:calc(100% - 32px); pointer-events:none;transition:opacity .25s,transform .25s var(--ease)} .v2-toast.on{opacity:1;transform:translate(-50%,0)} .v2-toast i{width:6px;height:6px;border-radius:50%;background:var(--g);flex:none} .v2-toast.bad i{background:#ff4d4d} @media(max-width:700px){ .v2-toast{top:14px} } .rc-dlg{padding:28px 26px 22px;text-align:center;width:min(420px,100%)} .rc-step{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px; letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .rc-step svg,.rc-trust svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linejoin:round} .rc-dlg h3{font-family:var(--display);font-weight:400;font-size:28px;line-height:.96; text-transform:uppercase;letter-spacing:.01em;margin-top:12px} .rc-dlg p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:12px} .rc-h{color:var(--g);font-weight:700} .rc-act{color:var(--g)} .rc-lab{display:block;text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-3);margin-top:20px} .rc-sel,.rc-code{width:100%;margin-top:8px;padding:13px 14px;border-radius:8px;border:1px solid transparent; background:var(--fill-1);color:var(--ink);font-family:var(--sans);font-size:14px;outline:none} .rc-code{margin-top:20px;text-align:center;font-family:var(--mono);font-size:20px;letter-spacing:.3em} .rc-sel:focus,.rc-code:focus{border-color:rgba(180,255,60,.5)} .rc-code.bad{border-color:#ff4d4d} .rc-go{display:block;width:100%;margin-top:16px;padding:14px;border-radius:8px;background:var(--g); color:#0d1400;font-size:14.5px;font-weight:700} .rc-go:hover{filter:brightness(1.07)} .rc-trust{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px; font-size:11.5px;color:var(--ink-3)} .rc-later{margin-top:10px;font-size:12px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px} .rc-later:hover{color:var(--ink)} .rc-ok svg{width:52px;height:52px;fill:none;stroke:var(--g);stroke-width:2;stroke-linecap:round; stroke-linejoin:round} /* == SIDE FOOT (2026-09-18) ================================================= The divider above Billing | Settings | Logout is back - without it the foot floated. The profile badge's active state is quiet: no green fill, a thin inset line and the name brightens. Green stays for the nav item you are on. */ /* 65px tall, the same as the player dock, so the rule above the badge and the dock's top line are one line (Derek 2026-09-23): 1px rule + 5 + 53px badge + 6 */ .side-foot{border-top:1px solid var(--hair);padding-top:5px;padding-bottom:6px} .sc .badge.on{background:transparent} .sc .badge.on:hover{background:var(--fill-1)} .sc .badge.on .bn{color:var(--ink)} /* plan name stays lime: the user-badge rule (paid plan in lime) */ /* foot badge = Name @handle, no border (Derek 2026-09-23). The plan line only shows when a page sends no handle. Handle in real case, muted, never lime. */ .sc .badge>span{min-width:0} .sc .badge .bp.h{color:var(--ink-3);font-family:var(--sans);font-size:12px;font-weight:500; letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* dim the automation CARDS: the reveal sets an inline opacity on .autos itself */ .autos.dim .auto{opacity:.45} /* == LIBRARY VERDICT (2026-09-18) =========================================== Proven/Good = green, Check first = amber, Weak = red. A tick means the verdict comes from real results across the artists we run; no tick means profile checks only. The fleet number itself never shows. */ .vdw{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;margin-top:6px} .vd{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:4px; font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; font-weight:700;white-space:nowrap;cursor:help} .vd svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round} .vd.good{color:var(--g);background:var(--g-soft)} .vd.check{color:#ffc107;background:rgba(255,193,7,.12)} .vd.weak{color:#ff6b6b;background:rgba(255,77,77,.12)} .vd.none{color:var(--ink-3);background:var(--fill-1);font-weight:500} .vc{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3);white-space:nowrap} .vc i{width:5px;height:5px;border-radius:50%;flex:none} .vc.ok i{background:var(--g)} .vc.no i{background:#ff6b6b} /* == CONNECT / 2FA FLOW (2026-09-18) ======================================== The live popups, one skin, used by the connect page and the picture reconnect. Methods are tappable rows, not a