/* OpsCon — admin interface. Palette is the municipal-seal family used across the generated sites, so the builder and its output read as one system. */ /* The clean theme — the same tokens as the published EWS (OpsCon clean): a pale blue-grey ground, white cards that float on soft shadows instead of borders, one blue accent, Figtree for text and IBM Plex Mono for figures. The old names are kept so every rule below picks the theme up. */ :root { --navy:#4668B0; --navy-deep:#172238; --navy-line:#3A5A9E; --cyan:#4FAED6; --brand-navy:#172238; --brand-deep:#172238; --gold:#FEAC26; --gold-deep:#C9820A; --green:#12A06A; --sand:#D6B182; --paper:#F6F7F9; --surface:#FFFFFF; --sunk:#F1F3F7; --ink:#172238; --body:#3A4760; --muted:#5E6A82; --faint:#97A1B4; --hair:#E4E8EF; --hair-strong:#CFD6E2; --accent-soft:#EAEFF8; /* The console's brand: filled buttons use --brand with --brand-ink on it; --navy/--cyan/--accent are the same hue as text and thin accents. Account → Console branding replaces all of them (ConsoleBrand::css). */ --brand:#4668B0; --brand-hi:#3A5A9E; --brand-ink:#FFFFFF; --brand-shadow:rgba(70,104,176,.25); --accent:#2F6FB2; --mast-ink:#FFFFFF; /* Selected tabs, the current step, the assistant's Send: black until a partner picks a colour, then that colour. */ --solid:#111111; --solid-ink:#FFFFFF; --ok:#0B7F53; --ok-bg:#E3F5EC; --warn:#9A6400; --warn-bg:#FFF4DE; --err:#C0281D; --err-bg:#FDEBEA; --shadow:0 1px 2px rgba(16,32,52,.06), 0 4px 12px rgba(16,32,52,.07); --shadow-lg:0 2px 4px rgba(16,32,52,.05), 0 10px 30px rgba(16,32,52,.09); --radius:14px; --rs:10px; --font:"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; color-scheme:light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --navy:#7B96D6; --navy-deep:#E9EEF8; --navy-line:#95ABE0; --cyan:#6CC3E6; --paper:#0B1120; --surface:#141D30; --sunk:#10182A; --ink:#E9EEF8; --body:#C3CCDD; --muted:#95A1B8; --faint:#65718A; --hair:#22304A; --hair-strong:#2E3F5E; --accent-soft:#1C2945; --ok:#4CCB8F; --ok-bg:#0E2A1F; --warn:#F2B64A; --warn-bg:#2B2210; --err:#F0837A; --err-bg:#2E1513; --shadow:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.4); --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.5); color-scheme:dark; } } :root[data-theme="dark"] { --navy:#7B96D6; --navy-deep:#E9EEF8; --navy-line:#95ABE0; --cyan:#6CC3E6; --paper:#0B1120; --surface:#141D30; --sunk:#10182A; --ink:#E9EEF8; --body:#C3CCDD; --muted:#95A1B8; --faint:#65718A; --hair:#22304A; --hair-strong:#2E3F5E; --accent-soft:#1C2945; --ok:#4CCB8F; --ok-bg:#0E2A1F; --warn:#F2B64A; --warn-bg:#2B2210; --err:#F0837A; --err-bg:#2E1513; --shadow:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.4); --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.5); color-scheme:dark; } * { box-sizing: border-box; } body { margin:0; background:var(--paper); color:var(--body); font:15px/1.55 var(--font); -webkit-font-smoothing:antialiased; } h1,h2,h3 { margin:0; color:var(--ink); letter-spacing:-.018em; text-wrap:balance; } h1 { font-size:1.55rem; line-height:1.15; } h2 { font-size:1.15rem; } h3 { font-size:.95rem; } p { margin:0; } a { color:var(--navy); text-decoration:none; } a:hover { text-decoration:underline; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--gold); outline-offset:2px; border-radius:2px; } code, .mono { font-family:var(--mono); font-size:.86em; } code { background:var(--sunk); border:1px solid var(--hair); border-radius:3px; padding:.08em .35em; color:var(--ink); } .muted { color:var(--muted); } .small { font-size:.86rem; } .eyebrow { font-size:.66rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); } /* ---------- chrome ---------- */ .topbar { background:var(--navy-deep); color:#fff; display:flex; align-items:center; gap:26px; padding:0 22px; border-bottom:3px solid var(--gold); } .brand { display:flex; align-items:baseline; gap:7px; padding:14px 0; color:#fff; } .brand:hover { text-decoration:none; } .brand .mark { font-weight:800; letter-spacing:.06em; } .brand .sub { font-size:.75rem; color:var(--gold); letter-spacing:.14em; text-transform:uppercase; } .topbar nav { display:flex; gap:18px; } .topbar nav a { color:rgba(255,255,255,.78); font-size:.88rem; font-weight:500; } .topbar nav a:hover { color:#fff; text-decoration:none; } .topbar .who { margin-left:auto; font-size:.82rem; color:rgba(255,255,255,.6); display:flex; gap:14px; align-items:center; } .topbar .who a { color:var(--gold); } .wrap { max-width:1240px; margin:0 auto; padding:26px 22px 70px; } .sitefoot { max-width:1240px; margin:0 auto; padding:0 22px 34px; font-size:.78rem; color:var(--muted); } body.bare { display:grid; place-items:center; min-height:100vh; } body.install .wrap { max-width:760px; } .pagehead { display:flex; align-items:flex-end; gap:20px; margin-bottom:22px; flex-wrap:wrap; } .pagehead > div:first-child { display:flex; flex-direction:column; gap:5px; } .pagehead .headactions { margin-left:auto; } /* ---------- cards ---------- */ .card { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px; } .card.narrow { max-width:620px; } /* A card that is telling the operator something is wrong with the data it is showing. Tinted rather than merely outlined, because it sits directly above the table it is contradicting. */ .card.warn { background:var(--warn-bg); border-color:var(--warn); } .card.warn h2 { color:var(--warn); } .card.empty { align-items:flex-start; } .login { width:min(420px, 92vw); } .login .card { gap:16px; } /* ---------- forms ---------- */ label { display:flex; flex-direction:column; gap:5px; font-size:.86rem; font-weight:600; color:var(--ink); } label.check { flex-direction:row; align-items:flex-start; gap:10px; font-weight:500; } label.check input { margin-top:3px; accent-color:var(--navy); } label.check .muted { font-weight:400; display:block; } input[type=text], input[type=email], input[type=password], input[type=number], input:not([type]), select, .sel { font:inherit; font-weight:400; padding:8px 11px; border:1px solid var(--hair-strong); border-radius:3px; background:var(--surface); color:var(--ink); width:100%; } .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; } hr { border:0; border-top:1px solid var(--hair); margin:4px 0; } form { display:flex; flex-direction:column; gap:14px; } .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; align-self:flex-start; background:var(--brand); color:var(--brand-ink); border:1px solid var(--brand); padding:9px 17px; border-radius:3px; font-size:.87rem; font-weight:600; cursor:pointer; } .btn:hover { background:var(--brand-hi); text-decoration:none; color:var(--brand-ink); } .btn[disabled] { opacity:.45; cursor:not-allowed; } .btn.ghost { background:transparent; color:var(--ink); border-color:var(--hair-strong); } .btn.ghost:hover { background:var(--sunk); color:var(--ink); } .btn.small { padding:6px 12px; font-size:.8rem; } /* type-ahead */ .results { border:1px solid var(--hair-strong); border-radius:3px; background:var(--surface); max-height:280px; overflow:auto; } .result { display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--hair); padding:9px 12px; cursor:pointer; font:inherit; color:var(--body); } .result:last-child { border-bottom:0; } .result:hover { background:var(--sunk); } .result strong { color:var(--ink); font-size:.88rem; } .result span { font-size:.76rem; color:var(--muted); } .chosen { font-size:.86rem; padding:9px 12px; background:var(--ok-bg); color:var(--ok); border-radius:3px; } /* ---------- alerts ---------- */ .alert { padding:12px 15px; border-radius:3px; font-size:.88rem; border-left:4px solid; margin-bottom:16px; } .alert.ok { background:var(--ok-bg); border-color:var(--ok); color:var(--ok); } .alert.warn { background:var(--warn-bg); border-color:var(--warn); color:var(--warn); } .alert.error{ background:var(--err-bg); border-color:var(--err); color:var(--err); } .alert code { background:rgba(0,0,0,.06); } /* ---------- tables ---------- */ .tw { overflow-x:auto; border:1px solid var(--hair); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); } .tw.scroll { max-height:340px; overflow-y:auto; } table { border-collapse:collapse; width:100%; font-size:.86rem; } thead th { text-align:left; padding:9px 13px; background:var(--navy); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; position:sticky; top:0; } tbody td { padding:9px 13px; border-bottom:1px solid var(--hair); } tbody tr:last-child td { border-bottom:0; } tbody tr:hover { background:var(--sunk); cursor:default; } td.name { font-weight:600; color:var(--ink); white-space:nowrap; } td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; font-family:ui-monospace, monospace; font-size:.8rem; white-space:nowrap; } table.compact tbody td { padding:6px 11px; font-size:.82rem; } .pill { display:inline-block; font-size:.7rem; font-weight:700; padding:2px 9px; border-radius:10px; background:var(--sunk); color:var(--muted); } .pill.s-draft { background:var(--sunk); color:var(--muted); } .pill.s-geography { background:var(--warn-bg); color:var(--warn); } .pill.s-intake { background:var(--warn-bg); color:var(--warn); } .pill.s-scored { background:var(--ok-bg); color:var(--ok); } .pill.s-published { background:var(--navy); color:#fff; } /* ---------- stats ---------- */ .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-bottom:20px; } .stat { background:var(--surface); padding:14px 16px; display:flex; flex-direction:column; gap:3px; } .stat .v { font-size:1.5rem; font-weight:700; color:var(--ink); line-height:1.05; font-variant-numeric:tabular-nums; letter-spacing:-.025em; } .stat .k { font-size:.68rem; font-weight:600; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; } /* ---------- map ---------- */ .maplayout { display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; } @media (max-width:940px) { .maplayout { grid-template-columns:1fr; } } /* overflow:hidden is deliberate. Leaflet's own stylesheet sets it, but if that stylesheet ever fails to load the tiles are absolutely positioned with nothing to clip them and spread across the entire page. This keeps a missing stylesheet looking like a broken map rather than a broken site. */ .map { height:min(72vh, 660px); overflow:hidden; position:relative; border:1px solid var(--hair); border-radius:var(--radius); background:var(--sunk); box-shadow:var(--shadow); } .mapnote { font-size:.76rem; margin-top:8px; } .mapside { display:flex; flex-direction:column; gap:14px; } .panel { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:15px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow); } .toggles { display:flex; flex-direction:column; gap:2px; } .toggle { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; padding:7px 0; border-bottom:1px solid var(--hair); font-weight:400; cursor:pointer; } .toggle:last-child { border-bottom:0; } .toggle input { accent-color:var(--navy); } .toggle .t { display:flex; flex-direction:column; gap:1px; } .toggle .t strong { font-size:.83rem; color:var(--ink); font-weight:600; } .toggle .agency { font-size:.7rem; color:var(--muted); } .toggle .status { font-size:.68rem; color:var(--muted); font-family:ui-monospace,monospace; } .toggle.failed .t strong { color:var(--err); } .toggle.failed .status { color:var(--err); } /* leaflet popups inherit the app's type rather than the library's */ .leaflet-popup-content { font:inherit; font-size:.84rem; } .leaflet-container { font:inherit; } /* ---------- installer ---------- */ .ihead { padding:44px 0 22px; display:flex; flex-direction:column; gap:12px; } .steps { list-style:none; display:flex; gap:8px; margin:8px 0 0; padding:0; flex-wrap:wrap; } .steps li { display:flex; align-items:center; gap:7px; font-size:.8rem; color:var(--muted); padding:5px 12px 5px 5px; border:1px solid var(--hair); border-radius:20px; background:var(--surface); } .steps li span { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:var(--sunk); font-size:.7rem; font-weight:700; } .steps li.now { border-color:var(--gold); color:var(--ink); font-weight:600; } .steps li.now span { background:var(--gold); color:#3A2C00; } .steps li.done span { background:var(--ok); color:#fff; } .checks { width:100%; border-collapse:collapse; font-size:.86rem; } .checks td { padding:7px 9px; border-bottom:1px solid var(--hair); vertical-align:top; } .checks .mark { width:26px; font-weight:700; text-align:center; } .checks tr.ok .mark { color:var(--ok); } .checks tr.bad .mark { color:var(--err); } .checks tr.warn .mark { color:var(--warn); } .next { margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:8px; font-size:.88rem; } .next li::marker { color:var(--gold-deep); } .foot { text-align:center; font-size:.78rem; color:var(--muted); padding:26px 0; } @media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } } /* ---------- setup ---------- */ .regiongrid { display:flex; flex-direction:column; gap:1px; background:var(--hair); border:1px solid var(--hair); } .regionrow { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; background:var(--surface); padding:8px 13px; margin:0; } .regionrow .rlabel { font-size:.86rem; color:var(--ink); font-weight:500; } .regionrow .rcount { font-size:.74rem; color:var(--muted); font-family:ui-monospace,monospace; white-space:nowrap; } .regionrow .rcount.has { color:var(--ok); } .shellnote { font-size:.84rem; color:var(--muted); border-top:1px solid var(--hair); padding-top:12px; } .shellnote summary { cursor:pointer; font-weight:600; color:var(--ink); } .shellnote p { margin-top:8px; } /* probe report — monospaced, selectable, scrolls rather than stretching */ pre.probe { margin:0; background:var(--navy-deep); color:#E8ECFB; border-radius:4px; padding:15px 17px; overflow-x:auto; font-family:ui-monospace,"JetBrains Mono",Menlo,monospace; font-size:.78rem; line-height:1.62; white-space:pre; user-select:all; } /* ---------- map legends ---------- Swatch images come from the agency's own service, so they are whatever size ArcGIS produced; constrain them rather than trusting the source. */ .legend { display:flex; flex-direction:column; gap:5px; padding:8px 0 10px 26px; } /* An author `display` rule beats the browser's own `[hidden] { display: none }`, so `.legend { display:flex }` kept the legend on screen after its layer was switched off — the checkbox was doing its job and the CSS was overruling it. Stated once, globally, because every element this file gives a display value to is a candidate for the same bug. */ [hidden] { display:none !important; } .legend.own { padding:0; gap:6px; } .legenditem { display:flex; align-items:center; gap:8px; font-size:.76rem; color:var(--body); line-height:1.3; } .legenditem img { width:17px; height:17px; object-fit:contain; flex:none; border:1px solid var(--hair); border-radius:2px; background:#fff; } .legenditem i { width:17px; height:17px; flex:none; border-radius:2px; display:block; } .legenditem i.sw-outline { border:2px dashed var(--navy); background:transparent; } .legenditem i.sw-brgy { border:1px solid var(--navy); background:color-mix(in srgb,var(--navy) 8%,transparent); } .legendnote { font-size:.74rem; color:var(--muted); font-style:italic; } /* ---------- progressive runners (probe, overlay) ---------- The output pane starts hidden and grows; it is capped so a run over forty layers cannot push the rest of the page off the screen. `user-select:all` on pre.probe already makes one click select the whole block for pasting. */ .runstatus { margin:8px 0 0; min-height:1.1em; font-style:italic; } .panel pre.probe { margin-top:10px; max-height:300px; overflow-y:auto; font-size:.72rem; line-height:1.55; white-space:pre-wrap; word-break:break-word; } /* ---------- overlay results ---------- */ .tw.tall { max-height:520px; overflow-y:auto; } table.runs tr.msg td { border-top:0; padding-top:0; padding-bottom:9px; line-height:1.45; } table.overlay td.nil { color:var(--muted); } table.overlay td.strong { font-weight:700; } table.overlay thead th.num { font-size:.72rem; } /* ---------- municipal data intake ---------- */ /* A LOADED DATASET LOOKED EXACTLY LIKE AN EMPTY ONE. `.pill.s-ready` was used on this screen and never defined, so it fell back to the grey default — the one pill on the page whose whole job is saying "this is done" was the same colour as "this is not". */ .pill.s-ready{background:var(--ok-bg);color:var(--ok)} .sectionhead{margin:22px 0 10px} /* The individual-upload fallback, inside a disclosure. Separated by a rule rather than a card each, because they are an escape hatch and should not compete with the two datasets that genuinely still need a file. */ .dsalt{padding:12px 0;border-top:1px solid var(--hair)} .dsalt h3{margin:0 0 8px} .dsalt .dsactions{margin:0 0 8px} .datasets{display:grid;gap:14px;margin-bottom:18px} .card.dataset{margin:0} .dshead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .dshead h2{margin:0} .dsactions{display:flex;align-items:baseline;gap:10px;margin:10px 0 12px} .dsupload{display:flex;align-items:center;gap:10px;flex-wrap:wrap; background:var(--ground,#F6F7FB);border:1px solid var(--hair);border-radius:6px;padding:10px 12px} .dsupload input[type=file]{font-size:.82rem;flex:1 1 240px;min-width:0} .dsupload button{flex:0 0 auto} /* Findings read top-to-bottom under pressure, so the severity marker is a glyph in its own column rather than a colour on the row: colour alone is not readable to everyone, and this table is where someone is being told their data is wrong. */ table.findings td.mark{width:1.6em;text-align:center;font-weight:700} table.findings tr.error td.mark{color:#96201B} table.findings tr.warning td.mark{color:#B85A10} table.findings tr.error{background:#FFF6F5} table.findings tr.warning{background:#FFFBF3} /* ============================================================ app shell == The project page used to be a map with eight panels stacked beside it — a list of everything the software can do, in no particular order. What follows turns it into a workspace: one identity bar, one row of tabs, and one thing on screen at a time. */ .projhead{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap; margin:0 0 16px;padding-bottom:0} .projhead .idblock{display:flex;flex-direction:column;gap:3px;min-width:0} .projhead .eyebrow a{color:var(--muted)} .projhead .headmeta{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap} /* Tabs. The underline sits on the tab rather than the bar so the active tab reads as attached to the content below it. */ nav.tabs{display:flex;gap:2px;border-bottom:1px solid var(--hair); margin:0 0 22px;overflow-x:auto;scrollbar-width:none} nav.tabs::-webkit-scrollbar{display:none} nav.tabs button{appearance:none;background:none;border:0;cursor:pointer; font:inherit;font-size:.88rem;font-weight:500;color:var(--muted); padding:10px 15px;white-space:nowrap;border-bottom:2px solid transparent; margin-bottom:-1px} nav.tabs button:hover{color:var(--ink)} nav.tabs button.on{color:var(--navy);border-bottom-color:var(--navy);font-weight:600} nav.tabs button.far{margin-left:auto} .tabpane{animation:fadein .12s ease-out} @keyframes fadein{from{opacity:.4}to{opacity:1}} /* ---------- the workflow, as state ---------- */ .worklist{display:flex;flex-direction:column;gap:1px;background:var(--hair); border:1px solid var(--hair);border-radius:var(--radius); box-shadow:var(--shadow);margin-bottom:20px;overflow:hidden} .workstep{display:flex;align-items:center;gap:14px;background:var(--surface); padding:13px 16px;color:inherit;text-decoration:none} .workstep:hover{background:var(--sunk);text-decoration:none} .workstep .marker{flex:none;width:26px;height:26px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums; background:var(--sunk);color:var(--muted);border:1px solid var(--hair-strong)} .workstep .body{display:flex;flex-direction:column;gap:1px;min-width:0} .workstep .body strong{color:var(--ink);font-size:.92rem;font-weight:600} .workstep .state{margin-left:auto;flex:none;font-size:.68rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .workstep.done .marker{background:var(--ok-bg);color:var(--ok);border-color:transparent} .workstep.done .state{color:var(--ok)} .workstep.ready .marker{background:var(--navy);color:#fff;border-color:transparent} .workstep.ready .state{color:var(--navy)} .workstep.waiting{opacity:.55} /* ---------- cards ---------- */ .cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:18px;align-items:start} .cardhead{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:6px} .cardhead > div:first-child{min-width:0;flex:1 1 320px} .cardhead h2{margin-bottom:3px} .cardhead form,.cardhead > a{flex:none;margin-left:auto} .published{display:flex;align-items:center;gap:18px;flex-wrap:wrap; background:var(--sunk);border:1px solid var(--hair);border-radius:var(--radius); padding:13px 15px;margin-top:12px} .published .pubactions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} .btn.ghost.danger{color:var(--err);border-color:var(--err)} .btn.ghost.danger:hover{background:var(--err-bg)} .block{display:block} /* ---------- data tables ---------- Thirty-six barangays by several classes is a table people scan rather than read, so: a sticky header that survives scrolling, tabular figures that line up on the decimal, and a visible difference between a measured zero and a value nobody supplied. */ table.dtable{width:100%;border-collapse:collapse;font-size:.85rem} table.dtable thead th{position:sticky;top:0;z-index:2;background:var(--sunk); color:var(--muted);text-align:left;font-size:.68rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase;padding:8px 11px; border-bottom:1px solid var(--hair-strong);white-space:nowrap} table.dtable td{padding:8px 11px;border-bottom:1px solid var(--hair); vertical-align:top;color:var(--body)} table.dtable tbody tr:hover td{background:var(--sunk)} table.dtable td.num,table.dtable th.num{text-align:right;white-space:nowrap; font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,monospace;font-size:.8rem} table.dtable td.strong{font-weight:700;color:var(--ink)} table.dtable td.nil,.nil{color:var(--muted)} table.dtable tbody tr[hidden]{display:none} .tw.tall{max-height:460px} .filterbox{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto} .filterbox input[type=search]{padding:6px 10px;font:inherit;font-size:.84rem; border:1px solid var(--hair-strong);border-radius:var(--radius); background:var(--surface);color:var(--ink);min-width:170px} /* ---------- map pane ---------- */ [data-pane="map"] .maplayout{grid-template-columns:1fr 330px} [data-pane="map"] .map{height:min(72vh,720px)} @media (max-width:900px){ [data-pane="map"] .maplayout{grid-template-columns:1fr} .projhead .headmeta{margin-left:0} } .mapfail{display:flex;flex-direction:column;gap:8px;align-items:flex-start; justify-content:center;height:100%;padding:26px;text-align:left;color:var(--body)} .mapfail strong{color:var(--ink)} .mapfail span{font-size:.86rem;color:var(--muted);max-width:46ch;line-height:1.55} .riskpill{display:inline-block;padding:2px 8px;border-radius:3px;color:#fff; font-size:.7rem;font-weight:700;white-space:nowrap} .r-veryhigh{background:#96201B} .r-high{background:#B85A10} .r-moderate{background:#9A7A00} .r-low{background:#2F7C2A} /* ---------- publishing ---------- */ .deployform{display:flex;flex-direction:column;gap:14px;margin-top:12px;max-width:560px} .subdomain{display:flex;align-items:stretch} .subdomain input{border-radius:var(--radius) 0 0 var(--radius);flex:1 1 auto;min-width:0} .subdomain .suffix{display:flex;align-items:center;padding:0 12px;font-size:.85rem; color:var(--muted);background:var(--sunk);border:1px solid var(--hair-strong); border-left:0;border-radius:0 var(--radius) var(--radius) 0;white-space:nowrap} .deployactions{display:flex;gap:8px;flex-wrap:wrap} /* What the next Generate will bake into the page. A count of zero is the row that matters — it is the difference between "not built yet" and "broken" — so it is the row that is marked, and marked in text as well as in weight. */ .layercount{width:100%;border-collapse:collapse;margin:10px 0 16px} .layercount th,.layercount td{padding:6px 10px 6px 0;text-align:left;vertical-align:top; border-bottom:1px solid var(--hair)} .layercount th{font-weight:600;white-space:nowrap} .layercount td:nth-child(2){font-variant-numeric:tabular-nums;white-space:nowrap; padding-right:16px} .layercount tr.zero td:nth-child(2){color:var(--muted);font-style:italic} /* ---------- the LGU seal ---------- */ /* A second heading inside the Settings card, so it needs less air above it than a card's own

does. */ h2.tight{margin-top:22px} /* Checkered behind the preview, so a seal with a transparent background reads as transparent rather than as white — which is what it will look like against the navy masthead, and the difference is worth seeing before it is published rather than after. */ .sealprev{margin:10px 0;display:inline-block;padding:8px;border-radius:var(--radius); border:1px solid var(--hair); background-color:#fff; background-image:linear-gradient(45deg,#EEF1F7 25%,transparent 25%), linear-gradient(-45deg,#EEF1F7 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#EEF1F7 75%), linear-gradient(-45deg,transparent 75%,#EEF1F7 75%); background-size:12px 12px; background-position:0 0,0 6px,6px -6px,-6px 0} .sealprev img{display:block;object-fit:contain} /* ---------- accounts ---------- */ /* The reset and remove controls live in the row they act on, so a mis-click cannot apply to the account above or below the one being looked at. */ .rowactions{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;white-space:nowrap} .inlineform{display:flex;gap:6px;align-items:center;margin:0} /* The password box does not grow: letting it wrap put Reset on a second line and left Remove sitting beside the input it has nothing to do with, which is exactly the arrangement a mis-click needs. The table already scrolls. */ .inlineform input{font-size:.8rem;padding:5px 9px;width:150px;flex:none} /* Destructive actions are red on hover rather than red at rest: a row of permanently red buttons stops registering as a warning within a day. */ .btn.danger:hover{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)} /* ------------------------------------------------------------------ EWS The admin side of the early warning module. The band colours are the published page's own, so a threshold checked here and a colour seen there are recognisably the same thing. */ .pill.b-fresh { background:#E4F2E1; color:#2F7C2A } .pill.b-stale { background:#FCEBD8; color:#B85A10 } .pill.b-dark { background:#FBE0DE; color:#96201B } .pill.b-green { background:#E4F2E1; color:#2F7C2A } .pill.b-orange { background:#FCEBD8; color:#B85A10 } .pill.b-red { background:#FBE0DE; color:#96201B } .pill.b-unknown { background:#E8EAED; color:#5A6270 } td.num, .tw td.num { font-family: var(--mono, ui-monospace, monospace); white-space:nowrap } details.setup > summary { cursor:pointer; font-weight:600; padding:.4rem 0 } details.setup[open] > summary { margin-bottom:.4rem } /* ================================================================ clean == The builder in the published EWS's clothes. Everything above still applies; this re-dresses the chrome and the common components. */ body { background:var(--paper); } h1 { font-size:1.7rem; font-weight:700; letter-spacing:-.025em; } h2 { font-size:1.08rem; font-weight:700; letter-spacing:-.01em; } a { color:var(--navy); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--navy) 28%, transparent); border-radius:var(--rs); } code { background:var(--sunk); border:1px solid var(--hair); border-radius:6px; } .eyebrow { font-size:.66rem; letter-spacing:.14em; color:var(--faint); } /* chrome: a floating bar, like the Atlas c-bar */ .topbar { position:sticky; top:0; z-index:1000; gap:14px; padding:12px 22px; border:0; background:color-mix(in srgb, var(--paper) 82%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); color:var(--ink); } .brand { background:var(--surface); box-shadow:var(--shadow); border-radius:var(--radius); padding:9px 16px 9px 10px; align-items:center; gap:10px; color:var(--ink); } .brand .logo { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:#172238; color:#fff; } .brand .logo svg { width:15px; height:15px; } .brand .mark { font-weight:700; letter-spacing:0; font-size:.95rem; } .brand .mark b { color:var(--navy); font-weight:700; } .brand .sub { color:var(--muted); font-size:.82rem; letter-spacing:0; text-transform:none; font-weight:500; border-left:1px solid var(--hair); padding-left:10px; } .topbar nav { background:#0E1A26; border-radius:999px; padding:5px; gap:2px; box-shadow:0 2px 4px rgba(16,32,52,.08), 0 10px 30px rgba(16,32,52,.18); overflow-x:auto; scrollbar-width:none; } .topbar nav::-webkit-scrollbar { display:none; } .topbar nav a { color:rgba(255,255,255,.72); font-size:.84rem; font-weight:600; padding:7px 15px; border-radius:999px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; } .topbar nav a svg { width:15px; height:15px; opacity:.85; } .topbar nav a:hover { color:#fff; background:rgba(255,255,255,.08); text-decoration:none; } .topbar nav a.on { background:var(--brand); color:var(--brand-ink); } .topbar .who { background:var(--surface); box-shadow:var(--shadow); border-radius:var(--radius); padding:6px 8px 6px 14px; color:var(--muted); gap:10px; font-weight:500; } .topbar .who a { color:var(--muted); font-weight:600; font-size:.8rem; padding:5px 10px; border-radius:8px; } .topbar .who a:hover { background:var(--sunk); color:var(--ink); text-decoration:none; } .topbar .who .av { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--navy); font-weight:700; font-size:.75rem; } .themebtn { appearance:none; border:0; background:transparent; color:var(--muted); cursor:pointer; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; } .themebtn:hover { background:var(--sunk); color:var(--ink); } .themebtn svg { width:16px; height:16px; } @media (max-width:860px) { .topbar { flex-wrap:wrap; padding:10px 16px; } .topbar nav { order:3; width:100%; } .topbar .who { margin-left:auto; } .who .nm { display:none; } } .wrap { padding:18px 22px 70px; } .sitefoot { color:var(--faint); } /* cards float; no borders */ .card, .panel, .tw, .worklist, .map { border:0; border-radius:var(--radius); box-shadow:var(--shadow); } .card { padding:22px 24px; margin-bottom:16px; } .card .card { box-shadow:none; background:var(--sunk); } .card.warn { background:var(--warn-bg); border:0; box-shadow:inset 3px 0 0 var(--warn), var(--shadow); } .card .tw { box-shadow:none; border:1px solid var(--hair); } .pagehead { margin-bottom:20px; } /* forms */ label { font-weight:600; font-size:.84rem; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url], input[type=date], input[type=datetime-local], input:not([type]), select, textarea, .sel { border:1px solid var(--hair-strong); border-radius:var(--rs); padding:9px 12px; background:var(--surface); color:var(--ink); transition:border-color .12s, box-shadow .12s; } input:hover, select:hover, textarea:hover { border-color:var(--faint); } input:focus, select:focus, textarea:focus { border-color:var(--navy); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent); } label.check input, .toggle input { accent-color:var(--navy); } /* buttons */ .btn { border-radius:var(--rs); padding:9px 16px; font-weight:600; font-size:.86rem; border:1px solid transparent; background:var(--brand); color:var(--brand-ink); box-shadow:0 1px 2px var(--brand-shadow); transition:background .12s, transform .06s; } .btn:hover { background:var(--brand-hi); color:var(--brand-ink); } .btn:active { transform:translateY(1px); } .btn.ghost { background:var(--surface); color:var(--ink); border-color:var(--hair-strong); box-shadow:none; } .btn.ghost:hover { background:var(--sunk); } .btn.sm, .btn.small { padding:6px 11px; font-size:.78rem; } .btn.danger:hover, .btn.ghost.danger:hover { background:var(--err-bg); color:var(--err); border-color:var(--err); } .btn.ghost.danger { border-color:color-mix(in srgb, var(--err) 45%, transparent); } /* type-ahead */ .results { border:0; border-radius:var(--rs); box-shadow:var(--shadow-lg); background:var(--surface); } .result { border-bottom-color:var(--hair); } .chosen { border-radius:var(--rs); } /* alerts */ .alert { border:0; border-radius:var(--rs); padding:12px 16px; box-shadow:inset 3px 0 0 currentColor; } /* tables: light header, like the Console */ thead th { background:var(--sunk); color:var(--muted); font-size:.66rem; letter-spacing:.08em; border-bottom:1px solid var(--hair); padding:10px 14px; } tbody td { padding:11px 14px; border-bottom-color:var(--hair); } tbody tr:hover { background:color-mix(in srgb, var(--navy) 4%, transparent); } tbody th { text-align:left; padding:11px 14px; border-bottom:1px solid var(--hair); font-weight:600; color:var(--ink); } td.num, th.num, table.dtable td.num { font-family:var(--mono); } table.dtable thead th { background:var(--sunk); } /* pills and chips */ .pill { border-radius:999px; padding:3px 10px; font-size:.68rem; font-weight:700; background:var(--sunk); color:var(--muted); border:1px solid var(--hair); vertical-align:middle; } a.pill:hover { text-decoration:none; border-color:var(--navy); color:var(--navy); } .pill.s-published { background:var(--accent-soft); color:var(--navy); border-color:transparent; } .pill.s-scored, .pill.s-ready, .pill.b-fresh, .pill.b-green { background:var(--ok-bg); color:var(--ok); border-color:transparent; } .pill.s-geography, .pill.s-intake, .pill.b-stale, .pill.b-orange { background:var(--warn-bg); color:var(--warn); border-color:transparent; } .pill.b-dark, .pill.b-red { background:var(--err-bg); color:var(--err); border-color:transparent; } .chips { display:flex; flex-wrap:wrap; gap:6px; } .chip { display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 12px; border-radius:999px; background:var(--accent-soft); color:var(--ink); font-size:.82rem; font-weight:600; } .chip button { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:1rem; line-height:1; width:20px; height:20px; border-radius:50%; } .chip button:hover { background:var(--surface); color:var(--err); } /* stats */ .stats { gap:12px; background:transparent; border:0; } .stat { border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; } .stat .v { font-family:var(--mono); font-weight:500; letter-spacing:-.02em; } /* segmented tabs (project, EWS) */ nav.tabs, .toggles[data-tabs], .modetabs { display:inline-flex; gap:2px; padding:4px; border:0; border-radius:12px; background:var(--surface); box-shadow:var(--shadow); margin:0 0 20px; flex-direction:row; max-width:100%; overflow-x:auto; } nav.tabs button, .toggles[data-tabs] .toggle, .modetabs a { border:0; margin:0; padding:8px 15px; border-radius:9px; font-size:.85rem; font-weight:600; color:var(--muted); background:transparent; cursor:pointer; white-space:nowrap; display:inline-flex; grid-template-columns:none; } nav.tabs button:hover, .toggles[data-tabs] .toggle:hover, .modetabs a:hover { color:var(--ink); background:var(--sunk); text-decoration:none; } nav.tabs button.on, .toggles[data-tabs] .toggle[aria-selected="true"], .modetabs a.on { background:var(--navy); color:#fff; border:0; } .modetabs { display:flex; width:max-content; } /* workflow list */ .worklist { gap:0; background:var(--surface); } .workstep { border-bottom:1px solid var(--hair); } .workstep:last-child { border-bottom:0; } .workstep .marker { border:0; } .workstep.ready .marker { background:var(--navy); } /* runner output and probes */ pre.probe { background:#172238; color:#D8E4F0; border-radius:var(--rs); font-family:var(--mono); } .published, .dsupload { border:0; background:var(--sunk); border-radius:var(--rs); } .steps li { border:0; box-shadow:var(--shadow); } .steps li.now { box-shadow:0 0 0 2px var(--navy); } .steps li.now span { background:var(--navy); color:#fff; } .regiongrid { border:0; border-radius:var(--rs); overflow:hidden; } /* EWS: three ways to add a location */ .addgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; } .addopt { background:var(--sunk); border-radius:var(--rs); padding:16px; display:flex; flex-direction:column; gap:10px; } .addopt h3 { font-size:.95rem; } .addopt form { gap:10px; } .card.coverage { flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:8px; padding:14px 18px; } .pinsearch .results { background:var(--surface); } /* login */ body.bare { background:radial-gradient(1200px 600px at 20% -10%, var(--accent-soft), transparent), var(--paper); } .login .card { box-shadow:var(--shadow-lg); padding:28px; } .pagehead { align-items:center; } .pagehead > :nth-child(2) { margin-left:auto; } .inlineform { flex-direction:row; flex-wrap:wrap; } .inlineform input[type=number] { width:120px; } label > .muted { font-weight:400; font-size:.78rem; margin-top:-3px; } /* ============================================================ SaaS shell == A fixed sidebar on the left, the page on the right. On a phone the sidebar slides in from a menu button. */ body { min-height:100vh; } .app { display:grid; grid-template-columns:252px minmax(0,1fr); min-height:100vh; } .side { position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; gap:6px; background:var(--surface); border-right:1px solid var(--hair); padding:18px 14px 14px; z-index:1100; } .side .brand { box-shadow:none; background:transparent; padding:4px 8px 10px; border-radius:0; } .side .org { font-size:.76rem; color:var(--muted); padding:0 8px 8px; margin-top:-6px; } .side nav { display:flex; flex-direction:column; gap:2px; flex:1; } .side .navh { font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); padding:16px 10px 6px; } .side nav a { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:10px; color:var(--body); font-size:.88rem; font-weight:600; } .side nav a svg { width:18px; height:18px; flex:none; color:var(--faint); } .side nav a:hover { background:var(--sunk); color:var(--ink); text-decoration:none; } .side nav a:hover svg { color:var(--ink); } .side nav a.on { background:var(--accent-soft); color:var(--navy); } .side nav a.on svg { color:var(--navy); } .side nav a.sub { padding-left:22px; font-weight:500; font-size:.84rem; } .side nav a.sub svg { width:16px; height:16px; } .side .who { display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; background:var(--sunk); margin-top:12px; } .side .who .av { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--navy); color:#fff; font-weight:700; font-size:.82rem; } .side .who .nm { display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.25; } .side .who .nm strong { color:var(--ink); font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .side .who .nm span { font-size:.72rem; color:var(--muted); } .side .who .themebtn:hover { background:var(--surface); } .side .ver { font-size:.68rem; color:var(--faint); padding:10px 8px 0; } .appmain { min-width:0; } .appmain .wrap { max-width:1320px; padding:28px 32px 70px; } .mobbar { display:none; } .scrim { display:none; } @media (max-width:900px) { .app { grid-template-columns:1fr; } .side { position:fixed; left:0; top:0; bottom:0; width:270px; transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow-lg); } body.navopen .side { transform:none; } body.navopen .scrim { display:block; position:fixed; inset:0; background:rgba(8,13,20,.4); z-index:1050; } .mobbar { display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:1000; padding:10px 16px; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--hair); } .mobbar .mark { font-weight:700; color:var(--ink); } .mobbar .mark b { color:var(--navy); } .appmain .wrap { padding:18px 16px 60px; } } /* EWS page: settings on the left, locations on the right */ .cols-ews { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:18px; align-items:start; } @media (max-width:1180px) { .cols-ews { grid-template-columns:1fr; } } .cols-loc .addgrid { grid-template-columns:1fr; } .loclist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; } .loc { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--rs); background:var(--sunk); color:inherit; } .loc:hover { text-decoration:none; box-shadow:inset 0 0 0 1px var(--navy); } .loc-ic { width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--accent-soft); color:var(--navy); font-weight:700; font-size:.78rem; } .loc-ic:empty::before { content:""; width:12px; height:12px; border-radius:3px; border:2px solid currentColor; } .loc-ic.pts { background:#E3F5EC; color:#0B7F53; font-size:.9rem; } .loc-b { display:flex; flex-direction:column; min-width:0; flex:1; gap:1px; } .loc-b strong { color:var(--ink); font-size:.9rem; } .loc-go { color:var(--faint); font-size:1.3rem; } .minimap { height:220px; border-radius:var(--rs); overflow:hidden; cursor:crosshair; background:var(--hair); } .app { background:linear-gradient(to right, var(--surface) 251px, var(--hair) 251px, var(--hair) 252px, transparent 252px); } .side { border-right:0; background:transparent; } @media (max-width:900px) { .app { background:none; } .side { background:var(--surface); } } .card code, .card li code { overflow-wrap:anywhere; word-break:break-word; } .cols-loc .cardhead { flex-wrap:nowrap; align-items:center; } .cols-loc .cardhead > div:first-child { flex:1 1 auto; } /* ============================================================ Queay brand == Navy #172238, blue #4668B0, cyan #4FAED6 on #F7F7F7 — the logo's own colours. The wordmark is Poppins, as in the logo. */ .qmark { width:30px; height:32px; flex:none; color:var(--brand-navy); } .qmark.sm { width:22px; height:24px; } .qmark.lg { width:44px; height:46px; } :root[data-theme="dark"] .qmark { color:#E9EEF8; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qmark { color:#E9EEF8; } } .qword { display:flex; flex-direction:column; line-height:1; gap:3px; } .qword .q1 { font-family:"Poppins", var(--font); font-weight:700; font-size:1.18rem; letter-spacing:.02em; color:var(--ink); } .qword .q2 { font-family:"Poppins", var(--font); font-weight:600; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); } .side .brand { display:flex; align-items:center; gap:11px; padding:6px 8px 14px; } .mobbar .qword .q1 { font-size:1rem; } h1 { font-family:"Poppins", var(--font); font-weight:600; letter-spacing:-.015em; } .eyebrow { color:var(--cyan); } .side .navh { color:var(--faint); } .side nav a.on { box-shadow:inset 3px 0 0 var(--navy); } .side .who .av { background:var(--brand-navy); } :root[data-theme="dark"] .side .who .av { background:var(--navy); } .loginbrand { display:flex; align-items:center; gap:12px; margin-bottom:6px; } .loginbrand .q2 { letter-spacing:.14em; font-size:.56rem; } body.bare { background:radial-gradient(900px 500px at 15% -10%, #E7EDF8, transparent), radial-gradient(700px 400px at 100% 110%, #E3F2F9, transparent), var(--paper); } :root[data-theme="dark"] body.bare { background:var(--paper); } .loc-ic.pts { background:#E4F3FA; color:#2A87B0; } .card pre { white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; } /* The brand blue carries white text in both themes (5:1); the lighter dark-mode blue is for links and outlines only. */ .btn { background:var(--brand); } .btn:hover { background:var(--brand-hi); } .btn.ghost { background:var(--surface); } .btn.ghost:hover { background:var(--sunk); } .leaflet-container .leaflet-popup-content-wrapper, .leaflet-container .leaflet-popup-tip { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg); } .leaflet-container a.leaflet-popup-close-button { color:var(--muted); } /* ============================================================ workflows == Two ways in: an LGU, or a company. The chooser, the numbered steps shown on every page of a workflow, and the "what next" strip. */ .startgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; } .startcard { display:flex; flex-direction:column; gap:10px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 28px; color:var(--body); border:2px solid transparent; transition:border-color .15s, transform .15s; } .startcard:hover { border-color:var(--navy); text-decoration:none; transform:translateY(-2px); } .startcard h2 { font-family:"Poppins",var(--font); font-size:1.35rem; } .startcard p { color:var(--muted); } .startcard ol { margin:4px 0 8px; padding-left:1.2em; display:flex; flex-direction:column; gap:6px; font-size:.9rem; color:var(--ink); } .startcard ol li::marker { color:var(--cyan); font-weight:700; } .startcard .btn { margin-top:auto; } .sc-k { font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); } .sc-ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:#fff; flex:none; } .sc-ic svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .sc-ic.lgu { background:var(--brand); } .sc-ic.co { background:#172238; } :root[data-theme="dark"] .sc-ic.co { background:#2E3F5E; } .startmini { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-bottom:18px; } .startmini a { display:flex; align-items:center; gap:14px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px; color:var(--body); border:1px solid transparent; } .startmini a:hover { border-color:var(--navy); text-decoration:none; } .startmini .sc-ic { width:40px; height:40px; border-radius:12px; } .startmini b { display:block; color:var(--ink); } .startmini small { color:var(--muted); font-size:.8rem; } .flow-steps { list-style:none; margin:0 0 18px; padding:6px; display:flex; gap:4px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); overflow-x:auto; } .flow-steps li { flex:1 1 0; min-width:150px; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--muted); } .flow-steps .fs-n { width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; font:700 .8rem var(--mono); background:var(--sunk); color:var(--muted); border:1px solid var(--hair-strong); } .flow-steps .fs-t { display:flex; flex-direction:column; min-width:0; line-height:1.25; } .flow-steps b { font-size:.85rem; color:var(--ink); font-weight:600; } .flow-steps small { font-size:.74rem; } .flow-steps li.now { background:var(--accent-soft); } .flow-steps li.now .fs-n { background:var(--navy); color:#fff; border-color:transparent; } .flow-steps li.done .fs-n { background:var(--ok-bg); color:var(--ok); border-color:transparent; } .flow-next { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between; background:var(--accent-soft); border-radius:var(--rs); padding:12px 16px; margin:-6px 0 18px; font-size:.9rem; } .flow-next form { margin:0; } .stepno { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff; font:700 .75rem var(--mono); margin-right:8px; vertical-align:2px; } /* EWS Settings: locations beside the ways to add one. */ .cols-loc { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px; align-items:start; } @media (max-width:1100px) { .cols-loc { grid-template-columns:1fr; } } .tab-n { font:600 .7rem var(--mono); padding:1px 7px; border-radius:999px; background:var(--sunk); color:var(--muted); margin-left:4px; } nav.tabs button.on .tab-n { background:rgba(255,255,255,.25); color:#fff; } .tab-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--err); margin-left:6px; vertical-align:1px; } /* ── sidebar: BUILD and MANAGE ── */ .side nav a.navcta { margin:4px 0 8px; justify-content:center; background:var(--navy); color:#fff; font-weight:700; box-shadow:0 2px 8px color-mix(in srgb, var(--navy) 35%, transparent); } .side nav a.navcta svg { color:#fff; } .side nav a.navcta:hover, .side nav a.navcta.on { background:var(--navy-line); color:#fff; } .side nav a .nav-n { margin-left:auto; font:600 .7rem var(--mono); color:var(--faint); } .side nav a.on .nav-n { color:var(--navy); } .ews-status { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:18px; } .ews-status .es { display:flex; align-items:center; gap:12px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px; color:var(--muted); font-size:.84rem; border:1px solid transparent; } .ews-status .es:hover { text-decoration:none; border-color:var(--navy); } .ews-status .es i { width:10px; height:10px; border-radius:50%; flex:none; background:var(--faint); } .ews-status .es.ok i { background:var(--ok); } .ews-status .es.bad i { background:var(--err); box-shadow:0 0 0 4px var(--err-bg); } .ews-status .es span { display:flex; flex-direction:column; } .ews-status .es b { color:var(--ink); font-size:.92rem; } /* ============================================================ setup == The catalogue as a map on the left; database, connectivity and security as three status cards on the right. */ .setgrid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:18px; align-items:start; } @media (max-width:1100px) { .setgrid { grid-template-columns:1fr; } } .setcol { display:flex; flex-direction:column; gap:16px; } .setcol .card { margin-bottom:0; } .setcard-h { display:flex; align-items:flex-start; gap:14px; } .setcard-h > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .set-ic { width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center; background:var(--sunk); color:var(--muted); } .set-ic svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .set-ic.ok { background:var(--ok-bg); color:var(--ok); } .set-ic.warn { background:var(--warn-bg); color:var(--warn); } .set-ic.bad { background:var(--err-bg); color:var(--err); } .set-st { flex:none; font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--sunk); color:var(--muted); white-space:nowrap; } .set-st.ok { background:var(--ok-bg); color:var(--ok); } .set-st.warn { background:var(--warn-bg); color:var(--warn); } .set-st.bad { background:var(--err-bg); color:var(--err); } .setcard .checks { font-size:.84rem; } .phmap { position:relative; background:linear-gradient(180deg, color-mix(in srgb, var(--cyan) 10%, var(--surface)), var(--surface)); border-radius:var(--rs); padding:6px; } .phmap svg { display:block; width:100%; max-height:640px; } .phmap .coast { fill:none; stroke:color-mix(in srgb, var(--navy) 45%, transparent); stroke-width:1.2; stroke-linejoin:round; } .phmap .reg { cursor:pointer; outline:none; } .phmap .reg circle { fill:var(--surface); stroke:var(--faint); stroke-width:1.6; stroke-dasharray:3 3; transition:transform .15s, fill .15s; transform-box:fill-box; transform-origin:center; } .phmap .reg.has circle { fill:var(--navy); stroke:#fff; stroke-width:2; stroke-dasharray:none; filter:drop-shadow(0 2px 4px rgba(16,32,52,.25)); } .phmap .reg .n { font:700 10.5px var(--mono); text-anchor:middle; dominant-baseline:middle; fill:var(--muted); pointer-events:none; } .phmap .reg.has .n { fill:#fff; } .phmap .reg .lb { font:600 11px var(--font); fill:var(--ink); paint-order:stroke; stroke:var(--surface); stroke-width:3px; pointer-events:none; } .phmap .reg .lb.l { text-anchor:end; } .phmap .reg:hover circle, .phmap .reg:focus circle { transform:scale(1.12); stroke:var(--cyan); stroke-dasharray:none; } .phmap .reg.sel circle { stroke:var(--cyan); stroke-width:3.5; stroke-dasharray:none; } .phkey { position:absolute; left:14px; bottom:12px; display:flex; flex-direction:column; gap:4px; font-size:.72rem; color:var(--muted); background:color-mix(in srgb, var(--surface) 85%, transparent); padding:8px 10px; border-radius:10px; } .phkey i { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:6px; vertical-align:-1px; border:1.5px dashed var(--faint); } .phkey i.has { background:var(--navy); border:0; } .regpick { flex-direction:row; align-items:center; gap:14px; background:var(--sunk); border-radius:var(--rs); padding:12px 14px; } .regpick > div { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; } .regpick b { color:var(--ink); } .regpick small { font-size:.78rem; } .regchips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } .regchip { border:1px solid var(--hair-strong); background:var(--surface); border-radius:999px; padding:4px 10px; font:inherit; font-size:.76rem; color:var(--body); cursor:pointer; } .regchip em { font-style:normal; font-family:var(--mono); color:var(--muted); margin-left:4px; } .regchip.has em { color:var(--ok); } .regchip.sel { border-color:var(--navy); background:var(--accent-soft); } /* Every remove / close control is a circle with an X, the same as on the published early warning sites. */ .chip button, .pinitems li>button, .modal-close, [data-close] { width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center; padding:0; border:1px solid var(--line, #d9dfe8); background:var(--surface, #fff); color:var(--muted, #5b6778); font-size:15px; line-height:1; cursor:pointer; box-shadow:0 1px 2px rgba(16,32,52,.10); flex:none; } .chip button:hover, .pinitems li>button:hover, .modal-close:hover, [data-close]:hover { background:var(--ink, #172238); color:var(--surface, #fff); border-color:var(--ink, #172238); } /* ================================================================ OpsCon == */ .pill.s-demo { background:var(--warn-bg); color:var(--warn); } .pill.s-live { background:var(--ok-bg); color:var(--ok); } .pill.s-paused { background:#FBE0DE; color:#96201B; } .slots { display:flex; gap:6px; margin-top:6px; } .slots i { flex:1; height:8px; border-radius:4px; background:var(--hair); } .slots i.on { background:var(--navy); } .approw-actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; } .actform { display:flex; gap:6px; align-items:center; flex-wrap:wrap; } .actform select, .actform input { width:auto; min-width:0; } .admingrid { display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); align-items:end; } .admingrid label { font-size:.75rem; } .note-lock { border:1px dashed var(--hair); border-radius:12px; padding:12px 14px; } .signup { max-width:460px; } .hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; } /* ============================================================ Release 2 == */ .r2grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start; margin-top:16px; } .r2grid > .card { margin:0; } .bigval { font:700 2.1rem/1.1 Poppins, Figtree, sans-serif; letter-spacing:-.02em; color:var(--ink); } .bigval small { font:500 .85rem Figtree, sans-serif; color:var(--muted); margin-left:6px; letter-spacing:0; } .packgrid { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin:12px 0; } .packopt { display:flex; flex-direction:column; gap:2px; border:1px solid var(--hair-strong, #d9dfe8); border-radius:12px; padding:12px 14px; cursor:pointer; } .packopt input { position:absolute; opacity:0; pointer-events:none; } .packopt b { font-size:1.05rem; color:var(--ink); } .packopt:has(input:checked) { border-color:var(--navy); box-shadow:0 0 0 1px var(--navy) inset; } .methods { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 10px; } .methods span { font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--sunk, #EEF2F7); color:var(--body); } .subrow { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--hair, #E2E8F0); } .subrow:last-child { border-bottom:0; } .subrow .what { font-weight:600; color:var(--ink); } .pill.st-active { background:var(--ok-bg); color:var(--ok); } .pill.st-past_due, .pill.st-incomplete { background:var(--warn-bg); color:var(--warn); } .pill.st-unpaid { background:var(--err-bg); color:var(--err); } .pill.st-cancelled, .pill.st-incomplete_cancelled { background:var(--sunk, #EEF2F7); color:var(--muted); } .payform { max-width:440px; display:grid; gap:12px; } .payform .row2 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; } .payform input { font-family:"IBM Plex Mono", monospace; letter-spacing:.04em; } .paybox { display:grid; gap:18px; grid-template-columns:minmax(0,1fr) minmax(0,340px); align-items:start; } @media (max-width:820px) { .paybox { grid-template-columns:1fr; } .payform .row2 { grid-template-columns:1fr 1fr; } } .secure { display:flex; gap:8px; align-items:center; font-size:.78rem; color:var(--muted); } .libtable td.kind { white-space:nowrap; } .libbar { height:8px; border-radius:4px; background:var(--hair, #E2E8F0); overflow:hidden; margin-top:6px; } .libbar i { display:block; height:100%; background:var(--navy); } .chunk { white-space:pre-wrap; font-size:.84rem; line-height:1.5; background:var(--sunk, #F4F7FA); border-radius:10px; padding:10px 12px; margin:8px 0; max-height:220px; overflow:auto; } .wlist { display:grid; gap:10px; margin:12px 0; } .wrow { border:1px solid var(--hair-strong, #d9dfe8); border-radius:12px; padding:12px; display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); align-items:end; } .wrow .wh { grid-column:1/-1; display:flex; gap:8px; align-items:center; } .wrow .wh b { flex:1; } .wrow textarea { min-height:70px; grid-column:1/-1; } .agentbox { border:1px solid var(--hair-strong, #d9dfe8); border-radius:12px; overflow:hidden; } .agentlog { max-height:340px; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:8px; background:var(--sunk, #F4F7FA); } .agentlog .m { max-width:85%; padding:8px 11px; border-radius:12px; font-size:.88rem; line-height:1.45; white-space:pre-wrap; } .agentlog .u { align-self:flex-end; background:var(--brand); color:var(--brand-ink); } .agentlog .a { align-self:flex-start; background:var(--surface, #fff); border:1px solid var(--hair, #E2E8F0); } .agentlog .a.no { background:var(--warn-bg); color:var(--warn); } .agentform { display:flex; gap:8px; padding:10px; } .agentform input { flex:1; } .checklist { display:grid; gap:6px; margin:10px 0; } .checklist label { font-size:.88rem; font-weight:500; } .viewas { position:sticky; top:0; z-index:50; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:10px 16px; background:#FFF4DE; color:#6B4A00; border-bottom:1px solid #E8C77A; font-size:.86rem; } /* ===================================================== sign-in / sign-up The partner door. A quiet grid with one teal glow behind a single card, the OpsCon wordmark on top, and nothing else competing with the form. */ body.bare.auth-body { --auth-teal:#17766F; --auth-teal-hi:#11605A; --auth-ink:#102A41; --auth-card:#FAFAF8; --auth-line:#E2E5E3; --auth-field:#FFFFFF; --auth-grid:rgba(16,42,65,.055); --auth-glow:rgba(30,140,130,.16); min-height:100vh; display:flex; flex-direction:column; align-items:stretch; color:#3C4A57; background: radial-gradient(640px 420px at 50% 34%, var(--auth-glow), transparent 70%), linear-gradient(var(--auth-grid) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, var(--auth-grid) 1px, transparent 1px) 0 0 / 44px 44px, #F4F5F3; } .auth-main { width:100%; flex:1; display:flex; align-items:center; justify-content:center; padding:48px 16px 24px; } .auth { width:100%; max-width:404px; display:flex; flex-direction:column; align-items:center; } .auth.wide { max-width:520px; } .auth-card { width:100%; background:var(--auth-card); border:1px solid var(--auth-line); border-radius:14px; padding:34px 32px 28px; box-shadow:0 1px 2px rgba(16,42,65,.05), 0 18px 48px -18px rgba(16,42,65,.22); } .auth-brand { display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 0 26px; text-align:center; } .auth-logo { height:36px; width:auto; display:block; } .auth-logo-dark { display:none; } .auth-tag { margin:0; font-size:.86rem; color:#6A7682; } .auth-title { font:600 1.12rem/1.3 "Poppins", var(--font); color:var(--auth-ink); text-align:center; margin:0 0 4px; } .auth-sub { margin:0 0 20px; text-align:center; font-size:.86rem; color:#6A7682; } .auth-form { display:flex; flex-direction:column; gap:16px; } .auth-field { display:flex; flex-direction:column; gap:7px; } .auth-label, .auth-field > label { font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#4B5865; } .auth-label-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .auth-hint { font-size:.76rem; color:#7A8590; line-height:1.4; } .auth-link { font-size:.8rem; font-weight:600; color:var(--auth-teal); text-decoration:none; } .auth-link:hover { text-decoration:underline; } .auth-form input:not([type=checkbox]):not([type=hidden]), .auth-form select { width:100%; height:46px; padding:0 14px; border:1px solid #D5DAD8; border-radius:10px; background:var(--auth-field); color:var(--auth-ink); font:15px var(--font); box-shadow:none; transition:border-color .15s, box-shadow .15s; } .auth-form select { appearance:auto; } .auth-form input:focus, .auth-form select:focus { outline:none; border-color:var(--auth-teal); box-shadow:0 0 0 3px rgba(23,118,111,.16); } .auth-pass { position:relative; } .auth-pass input { padding-right:68px !important; } .auth-show { position:absolute; right:6px; top:50%; transform:translateY(-50%); height:32px; padding:0 10px; border:0; border-radius:7px; background:transparent; color:#5C6874; font:600 .78rem var(--font); cursor:pointer; } .auth-show:hover { background:rgba(16,42,65,.06); color:var(--auth-ink); } .auth-check { display:flex; gap:10px; align-items:flex-start; font-size:.8rem; line-height:1.45; color:#5C6874; } .auth-check input { margin-top:3px; accent-color:var(--auth-teal); } .auth-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (max-width:460px) { .auth-row2 { grid-template-columns:1fr; } .auth-card { padding:28px 20px 24px; } } .auth-btn { display:flex; align-items:center; justify-content:center; width:100%; height:46px; margin-top:4px; border:1px solid var(--auth-teal); border-radius:10px; background:var(--auth-teal); color:#fff; font:600 .95rem var(--font); text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s; } .auth-btn:hover { background:var(--auth-teal-hi); border-color:var(--auth-teal-hi); color:#fff; } .auth-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(23,118,111,.25); } .auth-btn-ghost { background:transparent; color:var(--auth-ink); border-color:#CBD1CF; margin-top:0; } .auth-btn-ghost:hover { background:#fff; color:var(--auth-ink); border-color:#AEB6B3; } .auth-rule { display:flex; align-items:center; gap:12px; margin:20px 0; color:#8A949D; font-size:.76rem; } .auth-rule::before, .auth-rule::after { content:""; flex:1; height:1px; background:var(--auth-line); } .auth-alt { margin:18px 0 0; text-align:center; font-size:.86rem; color:#6A7682; } .auth-card .alert { margin:0 0 16px; border-radius:10px; font-size:.86rem; } .auth-help { margin:20px 0 0; font-size:.82rem; color:#6A7682; text-align:center; } .auth-help a { color:var(--auth-teal); font-weight:600; text-decoration:none; } .auth-legal { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin-top:10px; font-size:.78rem; } .auth-legal a { color:#6A7682; text-decoration:none; } .auth-legal a:hover { color:var(--auth-ink); text-decoration:underline; } .auth-copy { width:100%; display:flex; align-items:center; gap:9px; padding:18px 24px; font-size:.76rem; color:#7A8590; } .auth-copy-mark { width:22px; height:22px; display:block; } .auth-main > .card { width:100%; max-width:560px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.bare.auth-body { --auth-teal:#2BA195; --auth-teal-hi:#36B5A8; --auth-ink:#E8EEF2; --auth-card:#121C27; --auth-line:#22303D; --auth-field:#0D151E; --auth-grid:rgba(255,255,255,.035); --auth-glow:rgba(43,161,149,.16); background: radial-gradient(640px 420px at 50% 34%, var(--auth-glow), transparent 70%), linear-gradient(var(--auth-grid) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, var(--auth-grid) 1px, transparent 1px) 0 0 / 44px 44px, #0A1118; color:#B7C2CC; } } :root[data-theme="dark"] body.bare.auth-body { --auth-teal:#2BA195; --auth-teal-hi:#36B5A8; --auth-ink:#E8EEF2; --auth-card:#121C27; --auth-line:#22303D; --auth-field:#0D151E; --auth-grid:rgba(255,255,255,.035); --auth-glow:rgba(43,161,149,.16); background: radial-gradient(640px 420px at 50% 34%, var(--auth-glow), transparent 70%), linear-gradient(var(--auth-grid) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, var(--auth-grid) 1px, transparent 1px) 0 0 / 44px 44px, #0A1118; color:#B7C2CC; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-logo-light { display:none; } :root:not([data-theme="light"]) .auth-logo-dark { display:block; } :root:not([data-theme="light"]) body.bare.auth-body :is(.auth-tag,.auth-sub,.auth-help,.auth-alt,.auth-copy,.auth-legal a,.auth-hint,.auth-check,.auth-show) { color:#8D9AA6; } :root:not([data-theme="light"]) body.bare.auth-body :is(.auth-label,.auth-field > label) { color:#A9B5C0; } :root:not([data-theme="light"]) body.bare.auth-body .auth-form :is(input,select) { border-color:#2A3A49; } :root:not([data-theme="light"]) body.bare.auth-body .auth-btn { color:#06201D; } :root:not([data-theme="light"]) body.bare.auth-body .auth-btn-ghost { color:var(--auth-ink); border-color:#2E3F4F; } :root:not([data-theme="light"]) body.bare.auth-body .auth-btn-ghost:hover { background:#17232F; } } :root[data-theme="dark"] .auth-logo-light { display:none; } :root[data-theme="dark"] .auth-logo-dark { display:block; } :root[data-theme="dark"] body.bare.auth-body :is(.auth-tag,.auth-sub,.auth-help,.auth-alt,.auth-copy,.auth-legal a,.auth-hint,.auth-check,.auth-show) { color:#8D9AA6; } :root[data-theme="dark"] body.bare.auth-body :is(.auth-label,.auth-field > label) { color:#A9B5C0; } :root[data-theme="dark"] body.bare.auth-body .auth-form :is(input,select) { border-color:#2A3A49; } :root[data-theme="dark"] body.bare.auth-body .auth-btn { color:#06201D; } :root[data-theme="dark"] body.bare.auth-body .auth-btn-ghost { color:var(--auth-ink); border-color:#2E3F4F; } :root[data-theme="dark"] body.bare.auth-body .auth-btn-ghost:hover { background:#17232F; } body.bare.auth-body .auth-copy-mark.auth-logo-dark { display:none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.bare.auth-body .auth-copy-mark.auth-logo-light { display:none; } :root:not([data-theme="light"]) body.bare.auth-body .auth-copy-mark.auth-logo-dark { display:block; opacity:.7; } } :root[data-theme="dark"] body.bare.auth-body .auth-copy-mark.auth-logo-light { display:none; } :root[data-theme="dark"] body.bare.auth-body .auth-copy-mark.auth-logo-dark { display:block; opacity:.7; } body.bare.auth-body .auth-form label.auth-check { display:flex; flex-direction:row; gap:10px; align-items:flex-start; font-weight:400; font-size:.8rem; letter-spacing:0; text-transform:none; } body.bare.auth-body .auth-form label.auth-check input { width:auto; height:auto; flex:none; margin-top:3px; } body.bare.auth-body .auth-brand + .auth-sub { margin-top:-14px; } /* ============================================================ console menu == Home · Deliver · Manage · Grow · Account, after the Komplee partner console. html[data-nav] = side (default) | right | top; html[data-rail] = icons only. --mast-accent tints the current item; Account → Console branding will set it per partner. */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } :root { --mast-accent:#17766F; --mast-w:236px; } .shell { display:grid; grid-template-columns:var(--mast-w) minmax(0,1fr); min-height:100vh; } .mast { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:14px; overflow-y:auto; overflow-x:hidden; background:var(--surface); border-right:1px solid var(--hair); padding:18px 14px 14px; z-index:1100; font-family:"Poppins", var(--font); } .mast-mark { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:2px 8px 4px; text-decoration:none; } .mast-mark:hover { text-decoration:none; } .mast-logo { height:28px; width:auto; display:block; } .mast-glyph { display:none; width:30px; height:30px; } .mast-logo-d { display:none !important; } .mast-sub { font-size:.7rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mast-nav { display:flex; flex-direction:column; gap:14px; flex:1; } .mast-group { display:flex; flex-direction:column; gap:2px; } .mast-gh { font-size:.64rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:0 12px 4px; } .mast-link { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; color:var(--body); font-size:.86rem; font-weight:500; text-decoration:none; white-space:nowrap; position:relative; } .mast-ico { width:18px; height:18px; flex:none; color:var(--muted); } .mast-link:hover { background:var(--sunk); color:var(--ink); text-decoration:none; } .mast-link:hover .mast-ico { color:var(--ink); } .mast-link[aria-current] { background:color-mix(in srgb, var(--mast-accent) 13%, transparent); color:var(--ink); font-weight:600; } .mast-link[aria-current] .mast-ico { color:var(--mast-accent); } .mast-end { display:flex; align-items:center; gap:8px; padding-top:10px; border-top:1px solid var(--hair); } .mast-btn { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--hair); border-radius:9px; background:var(--surface); color:var(--muted); cursor:pointer; padding:0; } .mast-btn:hover { color:var(--ink); border-color:var(--hair-strong); } .mast-btn svg { width:15px; height:15px; } .mast-pos { position:relative; order:2; } .mast-pop { position:fixed; z-index:1300; width:236px; padding:12px; border-radius:12px; background:var(--surface); border:1px solid var(--hair); box-shadow:var(--shadow-lg); font-family:var(--font); } .mast-pop-h { margin:0 0 8px; font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); } .mast-opts { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } .mast-opt { display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 4px; border-radius:9px; border:1px solid var(--hair); background:var(--surface); color:var(--body); font:500 .76rem var(--font); cursor:pointer; } .mast-opt[aria-checked="true"] { border-color:var(--mast-accent); box-shadow:inset 0 0 0 1px var(--mast-accent); color:var(--ink); } .pv { width:34px; height:24px; border-radius:4px; border:1.5px solid currentColor; opacity:.55; position:relative; } .pv::before { content:""; position:absolute; background:currentColor; border-radius:1px; } .pv-side::before { left:2px; top:2px; bottom:2px; width:7px; } .pv-right::before { right:2px; top:2px; bottom:2px; width:7px; } .pv-top::before { left:2px; right:2px; top:2px; height:5px; } .mast-opt[aria-checked="true"] .pv { opacity:1; color:var(--mast-accent); } .mast-switch { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin-top:10px; padding:8px 2px 0; border:0; border-top:1px solid var(--hair); background:none; color:var(--body); font:500 .8rem var(--font); cursor:pointer; text-align:left; } .mast-switch i { width:32px; height:18px; flex:none; border-radius:10px; background:var(--hair-strong); position:relative; transition:background .15s; } .mast-switch i::after { content:""; position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .15s; } .mast-switch[aria-checked="true"] i { background:var(--mast-accent); } .mast-switch[aria-checked="true"] i::after { transform:translateX(14px); } .mast-switch:disabled { opacity:.45; cursor:default; } .mast-me { position:relative; flex:1; min-width:0; order:1; } .mast-av { list-style:none; display:flex; align-items:center; gap:9px; cursor:pointer; padding:3px; border-radius:10px; min-width:0; } .mast-av::-webkit-details-marker { display:none; } .mast-av > span:first-child, .mast-avbig { width:32px; height:32px; flex:none; border-radius:50%; display:grid; place-items:center; background:#102A41; color:#fff; font:600 .74rem "Poppins", var(--font); letter-spacing:.02em; } .mast-avn { font-size:.82rem; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mast-av:hover { background:var(--sunk); } .mast-panel { position:fixed; z-index:1300; width:260px; padding:14px; border-radius:12px; background:var(--surface); border:1px solid var(--hair); box-shadow:var(--shadow-lg); font-family:var(--font); } .mast-id { display:flex; align-items:center; gap:10px; } .mast-avbig { width:40px; height:40px; font-size:.86rem; } .mast-id b { display:block; color:var(--ink); font-size:.92rem; } .mast-role { display:inline-block; margin-top:2px; padding:1px 8px; border-radius:20px; background:var(--sunk); font-size:.7rem; font-weight:600; color:var(--muted); } .mast-mail { margin:10px 0 0; font-size:.8rem; color:var(--muted); overflow-wrap:anywhere; } .mast-acts { display:flex; flex-direction:column; margin-top:10px; border-top:1px solid var(--hair); padding-top:6px; } .mast-acts a, .mast-acts button { display:block; text-align:left; padding:8px 6px; border-radius:8px; border:0; background:none; color:var(--body); font:500 .86rem var(--font); cursor:pointer; text-decoration:none; } .mast-acts a:hover, .mast-acts button:hover { background:var(--sunk); color:var(--ink); text-decoration:none; } .mast-ver { margin:6px 0 0; font-size:.68rem; color:var(--faint); } /* the popovers open beside the menu (side), above it (bottom of rail) or below it (top) */ html:not([data-nav="top"]) .mast-pop, html:not([data-nav="top"]) .mast-panel { bottom:14px; left:calc(var(--mast-w) + 8px); } html[data-nav="right"] .mast-pop, html[data-nav="right"] .mast-panel { left:auto; right:calc(var(--mast-w) + 8px); } /* right */ html[data-nav="right"] .shell { grid-template-columns:minmax(0,1fr) var(--mast-w); } html[data-nav="right"] .mast { order:2; border-right:0; border-left:1px solid var(--hair); } html[data-nav="right"] .appmain { order:1; } /* icons only, words on hover */ html[data-rail="1"]:not([data-nav="top"]) { --mast-w:72px; } html[data-rail="1"]:not([data-nav="top"]) .mast { padding:18px 10px 14px; overflow:visible; } html[data-rail="1"]:not([data-nav="top"]) .mast-mark { align-items:center; padding:2px 0 4px; } html[data-rail="1"]:not([data-nav="top"]) .mast-logo, html[data-rail="1"]:not([data-nav="top"]) .mast-sub, html[data-rail="1"]:not([data-nav="top"]) .mast-gh, html[data-rail="1"]:not([data-nav="top"]) .mast-w { display:none; } html[data-rail="1"]:not([data-nav="top"]) .mast-glyph.mast-logo-l { display:block; } html[data-rail="1"]:not([data-nav="top"]) .mast-group + .mast-group { border-top:1px solid var(--hair); padding-top:12px; } html[data-rail="1"]:not([data-nav="top"]) .mast-link { justify-content:center; padding:11px 0; } html[data-rail="1"]:not([data-nav="top"]) .mast-link:hover::after { content:attr(data-label); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%); padding:5px 9px; border-radius:7px; background:#102A41; color:#fff; font-size:.76rem; font-weight:500; z-index:1400; pointer-events:none; } html[data-rail="1"][data-nav="right"] .mast-link:hover::after { left:auto; right:calc(100% + 10px); } html[data-rail="1"]:not([data-nav="top"]) .mast-end { flex-direction:column; } html[data-rail="1"]:not([data-nav="top"]) .mast-me { flex:none; } /* top */ html[data-nav="top"] .shell { display:block; } html[data-nav="top"] .mast { position:sticky; top:0; height:auto; flex-direction:row; align-items:center; gap:18px; overflow:visible; border-right:0; border-bottom:1px solid var(--hair); padding:10px 20px; } html[data-nav="top"] .mast-mark { flex:none; padding:0; gap:3px; } html[data-nav="top"] .mast-logo { height:24px; } html[data-nav="top"] .mast-sub { font-size:.62rem; } html[data-nav="top"] .mast-nav { flex-direction:row; align-items:center; gap:0; overflow-x:auto; scrollbar-width:none; } html[data-nav="top"] .mast-group { flex-direction:row; align-items:center; gap:2px; padding:0 8px; } html[data-nav="top"] .mast-group + .mast-group { border-left:1px solid var(--hair); } html[data-nav="top"] .mast-gh { display:none; } html[data-nav="top"] .mast-link { padding:8px 10px; font-size:.84rem; } html[data-nav="top"] .mast-link .mast-ico { display:none; } html[data-nav="top"] .mast-end { border-top:0; padding-top:0; flex:none; } html[data-nav="top"] .mast-me { flex:none; } html[data-nav="top"] .mast-avn { display:none; } html[data-nav="top"] .mast-pop, html[data-nav="top"] .mast-panel { top:62px; right:16px; } /* dark */ :root[data-theme="dark"] .mast-logo-l { display:none !important; } :root[data-theme="dark"] .mast-logo-d { display:block !important; } :root[data-theme="dark"] .mast-glyph.mast-logo-d { display:none !important; } :root[data-theme="dark"][data-rail="1"]:not([data-nav="top"]) .mast-glyph.mast-logo-d { display:block !important; } :root[data-theme="dark"] .mast-logo.mast-logo-d, :root[data-theme="dark"] .mob-logo.mast-logo-d { display:block !important; } :root[data-theme="dark"] .mast-glyph.mast-logo-l { display:none !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mast-logo-l { display:none !important; } :root:not([data-theme="light"]) .mast-logo.mast-logo-d, :root:not([data-theme="light"]) .mob-logo.mast-logo-d { display:block !important; } :root:not([data-theme="light"])[data-rail="1"]:not([data-nav="top"]) .mast-glyph.mast-logo-d { display:block !important; } } :root[data-theme="dark"] { --mast-accent:#2BA195; } :root[data-theme="dark"] .mast-av > span:first-child, :root[data-theme="dark"] .mast-avbig { background:#2BA195; color:#06201D; } /* phone: the menu slides in from the left whatever the setting */ .mob-logo { height:24px; width:auto; } @media (max-width:900px) { .shell, html[data-nav] .shell { display:block; } html[data-nav] .mast { position:fixed; left:0; right:auto; top:0; bottom:0; height:auto; width:270px; flex-direction:column; align-items:stretch; padding:18px 14px 14px; border:0; transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow-lg); overflow-y:auto; } html[data-nav] .mast-nav { flex-direction:column; overflow:visible; gap:14px; } html[data-nav] .mast-group { flex-direction:column; align-items:stretch; padding:0; border:0; } html[data-nav] .mast-gh { display:block; } html[data-nav] .mast-link { justify-content:flex-start; padding:9px 12px; } html[data-nav] .mast-link .mast-ico { display:block; } html[data-nav] .mast-w, html[data-nav] .mast-logo.mast-logo-l, html[data-nav] .mast-sub { display:revert; } html[data-nav] .mast-glyph { display:none !important; } .mast-pos { display:none; } body.navopen .mast { transform:none; } .mast-panel { left:16px !important; right:auto !important; bottom:72px !important; top:auto !important; } } /* Home / Account: the four numbers, and the section tiles */ .kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:22px; } .kpi { display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--hair); box-shadow:var(--shadow); color:inherit; text-decoration:none; } .kpi:hover { text-decoration:none; border-color:var(--hair-strong); } .kpi-k { font-size:.8rem; font-weight:600; color:var(--muted); } .kpi-v { font:700 1.6rem/1.1 "Poppins", var(--font); color:var(--ink); } .kpi-v small { font:500 .8rem var(--font); color:var(--muted); margin-left:4px; } .kpi-bar { height:4px; border-radius:3px; background:var(--sunk); overflow:hidden; } .kpi-bar i { display:block; height:100%; background:var(--mast-accent); } .tiles-h { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:22px 0 10px; } .tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; } .tiles-3 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .tile { display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--hair); box-shadow:var(--shadow); color:var(--body); text-decoration:none; } a.tile:hover { text-decoration:none; border-color:var(--mast-accent); } .tile b { font:600 1rem "Poppins", var(--font); color:var(--ink); } .tile span { font-size:.86rem; } .tile em { font-style:normal; font-size:.76rem; font-weight:600; color:var(--mast-accent); margin-top:auto; } .plan .plan-p { font:700 1.5rem "Poppins", var(--font); color:var(--ink); } .plan .plan-p small { font:500 .78rem var(--font); color:var(--muted); } .plan ul { margin:6px 0 0; padding-left:18px; font-size:.86rem; display:flex; flex-direction:column; gap:4px; } .facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:14px 0 0; } .facts dt { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .facts dd { margin:2px 0 0; color:var(--ink); font-weight:500; } .soon { max-width:720px; } .soon-lead { font-size:1rem; color:var(--ink); margin:12px 0 8px; } .soon ul { margin:0 0 16px; padding-left:20px; display:flex; flex-direction:column; gap:4px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mast-accent:#2BA195; } :root:not([data-theme="light"]) .mast-av > span:first-child, :root:not([data-theme="light"]) .mast-avbig { background:#2BA195; color:#06201D; } } /* the partner's own mark in the menu */ .mast-own { display:flex; align-items:center; gap:10px; min-width:0; } .mast-own img { width:32px; height:32px; border-radius:8px; object-fit:contain; flex:none; background:var(--sunk); } .mast-own b { font:600 1rem "Poppins", var(--font); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-rail="1"]:not([data-nav="top"]) .mast-own b { display:none; } html[data-nav="top"] .mast-own b { font-size:.92rem; } /* ===================================================== Account (Komplee pattern) */ .acct { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; } @media (max-width:1100px) { .acct { grid-template-columns:1fr; } } .acct-head { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--hair); } .acct-head h2 { margin-top:2px; } .acct-who { display:flex; align-items:center; gap:10px; } .acct-who > div { display:flex; flex-direction:column; line-height:1.35; } .acct-who b { color:var(--ink); } .acct-av { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--mast-accent); color:var(--mast-ink); font:600 .78rem "Poppins", var(--font); } .acct-av.sm { width:28px; height:28px; font-size:.68rem; } .acct-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; padding-top:16px; } .acct-cols > div + div { border-left:1px solid var(--hair); padding-left:24px; } @media (max-width:760px) { .acct-cols { grid-template-columns:1fr; } .acct-cols > div + div { border-left:0; padding-left:0; } } .acct-k { display:block; font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; } .acct-mark { display:grid; grid-template-columns:130px minmax(0,1fr); gap:14px; } .acct-drop { position:relative; display:grid; place-items:center; height:130px; border:1.5px dashed var(--hair-strong); border-radius:12px; background:var(--sunk); cursor:pointer; overflow:hidden; text-align:center; } .acct-drop:hover { border-color:var(--mast-accent); } .acct-drop input { position:absolute; inset:0; opacity:0; cursor:pointer; } .acct-drop img { max-width:86%; max-height:86%; object-fit:contain; } .acct-drop-t { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.84rem; color:var(--body); } .acct-drop-t svg { width:18px; height:18px; } .acct-drop-t small { font-size:.7rem; color:var(--muted); } .acct-fields { display:flex; flex-direction:column; gap:10px; } .acct-color { display:flex; align-items:center; gap:14px; margin-bottom:12px; } .acct-swatch { display:flex; align-items:center; gap:8px; padding:5px 12px 5px 6px; border:1px solid var(--hair-strong); border-radius:10px; cursor:pointer; font:500 .86rem var(--mono); color:var(--ink); } .acct-swatch input { width:28px; height:28px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; } .acct-swatch input::-webkit-color-swatch-wrapper { padding:0; } .acct-swatch input::-webkit-color-swatch { border:0; border-radius:50%; } .acct-prev { border:1px solid var(--hair); border-radius:12px; overflow:hidden; background:var(--surface); font-family:"Poppins", var(--font); } .acct-prev-bar { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--hair); } .acct-prev-mk { width:22px; height:22px; border-radius:5px; display:grid; place-items:center; background:var(--pv); color:var(--pvi); overflow:hidden; flex:none; } .acct-prev-mk img { width:100%; height:100%; object-fit:contain; background:#fff; } .acct-prev-mk b { font-size:.66rem; } .acct-prev-nm { font-size:.76rem; font-weight:600; color:var(--ink); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .acct-prev-tab { font-size:.7rem; color:var(--muted); padding:3px 8px; border-radius:6px; } .acct-prev-tab.on { background:color-mix(in srgb, var(--pv) 14%, transparent); color:var(--ink); font-weight:600; } .acct-prev-body { padding:12px; display:flex; flex-direction:column; gap:10px; font-size:.8rem; color:var(--ink); } .acct-prev-kpis { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .acct-prev-kpis > div { border:1px solid var(--hair); border-radius:8px; padding:8px 10px; display:flex; flex-direction:column; gap:3px; } .acct-prev-kpis small { font-size:.64rem; color:var(--muted); } .acct-prev-kpis i { height:3px; border-radius:2px; background:var(--pv); } .acct-prev-btns { display:flex; align-items:center; gap:8px; font-size:.7rem; } .acct-prev-btn { padding:5px 10px; border-radius:7px; background:var(--pv); color:var(--pvi); font-weight:600; } .acct-prev-pill { padding:3px 8px; border-radius:20px; background:var(--sunk); color:var(--body); } .acct-prev-btns u { color:var(--ink); } .acct-save { display:flex; align-items:center; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid var(--hair); } .acct-side { display:flex; flex-direction:column; gap:16px; } .acct-credit .kpi-v { margin:4px 0 6px; } .acct-packs { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:12px 0; } .acct-packs label { position:relative; cursor:pointer; } .acct-packs input { position:absolute; opacity:0; } .acct-packs span { display:flex; flex-direction:column; padding:8px 10px; border:1px solid var(--hair-strong); border-radius:9px; } .acct-packs b { color:var(--ink); font-size:.9rem; } .acct-packs small { font-size:.72rem; color:var(--muted); } .acct-packs input:checked + span { border-color:var(--mast-accent); box-shadow:inset 0 0 0 1px var(--mast-accent); } .acct-dark { width:100%; justify-content:center; } .acct-row { display:flex; align-items:center; justify-content:space-between; gap:10px; } .acct-team { list-style:none; margin:10px 0; padding:0; display:flex; flex-direction:column; gap:8px; } .acct-team li { display:flex; align-items:center; gap:10px; } .acct-team li > span:last-child { display:flex; flex-direction:column; line-height:1.3; } .acct-team b { font-size:.86rem; color:var(--ink); } .acct-team small { font-size:.72rem; color:var(--muted); } .acct label.acct-swatch { display:flex; flex-direction:row; align-items:center; font-weight:500; } .acct label.check { display:flex; flex-direction:row; align-items:center; gap:8px; font-weight:500; } /* ===================================================== Model (Komplee pattern) */ .mstudio { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:16px; align-items:start; } @media (max-width:1100px) { .mstudio { grid-template-columns:1fr; } } .mstudio-main { display:flex; flex-direction:column; gap:16px; min-width:0; } .mdoors { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; text-align:center; } .mdoors h2 { font:600 1.5rem "Poppins", var(--font); margin:4px 0 6px; } .mdoor-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; text-align:left; } @media (max-width:760px) { .mdoor-row { grid-template-columns:1fr; } } .mdoor { display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--hair); border-radius:12px; background:var(--surface); color:var(--body); font:inherit; text-align:left; cursor:pointer; text-decoration:none; box-shadow:var(--shadow); transition:border-color .15s, transform .15s; } .mdoor:hover { border-color:var(--mast-accent); transform:translateY(-1px); text-decoration:none; } .mdoor > b { font:600 .98rem "Poppins", var(--font); color:var(--ink); margin-top:4px; } .mdoor > span:not(.mdoor-art) { font-size:.82rem; line-height:1.45; } .mdoor em { font-style:normal; align-self:flex-start; margin-top:auto; padding:3px 9px; border-radius:20px; background:var(--sunk); font-size:.7rem; font-weight:600; color:var(--ink); } .mdoor-art { position:relative; height:84px; border-radius:9px; background:var(--sunk); overflow:hidden; display:block; } .mdoor-art i { position:absolute; height:7px; border-radius:4px; background:#C9D2DC; } .mdoor-art b { position:absolute; right:14px; bottom:12px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--mast-accent); color:var(--mast-ink); font-size:.9rem; } .mdoor-art .a1 { left:16px; top:18px; width:46%; background:#5B6CC8; } .mdoor-art .a2 { left:16px; top:34px; width:60%; } .mdoor-art .a3 { left:16px; top:50px; width:38%; } .mdoor-art .b1 { left:16px; top:22px; width:40%; background:#E0A23B; } .mdoor-art .b2 { left:16px; top:44px; width:58%; background:#5B6CC8; } .mdoor-art .c1 { left:16px; top:18px; width:70%; } .mdoor-art .c2 { left:16px; top:36px; width:56%; background:#3E9C6B; } .mdoor-art .c3 { left:16px; top:54px; width:64%; background:#D7663F; } .mdoors.small-doors { padding:14px 18px; text-align:left; } .mdoors.small-doors h2, .mdoors.small-doors > p, .mdoors.small-doors .mdoor-art, .mdoors.small-doors .mdoor > span, .mdoors.small-doors .mdoor em { display:none; } .mdoors.small-doors .mdoor-row { margin-top:8px; } .mdoors.small-doors .mdoor { padding:9px 12px; } .mstream { display:flex; flex-direction:column; gap:14px; } .mstream:empty { display:none; } .mchat { position:sticky; top:16px; display:flex; flex-direction:column; height:calc(100vh - 32px); max-height:760px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; } .mchat-h { display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-bottom:1px solid var(--hair); } .mchat-h b { font:600 .95rem "Poppins", var(--font); color:var(--ink); } .mchat-log { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; } .mchat-log .m { max-width:88%; padding:9px 12px; border-radius:12px; font-size:.86rem; line-height:1.5; white-space:pre-wrap; } .mchat-log .m.a { align-self:flex-start; background:var(--sunk); color:var(--ink); border-top-left-radius:4px; } .mchat-log .m.u { align-self:flex-end; background:var(--mast-accent); color:var(--mast-ink); border-top-right-radius:4px; } .mchat-log .m.no { background:var(--err-bg); color:var(--err); } .mchat-log .m.wait { opacity:.7; } .mchat-chips { display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 10px; } .mchat-chips button { padding:6px 11px; border-radius:20px; border:1px solid var(--hair-strong); background:var(--surface); color:var(--ink); font:500 .8rem var(--font); cursor:pointer; } .mchat-chips button:hover { border-color:var(--mast-accent); } .mchat-drop { position:relative; margin:0 16px 10px; padding:16px; border:1.5px dashed var(--hair-strong); border-radius:12px; text-align:center; display:flex; flex-direction:column; gap:2px; cursor:pointer; background:var(--sunk); } .mchat-drop[hidden] { display:none; } .mchat-drop.over, .mchat-drop:hover { border-color:var(--mast-accent); } .mchat-drop input { position:absolute; inset:0; opacity:0; cursor:pointer; } .mchat-drop b { color:var(--ink); font-size:.88rem; } .mchat-drop span { font-size:.74rem; color:var(--muted); } .mchat-form { display:flex; flex-direction:column; gap:8px; padding:12px 16px 16px; border-top:1px solid var(--hair); } .mchat-form textarea { width:100%; resize:vertical; min-height:62px; border:1px solid var(--hair-strong); border-radius:10px; padding:9px 11px; font:inherit; font-size:.86rem; background:var(--surface); color:var(--ink); } .msec { margin-top:22px; } .msec > h2, .msec .acct-row h2 { font-size:1.05rem; margin-bottom:6px; } .mgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; margin-top:10px; } .mgrid-sm { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); } .mcard { display:flex; flex-direction:column; gap:10px; padding:16px; border:1px solid var(--hair); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); min-width:0; } .mcard-h { display:flex; align-items:flex-start; gap:10px; } .mcard-ic { width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; font-size:1rem; background:var(--sunk); color:var(--ink); } .mcard-api .mcard-ic { background:#FFF2DC; color:#9A6400; } .mcard-data .mcard-ic { background:#E6EBFA; color:#3B4FB0; } .mcard-doc .mcard-ic { background:#E3F5EC; color:#0B7F53; } .mcard-sys .mcard-ic { background:color-mix(in srgb, var(--mast-accent) 14%, transparent); color:var(--mast-accent); } .mcard-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; } .mcard-k { font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .mcard-t b { font:600 .95rem "Poppins", var(--font); color:var(--ink); overflow-wrap:anywhere; } .mcard-t b a { color:inherit; } .mcard-sum { margin:0; font-size:.84rem; line-height:1.5; } .mcard-cols { display:flex; flex-wrap:wrap; gap:5px; } .mcard-cols span { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:7px; background:var(--sunk); font-size:.74rem; color:var(--ink); } .mcard-cols i { font-style:normal; color:var(--muted); font-size:.7rem; } .mcard-lbl { display:block; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:4px 0 6px; } .mcard-w ul { margin:0; padding-left:18px; font-size:.82rem; display:flex; flex-direction:column; gap:3px; } .mcard-warn { margin:0; padding:8px 10px; border-radius:8px; background:var(--warn-bg); color:var(--warn); font-size:.8rem; } .mcard-f { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center; padding-top:10px; border-top:1px solid var(--hair); font-size:.8rem; } .linkbtn { border:0; background:none; padding:0; color:var(--navy); font:inherit; cursor:pointer; } .linkbtn:hover { text-decoration:underline; } .mconn { display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:10px; background:var(--sunk); } .mconn-ep { display:flex; align-items:center; gap:8px; min-width:0; } .mconn-ep code { font-size:.76rem; overflow-wrap:anywhere; } .mconn-m { padding:2px 7px; border-radius:5px; background:#102A41; color:#fff; font:600 .68rem var(--mono); } .mconn-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px; } .mconn-grid label { display:flex; flex-direction:column; gap:3px; font-size:.78rem; font-weight:600; color:var(--ink); } .mconn-grid small { font-weight:400; color:var(--muted); font-size:.7rem; } .mconn-grid input { height:36px; } .mconn-foot { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; } .mconn-every { display:flex !important; flex-direction:row !important; align-items:center; gap:6px; font-size:.8rem; margin-right:auto; } .mconn-every select { height:32px; padding:0 8px; } /* ===================================================== Builder (Komplee pattern) */ .bdoors { text-align:center; padding:12px 0 6px; } .bdoors h2 { font:600 1.75rem "Poppins", var(--font); margin:6px 0 10px; } .bdoors > p { max-width:620px; margin:0 auto; } .bdoor-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:1040px; margin:26px auto 0; text-align:left; } @media (max-width:860px) { .bdoor-row { grid-template-columns:1fr; } } .bdoor { display:flex; flex-direction:column; gap:8px; padding:18px; border:1px solid var(--hair); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); color:var(--body); text-decoration:none; transition:border-color .15s, transform .15s; } .bdoor:hover { border-color:var(--mast-accent); transform:translateY(-2px); text-decoration:none; } .bdoor > b { font:600 1.02rem "Poppins", var(--font); color:var(--ink); margin-top:6px; } .bdoor > span { font-size:.86rem; line-height:1.5; } .bdoor em { font-style:normal; align-self:flex-start; margin-top:6px; padding:4px 11px; border-radius:20px; background:var(--sunk); font-size:.74rem; font-weight:600; color:var(--ink); } .bdoor em.dark { background:var(--solid); color:var(--solid-ink); } .bart { width:100%; height:auto; border-radius:9px; background:var(--sunk); padding:12px; } .bart .f { fill:#fff; stroke:#D7DCDF; stroke-width:1.2; } .bart .g { fill:#CBD2D6; } .bart .s { fill:#F1F3F4; } .bart .o { fill:#fff; stroke:#C9CFD3; stroke-width:1.2; } .bdoor-foot { max-width:560px; margin:22px auto 0; padding-top:14px; border-top:1px solid var(--hair); font-size:.8rem; color:var(--muted); } .bframe { display:flex; flex-direction:column; gap:12px; margin:-8px 0 -40px; } .bhead { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .bhead-t { display:flex; align-items:baseline; gap:12px; } .bhead-t h1 { font-size:1.5rem; } .bclient { font-size:.86rem; color:var(--muted); } .bmodes { display:flex; padding:3px; border-radius:10px; background:var(--sunk); border:1px solid var(--hair); } .bmodes a { padding:5px 12px; border-radius:7px; font-size:.8rem; font-weight:600; color:var(--muted); text-decoration:none; } .bmodes a.on { background:var(--solid); color:var(--solid-ink); } .bhead-a { margin-left:auto; display:flex; gap:8px; } .bsteps { list-style:none; margin:0; padding:0; display:flex; gap:0; overflow-x:auto; background:var(--surface); border:1px solid var(--hair); border-radius:10px; } .bsteps li { flex:1; min-width:140px; position:relative; } .bsteps li > a, .bsteps li > span { display:flex; align-items:center; gap:8px; padding:11px 14px 11px 22px; color:var(--muted); text-decoration:none; font-size:.82rem; clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); background:var(--surface); } .bsteps li:first-child > a, .bsteps li:first-child > span { clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); padding-left:14px; } .bsteps li + li { margin-left:-8px; } .bsteps i { font-style:normal; width:24px; height:24px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:.7rem; font-weight:700; border:1px solid var(--hair-strong); } .bsteps b { font-weight:600; white-space:nowrap; } .bsteps li.now > a, .bsteps li.now > span { background:var(--solid); color:var(--solid-ink); } .bsteps li.now i { background:#fff; color:#111; border-color:#fff; } .bsteps li.done i { background:var(--mast-accent); color:var(--mast-ink); border-color:var(--mast-accent); } .bsteps li.done b { color:var(--ink); } .bsteps a:hover b { text-decoration:underline; } .bbody { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:14px; align-items:start; } .mode-workspace .bbody { grid-template-columns:1fr; } .mode-agent .bbody { grid-template-columns:1fr; } .mode-agent .bchat { order:2; height:auto; min-height:420px; position:static; max-height:none; } .mode-agent .bpanel { order:1; max-height:58vh; overflow:auto; } @media (max-width:1100px) { .bbody { grid-template-columns:1fr; } .bchat { position:static; height:520px; } } .bpanel { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); min-width:0; } .bpanel-h { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; } .bpanel-h h2 { font:600 1.2rem "Poppins", var(--font); } .bpanel .pinwrap { margin-top:12px; } .bpanel .pinmap-canvas { height:520px; } .bchat { top:12px; } .bfoot { position:sticky; bottom:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 16px; margin:0 -4px; background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(8px); border:1px solid var(--hair); border-radius:12px; box-shadow:var(--shadow-lg); } .bfoot > div:first-child { display:flex; flex-direction:column; gap:1px; } .bfoot-a { display:flex; gap:8px; } .bstat { display:flex; gap:12px; margin:14px 0; flex-wrap:wrap; } .bstat > div { display:flex; flex-direction:column; padding:10px 16px; border-radius:10px; background:var(--sunk); min-width:130px; } .bstat b { font:700 1.4rem "Poppins", var(--font); color:var(--ink); } .bstat span { font-size:.76rem; color:var(--muted); } .batlas { display:flex; flex-direction:column; gap:12px; margin-top:12px; } .batlas.flash .bgroup { box-shadow:0 0 0 2px var(--mast-accent); } .bgroup { border:1px solid var(--hair); border-radius:12px; padding:12px 14px; margin:0; transition:box-shadow .3s; } .bgroup legend { font:600 .86rem "Poppins", var(--font); color:var(--ink); padding:0 6px; } .bchecks { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:6px 14px; } label.bcheck { display:flex; flex-direction:row; align-items:center; gap:8px; font-weight:500; font-size:.86rem; color:var(--body); cursor:pointer; } label.bcheck input { width:16px; height:16px; accent-color:var(--mast-accent); } .bboard { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; } @media (max-width:900px) { .bboard { grid-template-columns:1fr; } } .bcol { list-style:none; margin:0; padding:8px; min-height:120px; border-radius:12px; background:var(--sunk); border:1.5px dashed var(--hair-strong); display:flex; flex-direction:column; gap:8px; } #bOn { border-style:solid; border-color:color-mix(in srgb, var(--mast-accent) 40%, var(--hair)); } .bcon { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:var(--surface); border:1px solid var(--hair); box-shadow:var(--shadow); cursor:grab; } .bcon.dragging { opacity:.45; } .bcon-grip { color:var(--faint); letter-spacing:-2px; font-size:.8rem; } .bcon-bar { width:4px; align-self:stretch; border-radius:3px; background:var(--cc); flex:none; } .bcon-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; } .bcon-k { font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .bcon-t b { font:600 .9rem "Poppins", var(--font); color:var(--ink); } .bcon-tg { width:34px; height:20px; flex:none; border-radius:10px; border:0; background:var(--hair-strong); position:relative; cursor:pointer; } .bcon-tg::after { content:""; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s; } #bOn .bcon-tg { background:var(--mast-accent); } #bOn .bcon-tg::after { transform:translateX(14px); } .bcanvas { margin-top:16px; border:1px solid var(--hair); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-lg); border-top:4px solid var(--cc, var(--mast-accent)); } .bcanvas[hidden] { display:none; } .bcanvas-h { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--hair); flex-wrap:wrap; } .bcanvas-h #bcName { font:600 1rem "Poppins", var(--font); max-width:260px; } .bcanvas-h #bcColor { width:36px; height:32px; padding:2px; } .bcanvas-b { display:grid; grid-template-columns:minmax(0,1fr) 250px; } @media (max-width:900px) { .bcanvas-b { grid-template-columns:1fr; } } .bgrid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:10px; padding:14px; align-content:start; min-height:240px; background-image:linear-gradient(90deg, var(--hair) 1px, transparent 1px); background-size:calc((100% - 28px)/12) 100%; background-position:14px 0; background-color:var(--sunk); } .bgrid-empty { grid-column:1/-1; text-align:center; padding:60px 0; } .bw { background:var(--surface); border:1px solid var(--hair); border-radius:10px; box-shadow:var(--shadow); cursor:grab; min-height:110px; display:flex; flex-direction:column; } .bw.sel { box-shadow:0 0 0 2px var(--cc, var(--mast-accent)); } .bw.dragging { opacity:.4; } .bw-h { display:flex; align-items:center; gap:6px; padding:8px 8px 6px 10px; border-bottom:1px solid var(--hair); } .bw-h b { flex:1; min-width:0; font-size:.8rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bw-ic { width:20px; height:20px; border-radius:5px; display:grid; place-items:center; background:color-mix(in srgb, var(--cc, var(--mast-accent)) 15%, transparent); color:var(--cc, var(--mast-accent)); font-size:.72rem; flex:none; } .bw-sz { height:24px; padding:0 4px; font-size:.72rem; width:auto; } .bw-x { border:0; background:none; color:var(--muted); font-size:1.1rem; cursor:pointer; line-height:1; padding:0 4px; } .bw-x:hover { color:var(--err); } .bw-b { padding:8px 10px; font-size:.72rem; color:var(--muted); display:flex; flex-direction:column; gap:6px; flex:1; } .bw-bars i { display:block; height:6px; border-radius:3px; background:var(--cc, var(--mast-accent)); opacity:.7; margin-top:4px; } .bw-map { flex:1; min-height:40px; border-radius:6px; background:linear-gradient(135deg,#DDE8E4,#EEF2F0); position:relative; } .bw-map i { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--cc, var(--mast-accent)); } .bw-map i:nth-child(1){left:20%;top:30%} .bw-map i:nth-child(2){left:55%;top:55%} .bw-map i:nth-child(3){left:75%;top:25%} .bw-kpi { font:700 1.2rem "Poppins", var(--font); color:var(--ink); } .bw-tab, .bw-note { font-size:.72rem; color:var(--body); margin:0; } .bpal { border-left:1px solid var(--hair); padding:12px; display:flex; flex-direction:column; gap:6px; max-height:520px; overflow:auto; } .bpal-s { font-size:.76rem; color:var(--ink); margin-top:6px; } .bpal-c { display:flex; gap:6px; align-items:center; text-align:left; padding:6px 9px; border-radius:8px; border:1px solid var(--hair); background:var(--surface); font:500 .78rem var(--font); color:var(--body); cursor:grab; } .bpal-c:hover { border-color:var(--mast-accent); } .bpal-types { display:flex; flex-wrap:wrap; gap:5px; } .bpal-types button { padding:4px 9px; border-radius:20px; border:1px solid var(--hair-strong); background:var(--surface); font:500 .74rem var(--font); cursor:pointer; color:var(--ink); } .bedit { padding:12px 14px; border-top:1px solid var(--hair); background:var(--sunk); } .bedit-g { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px 12px; } .bedit-g label { display:flex; flex-direction:column; gap:3px; font-size:.76rem; font-weight:600; color:var(--ink); } .bedit-g .wide { grid-column:1/-1; } .bedit-cols { display:flex; flex-wrap:wrap; gap:4px 12px; font-weight:400; } .mcard-cols span.sys { background:color-mix(in srgb, var(--mast-accent) 12%, transparent); } .brules { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .brules li { display:flex; flex-direction:column; gap:2px; font-size:.84rem; padding-bottom:10px; border-bottom:1px solid var(--hair); } .brules li:last-child { border-bottom:0; padding-bottom:0; } .brules b { color:var(--ink); } .brules .pill { align-self:flex-start; margin-top:4px; } .brule-danger .mcard-ic { background:var(--err-bg); color:var(--err); } .brule-warning .mcard-ic { background:var(--warn-bg); color:var(--warn); } .brule-info .mcard-ic { background:#E6EEFA; color:#1D6FB8; } .brule-report .mcard-ic { background:#E3F5EC; color:#0B7F53; } .radd { margin-top:14px; } .bw-h { flex-wrap:wrap; } .bw-h b { min-width:60%; } .bw-kpi { font-size:.86rem; font-weight:600; } /* ===================================================== full window (Komplee) Every page uses the whole width beside the menu, with Komplee's 18/20px gutters; the copyright sits at the foot. Workspaces with a conversation (Builder, Model) fill the window: the work on the left scrolls on its own, the conversation rail is 420px and full height on the right. */ .appmain { display:flex; flex-direction:column; min-height:100vh; } .appmain .wrap { max-width:none; width:100%; margin:0; padding:18px 20px 28px; flex:1; } .appmain .wrap.bleed { padding:0; } .pagefoot { display:flex; align-items:center; gap:8px; padding:12px 20px; border-top:1px solid var(--hair); font-size:.76rem; color:var(--muted); } .pagefoot img { display:block; } .pagefoot .mast-logo-d { display:none; } :root[data-theme="dark"] .pagefoot .mast-logo-l { display:none; } :root[data-theme="dark"] .pagefoot .mast-logo-d { display:block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pagefoot .mast-logo-l { display:none; } :root:not([data-theme="light"]) .pagefoot .mast-logo-d { display:block; } } .pagehead { margin-bottom:18px; } .bframe { display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:0; height:100vh; margin:0; } html[data-nav="top"] .bframe { height:calc(100vh - 57px); } .bframe.mode-workspace { grid-template-columns:minmax(0,1fr); } .bframe.mode-agent { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); } .bframe.mode-agent .crail { border-left:0; border-top:1px solid var(--hair); } /* Agent mode: the conversation alone, centred; the step's panel is a message in it */ .bframe.mode-agent .bstage, .bframe.mode-agent .bfoot { display:none; } .bframe.mode-agent .bwork { padding-bottom:10px; } .bframe.mode-agent .crail-h { padding-inline:max(18px, calc((100% - 880px) / 2)); } .bframe.mode-agent .crail-log { padding-inline:max(18px, calc((100% - 880px) / 2)); } .bframe.mode-agent .crail-c .mchat-chips, .bframe.mode-agent .crail-form { padding-inline:max(16px, calc((100% - 880px) / 2)) !important; } .mchat-log .m.w { max-width:100%; width:100%; box-sizing:border-box; align-self:stretch; background:var(--surface, #fff); border:1px solid var(--hair); border-radius:14px; padding:14px; white-space:normal; font-size:inherit; } .m.w .bpanel-h { margin-bottom:6px; } .m.w .pin-intro { margin-top:0; } .m.w .pinwrap { min-height:0; } .m.w .pinmap-canvas { height:380px !important; } .m.w .pinlist { max-height:380px; overflow-y:auto; } .m.w .atl { height:440px; } .m.w .atl { grid-template-columns:250px minmax(0,1fr); } .m.w .w-acts { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; border-top:1px solid var(--hair); margin-top:12px; padding-top:12px; } .m.w .w-card { display:flex; flex-direction:column; gap:8px; align-items:flex-start; } .m.w .w-card p { margin:0; color:var(--muted); } .bwork { display:flex; flex-direction:column; min-width:0; min-height:0; } .bframe .bhead { padding:18px 20px 10px; } .bframe .bsteps { margin:0 20px 2px; flex:none; } .bstage { flex:1; min-height:0; overflow-y:auto; padding:16px 20px 26px; } .bframe .bfoot { position:static; margin:0; border:0; border-top:1px solid var(--hair); border-radius:0; box-shadow:none; padding:12px 20px; background:var(--surface); backdrop-filter:none; } .crail { display:flex; flex-direction:column; min-height:0; height:100%; background:var(--surface); border-left:1px solid var(--hair); } .crail-h { display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-bottom:1px solid var(--hair); flex:none; } .crail-h b { font:600 .95rem "Poppins", var(--font); color:var(--ink); } .crail-log { flex:1; min-height:0; overflow-y:auto; padding:16px 18px 8px; } .crail-c { flex:none; border-top:1px solid var(--hair); padding-top:12px; } .crail-c .mchat-chips { padding:0 16px 8px; } .crail-c .mchat-drop { margin:0 16px 10px; } .crail-form { border-top:0 !important; padding:0 16px 16px !important; } .crail-form textarea { min-height:80px; } .crail-send { width:100%; justify-content:center; height:38px; background:var(--solid) !important; border-color:var(--solid) !important; color:var(--solid-ink) !important; } .crail-send:hover { background:#000 !important; } :root[data-theme="dark"] .crail-send { background:var(--mast-accent) !important; border-color:var(--mast-accent) !important; color:var(--mast-ink) !important; } .mframe .bstage .mstudio-main { margin-bottom:6px; } .mframe .mdoors { box-shadow:none; } @media (max-width:900px) { .bframe, .bframe.mode-agent { display:block; height:auto; } .bstage { overflow:visible; } .crail { height:560px; border-left:0; border-top:1px solid var(--hair); } } .bdoor-row.bdoor-2 { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:720px; } @media (max-width:700px) { .bdoor-row.bdoor-2 { grid-template-columns:1fr; } } /* Where do you want to start? */ .bstart { width:560px; max-width:calc(100vw - 32px); padding:20px; border:0; border-radius:12px; background:var(--surface); color:var(--body); box-shadow:0 24px 60px rgba(0,0,0,.25); } .bstart::backdrop { background:rgba(16,24,30,.42); } .bstart-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .bstart-top h2 { font:600 1.05rem "Poppins", var(--font); } .bstart-x { border:0; background:none; font-size:1.3rem; color:var(--muted); cursor:pointer; line-height:1; } .bstart-tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .bstart-tile { position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 12px 18px; border:1px solid var(--hair); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; text-decoration:none; cursor:pointer; } .bstart-tile:hover:not([disabled]) { border-color:var(--mast-accent); text-decoration:none; } .bstart-tile[disabled] { opacity:.5; cursor:default; } .bstart-tile svg { width:40px; height:40px; color:var(--muted); } .bstart-tile b { font-size:.86rem; } .bstart-n { position:absolute; top:8px; right:8px; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--solid); color:var(--solid-ink); font-size:.7rem; font-weight:700; display:grid; place-items:center; } .bstart-back { border:0; background:none; color:var(--navy); cursor:pointer; padding:0; margin-bottom:8px; font:inherit; font-size:.84rem; } .bstart-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:320px; overflow:auto; } .bstart-list a { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--hair); border-radius:9px; color:var(--ink); text-decoration:none; } .bstart-list a:hover { border-color:var(--mast-accent); } .bstart-list span { font-size:.76rem; color:var(--muted); } .bsteps li { min-width:0; } .bsteps li > a, .bsteps li > span { padding-right:16px; min-width:0; } .bsteps b { overflow:hidden; text-overflow:ellipsis; } .mframe .bhead { flex-wrap:nowrap; } .mframe .bhead-t { min-width:0; flex-wrap:wrap; } /* ===================================================== Team, Invoices, Pricing (Komplee) */ .pagehead > .rowactions { margin-left:auto; } .crail-send.tadd, .tinvite .crail-send { width:auto; height:36px; padding:0 14px; gap:6px; display:inline-flex; align-items:center; } .tgrid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; } @media (max-width:1000px) { .tgrid { grid-template-columns:1fr; } } .tmain { padding:0; overflow:hidden; } .ttable { width:100%; border-collapse:collapse; } .ttable th { text-align:left; font-size:.76rem; font-weight:500; color:var(--muted); padding:12px 18px; border-bottom:1px solid var(--hair); } .ttable td { padding:12px 18px; border-bottom:1px solid var(--hair); vertical-align:middle; font-size:.86rem; } .ttable .num { text-align:right; } .tmem { display:flex; align-items:center; gap:10px; } .tmem > div { display:flex; flex-direction:column; line-height:1.3; } .tmem b { font-weight:600; color:var(--ink); display:inline; } .tmem span:not(.tav) { font-size:.76rem; color:var(--muted); } .tav { width:32px; height:32px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--solid); color:var(--solid-ink); font:600 .7rem "Poppins", var(--font); } .tpill { display:inline-block; padding:3px 10px; border-radius:7px; background:var(--sunk); border:1px solid var(--hair); font-size:.74rem; font-weight:600; color:var(--ink); } .tempty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:34px 20px 40px; } .tempty-ic { width:44px; height:44px; border-radius:10px; background:var(--sunk); display:grid; place-items:center; color:var(--muted); margin-bottom:6px; } .tempty b { color:var(--ink); font-size:.95rem; } .tempty p { margin:0 0 10px; font-size:.84rem; color:var(--body); } .tinvite { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; width:100%; max-width:640px; } .tinvite input { flex:1 1 150px; height:36px; } .tfoot { padding:14px 18px; display:flex; flex-direction:column; gap:8px; } .tfoot .tinvite { justify-content:flex-start; max-width:none; } .tside { display:flex; flex-direction:column; gap:12px; } .tseat { display:flex; flex-direction:column; gap:4px; } .tprice { display:flex; align-items:baseline; gap:6px; } .tprice b { font:700 2rem "Poppins", var(--font); color:var(--ink); } .tprice span { color:var(--muted); } .tdl { margin:12px 0 4px; display:flex; flex-direction:column; } .tdl div { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--hair); font-size:.84rem; } .tdl dt { color:var(--body); } .tdl dd { margin:0; font-family:var(--mono); color:var(--ink); } .tdl dd a { font-family:var(--font); color:var(--ink); } .tnote { display:flex; gap:8px; margin:10px 0 0; padding:10px 12px; border:1px solid var(--hair); border-radius:9px; background:var(--sunk); font-size:.76rem; line-height:1.5; color:var(--body); } .tnote svg { flex:none; margin-top:2px; color:var(--muted); } .tseats { display:flex; gap:8px; margin-top:10px; } .tseats input { width:90px; height:32px; } .tlinks { padding:0; } .tlinks a { display:flex; justify-content:space-between; padding:14px 18px; color:var(--ink); text-decoration:none; font-size:.86rem; } .tlinks a + a { border-top:1px solid var(--hair); } .tlinks a:hover { background:var(--sunk); text-decoration:none; } .tlinks i { font-style:normal; color:var(--muted); } .tpass summary { cursor:pointer; font-size:.86rem; font-weight:600; color:var(--ink); } .tpassf { display:flex; flex-direction:column; gap:8px; margin-top:10px; } .ikpis { grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:14px; } @media (max-width:760px) { .ikpis { grid-template-columns:1fr; } } .ikpis .kpi-v { font-size:1.35rem; } .itable { padding:0; overflow:hidden; } .itable table { width:100%; border-collapse:collapse; } .itable th { text-align:left; font-size:.76rem; font-weight:500; color:var(--muted); padding:12px 18px; border-bottom:1px solid var(--hair); } .itable td { padding:11px 18px; border-bottom:1px solid var(--hair); font-size:.86rem; } .itable .num { text-align:right; } .itable .actions { display:flex; gap:6px; justify-content:flex-end; } .inote { display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--muted); margin:12px 0 0; } .isec { margin-top:22px; } .isec > h2 { font-size:1.02rem; margin-bottom:10px; } details.isec summary { cursor:pointer; } .prc { max-width:1180px; margin:0 auto; } .prc-h { text-align:center; font-size:1.6rem; margin:8px 0 14px; } .prc-tabs { display:flex; justify-content:center; gap:4px; width:max-content; margin:0 auto; padding:4px; border:1px solid var(--hair); border-radius:11px; background:var(--surface); } .prc-tabs a { padding:8px 14px; border-radius:8px; font-size:.84rem; font-weight:600; color:var(--ink); text-decoration:none; } .prc-tabs a.on { background:var(--solid); color:var(--solid-ink); } .prc-ctl { display:flex; justify-content:center; align-items:center; gap:14px; margin-top:20px; } .prc-seg { padding:3px; border:1px solid var(--hair); border-radius:9px; background:var(--surface); } .prc-seg b { display:inline-block; padding:5px 12px; border-radius:7px; font-size:.78rem; } .prc-seg b.on { background:var(--solid); color:var(--solid-ink); } .prc-sites { display:flex !important; flex-direction:row !important; align-items:center; gap:8px; font-size:.84rem; font-weight:600; } .prc-sites input { width:90px; height:32px; text-align:center; } .prc-sub { text-align:center; font-size:.8rem; color:var(--muted); margin:8px 0 20px; } .prc-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } @media (max-width:960px) { .prc-cards { grid-template-columns:1fr; } } .prc-card { position:relative; display:flex; flex-direction:column; padding:26px 26px 22px; background:var(--surface); border:1px solid var(--hair); border-radius:12px; box-shadow:var(--shadow); } .prc-card.pop { border-color:color-mix(in srgb, var(--mast-accent) 55%, var(--hair)); box-shadow:var(--shadow-lg); } .prc-flag { position:absolute; top:-11px; left:50%; transform:translateX(-50%); padding:3px 10px; border-radius:20px; background:var(--mast-accent); color:var(--mast-ink); font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; } .prc-card h2 { font:600 1.15rem "Poppins", var(--font); } .prc-for { margin:2px 0 18px; font-size:.82rem; color:var(--muted); } .prc-price { display:flex; align-items:baseline; gap:4px; } .prc-price small { font-size:1rem; color:var(--ink); } .prc-price b { font:600 2.4rem "Poppins", var(--font); color:var(--ink); letter-spacing:-.02em; } .prc-price span { font-size:.82rem; color:var(--muted); margin-left:4px; } .prc-total { min-height:20px; margin:6px 0 10px; font-size:.8rem; color:var(--mast-accent); } .prc-btn { display:flex; justify-content:center; align-items:center; height:42px; border:1px solid var(--hair-strong); border-radius:9px; color:var(--ink); font-weight:600; font-size:.88rem; text-decoration:none; } .prc-btn:hover { border-color:var(--ink); text-decoration:none; } .prc-btn.dark { background:var(--solid); border-color:var(--solid); color:var(--solid-ink); } .prc-card ul { list-style:none; margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--hair); display:flex; flex-direction:column; gap:9px; } .prc-card li { position:relative; padding-left:24px; font-size:.84rem; line-height:1.45; } .prc-card li::before { content:"✓"; position:absolute; left:2px; color:var(--mast-accent); font-weight:700; } .prc-card li.opt { color:var(--muted); } .prc-card li.opt::before { content:"+"; } .prc-note { max-width:720px; margin:18px auto 0; text-align:center; font-size:.82rem; color:var(--muted); } .prc-sec { margin-top:44px; } .prc-sec > h2 { font:600 1.35rem "Poppins", var(--font); margin:4px 0 6px; } .prc-sec > p { max-width:780px; } .prc-steps { display:flex; align-items:stretch; gap:10px; margin-top:18px; } @media (max-width:960px) { .prc-steps { flex-direction:column; } .prc-arrow { display:none; } } .prc-step { flex:1; padding:18px; border:1px solid var(--hair); border-radius:12px; background:var(--surface); } .prc-step > b { display:block; font:600 1rem "Poppins", var(--font); color:var(--ink); } .prc-step > b span { display:block; font:500 .78rem var(--font); color:var(--muted); margin-top:2px; } .prc-step ul { margin:10px 0; padding-left:18px; font-size:.82rem; display:flex; flex-direction:column; gap:4px; } .prc-arrow { align-self:center; color:var(--muted); } .prc-every { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; font-size:.82rem; color:var(--ink); } .prc-every span { color:var(--body); } .prc-packs { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:16px; } .prc-pack { display:flex; flex-direction:column; gap:2px; padding:16px 18px; border:1px solid var(--hair); border-radius:12px; background:var(--surface); } .prc-pack b { font:600 1.05rem "Poppins", var(--font); color:var(--ink); } .prc-pack span { font:600 1.3rem var(--mono); color:var(--ink); } .prc-pack small { color:var(--muted); font-size:.76rem; } .prc-calc { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; margin-top:18px; padding:20px; border:1px solid var(--hair); border-radius:12px; background:var(--surface); } @media (max-width:860px) { .prc-calc { grid-template-columns:1fr; } } .prc-calc h3 { font-size:1rem; margin-bottom:4px; } .prc-row { display:grid !important; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 60px 80px; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--hair); font-weight:400 !important; } .prc-row > span { display:flex; flex-direction:column; } .prc-row b { font-size:.86rem; color:var(--ink); } .prc-row small { font-size:.74rem; color:var(--muted); } .prc-row input { accent-color:#111; width:100%; } .prc-row output, .prc-row em { font:500 .84rem var(--mono); font-style:normal; text-align:right; color:var(--ink); } .prc-month { display:flex; flex-direction:column; gap:6px; padding:18px; border-radius:10px; background:var(--sunk); align-self:start; } .prc-month b { font:700 1.6rem "Poppins", var(--font); color:var(--ink); } .prc-foot { margin:30px 0 8px; text-align:center; font-size:.8rem; color:var(--muted); } @media (max-width:600px) { .prc-tabs { width:auto; flex-direction:column; } .prc-tabs a { text-align:center; } .prc-row { grid-template-columns:1fr 1fr; } } form.tinvite { flex-direction:row; align-items:center; } .tmem .tname { font-size:.86rem; color:var(--ink); } /* Model: the lists stay folded until opened */ details.mfold { border-top:1px solid var(--hair); padding-top:14px; } details.mfold > summary { list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:12px; } details.mfold > summary::-webkit-details-marker { display:none; } details.mfold > summary::before { content:"▸"; color:var(--muted); font-size:.8rem; transition:transform .15s; } details.mfold[open] > summary::before { transform:rotate(90deg); } details.mfold > summary h2 { margin:0; font-size:1.02rem; } /* Builder › Pin locations: the map and the list fill the window exactly */ .bframe[data-part="locations"] .bstage { display:flex; flex-direction:column; overflow:hidden; padding-bottom:14px; } .bframe[data-part="locations"] .bstage > * { flex:none; } .bframe[data-part="locations"] .bstage .pinwrap { flex:1 1 auto; min-height:0; margin-top:8px; grid-template-rows:minmax(0,1fr); } .bframe[data-part="locations"] .pinmap { height:100%; min-height:0; } .bframe[data-part="locations"] .pinmap-canvas { height:100% !important; min-height:260px; } .bframe[data-part="locations"] .pinlist { height:100%; min-height:0; overflow-y:auto; } .bframe[data-part="locations"] .pinitems { max-height:none; } .bframe[data-part="locations"] .alert { margin:6px 0 0; padding:8px 12px; } .bframe[data-part="locations"] .bpanel-h { margin-bottom:4px; } .pin-intro { margin:0; } @media (max-width:900px) { .bframe[data-part="locations"] .bstage { overflow:visible; } .bframe[data-part="locations"] .pinmap-canvas { height:420px !important; } } .bnewcon { display:flex; align-items:center; gap:10px; width:100%; margin-top:8px; padding:14px; border:1.5px dashed var(--hair-strong); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; flex-wrap:wrap; } .bnewcon:hover { border-color:var(--mast-accent); } .bnewcon > span { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--solid); color:var(--solid-ink); font-size:1.1rem; flex:none; } .bnewcon b { font-size:.9rem; } .bnewcon small { flex-basis:100%; padding-left:40px; margin-top:-6px; color:var(--muted); font-size:.76rem; } /* Builder › Hazard layers */ .hzhead { display:flex; align-items:center; gap:14px; margin:14px 0; flex-wrap:wrap; } .hzbar { flex:1 1 240px; height:8px; border-radius:5px; background:var(--sunk); overflow:hidden; } .hzbar i { display:block; height:100%; background:var(--mast-accent); transition:width .4s; } .hzgo { width:auto !important; padding:0 18px; } .hzlist { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; } .hzlgu { border:1px solid var(--hair); border-radius:12px; background:var(--surface); padding:14px 16px; box-shadow:var(--shadow); } .hzlgu header { display:flex; justify-content:space-between; gap:10px; margin-bottom:10px; } .hzlgu header > div { display:flex; flex-direction:column; } .hzlgu header b { color:var(--ink); } .hzst { font-size:.76rem; font-weight:600; color:var(--muted); white-space:nowrap; } .hzsteps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; } .hzsteps li { display:grid; grid-template-columns:18px 1fr auto; gap:8px; align-items:center; font-size:.84rem; color:var(--body); } .hzsteps i { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--hair-strong); display:grid; place-items:center; font-style:normal; font-size:.62rem; } .hzsteps li.ok i { background:var(--mast-accent); border-color:var(--mast-accent); } .hzsteps li.ok i::after { content:"✓"; color:var(--mast-ink); } .hzsteps li.ok span { color:var(--ink); } .hzsteps li.bad i { background:var(--err-bg); border-color:var(--err); } .hzsteps li.bad i::after { content:"!"; color:var(--err); } .hzsteps li.run i { border-color:var(--mast-accent); border-top-color:transparent; animation:hzspin .8s linear infinite; } @keyframes hzspin { to { transform:rotate(360deg); } } .hzsteps em { font-style:normal; font-size:.72rem; color:var(--muted); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hzlgu.run { border-color:var(--mast-accent); } /* ═════════ Console workspace (Builder › Console) ═════════ */ .bframe[data-step="console"] .bstage { display:flex; flex-direction:column; overflow:hidden; padding:10px 0 0; } .bframe[data-step="console"] .bstage > * { flex:none; } .bframe[data-step="console"] .bpanel-h { padding:0 20px; margin-bottom:8px; } .bframe[data-step="console"] .bstage > .alert { margin:0 20px 8px; } .cws { flex:1 1 auto !important; min-height:0; display:grid; grid-template-columns:220px minmax(0,1fr) 272px; border-top:1px solid var(--hair); } .cws-nav, .cws-lib { min-height:0; overflow-y:auto; background:var(--paper-2, #F7F9FB); } .cws-nav { border-right:1px solid var(--hair); padding:10px 10px 18px; } .cws-lib { border-left:1px solid var(--hair); padding:0 12px 18px; } .cws-sec + .cws-sec { margin-top:14px; padding-top:12px; border-top:1px solid var(--hair); } .cws-sh { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:2px 2px 6px; } .cws-sh.sub { margin-top:10px; text-transform:none; letter-spacing:0; font-weight:600; } .cws-sh small { font-weight:400; font-size:11px; } .cws-add { border:1px solid var(--hair); background:var(--paper, #fff); border-radius:6px; font-family:inherit; font-size:11px; font-weight:600; line-height:1; padding:5px 8px; cursor:pointer; color:var(--ink); text-transform:none; letter-spacing:0; } .cws-add:hover { border-color:var(--accent); color:var(--accent); } .cws-cats, .cws-pages { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; min-height:30px; } .cws-cats.off { border:1px dashed var(--hair); border-radius:8px; padding:4px; } .cws-cat { display:flex; align-items:center; gap:7px; padding:7px 8px; border-radius:8px; background:var(--paper, #fff); border:1px solid var(--hair); cursor:pointer; } .cws-cat.now { border-color:var(--cc); box-shadow:inset 3px 0 0 var(--cc); } .cws-cats.off .cws-cat { opacity:.72; } .cws-sw { width:9px; height:9px; border-radius:3px; background:var(--cc); flex:none; } .cws-ct { display:flex; flex-direction:column; min-width:0; flex:1; } .cws-ct b { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cws-ct small { font-size:11px; color:var(--muted); } .cws-grip { color:#A8B3BF; cursor:grab; font-size:11px; letter-spacing:-2px; user-select:none; } .cws-tg { width:28px; height:16px; border-radius:9px; border:0; background:#C9D2DC; position:relative; cursor:pointer; flex:none; } .cws-tg::after { content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; transition:left .15s; } #cwOn .cws-tg { background:var(--cc); } #cwOn .cws-tg::after { left:14px; } .cws-page { display:flex; align-items:center; gap:7px; padding:7px 8px; border-radius:7px; cursor:pointer; font-size:13px; border:1px solid transparent; } .cws-page b { flex:1; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cws-page small { font-size:11px; color:var(--muted); background:var(--paper, #fff); border:1px solid var(--hair); border-radius:9px; padding:0 6px; } .cws-page:hover { background:var(--paper, #fff); } .cws-page.now { background:var(--paper, #fff); border-color:var(--hair); font-weight:600; } .cws-page.now b { font-weight:600; } .cws-page.drop-b { box-shadow:inset 0 2px 0 var(--accent); } .cws-page.drop-a { box-shadow:inset 0 -2px 0 var(--accent); } .cws-page.drop-in { background:var(--accent-soft); border-color:var(--accent); border-style:dashed; } .cws-tip { font-size:11px; color:var(--muted); margin:8px 2px 0; line-height:1.4; } .dragging { opacity:.45; } .cws-main { display:flex; flex-direction:column; min-width:0; min-height:0; } .cws-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 14px; border-bottom:1px solid var(--hair); background:var(--paper, #fff); } .cws-crumb { font-size:12px; color:var(--muted); white-space:nowrap; } #cwPageName { font-family:inherit; font-size:15px; font-weight:600; line-height:1.2; border:1px solid transparent; border-radius:6px; padding:5px 7px; min-width:120px; max-width:240px; background:transparent; color:var(--ink); } #cwPageName:hover, #cwPageName:focus { border-color:var(--hair); background:var(--paper, #fff); } #cwPageIcon { font-size:12px; padding:4px 6px; border-radius:6px; border:1px solid var(--hair); background:var(--paper, #fff); } .cws-sp { flex:1; } .cws-status { font-size:12px; color:var(--muted); } .cws-status.bad { color:var(--err, #C53030); } .cws-catset { display:inline-flex; gap:6px; align-items:center; } .cws-catset[hidden] { display:none; } #cwCatName { width:150px; font-size:12px; padding:5px 7px; border:1px solid var(--hair); border-radius:6px; } #cwCatColor { width:30px; height:28px; padding:0; border:1px solid var(--hair); border-radius:6px; } .cws-canvas { flex:1; min-height:0; overflow-y:auto; padding:16px; background: radial-gradient(circle, #D9E1EA 1px, transparent 1.2px) 0 0/18px 18px, #EEF2F6; } .cws-grid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:12px; align-content:start; min-height:100%; border-radius:10px; transition:background .15s; } .cws-grid.over { background:rgba(47,111,178,.06); outline:2px dashed rgba(47,111,178,.35); outline-offset:4px; } .cws-w { position:relative; background:#fff; border:1px solid #DCE3EA; border-radius:10px; box-shadow:0 1px 2px rgba(16,32,48,.05); display:flex; flex-direction:column; min-height:150px; cursor:pointer; } .cws-w:hover { border-color:#B9C6D3; box-shadow:0 3px 10px rgba(16,32,48,.08); } .cws-w.sel { border-color:var(--cc); box-shadow:0 0 0 2px color-mix(in srgb, var(--cc) 25%, transparent); } .cws-w.drop-b::before, .cws-w.drop-a::after { content:""; position:absolute; top:6px; bottom:6px; width:4px; border-radius:2px; background:var(--accent); } .cws-w.drop-b::before { left:-9px; } .cws-w.drop-a::after { right:-9px; } .cws-w.sizing { outline:2px solid var(--cc); } .cws-wh { display:flex; align-items:center; gap:7px; padding:8px 10px; border-bottom:1px solid #EEF2F5; } .cws-wh b { flex:1; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cws-wh em { font-style:normal; font-size:10px; font-weight:600; color:#7A5AB8; background:#F1ECFA; border-radius:8px; padding:1px 6px; } .cws-sz { font-size:11px; padding:2px 4px; border:1px solid var(--hair); border-radius:5px; background:#fff; } .cws-x { border:0; background:none; font-size:17px; line-height:1; color:#93A3B4; cursor:pointer; padding:0 2px; } .cws-x:hover { color:var(--err, #C53030); } .cws-wb { flex:1; padding:10px 12px; display:flex; align-items:center; } .cws-wb > * { width:100%; } .cws-wf { padding:0 12px 9px; font-size:11px; color:#5A6E82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cws-rz { position:absolute; right:2px; bottom:2px; width:14px; height:14px; cursor:ew-resize; background:linear-gradient(135deg, transparent 50%, #B9C6D3 50%, #B9C6D3 60%, transparent 60%, transparent 72%, #B9C6D3 72%, #B9C6D3 82%, transparent 82%); border-radius:0 0 8px 0; } .cws-drop { border:2px dashed #C9D3DE; border-radius:10px; min-height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#7C8C9C; font-size:12px; text-align:center; padding:14px; } .cws-drop b { font-size:14px; color:#435466; } .pv { height:74px; } .pv-map { position:relative; border-radius:7px; background:linear-gradient(135deg,#DDEAF3,#CFE1D6 60%,#E6EDD9); overflow:hidden; } .pv-map::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(35deg, transparent 0 22px, rgba(255,255,255,.55) 22px 24px); } .pv-map i { position:absolute; width:10px; height:10px; border-radius:50%; background:#2F6FB2; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.25); } .pv-map i.r { background:#E03A2E; } .pv-map i.a { background:#E8A33A; } .pv-tab { display:flex; flex-direction:column; gap:7px; justify-content:center; } .pv-tab span { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:8px; } .pv-tab b { height:7px; border-radius:4px; background:#E5ECF3; } .pv-tab span:first-child b { background:#CBD6E1; } .pv-tl { display:grid; grid-template-columns:repeat(20,1fr); gap:2px; align-items:center; height:40px; } .pv-tl i { height:26px; border-radius:3px; background:#7CC49A; } .pv-tl i.a { background:#F2C14E; } .pv-tl i.r { background:#E5574B; } .pv-don { display:flex; align-items:center; gap:14px; } .pv-don svg { width:70px; height:70px; flex:none; } .pv-don span { flex:1; display:flex; flex-direction:column; gap:7px; } .pv-don b { height:7px; border-radius:4px; background:#E5ECF3; } .pv-don b:nth-child(2) { width:70%; } .pv-don b:nth-child(3) { width:45%; } .pv-kpi { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; align-items:center; } .pv-kpi span { border:1px solid #E5ECF3; border-radius:7px; padding:8px; display:flex; flex-direction:column; gap:6px; } .pv-kpi b { font-size:20px; line-height:1; color:var(--cc); } .pv-kpi i { height:6px; width:70%; border-radius:3px; background:#E5ECF3; } .pv-bars { display:flex; flex-direction:column; gap:7px; justify-content:center; } .pv-bars i { height:9px; border-radius:4px; background:color-mix(in srgb, var(--cc) 70%, #fff); } .pv-note { margin:0; font-size:12px; color:#435466; line-height:1.45; } .cws-tabs { position:sticky; top:0; z-index:2; display:flex; gap:2px; background:inherit; padding:10px 0 8px; } .cws-tabs button { flex:1; border:1px solid var(--hair); background:var(--paper, #fff); font-family:inherit; font-size:12px; font-weight:600; line-height:1; padding:8px 4px; cursor:pointer; color:var(--muted); } .cws-tabs button:first-child { border-radius:7px 0 0 7px; } .cws-tabs button:last-child { border-radius:0 7px 7px 0; } .cws-tabs button.on { background:var(--ink, #14212E); border-color:var(--ink, #14212E); color:#fff; } .cws-pane[hidden] { display:none; } #cwSearch { width:100%; padding:7px 9px; border:1px solid var(--hair); border-radius:7px; font-size:12px; margin-bottom:8px; box-sizing:border-box; } .cws-grp { margin-bottom:6px; } .cws-grp > summary { cursor:pointer; font-size:12px; font-weight:700; padding:6px 2px; list-style:none; display:flex; justify-content:space-between; } .cws-grp > summary::before { content:"▸"; margin-right:6px; color:var(--muted); } .cws-grp[open] > summary::before { content:"▾"; } .cws-grp > summary small { color:var(--muted); font-weight:500; margin-left:auto; } .cws-t { display:flex; align-items:flex-start; gap:8px; padding:7px 8px; background:var(--paper, #fff); border:1px solid var(--hair); border-radius:8px; margin-bottom:5px; cursor:grab; } .cws-t:hover { border-color:#AFC0D0; box-shadow:0 2px 6px rgba(16,32,48,.06); } .cws-tg2 { width:24px; height:24px; flex:none; border-radius:6px; background:#EEF3F8; display:grid; place-items:center; font-size:13px; color:#43607E; } .cws-tt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .cws-tt b { font-size:12px; line-height:1.3; } .cws-tt small { font-size:11px; color:var(--muted); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .cws-t button { border:1px solid var(--hair); background:#fff; border-radius:6px; width:24px; height:24px; cursor:pointer; font-size:15px; line-height:1; flex:none; } .cws-t button:hover { background:var(--ink, #14212E); color:#fff; } .cws-on { font-style:normal; font-size:10px; color:#2E8B57; font-weight:600; margin-left:4px; } .cws-srch { display:flex; flex-direction:column; margin:10px 2px 6px; } .cws-srch small { font-size:11px; color:var(--muted); } #cwAiText { width:100%; box-sizing:border-box; border:1px solid var(--hair); border-radius:8px; padding:9px; font-family:inherit; font-size:13px; line-height:1.45; resize:vertical; margin:6px 0 8px; } .cws-aiout p { font-size:13px; } .cws-aiout .bad { color:var(--err, #C53030); } .cws-edh { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .cws-edg { display:flex; flex-direction:column; gap:8px; } .cws-edg label { display:flex; flex-direction:column; gap:3px; font-size:12px; font-weight:600; } .cws-edg input, .cws-edg select, .cws-edg textarea { font-family:inherit; font-size:13px; padding:6px 8px; border:1px solid var(--hair); border-radius:6px; font-weight:400; } .cws-edcols { display:flex; flex-direction:column; gap:4px; font-size:12px; } .cws-edcols label { flex-direction:row; font-weight:400; } @media (max-width:1100px) { .cws { grid-template-columns:200px minmax(0,1fr) 250px; } } @media (max-width:900px) { .bframe[data-step="console"] .bstage { overflow:visible; } .cws { grid-template-columns:1fr; } .cws-nav, .cws-lib { border:0; max-height:none; } .cws-canvas { min-height:420px; } .cws-w { grid-column:span 12 !important; } } .cws select, .cws input:not([type=checkbox]):not([type=color]) { width:auto; } .cws-edg input, .cws-edg select, .cws-edg textarea, #cwSearch, #cwAiText { width:100% !important; box-sizing:border-box; } .cws-wh .cws-sz { flex:none; margin:0; height:auto; min-height:0; } .cws-add { white-space:nowrap; } .cws-bar { flex-wrap:nowrap; } #cwPageName { flex:0 1 220px; min-width:90px; } #cwPageIcon { flex:none; } .cws-bar .btn { white-space:nowrap; } .cws-tg2 { font-size:15px; } @media (max-width:1700px) { .cws-crumb { display:none; } } .cws-catbox { margin-top:8px; padding:8px; border:1px solid var(--hair); border-radius:8px; background:var(--paper, #fff); display:flex; flex-direction:column; gap:6px; } .cws-catbox[hidden] { display:none; } .cws-catbox label { font-size:11px; font-weight:600; color:var(--muted); display:flex; flex-direction:column; gap:3px; } .cws-catbox .row { display:flex; gap:6px; align-items:center; } .cws-catbox #cwCatName { flex:1; width:auto; min-width:0; } .cws-wf em { font-style:normal; font-size:10px; font-weight:600; color:#7A5AB8; background:#F1ECFA; border-radius:8px; padding:1px 6px; margin-right:5px; } /* ═════════ Atlas step: layers beside a live preview ═════════ */ .bframe[data-step="atlas"] .bstage { display:flex; flex-direction:column; overflow:hidden; padding-bottom:14px; } .bframe[data-step="atlas"] .bstage > * { flex:none; } .atl { flex:1 1 auto !important; min-height:0; display:grid; grid-template-columns:340px minmax(0,1fr); gap:14px; } .atl-side { min-height:0; overflow-y:auto; padding-right:4px; margin:0; } .atl-lead { margin:0 0 8px; } .atl-side .bgroup { margin-bottom:10px; } .atl-side .bchecks { display:flex; flex-direction:column; gap:3px; grid-template-columns:none; } .atl-ck { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:7px; border:1px solid transparent; } .atl-ck span { flex:1; } .atl-ck.shown { background:#EAF3FC; border-color:#BFD7EF; } .atl-eye { border:0; background:none; color:#A8B6C4; cursor:pointer; font-size:13px; padding:0 2px; } .atl-ck:hover .atl-eye, .atl-ck.shown .atl-eye { color:var(--accent); } .atl-dk { margin-left:auto; display:inline-flex; color:#1A2B3C; padding:0 2px; } .atl-ln { font-weight:400; } .atl-map { position:relative; min-height:0; border-radius:12px; overflow:hidden; border:1px solid var(--hair); background:#E8EEF3; } .atl-canvas { position:absolute; inset:0; } .atl-top { position:absolute; top:10px; left:54px; right:10px; z-index:500; display:flex; gap:8px; flex-wrap:wrap; pointer-events:none; } .atl-sample { background:#14212E; color:#fff; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 9px; border-radius:6px; } .atl-metric { background:#fff; font-size:12px; padding:5px 10px; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,.15); display:inline-flex; align-items:center; gap:6px; } .atl-metric[hidden] { display:none; } .atl-ramp { display:inline-flex; } .atl-ramp i { width:14px; height:8px; } .atl-ramp i:first-child { border-radius:3px 0 0 3px; } .atl-ramp i:last-child { border-radius:0 3px 3px 0; } .atl-legend { position:absolute; left:10px; bottom:22px; z-index:500; display:flex; flex-direction:column; gap:3px; background:rgba(255,255,255,.94); border-radius:8px; padding:8px 10px; box-shadow:0 1px 5px rgba(0,0,0,.15); max-width:300px; font-size:12px; } .atl-legend span { display:flex; align-items:center; gap:7px; transition:background .3s; border-radius:4px; padding:1px 3px; } .atl-legend span.hi { background:#FFF2C2; } .atl-legend i { width:10px; height:10px; border-radius:3px; flex:none; } .atl-empty { position:absolute; inset:auto 20px 50% 20px; z-index:500; text-align:center; background:#fff; padding:12px; border-radius:8px; font-size:13px; } .atl-site { position:relative; } .atl-site i { position:absolute; inset:0; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); } .atl-site b { position:absolute; left:16px; top:-5px; white-space:nowrap; background:#fff; border:2px solid; border-radius:6px; padding:1px 6px; font-size:11px; font-weight:700; color:#14212E; box-shadow:0 1px 3px rgba(0,0,0,.2); } .atl-wind i { display:block; font-size:16px; font-weight:700; color:#3B6E9E; text-align:center; line-height:18px; } .atl-tc i { display:block; font-style:normal; font-size:10px; font-weight:700; color:#fff; background:#D7263D; border-radius:9px; text-align:center; line-height:18px; } .atl-inc i { display:block; width:18px; height:18px; border-radius:50%; background:#C0392B; color:#fff; font-style:normal; font-weight:800; text-align:center; line-height:18px; font-size:12px; border:2px solid #fff; box-sizing:border-box; box-shadow:0 1px 3px rgba(0,0,0,.3); } .leaflet-tooltip.atl-lab { background:rgba(20,33,46,.85); color:#fff; border:0; font-weight:600; box-shadow:none; } .leaflet-tooltip.atl-lab::before { display:none; } @media (max-width:900px) { .bframe[data-step="atlas"] .bstage { overflow:visible; } .atl { grid-template-columns:1fr; } .atl-map { height:420px; } } .atl-site b { left:50%; top:-27px; transform:translateX(-50%); } .atl-site i { width:14px; height:14px; box-sizing:border-box; } /* ═════════ Reports & Alerts step: as the published app has it ═════════ */ .rpb { --rp-acc:#2F6FB2; --rp-l:#E3E9EF; --rp-l2:#D3DCE5; --rp-s2:#F4F7FA; --rp-i3:#6B7C8D; } .rpb-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; } .rpb-head p { flex:1; margin:0; font-size:13px; } .rpb-tabs { display:flex; gap:4px; border-bottom:1px solid var(--rp-l); margin-bottom:14px; } .rpb-tabs button { border:0; background:none; padding:9px 12px; font-family:inherit; font-size:13px; font-weight:600; color:var(--rp-i3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; } .rpb-tabs button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--ink); } .rpb-tabs em { font-style:normal; font-size:11px; background:var(--rp-s2); border-radius:9px; padding:1px 7px; margin-left:6px; color:var(--rp-i3); } .rpb-lay { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; } .rpb .rt { background:#fff; border:1.5px solid var(--rp-l); border-radius:14px; padding:13px 15px; margin-bottom:10px; cursor:pointer; transition:border-color .15s, box-shadow .15s; } .rpb .rt:hover { box-shadow:0 3px 12px rgba(16,32,48,.07); } .rpb .rt.sel { border-color:var(--rp-acc); } .rpb .rt.off { opacity:.62; } .rpb .rt-h { display:flex; gap:12px; align-items:flex-start; } .rpb .rt-h .t { flex:1; min-width:0; } .rpb .rt-h b { font-size:14px; display:block; } .rpb .rt-h small { font-size:12px; color:var(--rp-i3); line-height:1.4; display:block; } .rpb .rt-ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; color:#fff; font-weight:800; font-size:16px; } .rpb .rt-trig { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; color:#435466; background:var(--rp-s2); border:1px solid var(--rp-l); border-radius:8px; padding:6px 9px; margin:10px 0 8px; } .rpb .rt-trig b { color:var(--rp-acc); font-weight:600; } .rpb .rt-f { display:flex; gap:6px; flex-wrap:wrap; align-items:center; } /* Reports & Alerts · recipient sets */ .rpb .rgrp { flex-wrap:wrap; } .rpb .rgrp button em { font-style:normal; font-size:11px; opacity:.7; margin-left:4px; } .rpb .rgrp .rgrp-new { border-style:dashed; color:var(--muted); } .rpb .rgrp-add { margin-bottom:10px; width:100%; } .rpb .rgrp-ta { width:100%; font:13px/1.55 var(--mono); padding:10px 12px; border:1px solid var(--hair-strong); border-radius:10px; background:var(--surface); color:var(--ink); resize:vertical; } .rpb .rgrp-rules { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; font-size:13px; } .rpb .rgrp-rules label.chk { display:flex !important; flex-direction:row !important; align-items:center; justify-content:flex-start !important; gap:8px; text-align:left; font-weight:500; margin:0; } .rpb .rgrp-rules label.chk input { width:auto !important; margin:0; flex:none; } .rpb .chip { font-size:11px; padding:2px 8px; border-radius:9px; background:var(--rp-s2); border:1px solid var(--rp-l); color:#435466; white-space:nowrap; } .rpb .chip.k-report { background:#EAF1FB; border-color:#C9DAF1; color:#2F5E9E; } .rpb .chip.k-alert { background:#FFF4DE; border-color:#F4D9A1; color:#8A5A00; } .rpb .chip.k-facebook { background:#E8F0FE; border-color:#C2D6FB; color:#1458C7; } .rpb .chip.cr { background:#FDE8E6; border-color:#F5C2BD; color:#B42318; } .rpb .tog { width:34px; height:19px; border-radius:10px; background:var(--rp-l2); position:relative; flex:none; transition:.16s; cursor:pointer; align-self:center; } .rpb .tog::after { content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; transition:.16s; box-shadow:0 1px 2px rgba(0,0,0,.2); } .rpb .tog[aria-checked="true"] { background:#2E9E5B; } .rpb .tog[aria-checked="true"]::after { transform:translateX(15px); } .rpb-ed { position:sticky; top:0; } .rpb-card { padding:16px 18px; display:flex; flex-direction:column; gap:16px; } .rpb-edh { display:flex; gap:10px; align-items:center; } .rpb-edh .t b { font-size:16px; } .rpb .fs h5 { margin:0 0 9px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--rp-i3); display:flex; gap:8px; align-items:center; } .rpb .segbtns { display:flex; gap:5px; } .rpb .segbtns button { flex:1; padding:8px 6px; border-radius:8px; background:var(--rp-s2); border:1.5px solid var(--rp-l); font-family:inherit; font-size:12px; color:#435466; cursor:pointer; } .rpb .segbtns button[aria-pressed="true"] { border-color:var(--rp-acc); color:var(--ink); font-weight:600; background:#fff; } .rpb .segbtns button[disabled] { opacity:.4; cursor:not-allowed; } .rpb .fld { display:grid; grid-template-columns:130px 1fr; gap:8px 12px; align-items:center; font-size:12.5px; margin-top:10px; } .rpb .fld label { color:var(--rp-i3); } .rpb .fld input { padding:7px 9px; border-radius:8px; border:1px solid var(--rp-l2); font-family:inherit; font-size:13px; width:100%; } .rpb .fld select { padding:7px 9px; border-radius:8px; border:1px solid var(--rp-l2); font-family:inherit; font-size:13px; width:100%; } .rpb .rcp { display:flex; flex-wrap:wrap; gap:6px; padding:6px; border:1px solid var(--rp-l2); border-radius:10px; background:var(--rp-s2); align-items:center; } .rpb .rcp span { display:inline-flex; align-items:center; gap:4px; background:#fff; border:1px solid var(--rp-l); border-radius:8px; padding:3px 4px 3px 9px; font-size:12px; } .rpb .rcp span button { width:18px; height:18px; border-radius:50%; border:0; background:none; cursor:pointer; color:var(--rp-i3); font-size:13px; line-height:1; } .rpb .rcp span button:hover { background:#C53030; color:#fff; } .rpb .rcp select { border:0; background:none; font-size:12px; width:auto; padding:4px; } .rpb .chan { display:flex; gap:6px; flex-wrap:wrap; } .rpb .chan button { padding:7px 14px; border-radius:8px; border:1.5px solid var(--rp-l); background:var(--rp-s2); font-family:inherit; font-size:12.5px; cursor:pointer; color:#435466; } .rpb .chan button[aria-pressed="true"] { border-color:var(--rp-acc); background:#fff; color:var(--ink); font-weight:600; } .rpb .chk { display:flex; gap:7px; align-items:center; font-size:12.5px; margin-top:8px; } .rpb .note { font-size:12px; color:var(--rp-i3); margin:8px 0 0; line-height:1.45; } .rpb .smsprev { padding:12px; border-radius:12px; background:var(--rp-s2); } .rpb .smsprev .bubble { max-width:340px; background:#12A06A; color:#fff; padding:10px 13px; border-radius:16px 16px 16px 4px; font-size:13px; line-height:1.45; } .rpb .smsmeta { font-size:11px; color:var(--rp-i3); margin-top:6px; font-family:ui-monospace, monospace; } .rpb-doc { position:relative; display:flex; flex-direction:column; gap:6px; border:1px solid var(--rp-l); border-radius:10px; padding:14px 16px 14px 20px; margin-top:8px; background:#fff; font-size:12.5px; } .rpb-doc > i { position:absolute; left:0; top:0; bottom:0; width:5px; border-radius:10px 0 0 10px; } .rpb-doc .meta { font-size:10px; letter-spacing:.08em; color:var(--rp-i3); } .rpb-doc b { font-size:15px; } .rpb-doc p { margin:0; } .rpb-rows { display:flex; flex-direction:column; gap:6px; } .rpb-rows i { height:8px; border-radius:4px; background:var(--rp-s2); } .rpb-rows i:nth-child(2) { width:80%; } .rpb-rows i:nth-child(3) { width:60%; } .rpb-fb { border:1px solid var(--rp-l); border-radius:10px; padding:12px; background:#fff; font-size:13px; } .rpb-fbh { display:flex; gap:8px; align-items:center; } .rpb-fbh span { width:30px; height:30px; border-radius:50%; background:#1877F2; color:#fff; display:grid; place-items:center; font-weight:800; } .rpb-fbh small { color:var(--rp-i3); font-size:11px; margin-left:4px; } .rpb-fbc { aspect-ratio:1.6; border-radius:8px; background:linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; padding:14px; gap:4px; } .rpb-fbc b { font-size:18px; letter-spacing:.02em; } .rpb-fbc small { opacity:.75; font-size:10.5px; } .rpb-act { display:flex; gap:8px; align-items:center; border-top:1px solid var(--rp-l); padding-top:12px; } .rpb-pick { position:fixed; inset:0; z-index:1000; background:rgba(16,24,32,.42); display:flex; justify-content:flex-end; } .rpb-pick[hidden] { display:none; } .rpb-pick-in { width:min(560px, 100%); height:100%; overflow-y:auto; background:#fff; padding:20px 22px; box-shadow:-10px 0 30px rgba(0,0,0,.15); } .rpb-pick-h { display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; } .rpb-pick-h div { flex:1; display:flex; flex-direction:column; gap:3px; } .rpb-pick-h b { font-size:18px; } .rpb-pick-h small { color:var(--rp-i3); } .rpb-lib { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; } .rpb-lib button { text-align:left; border:1.5px solid var(--rp-l); background:#fff; border-radius:10px; padding:10px 12px; cursor:pointer; display:flex; flex-direction:column; gap:4px; font-family:inherit; } .rpb-lib button:hover { border-color:var(--rp-acc); } .rpb-lib b { font-size:13px; } .rpb-lib span { font-size:11.5px; color:var(--rp-i3); line-height:1.4; } .rpb-lib em { font-style:normal; font-size:10.5px; color:#2F5E9E; background:#EAF1FB; border-radius:8px; padding:1px 7px; align-self:flex-start; } .rpb .radd .bedit-g { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .rpb-card .radd .wide { grid-column:1 / -1; } @media (max-width:1100px) { .rpb-lay { grid-template-columns:1fr; } .rpb-ed { position:static; } .rpb-head { flex-wrap:wrap; } } .bframe.mode-agent .crail-h { display:none; } .bframe.mode-agent .bwork .bsteps { margin-bottom:0; } .bframe.mode-agent .bwork { padding-bottom:12px; } #hzNote { margin-top:12px; } /* ═════════ Builder › Load Model ═════════ */ .lmsteps { display:flex; gap:8px; margin:0 0 12px; } .lmsteps a { flex:1; display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--hair); border-radius:10px; background:var(--surface, #fff); color:var(--ink); text-decoration:none; min-width:0; } .lmsteps a i { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:700; font-size:12px; background:var(--sunk, #EEF2F6); color:var(--muted); flex:none; } .lmsteps a span { display:flex; flex-direction:column; min-width:0; } .lmsteps a b { font-size:13px; } .lmsteps a small { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lmsteps a.now { border-color:var(--solid); box-shadow:inset 0 0 0 1px var(--solid); } .lmsteps a.now i { background:var(--solid); color:var(--solid-ink); } .lmsteps a.past i { background:#2E9E5B; color:#fff; } .bframe[data-step="model"] .bstage { display:flex; flex-direction:column; overflow:hidden; padding-bottom:14px; } .bframe[data-step="model"] .bstage > * { flex:none; } .bframe[data-step="model"] .bstage > .lmpart { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } .bframe[data-step="model"][data-part="models"] .bstage > .lmpart, .bframe[data-step="model"][data-part="client"] .bstage > .lmpart { overflow-y:auto; } .bframe[data-step="model"][data-part="models"] .bstage { overflow-y:auto; } .lmpart > .pin-intro { flex:none; } .lmpart .pinwrap { flex:1 1 auto; min-height:0; margin-top:8px; grid-template-rows:minmax(0,1fr); } .lmpart .pinmap { height:100%; min-height:0; } .lmpart .pinmap-canvas { height:100% !important; min-height:260px; } .lmpart .pinlist { height:100%; min-height:0; overflow-y:auto; } .lmpart .pinitems { max-height:none; } .bclient-card { max-width:560px; margin:30px auto; padding:26px 28px; display:flex; flex-direction:column; gap:8px; } .bclient-card h3 { margin:0; font-size:1.3rem; } .bclient-f { display:flex; flex-direction:column; gap:12px; margin-top:8px; } .bclient-f label { display:flex; flex-direction:column; gap:5px; font-weight:600; font-size:13px; } /* hazard picker */ .hzm { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:14px; } .hzm-map { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--hair); background:#E9EEF2; min-height:340px; } .hzm-canvas { position:absolute; inset:0; } .hzm-search { position:absolute; top:10px; left:54px; z-index:600; width:min(360px, calc(100% - 70px)); } .hzm-search input { width:100%; box-sizing:border-box; padding:10px 12px; border-radius:10px; border:1px solid var(--hair); box-shadow:0 2px 8px rgba(0,0,0,.12); font-family:inherit; font-size:14px; background:#fff; } .hzm-res { margin-top:4px; background:#fff; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.16); max-height:320px; overflow-y:auto; padding:4px; } .hzm-res button { display:flex; flex-direction:column; align-items:flex-start; width:100%; border:0; background:none; padding:8px 10px; border-radius:7px; text-align:left; cursor:pointer; font-family:inherit; position:relative; } .hzm-res button:hover { background:#F1F5F9; } .hzm-res b { font-size:13px; } .hzm-res span { font-size:11.5px; color:var(--muted); } .hzm-res em { position:absolute; right:10px; top:10px; font-style:normal; font-size:10.5px; font-weight:600; color:#2E9E5B; } .hzm-hint { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:600; background:rgba(20,33,46,.88); color:#fff; font-size:12.5px; padding:7px 12px; border-radius:20px; white-space:nowrap; max-width:90%; overflow:hidden; text-overflow:ellipsis; } .hzm-legend { position:absolute; right:10px; top:10px; z-index:600; background:rgba(255,255,255,.95); border-radius:8px; padding:7px 10px; display:flex; flex-direction:column; gap:3px; font-size:11.5px; box-shadow:0 1px 5px rgba(0,0,0,.14); } .hzm-legend span { display:flex; align-items:center; gap:6px; } .hzm-legend i { width:12px; height:10px; border-radius:2px; } .lg-l { background:#2E9E5B; } .lg-p { background:#E3A33A; } .lg-k { background:color-mix(in srgb, var(--accent) 25%, transparent); border:1.5px dashed var(--accent); box-sizing:border-box; } .lg-n { background:#fff; border:1px solid #8FA3B8; box-sizing:border-box; } .hzm-side { min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:2px 2px 6px; } .hzm-side h3 { margin:0; font-size:1.05rem; } .hzm-side p { margin:0; } .hzm-list { list-style:none; margin:4px 0; padding:0; display:flex; flex-direction:column; gap:6px; } .hzm-list li { display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--hair); border-radius:9px; background:var(--surface, #fff); cursor:pointer; } .hzm-list li.empty { cursor:default; color:var(--muted); font-size:13px; border-style:dashed; } .hzm-list li > i { width:10px; height:10px; border-radius:3px; flex:none; } .hzm-list li > span { flex:1; min-width:0; display:flex; flex-direction:column; } .hzm-list b { font-size:13px; } .hzm-list small { font-size:11px; color:var(--muted); } .hzm-list em { font-style:normal; font-size:11px; font-weight:600; white-space:nowrap; color:var(--muted); } .hzm-list em.st-loaded { color:#2E9E5B; } .hzm-list em.st-partial { color:#B7791F; } .hzm-list button { border:0; background:none; color:#93A3B4; font-size:17px; cursor:pointer; padding:0 2px; } .hzm-list button:hover { color:var(--err, #C53030); } .hzm-list button.hz-one { font-size:11.5px; font-weight:600; color:var(--accent, #2F6FB2); border:1px solid var(--hair); border-radius:7px; padding:3px 9px; background:var(--surface, #fff); white-space:nowrap; } .hzm-list button.hz-one:hover { color:var(--accent, #2F6FB2); border-color:var(--accent, #2F6FB2); } .hzmod { position:fixed; inset:0; z-index:2000; background:rgba(16,24,32,.45); display:grid; place-items:center; padding:20px; } .hzmod[hidden] { display:none; } .hzmod-in { width:min(560px, 100%); max-height:86vh; display:flex; flex-direction:column; background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden; } .hzmod-h { padding:18px 20px 10px; } .hzmod-h div { display:flex; flex-direction:column; gap:3px; } .hzmod-h b { font-size:17px; } .hzmod-h small { color:var(--muted); font-size:12.5px; } .hzmod .hzbar { margin:0 20px 6px; } .hzmod-b { flex:1; min-height:0; overflow-y:auto; padding:8px 20px 12px; display:flex; flex-direction:column; gap:10px; } .hzmod-b .hzlgu.run { border-color:var(--accent); } .hzmod-f { display:flex; align-items:center; gap:10px; padding:12px 20px; border-top:1px solid var(--hair); } .hzmod-f span { flex:1; } /* models */ .lmodels { display:flex; flex-direction:column; gap:18px; } .lm-h { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:10px; } .lm-h h3 { margin:2px 0 0; font-size:1.05rem; } .lm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; } .lm-card { position:relative; display:flex; gap:12px; align-items:flex-start; padding:14px; border:1.5px solid var(--hair); border-radius:12px; background:var(--surface, #fff); cursor:pointer; transition:border-color .15s, box-shadow .15s; text-decoration:none; color:var(--ink); } .lm-card:hover { box-shadow:0 4px 14px rgba(16,32,48,.08); } .lm-card input { position:absolute; opacity:0; pointer-events:none; } .lm-ic { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:#EEF3F9; color:#2F5E9E; flex:none; font-size:20px; font-weight:600; } .lm-card.own .lm-ic { background:#F1ECFA; color:#6B4BB0; } .lm-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; padding-right:18px; } .lm-t b { font-size:13.5px; } .lm-t small { font-size:12px; color:var(--muted); line-height:1.4; } .lm-t em { font-style:normal; font-size:10.5px; font-weight:600; color:#5A6E82; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; } .lm-ck { position:absolute; top:12px; right:12px; width:18px; height:18px; border-radius:50%; border:1.5px solid #B9C6D3; background:#fff; } .lm-card:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); } .lm-card:has(input:checked) .lm-ck { background:var(--accent); border-color:var(--accent); color:var(--mast-ink); } .lm-card:has(input:checked) .lm-ck::after { content:"✓"; color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; height:100%; } .lm-add { border-style:dashed; } .lm-add .lm-ic { background:#F4F7FA; color:#5A6E82; } /* publish */ .pub { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start; } .pub-main { display:flex; flex-direction:column; gap:12px; margin:0; } .pub-sec { padding:16px 18px; display:flex; flex-direction:column; gap:10px; } .pub-h { display:flex; gap:12px; align-items:flex-start; } .pub-h div { display:flex; flex-direction:column; gap:2px; } .pub-h b { font-size:15px; } .pub-h small { color:var(--muted); font-size:12.5px; } .pub-n { width:26px; height:26px; border-radius:50%; background:var(--solid); color:var(--solid-ink); display:grid; place-items:center; font-size:12px; font-weight:700; flex:none; } .pub-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; } .pub-grid label { display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; } .pub-dom { display:flex; align-items:center; gap:0; border:1px solid var(--hair); border-radius:10px; overflow:hidden; background:#fff; } .pub-dom input { flex:1; border:0 !important; padding:10px 12px; font-family:inherit; font-size:15px; min-width:0; outline:none; box-shadow:none !important; } .pub-dom span { padding:10px 12px; background:var(--sunk, #F1F5F9); color:var(--muted); font-size:14px; border-left:1px solid var(--hair); } /* Publish App · the app's brand */ .pub-brand { display:flex; gap:14px; align-items:stretch; } .pub-logo { flex:none; cursor:pointer; } .pub-logo > span { width:92px; height:92px; border-radius:12px; border:1.5px dashed var(--hair-strong); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--muted); background:var(--sunk) center/contain no-repeat; } .pub-logo > span b { font-size:20px; line-height:1; } .pub-logo > span small { font-size:11px; } .pub-logo:hover > span { border-color:var(--accent); color:var(--accent); } .pub-bgrid { flex:1; grid-template-columns:1fr; gap:8px !important; } .pub-sw { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; } .pub-swc { width:26px; height:26px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--hair-strong); cursor:pointer; padding:0; } .pub-swc.on { box-shadow:0 0 0 2px var(--ink); } .pub-swx { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); cursor:pointer; } .pub-swx input { width:26px; height:26px; padding:0; border:0; background:none; cursor:pointer; } .pub-bprev { margin-left:auto; display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:10px; background:var(--bc); color:#fff; font-size:13px; } .pub-bprev i { width:24px; height:24px; border-radius:6px; background:rgba(255,255,255,.25) center/contain no-repeat; } .pub-bprev.has-logo i { background-color:#fff; } .pub-bprev em { font-style:normal; opacity:.75; font-size:11px; padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.18); } .pub-chk { margin:0; font-size:12.5px; min-height:1.2em; } .pub-chk.ok { color:#2E9E5B; } .pub-chk.bad { color:var(--err, #C53030); } .pub-go { width:auto !important; padding:0 30px; align-self:flex-start; height:42px; font-size:15px; } .pub-users { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; } .pub-users li { display:flex; align-items:center; gap:10px; } .pub-users .av { width:28px; height:28px; border-radius:50%; background:#EEF3F9; display:grid; place-items:center; font-weight:700; font-size:12px; } .pub-users em { font-style:normal; font-size:11.5px; color:var(--muted); } .pub-more summary { cursor:pointer; font-size:13px; font-weight:600; margin-bottom:8px; } .pub-sum { padding:18px 20px; position:sticky; top:0; } .pub-sum h3 { margin:2px 0 12px; font-size:1.1rem; } .pub-sum dl { margin:0; display:flex; flex-direction:column; } .pub-sum dl > div { padding:10px 0; border-top:1px solid var(--hair); } .pub-sum dt { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:flex; justify-content:space-between; } .pub-sum dt a { text-transform:none; letter-spacing:0; font-weight:600; font-size:12px; } .pub-sum dd { margin:4px 0 0; display:flex; align-items:baseline; gap:8px; } .pub-sum dd b { white-space:nowrap; font-size:18px; font-family:"Poppins", var(--font); } .pub-sum dd span { font-size:12.5px; color:var(--muted); } .pub-cats { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:3px; font-size:12.5px; } .pub-cats li { display:flex; align-items:center; gap:7px; } .pub-cats i { width:9px; height:9px; border-radius:3px; } .pub-cats em { margin-left:auto; font-style:normal; color:var(--muted); font-size:11.5px; } .m.w .hzm { height:520px; } .m.w .hzm { grid-template-columns:minmax(0,1fr) 260px; } @media (max-width:1100px) { .pub { grid-template-columns:1fr; } .pub-sum { position:static; } .hzm { grid-template-columns:1fr; } .hzm-map { height:440px; } .bframe[data-step="model"] .bstage { overflow-y:auto; } } .hzmod .hzbar { flex:none; height:6px; border-radius:3px; background:#EEF2F6; overflow:hidden; } .hzmod .hzbar i { display:block; height:100%; background:#2E9E5B; transition:width .3s; } /* ═════════ Applications › an app: settings with a side menu ═════════ */ .apphead .eyebrow a { color:inherit; text-decoration:none; } .appset { display:grid; grid-template-columns:220px minmax(0,1fr); gap:22px; align-items:start; margin-top:6px; } .appnav { position:sticky; top:12px; display:flex; flex-direction:column; gap:2px; background:var(--surface, #fff); border:1px solid var(--hair); border-radius:14px; padding:8px; } .appnav button { display:flex; align-items:center; gap:10px; width:100%; border:0; background:none; padding:9px 10px; border-radius:9px; font-family:inherit; font-size:14px; font-weight:500; color:var(--ink-2, #435466); cursor:pointer; text-align:left; } .appnav button svg { flex:none; opacity:.75; } .appnav button span { flex:1; } .appnav button:hover { background:var(--sunk, #F1F5F9); color:var(--ink); } .appnav button.on, .appnav button[aria-selected="true"] { background:var(--mast-accent, #14212E); color:var(--mast-ink); } .appnav button.on svg, .appnav button[aria-selected="true"] svg { opacity:1; } .appnav button[data-tab="update"] { margin-top:6px; border-top:1px solid var(--hair); border-radius:0 0 9px 9px; padding-top:12px; } .appbody { min-width:0; } .appbody > section { display:flex; flex-direction:column; gap:14px; } .appbody > section[hidden] { display:none; } .appbody .card { margin:0; } .appbody .card h3 { margin:0 0 8px; font-size:1rem; display:flex; justify-content:space-between; align-items:baseline; gap:8px; } .ashead { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; } .ashead h2 { margin:0; font-size:1.35rem; } .ashead p { margin:4px 0 0; color:var(--muted); font-size:.9rem; max-width:720px; } .ashead form { margin:0; } .appbody .kpis { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; } .appbody .kpi .kpi-v { display:flex; align-items:center; gap:7px; } .ovsum-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; } .ovsum-h h3 { margin:0 !important; } .ovsum-g { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; } .ovsum-g > div { border:1px solid var(--hair); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; } .ovsum-g span { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .ovsum-g b { font-size:20px; font-family:"Poppins", var(--font); } .ovsum-g small { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .whybox > summary { cursor:pointer; font-weight:600; font-size:.9rem; padding:4px 0; } .whybox[open] > summary { margin-bottom:8px; } .card .whybox { margin:12px 0; padding:10px 14px; border:1px solid var(--hair); border-radius:10px; background:var(--sunk, #F7F9FB); } .warnbox { background:#FFF8E8 !important; border-color:#F2D9A6 !important; } .dangerbox > summary { color:var(--err, #C53030); } .cycgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:12px 0; } /* health */ .hs-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#B9C6D3; flex:none; } .hs-ok { background:#2E9E5B; } .hs-warn { background:#E3A33A; } .hs-down { background:#D7263D; } .hs-idle { background:#B9C6D3; } .appnav .hs-dot { margin-left:auto; } .hsbanner { display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:14px; border:1px solid; } .hsbanner.hs-ok { background:#ECF8F1; border-color:#BFE5CF; } .hsbanner.hs-warn { background:#FFF7E6; border-color:#F2D9A6; } .hsbanner.hs-down { background:#FDECEC; border-color:#F3C1C1; } .hsbanner b { font-size:1.05rem; display:block; } .hsbanner small { color:var(--muted); } .hs-pulse { position:relative; width:18px; height:18px; flex:none; } .hs-pulse i { position:absolute; inset:3px; border-radius:50%; background:currentColor; } .hs-pulse::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid currentColor; opacity:.5; animation:hsp 1.8s ease-out infinite; } .hsbanner.hs-ok .hs-pulse { color:#2E9E5B; } .hsbanner.hs-warn .hs-pulse { color:#D69020; } .hsbanner.hs-down .hs-pulse { color:#D7263D; } @keyframes hsp { from { transform:scale(.6); opacity:.7; } to { transform:scale(1.6); opacity:0; } } .hsgroup h3 span { font-weight:500; } .hslist { list-style:none; margin:0; padding:0; } .hslist li { display:grid; grid-template-columns:14px minmax(0,1.4fr) minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr); gap:12px; align-items:center; padding:10px 2px; border-top:1px solid var(--hair); } .hslist li:first-child { border-top:0; } .hs-n { display:flex; flex-direction:column; min-width:0; } .hs-n b { font-size:13.5px; } .hs-n small { font-size:11.5px; color:var(--muted); } .hs-f, .hs-l { font-size:12.5px; display:flex; flex-direction:column; } .hs-f span, .hs-l span { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .hs-s { font-size:12.5px; font-weight:600; display:flex; flex-direction:column; } .hs-s small { font-weight:400; color:var(--muted); font-size:11px; } .hs-t-ok { color:#2E9E5B; } .hs-t-warn { color:#B7791F; } .hs-t-down { color:#C53030; } .hs-t-idle { color:var(--muted); } .hsrate { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0; } .hsrate label { display:flex; flex-direction:column; gap:2px; padding:10px 14px; border:1.5px solid var(--hair); border-radius:10px; cursor:pointer; min-width:130px; } .hsrate label:has(input:checked), .hsrate label.on { border-color:var(--accent); background:var(--accent-soft); } .hsrate input { position:absolute; opacity:0; } .hsrate b { font-size:13.5px; } .hsrate small { font-size:11px; color:var(--muted); min-height:1em; } /* users */ .uav { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#EEF3F9; font-size:12px; font-weight:700; margin-right:8px; } .appbody td.actions { display:flex; gap:6px; justify-content:flex-end; align-items:flex-start; } .appbody td.actions form { margin:0; } .upw { position:relative; } .upw > summary { list-style:none; } .upw form { position:absolute; right:0; top:34px; z-index:20; background:#fff; border:1px solid var(--hair); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:6px; width:220px; box-shadow:0 8px 24px rgba(0,0,0,.12); } .uadd-g { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 14px; } .uadd-g label { display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; } /* update */ .upd { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:14px; align-items:start; } .upd-main { display:flex; flex-direction:column; gap:8px; } @media (max-width:1100px) { .appset { grid-template-columns:1fr; } .appnav { position:static; flex-direction:row; flex-wrap:wrap; } .appnav button { width:auto; } .upd { grid-template-columns:1fr; } .appbody .kpis { grid-template-columns:repeat(2,1fr); } .hslist li { grid-template-columns:14px 1fr 1fr; } .cycgrid { grid-template-columns:1fr; } } .appbody .card.warn ul { margin:0; } .appbody .card.warn h3 { margin-bottom:4px; } .hsrate { display:flex !important; flex-direction:row !important; flex-wrap:wrap; align-items:center; gap:12px; } .hsrate-o { display:grid; grid-template-columns:repeat(4, minmax(120px, 1fr)); gap:8px; flex:1 1 520px; max-width:720px; } .hsrate-o label { position:relative; margin:0; min-width:0; width:auto; } @media (max-width:700px) { .hsrate-o { grid-template-columns:repeat(2, 1fr); } } tr.building td { background:rgba(47,111,178,.03); } /* ═════════ Model › map layers ═════════ */ .mdoor-row { grid-template-columns:repeat(4,minmax(0,1fr)); } @media (max-width:1100px) { .mdoor-row { grid-template-columns:repeat(2,minmax(0,1fr)); } } .mdoor-art .d1 { left:12px; top:14px; width:52px; height:40px; border-radius:40% 60% 45% 55%; background:color-mix(in srgb, var(--accent) 35%, transparent); border:2px solid var(--accent); } .mdoor-art .d2 { left:58px; top:34px; width:46px; height:34px; border-radius:55% 45% 60% 40%; background:rgba(210,85,58,.3); border:2px dashed #D2553A; } .lform { margin-top:14px; padding:16px 18px; } .lform[hidden] { display:none; } .lform-h { display:flex; align-items:flex-start; gap:14px; margin-bottom:12px; } .lform-h h3 { margin:2px 0 0; font-size:1.05rem; } .lform-h > div { flex:1; } .lform-tabs { display:flex; gap:2px; } .lform-tabs button { border:1px solid var(--hair); background:var(--surface,#fff); padding:7px 12px; font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--muted); } .lform-tabs button:first-child { border-radius:8px 0 0 8px; } .lform-tabs button:last-child { border-radius:0 8px 8px 0; } .lform-tabs button.on { background:var(--ink,#14212E); color:#fff; border-color:var(--ink,#14212E); } .lform-f { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px 14px; align-items:end; } .lform-f[hidden] { display:none; } .lform-f label { display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; } .lform-f label small { font-weight:400; color:var(--muted); font-size:11.5px; } .lform-f .wide { grid-column:1 / -1; } .lform-f .lf-c input { width:52px; height:36px; padding:2px; } .lform-f .btn { justify-self:start; } #lMsg.ok { color:#2E9E5B; } #lMsg.bad, .lcard .bad { color:var(--err,#C53030); } .lgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; margin-top:10px; } .lcard { border:1px solid var(--hair); border-radius:12px; overflow:hidden; background:var(--surface,#fff); display:flex; flex-direction:column; } .lcard-map { height:140px; background:#E9EEF2; } .lcard-b { padding:10px 12px 12px; display:flex; flex-direction:column; gap:3px; } .lcard-k { font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); } .lcard-b b { font-size:14px; } .lcard-b small { font-size:12px; color:var(--muted); } .lcard-s { display:flex; align-items:center; gap:10px; margin-top:6px; } .lcard-s form { margin:0; } .lcard-s input[type=color] { width:30px; height:26px; padding:1px; border:1px solid var(--hair); border-radius:6px; } .lcard-s input[type=range] { width:90px; vertical-align:middle; } .lyr-pop { border-collapse:collapse; font-size:12px; margin-top:4px; } .lyr-pop th { text-align:left; color:#5A6E82; font-weight:600; padding:1px 8px 1px 0; } .lyr-pop td { padding:1px 0; } .atl-sw { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; } /* ═════════ App settings › Agents ═════════ */ .aggrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:12px; } .agcard { --ac:var(--accent); position:relative; background:var(--surface,#fff); border:1px solid var(--hair); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:8px; box-shadow:inset 0 3px 0 var(--ac); } .agcard.off { opacity:.62; } .agcard.sugg { border-style:dashed; } .agcard-h { display:flex; gap:10px; align-items:flex-start; } .agcard-h > div { flex:1; min-width:0; display:flex; flex-direction:column; } .agcard-h b { font-size:14.5px; } .agcard-h small { font-size:12px; color:var(--muted); line-height:1.35; } .agcard-h form { margin:0; } .agav { width:34px; height:34px; border-radius:10px; background:var(--ac); color:#fff; display:grid; place-items:center; font-weight:700; flex:none; } .agtog { width:34px; height:19px; border-radius:10px; border:0; background:#C9D2DC; position:relative; cursor:pointer; padding:0; } .agtog::after { content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; transition:.15s; } .agtog[aria-checked="true"] { background:#2E9E5B; } .agtog[aria-checked="true"]::after { left:17px; } .agchips { display:flex; flex-wrap:wrap; gap:4px; } .agchips span { font-size:11px; padding:2px 8px; border-radius:9px; background:#EEF3F9; color:#2F5E9E; } .agstart { margin:0; padding-left:16px; font-size:12px; color:#435466; } .agstart li { margin:1px 0; } .agwhy { margin:0; font-size:12.5px; color:#435466; line-height:1.4; } .agcard-f { display:flex; gap:6px; align-items:center; margin-top:auto; padding-top:4px; } .agcard-f form { margin:0; } .agempty { grid-column:1 / -1; border:1.5px dashed var(--hair); border-radius:14px; padding:22px; text-align:center; color:var(--muted); } .agempty b { color:var(--ink); } .agsugg { background:#F7F4FE; border:1px solid #E1D8F8; border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:10px; } .agsugg[hidden] { display:none; } .agsugg-h { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; } .agedit[hidden] { display:none; } .agedit-g { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; } .agedit-g label { display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; } .agedit-g .wide { grid-column:1 / -1; } .aglbl { font-size:13px; font-weight:600; display:block; margin-bottom:6px; } .agdata { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:6px; } .agdata label { flex-direction:row !important; align-items:flex-start; gap:8px !important; padding:8px 10px; border:1px solid var(--hair); border-radius:9px; font-weight:400 !important; cursor:pointer; } .agdata label:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); } .agdata span { display:flex; flex-direction:column; } .agdata b { font-size:12.5px; } .agdata small { font-size:11px; color:var(--muted); } .agask { display:grid; gap:10px; margin-top:12px; } .agask label { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; } .agask label.check { flex-direction:row; font-weight:400; } .agpick { display:flex; flex-direction:row; align-items:center; gap:8px; margin-bottom:8px; } /* Reports & Alerts › Template library: every console category's templates */ .rpb-pick { --rp-acc:#2F6FB2; --rp-l:#E3E9EF; --rp-l2:#D3DCE5; --rp-s2:#F4F7FA; --rp-i3:#6B7C8D; } .rpb-pick .rpb-pick-in { width:min(1040px, 100%); display:flex; flex-direction:column; } .rpb-pick #rpPickBody { flex:1; min-height:0; } .rpb-libw { display:grid; grid-template-columns:250px 1fr; gap:18px; align-items:start; } .rpb-cats { position:sticky; top:0; display:flex; flex-direction:column; gap:2px; max-height:calc(100vh - 130px); overflow-y:auto; padding-right:4px; } .rpb-cats input[type=search] { width:100%; margin-bottom:8px; padding:8px 10px; border:1.5px solid var(--rp-l); border-radius:9px; font:13px var(--font); } .rpb-cats h6 { margin:10px 0 4px; font:700 10.5px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--rp-i3); } .rpb-cats button { display:flex; align-items:center; gap:8px; text-align:left; border:0; background:none; padding:7px 9px; border-radius:8px; cursor:pointer; font:13px var(--font); color:var(--ink); } .rpb-cats button:hover { background:var(--rp-s2); } .rpb-cats button[aria-pressed="true"] { background:color-mix(in srgb, var(--rp-acc) 12%, transparent); font-weight:600; } .rpb-cats button i { width:9px; height:9px; border-radius:50%; flex:none; } .rpb-cats button span { flex:1; min-width:0; } .rpb-cats button em { font-style:normal; font-size:11px; color:var(--rp-i3); } .rpb-libh { display:flex; align-items:center; gap:10px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--rp-l); } .rpb-libh div { flex:1; display:flex; flex-direction:column; gap:2px; } .rpb-libh b { font-size:16px; } .rpb-libh small { color:var(--rp-i3); font-size:12px; } .rpb-dot { width:12px; height:12px; border-radius:4px; flex:none; } .rpb-libm .fs h5 .chip { font-size:10.5px; } .rpb-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; } .rpb-lib em.rec { color:#7A4A00; background:#FFF1D6; } .rpb-lib em.ok { color:#11704B; background:#E2F6EC; } .rpb-lib em.cat { color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent); } .rpb-lib button.had { border-style:dashed; } .rpb .chip.rcat { color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent); border-color:transparent; } .rpb .rpb-desc { margin:-4px 0 12px; line-height:1.45; } @media (max-width:760px) { .rpb-libw { grid-template-columns:1fr; } .rpb-cats { position:static; max-height:none; } .rpb-pick .rpb-lib { grid-template-columns:1fr; } } /* ── Platform control (views/admin/control.php) ── */ .pc .pagehead { align-items:flex-end; } .pc-ready { display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--hair); border-radius:14px; padding:12px 16px; } .pc-ready-l { display:flex; flex-direction:column; gap:6px; width:210px; } .pc-ready-t { display:flex; justify-content:space-between; gap:16px; font-size:13px; } .pc-ready-t span { color:var(--muted); } .pc-ready form { margin:0; } .pc-bar { height:8px; border-radius:999px; background:var(--sunk); overflow:hidden; } .pc-bar i { display:block; height:100%; background:var(--accent); border-radius:999px; } .pc-steps { list-style:none; margin:18px 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; } .pc-step { width:100%; min-height:132px; text-align:left; display:flex; flex-direction:column; gap:5px; padding:14px 16px; border-radius:14px; cursor:pointer; background:var(--surface); border:1px solid var(--hair); color:var(--ink); font:inherit; } .pc-step[aria-pressed="true"] { border:2px solid var(--accent); box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 18%, transparent); padding:13px 15px; } .pc-step b { font-size:16px; } .pc-step-h { display:flex; justify-content:space-between; align-items:center; } .pc-num { font:500 12px var(--mono); color:var(--muted); } .pc-sub { font-size:12.5px; color:var(--muted); line-height:1.4; } .pc-needs { font-size:11.5px; color:var(--muted); margin-top:auto; } .pc-pill { font-size:11.5px; font-weight:700; border-radius:999px; padding:3px 9px; white-space:nowrap; } .pc-pill.st-ok { background:#E2F5EC; color:#0D6B47; } .pc-pill.st-warn { background:#FFF3D6; color:#7A4A00; } .pc-pill.st-todo { background:#EEF2F5; color:#41556A; } .pc-pill.st-info { background:#E7F0FA; color:#1F4F80; } .pc-lay { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; } .pc-panel { padding:22px 24px; } .pc-panel-h { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; } .pc-panel-h h2 { margin:0; font-size:21px; } .pc-panel-h p { margin:4px 0 0; } .pc-items { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .pc-item { display:grid; grid-template-columns:14px minmax(0,1fr) auto; gap:14px; align-items:center; border:1px solid var(--hair); border-radius:12px; padding:14px 16px; } .pc-item-t { display:flex; flex-direction:column; gap:3px; } .pc-item-t b { font-size:14.5px; } .pc-item-t span { font-size:13px; color:var(--body, var(--ink)); } .pc-item-t small { font-size:11.5px; color:var(--muted); } .pc-dot { width:12px; height:12px; border-radius:50%; } .pc-dot.st-ok { background:#12A06A; } .pc-dot.st-warn { background:#E0A21A; } .pc-dot.st-todo { background:#93A3B4; } .pc-dot.st-info { background:#4A8BD0; } .pc-act { display:flex; align-items:center; gap:8px; white-space:nowrap; } .pc-act form { margin:0; } .pc-switch { width:52px; height:30px; border-radius:999px; border:0; padding:3px; cursor:pointer; display:flex; background:#B9C5D1; justify-content:flex-start; } .pc-switch[aria-checked="true"] { background:var(--accent); justify-content:flex-end; } .pc-switch i { width:24px; height:24px; border-radius:50%; background:#fff; display:block; } .pc-nav { display:flex; justify-content:space-between; border-top:1px solid var(--hair); margin-top:16px; padding-top:14px; } .pc-side { display:flex; flex-direction:column; gap:14px; } .pc-side h3 { margin:0 0 10px; font-size:15px; } .pc-con h4 { margin:10px 0 6px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .pc-chips { display:flex; flex-wrap:wrap; gap:6px; } .pc-chips span { font-size:12.5px; border-radius:999px; padding:4px 10px; background:var(--sunk); } .pc-chips em { font-size:12.5px; color:var(--muted); font-style:normal; } .pc-con ul { margin:0; padding-left:18px; font-size:13px; line-height:1.6; } .pc-health { background:var(--brand-navy, #102A41); color:#E8EEF4; border-radius:16px; padding:18px 20px; } .pc-health h3 { color:#fff; } .pc-health p { margin:0 0 12px; font-size:13px; color:#B9C7D4; } .pc-health ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13px; } .pc-health li { display:flex; justify-content:space-between; gap:10px; } .pc-health b.st-ok { color:#7FE0B4; } .pc-health b.st-warn { color:#FFD27A; } .pc-tools { display:flex; flex-direction:column; gap:6px; } .pc-tools a { font-size:13.5px; } @media (max-width:1100px) { .pc-steps { grid-template-columns:repeat(2, minmax(0,1fr)); } .pc-lay { grid-template-columns:1fr; } } @media (max-width:560px) { .pc-steps { grid-template-columns:1fr; } .pc-item { grid-template-columns:14px minmax(0,1fr); } .pc-act { grid-column:2; } } .pc-back { display:inline-block; margin:0 0 6px; font-size:13px; font-weight:600; text-decoration:none; color:var(--accent); } /* ── Model › Data Library (views/library/datalib.php) ── */ .mdoor-row { grid-template-columns:repeat(4,minmax(0,1fr)); } @media (max-width:1100px) { .mdoor-row { grid-template-columns:repeat(2,minmax(0,1fr)); } } .dlib { margin:22px 0 10px; background:var(--surface); border:1px solid var(--hair); border-radius:16px; padding:20px 22px; } .dlib-h { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; } .dlib-h h2 { margin:2px 0 4px; font:600 1.25rem "Poppins", var(--font); } .dlib-h p { margin:0; max-width:640px; } .dlib-q input { width:320px; max-width:100%; padding:10px 12px; border:1px solid var(--hair-strong, var(--hair)); border-radius:10px; font:14px var(--font); background:var(--paper, #fff); color:var(--ink); } .dlib-tabs { display:flex; gap:4px; border-bottom:1px solid var(--hair); margin:16px 0 10px; overflow-x:auto; } .dlib-tabs button { border:0; background:none; padding:10px 14px; font:600 14px var(--font); color:var(--muted); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap; } .dlib-tabs button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--accent); } .dlib-tabs em { font-style:normal; font-size:11px; background:var(--sunk); border-radius:999px; padding:1px 7px; margin-left:4px; } .dlib-cats { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; min-height:28px; align-items:center; } .dlib-cats button { border:1px solid var(--hair); background:var(--surface); border-radius:999px; padding:5px 11px; font:12.5px var(--font); color:var(--ink); cursor:pointer; } .dlib-cats button[aria-pressed="true"] { background:var(--ink); color:var(--surface); border-color:var(--ink); } .dlib-cats em { font-style:normal; opacity:.6; } .dlib-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; } .dlcard { text-align:left; display:flex; flex-direction:column; gap:5px; padding:13px 14px; border:1px solid var(--hair); border-radius:12px; background:var(--surface); cursor:pointer; font:inherit; color:var(--ink); } .dlcard:hover { border-color:var(--accent); box-shadow:0 4px 14px rgba(16,42,65,.07); } .dlcard b { font-size:14.5px; } .dlcard > span:not(.dlcard-k):not(.dlcard-tags) { font-size:12.5px; color:var(--muted); line-height:1.45; } .dlcard-k { font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; } .dlcard-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:auto; padding-top:4px; } .dlcard-tags em { font-style:normal; font-size:11px; font-weight:600; border-radius:999px; padding:2px 8px; background:var(--sunk); color:var(--ink); } .dlcard-tags em.pop { background:#E7F0FA; color:#1F4F80; } .dlcard-tags em.ph { background:#FCE9E6; color:#8A2D1F; } .dlcard-tags em.free { background:#E2F5EC; color:#0D6B47; } .dlcard-tags em.warn { background:#FFF3D6; color:#7A4A00; } .dlcard.own { border-style:dashed; background:var(--sunk); } .dlw { position:fixed; inset:0; z-index:5000; background:rgba(10,22,34,.45); display:grid; place-items:center; padding:16px; } .dlw[hidden] { display:none; } .dlw-in { width:min(760px,100%); max-height:calc(100vh - 32px); overflow-y:auto; background:var(--surface); border-radius:16px; padding:22px 24px; box-shadow:0 24px 60px rgba(0,0,0,.25); } .dlw-h { display:flex; gap:12px; align-items:flex-start; } .dlw-h div { flex:1; } .dlw-h h3 { margin:2px 0 4px; font:600 1.2rem "Poppins", var(--font); } .dlw-h p { margin:0; } .dlw-steps { list-style:none; display:flex; gap:6px; padding:0; margin:14px 0 10px; counter-reset:st; } .dlw-steps li { counter-increment:st; flex:1; font-size:12.5px; font-weight:600; color:var(--muted); padding:8px 10px; border-radius:9px; background:var(--sunk); } .dlw-steps li::before { content:counter(st) " · "; } .dlw-steps li.on { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--ink); } .dlw-meta { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--muted); margin-bottom:12px; } .dlw-meta .warn { color:#7A4A00; } .dlw-fields, .dlw-row { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; } .dlw-row { margin-top:10px; } .dlw-f label { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; } .dlw-f label.wide, .dlw-f .wide { grid-column:1 / -1; } .dlw-f input, .dlw-f select, .dlw-f textarea { padding:9px 11px; border:1px solid var(--hair-strong, var(--hair)); border-radius:9px; font:14px var(--font); background:var(--paper, #fff); color:var(--ink); } .dlw-f small { font-weight:400; color:var(--muted); font-size:11.5px; } .dlw-f .lock { font-style:normal; font-size:10.5px; color:#0D6B47; background:#E2F5EC; border-radius:6px; padding:1px 6px; margin-left:4px; } .dlw-file { display:flex; flex-direction:column; gap:8px; padding:12px; border:1px dashed var(--hair); border-radius:10px; } .dlw-help { margin-top:14px; padding:12px; border-radius:12px; background:var(--sunk); } .dlw-help > label { display:block; margin-bottom:6px; } .dlw-ask { display:flex; gap:8px; } .dlw-ask input { flex:1; padding:9px 11px; border:1px solid var(--hair); border-radius:9px; font:14px var(--font); } .dlw-reply { margin-top:10px; font-size:13px; line-height:1.55; background:var(--surface); border-radius:10px; padding:10px 12px; } .dlw-set { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } .dlw-out { margin-top:12px; } .dlw-ok { padding:10px 12px; border-radius:10px; background:#E2F5EC; color:#0D6B47; font-size:13px; font-weight:600; } .dlw-bad { padding:10px 12px; border-radius:10px; background:#FCE9E6; color:#8A2D1F; font-size:13px; } .dlw-tbl { margin-top:8px; max-height:220px; overflow:auto; font-size:12px; } .dlw-map { height:220px; margin-top:8px; border-radius:10px; overflow:hidden; } .dlw-act { display:flex; gap:8px; align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid var(--hair); } @media (max-width:600px) { .dlw-fields, .dlw-row { grid-template-columns:1fr; } } /* ── Applications (views/apps/index.php) ── */ .apx-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:18px 0; } .apx-kpi { background:var(--surface); border:1px solid var(--hair); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:3px; } .apx-kpi > span { font-size:12.5px; color:var(--muted); font-weight:600; } .apx-kpi b { font:600 26px "Poppins", var(--font); color:var(--ink); } .apx-kpi b i { font-style:normal; font-size:14px; color:var(--muted); font-weight:500; } .apx-kpi small { font-size:12px; color:var(--muted); } .apx-slots { display:flex; gap:4px; } .apx-slots i { flex:1; height:6px; border-radius:999px; background:var(--sunk); } .apx-slots i.on { background:var(--accent); } .apx-lay { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; } .apx-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; } .apx-tabs { display:flex; gap:4px; } .apx-tabs button { border:1px solid var(--hair); background:var(--surface); border-radius:999px; padding:7px 13px; font:600 13px var(--font); color:var(--ink); cursor:pointer; } .apx-tabs button[aria-selected="true"] { background:var(--ink); color:var(--surface); border-color:var(--ink); } .apx-tabs em { font-style:normal; opacity:.65; margin-left:3px; } .apx-q { padding:8px 12px; border:1px solid var(--hair); border-radius:10px; font:14px var(--font); width:220px; background:var(--surface); color:var(--ink); } .apx-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; } .apx-card { background:var(--surface); border:1px solid var(--hair); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; border-top:4px solid var(--c); } .apx-card[hidden] { display:none; } .apx-card header { display:flex; gap:10px; align-items:flex-start; } .apx-mark { width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center; font:700 15px "Poppins", var(--font); color:#fff; background:var(--c); } .apx-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .apx-t a b { font-size:15.5px; color:var(--ink); } .apx-t a { text-decoration:none; } .apx-url { font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .apx-st { font-size:11.5px; font-weight:700; border-radius:999px; padding:3px 10px; white-space:nowrap; } .apx-st.st-live { background:#E2F5EC; color:#0D6B47; } .apx-st.st-demo { background:#E7F0FA; color:#1F4F80; } .apx-st.st-draft { background:var(--sunk); color:var(--ink); } .apx-st.st-paused { background:#FFF3D6; color:#7A4A00; } .apx-dl { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin:0; } .apx-dl div { display:flex; flex-direction:column; gap:1px; } .apx-dl dt { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } .apx-dl dd { margin:0; font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:6px; } .apx-dot { width:9px; height:9px; border-radius:50%; flex:none; display:inline-block; } .apx-dot.h-ok { background:#12A06A; } .apx-dot.h-warn { background:#E0A21A; } .apx-dot.h-todo { background:#93A3B4; } .apx-dot.h-info { background:#4A8BD0; } .apx-flag { margin:0; font-size:12.5px; padding:7px 10px; border-radius:9px; background:#FCE9E6; color:#8A2D1F; } .apx-flag.info { background:#E7F0FA; color:#1F4F80; } .apx-card footer { display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; border-top:1px solid var(--hair); padding-top:10px; margin-top:auto; } .apx-card footer form { margin:0; } .apx-act form { display:flex; flex-direction:column; gap:8px; margin-top:8px; padding:10px; border-radius:10px; background:var(--sunk); font-size:12.5px; } .apx-act label { display:flex; flex-direction:column; gap:3px; font-weight:600; } .apx-side { display:flex; flex-direction:column; gap:14px; } .apx-side h3 { margin:0 0 10px; font-size:15px; } .apx-todo { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .apx-todo li { display:flex; gap:10px; align-items:flex-start; } .apx-todo .apx-dot { margin-top:5px; } .apx-todo b { display:block; font-size:13.5px; } .apx-todo small { font-size:12px; color:var(--muted); } .apx-how { background:var(--brand-navy, #102A41); color:#E8EEF4; border-radius:16px; padding:18px 20px; } .apx-how h3 { color:#fff; } .apx-how ol { margin:0 0 10px; padding-left:18px; font-size:13px; line-height:1.6; } .apx-how p { margin:0; font-size:12.5px; color:#B9C7D4; } .apx-how a { color:#8FD3FF; } .apx-empty { padding:28px; text-align:center; } .apx-empty ol { display:inline-flex; flex-direction:column; gap:6px; text-align:left; margin:10px 0 16px; } @media (max-width:1100px) { .apx-lay { grid-template-columns:1fr; } .apx-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px) { .apx-kpis { grid-template-columns:1fr; } .apx-grid { grid-template-columns:1fr; } } /* ── Grow: Tour, Handbook, Campaigns (views/grow/index.php) ── */ .gw-bar { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .gw-app { display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--muted); } .gw-app select { min-width:280px; padding:9px 11px; border:1px solid var(--hair-strong, var(--hair)); border-radius:10px; font:14px var(--font); background:var(--surface); color:var(--ink); } .gw-new { display:flex; gap:8px; } .gw-lay { display:grid; grid-template-columns:260px minmax(0,1fr); gap:16px; align-items:start; } .gw-list { padding:14px; position:sticky; top:0; } .gw-list h3 { margin:0 0 10px; font-size:15px; } .gw-it { display:flex; align-items:stretch; gap:4px; border:1px solid var(--hair); border-radius:10px; margin-bottom:6px; overflow:hidden; } .gw-it.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent); } .gw-it > button { flex:1; text-align:left; border:0; background:none; padding:9px 10px; cursor:pointer; font:inherit; color:var(--ink); display:flex; flex-direction:column; gap:2px; min-width:0; } .gw-it b { font-size:13.5px; } .gw-it small { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gw-it-a { display:flex; align-items:center; gap:2px; padding-right:6px; } .gw-it-a a, .gw-it-a button { border:0; background:none; font-size:15px; color:var(--muted); cursor:pointer; padding:4px 6px; text-decoration:none; border-radius:6px; } .gw-it-a a:hover, .gw-it-a button:hover { background:var(--sunk); color:var(--ink); } .gw-allapps { display:flex; gap:6px; align-items:center; margin-top:8px; } .gw-ed { display:flex; flex-direction:column; gap:12px; } .gw-hint { padding:22px; } .gw-hint p { margin:6px 0 0; } .gw-top { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:14px 16px; } .gw-title { flex:1; min-width:240px; font:600 18px "Poppins", var(--font); border:1px solid transparent; border-radius:9px; padding:8px 10px; background:var(--sunk); color:var(--ink); } .gw-act { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .gw-blk { padding:14px 16px; } .gw-blk-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; } .gw-tools button { border:1px solid var(--hair); background:var(--surface); border-radius:7px; width:28px; height:28px; cursor:pointer; color:var(--ink); } .gw-g { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; } .gw-f { display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--muted); } .gw-f.wide { grid-column:1 / -1; } .gw-f input, .gw-f textarea { padding:9px 11px; border:1px solid var(--hair-strong, var(--hair)); border-radius:9px; font:14px/1.45 var(--font); color:var(--ink); background:var(--surface); resize:vertical; } .gw-video { padding:12px; } .gw-video canvas { width:100%; height:auto; border-radius:10px; display:block; background:#000; } .gw-vbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; } .gw-vbar label, .gw-allapps { display:flex !important; flex-direction:row !important; gap:6px; align-items:center; font-weight:500; } .gw-vbar input, .gw-allapps input { width:auto; margin:0; } .gw-empty { padding:24px; } @media (max-width:900px) { .gw-lay { grid-template-columns:1fr; } .gw-list { position:static; } .gw-g { grid-template-columns:1fr; } } /* ── Your business: Account, Team, Invoices (views/partials/bizhub.php) ── */ .biz-head { align-items:flex-start; gap:18px; flex-wrap:wrap; } .biz-head p { margin:4px 0 0; max-width:620px; } .biz-right { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .biz-steps { grid-template-columns:repeat(5, minmax(0,1fr)); margin:14px 0 12px; } .biz-step { min-height:112px; text-decoration:none; transition:border-color .15s, box-shadow .15s; } .biz-step:hover { border-color:var(--accent); } .biz-step[aria-current="page"] { border:2px solid var(--accent); box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 18%, transparent); padding:13px 15px; } .biz-health { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:1px; background:var(--brand-navy, #102A41); border-radius:14px; padding:14px 6px; margin:0 0 20px; color:#E8EEF4; } .biz-health div { display:flex; flex-direction:column; gap:3px; padding:0 14px; border-left:1px solid rgba(255,255,255,.12); min-width:0; } .biz-health div:first-child { border-left:0; } .biz-health span { font-size:11.5px; color:#B9C7D4; letter-spacing:.02em; } .biz-health b { font:600 16px var(--font); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .biz-health b.st-ok { color:#7FE0B4; } .biz-health b.st-warn { color:#FFD27A; } .biz-lay { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; } .biz-side { display:flex; flex-direction:column; gap:14px; } .biz-sec-h { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin:0 0 12px; } .biz-sec-h h2 { margin:0; font-size:19px; } .biz-sec-h p { margin:3px 0 0; } .biz-tools { display:flex; flex-direction:column; } .biz-tools a { display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--hair); text-decoration:none; font-size:14px; color:var(--ink); } .biz-tools a:first-of-type { border-top:0; } .biz-tools a i { font-style:normal; color:var(--accent); } @media (max-width:1200px) { .biz-health { grid-template-columns:repeat(4, minmax(0,1fr)); row-gap:12px; } .biz-health div:nth-child(5) { border-left:0; } } @media (max-width:1100px) { .biz-steps { grid-template-columns:repeat(2, minmax(0,1fr)); } .biz-lay { grid-template-columns:1fr; } } @media (max-width:560px) { .biz-steps { grid-template-columns:1fr; } .biz-health { grid-template-columns:repeat(2, minmax(0,1fr)); } .biz-health div:nth-child(odd) { border-left:0; } } .biz-side .biz-form { grid-template-columns:1fr 1fr; } .biz-side details.card summary { cursor:pointer; } .biz-side .tw { max-height:360px; overflow:auto; } /* ── Home (views/home.php): the partner's day, in their brand ── */ .hm { display:flex; flex-direction:column; gap:20px; } .hm-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:center; padding:34px 36px; border-radius:22px; color:#fff; background:radial-gradient(110% 120% at 100% 0%, color-mix(in srgb, var(--brand) 85%, #fff 0%) 0, transparent 60%), linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 100%); box-shadow:var(--shadow-lg); } .hm-hero-pat { position:absolute; inset:-30%; opacity:.13; pointer-events:none; background:repeating-radial-gradient(circle at 82% 70%, transparent 0 34px, rgba(255,255,255,.6) 35px 36px); } .hm-hero-l { position:relative; } .hm-eyebrow { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.8; } .hm-hero h1 { margin:8px 0 8px; font:700 clamp(28px, 3vw, 40px)/1.1 "Poppins", var(--font); color:#fff; } .hm-hero p { margin:0 0 20px; font-size:16px; line-height:1.55; opacity:.9; max-width:560px; } .hm-acts { display:flex; flex-wrap:wrap; gap:10px; } .hm-btn { display:inline-flex; align-items:center; padding:10px 16px; border-radius:12px; font-weight:600; font-size:14px; text-decoration:none; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); transition:background .15s, transform .15s; } .hm-btn:hover { background:rgba(255,255,255,.24); transform:translateY(-1px); } .hm-btn.pri { background:#fff; color:var(--brand-deep); border-color:#fff; } .hm-next { position:relative; display:flex; flex-direction:column; gap:6px; padding:20px 22px; border-radius:18px; text-decoration:none; background:rgba(255,255,255,.96); color:var(--ink); box-shadow:0 14px 40px rgba(0,0,0,.18); transition:transform .15s; } .hm-next:hover { transform:translateY(-2px); } .hm-next-k { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); } .hm-next b { font:600 18px/1.25 "Poppins", var(--font); } .hm-next span:not(.hm-next-k) { font-size:13.5px; color:var(--muted); line-height:1.5; } .hm-next em { font-style:normal; font-weight:700; font-size:14px; color:var(--accent); margin-top:4px; } .hm-stats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; } .hm-stats a { display:flex; flex-direction:column; gap:3px; padding:16px 18px; border-radius:16px; background:var(--surface); border:1px solid var(--hair); text-decoration:none; color:var(--ink); box-shadow:var(--shadow); border-top:3px solid var(--brand); transition:transform .15s; } .hm-stats a:hover { transform:translateY(-2px); } .hm-stats span { font-size:12.5px; color:var(--muted); font-weight:600; } .hm-stats b { font:700 26px/1.15 "Poppins", var(--font); } .hm-stats small { font-size:12px; color:var(--muted); } .hm-lay { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; } .hm-main { display:flex; flex-direction:column; gap:20px; min-width:0; } .hm-sec { background:var(--surface); border:1px solid var(--hair); border-radius:18px; padding:20px 22px; box-shadow:var(--shadow); } .hm-sec-h { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:14px; } .hm-sec-h h2 { margin:0; font:600 19px "Poppins", var(--font); } .hm-sec-h p { margin:3px 0 0; font-size:13px; color:var(--muted); } .hm-link { font-weight:600; font-size:13.5px; color:var(--accent); text-decoration:none; white-space:nowrap; } .hm-apps { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:12px; } .hm-app { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:14px; border:1px solid var(--hair); background:var(--paper); text-decoration:none; color:var(--ink); position:relative; overflow:hidden; transition:border-color .15s, transform .15s; } .hm-app::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--ac); } .hm-app:hover { border-color:var(--ac); transform:translateY(-1px); } .hm-app-mk { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-weight:700; color:#fff; background:var(--ac); flex:none; } .hm-app-t { display:flex; flex-direction:column; min-width:0; flex:1; } .hm-app-t b { font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hm-app-t small { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hm-pill { font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--sunk); color:var(--body); white-space:nowrap; } .hm-pill.st-live { background:#E2F5EC; color:#0D6B47; } .hm-pill.st-demo { background:var(--accent-soft); color:var(--accent); } .hm-pill.st-paused { background:#FFF3D6; color:#7A4A00; } .hm-empty { display:flex; flex-direction:column; gap:4px; padding:24px; border-radius:14px; border:2px dashed var(--hair-strong); text-decoration:none; color:var(--ink); } .hm-empty span { color:var(--muted); font-size:14px; } .hm-empty em { font-style:normal; font-weight:700; color:var(--accent); margin-top:6px; } .hm-path { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; counter-reset:p; } .hm-path li { position:relative; } .hm-path li:not(:last-child)::after { content:"→"; position:absolute; right:-11px; top:50%; transform:translateY(-50%); color:var(--faint); font-weight:700; z-index:1; } .hm-path a { display:flex; flex-direction:column; gap:4px; height:100%; padding:16px; border-radius:14px; background:var(--paper); border:1px solid var(--hair); text-decoration:none; color:var(--ink); position:relative; transition:border-color .15s, box-shadow .15s; } .hm-path a:hover { border-color:var(--brand); box-shadow:0 6px 18px var(--brand-shadow); } .hm-path-n { position:absolute; top:12px; right:14px; font:600 12px var(--mono); color:var(--faint); } .hm-path-ic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); margin-bottom:6px; } .hm-path-ic svg { width:21px; height:21px; } .hm-path b { font-size:15px; } .hm-path-t { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); } .hm-path small { font-size:12.5px; color:var(--muted); line-height:1.4; } .hm-side { display:flex; flex-direction:column; gap:16px; } .hm-card { background:var(--surface); border:1px solid var(--hair); border-radius:18px; padding:18px 20px; box-shadow:var(--shadow); } .hm-card-h { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; } .hm-card-h h3 { margin:0; font:600 16px "Poppins", var(--font); } .hm-card-h span { font-size:12px; color:var(--muted); } .hm-biz ul { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; } .hm-biz li a { display:grid; grid-template-columns:14px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--hair); text-decoration:none; color:var(--ink); } .hm-biz li:first-child a { border-top:0; } .hm-biz li a span:nth-child(2) { display:flex; flex-direction:column; } .hm-biz b { font-size:13.5px; } .hm-biz small { font-size:12px; color:var(--muted); } .hm-biz i { font-style:normal; color:var(--accent); } .hm-grow a { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:10px; padding:11px 12px; margin-top:8px; border-radius:12px; background:var(--paper); border:1px solid var(--hair); text-decoration:none; color:var(--ink); } .hm-grow a:hover { border-color:var(--brand); } .hm-grow b { font-size:14px; } .hm-grow small { grid-column:1; font-size:12px; color:var(--muted); } .hm-grow em { grid-row:1 / span 2; grid-column:2; align-self:center; font-style:normal; font-weight:700; min-width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); } @media (max-width:1150px) { .hm-hero, .hm-lay { grid-template-columns:1fr; } .hm-stats, .hm-path { grid-template-columns:repeat(2, minmax(0,1fr)); } .hm-path li::after { display:none; } } @media (max-width:560px) { .hm-stats, .hm-path { grid-template-columns:1fr; } .hm-hero { padding:24px 20px; } } /* ── AI Credits (views/credits.php) ── */ .cr-main { display:flex; flex-direction:column; gap:16px; min-width:0; } .cr-hero { display:grid; grid-template-columns:260px minmax(0,1fr); gap:0; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--hair); background:var(--surface); } .cr-bal { display:flex; flex-direction:column; gap:2px; padding:22px 24px; color:#fff; background:linear-gradient(135deg, var(--brand-deep), var(--brand)); } .cr-bal span { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.85; } .cr-bal b { font:700 44px/1.1 "Poppins", var(--font); } .cr-bal small { opacity:.85; font-size:12.5px; } .cr-meter { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:20px 24px; align-items:center; } .cr-meter > div { display:flex; flex-direction:column; gap:6px; } .cr-meter span { font-size:12.5px; color:var(--muted); font-weight:600; } .cr-meter b { font:700 22px "Poppins", var(--font); } .cr-meter b i { font-style:normal; font-size:13px; color:var(--muted); font-weight:500; } .cr-meter small { font-size:12px; color:var(--muted); } .cr-sec { padding:20px 22px; } .cr-packs { display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; } .cr-pack { position:relative; cursor:pointer; } .cr-pack input { position:absolute; opacity:0; } .cr-pack span { display:flex; flex-direction:column; align-items:flex-start; min-width:130px; padding:14px 16px; border-radius:14px; border:1.5px solid var(--hair-strong); background:var(--paper); } .cr-pack b { font:700 22px "Poppins", var(--font); } .cr-pack small { font-size:12px; color:var(--muted); } .cr-pack em { font-style:normal; font-weight:700; color:var(--accent); margin-top:6px; } .cr-pack input:checked + span { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-shadow); background:var(--surface); } .cr-packs > .btn { align-self:center; } .cr-packs.ro .cr-pack { cursor:default; } .cr-k { display:inline-block; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--sunk); margin-right:4px; } .cr-topup, .cr-included, .cr-grant { background:#E2F5EC; color:#0D6B47; } .cr-usage.cr-k { background:var(--accent-soft); } .cr-plus { color:#0D6B47; font-weight:700; } ul.cr-usage { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; } ul.cr-usage li { position:relative; display:flex; justify-content:space-between; gap:10px; padding:8px 10px 12px; border-radius:10px; background:var(--paper); } ul.cr-usage li span { display:flex; flex-direction:column; } ul.cr-usage b { font-size:13.5px; } ul.cr-usage small { font-size:12px; color:var(--muted); } ul.cr-usage em { font-style:normal; font-weight:700; font-family:var(--mono); } ul.cr-usage i { position:absolute; left:10px; bottom:5px; height:3px; border-radius:2px; background:var(--brand); max-width:calc(100% - 20px); } ul.cr-how { margin:10px 0 0; padding-left:18px; font-size:13px; line-height:1.6; color:var(--body); } @media (max-width:900px) { .cr-hero, .cr-meter { grid-template-columns:1fr; } } /* ── Brand & Profile (views/account.php) ── */ .acct-prof .acct-who.big { display:flex; gap:12px; align-items:center; margin:10px 0 12px; } .acct-prof .acct-who.big > div { display:flex; flex-direction:column; gap:2px; } .acct-prof .acct-av { width:48px; height:48px; font-size:17px; background:linear-gradient(135deg, var(--brand-deep), var(--brand)); color:#fff; } .biz-health { background:var(--brand-deep, #172238); } /* ── Grow: Tour, Handbook, Campaigns (views/grow/index.php) ── */ .gw-hero { position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:flex-end; gap:22px; flex-wrap:wrap; padding:20px 24px 22px; margin-bottom:16px; border-radius:20px; color:#fff; background:radial-gradient(100% 140% at 100% 0%, color-mix(in srgb, var(--brand) 80%, #fff 0%) 0, transparent 60%), linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 100%); box-shadow:var(--shadow-lg); } .gw-hero-pat { position:absolute; inset:-40%; opacity:.12; pointer-events:none; background:repeating-radial-gradient(circle at 90% 80%, transparent 0 30px, rgba(255,255,255,.7) 31px 32px); } .gw-hero-l, .gw-hero-r { position:relative; } .gw-tabs { display:inline-flex; gap:4px; padding:4px; border-radius:12px; background:rgba(0,0,0,.18); margin-bottom:14px; } .gw-tabs a { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:9px; color:rgba(255,255,255,.82); text-decoration:none; font-weight:600; font-size:13.5px; } .gw-tabs a svg { width:16px; height:16px; } .gw-tabs a em { font-style:normal; font-size:11px; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.18); } .gw-tabs a[aria-current="page"] { background:#fff; color:var(--brand-deep); } .gw-tabs a[aria-current="page"] em { background:var(--accent-soft); color:var(--accent); } .gw-hero h1 { display:flex; align-items:center; gap:12px; margin:0 0 6px; font:700 30px/1.15 "Poppins", var(--font); color:#fff; } .gw-hero-ic { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); } .gw-hero-ic svg { width:24px; height:24px; } .gw-hero p { margin:0; max-width:560px; font-size:15px; line-height:1.5; opacity:.9; } .gw-hero-r { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; } .gw-hero .gw-app { color:rgba(255,255,255,.85); } .gw-hero .gw-app select { border:0; min-width:240px; box-shadow:0 4px 14px rgba(0,0,0,.15); } .gw-newb { border:0; border-radius:10px; padding:10px 16px; font:700 14px var(--font); cursor:pointer; background:#fff; color:var(--brand-deep); box-shadow:0 4px 14px rgba(0,0,0,.15); transition:transform .15s; } .gw-newb:hover { transform:translateY(-1px); } .gw-newb:disabled { opacity:.6; } .gw-list { border-top:3px solid var(--brand); } .gw-it { align-items:center; transition:border-color .15s, box-shadow .15s; } .gw-it:hover { border-color:var(--brand); box-shadow:0 4px 12px var(--brand-shadow); } .gw-it-ic { width:30px; height:30px; margin-left:8px; border-radius:9px; display:grid; place-items:center; flex:none; font:700 12px var(--mono); color:var(--accent); background:var(--accent-soft); } .gw-hint { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.9fr); gap:24px; align-items:center; padding:26px 28px !important; } .gw-k { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); } .gw-hint h2 { margin:6px 0 14px; font:600 21px/1.25 "Poppins", var(--font); } .gw-how { list-style:none; margin:0; padding:0; counter-reset:g; display:flex; flex-direction:column; gap:12px; } .gw-how li { counter-increment:g; display:grid; grid-template-columns:32px minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px; } .gw-how li::before { content:counter(g); grid-row:1 / span 2; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-weight:700; color:#fff; background:linear-gradient(135deg, var(--brand-deep), var(--brand)); } .gw-how b { font-size:14.5px; } .gw-how span { font-size:13px; color:var(--muted); } .gw-mock { padding:18px; border-radius:16px; background:var(--paper); border:1px solid var(--hair); position:relative; } .gm-step { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; background:var(--surface); border:1px solid var(--hair); margin-bottom:8px; opacity:.7; } .gm-step.on { opacity:1; border-color:var(--brand); box-shadow:0 6px 16px var(--brand-shadow); } .gm-step i { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:700; font-size:12px; color:#fff; background:var(--brand); flex:none; } .gm-step span { display:flex; flex-direction:column; } .gm-step b { font-size:13px; } .gm-step small { font-size:11.5px; color:var(--muted); } .gm-page { background:var(--surface); border-radius:10px; padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:7px; } .gm-page .gm-bar { width:56px; height:5px; border-radius:3px; background:var(--brand); } .gm-page b { font-size:16px; } .gm-page i { display:block; height:7px; border-radius:4px; background:var(--sunk); } .gm-page i.s { width:60%; } .gm-page ol { margin:4px 0 0; padding-left:18px; font-size:12.5px; color:var(--body); line-height:1.7; } .gw-mock-cp { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .gm-slide { aspect-ratio:16/9; border-radius:10px; background:var(--surface); box-shadow:var(--shadow); padding:12px; display:flex; flex-direction:column; justify-content:center; gap:5px; border-left:5px solid var(--brand); } .gm-slide.cover { background:var(--brand); color:#fff; border-left:0; } .gm-slide b { font-size:13px; } .gm-slide small { font-size:10.5px; opacity:.85; } .gm-slide i { display:block; height:5px; border-radius:3px; background:var(--sunk); } .gm-slide i.s { width:55%; } .gm-play { position:absolute; right:-10px; bottom:-10px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--brand-deep); box-shadow:var(--shadow-lg); font-size:15px; } .gw-top { border-left:4px solid var(--brand); } .gw-top-k { width:100%; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:-4px; } .gw-blk { border-left:3px solid var(--hair-strong); transition:border-color .15s; } .gw-blk:focus-within { border-left-color:var(--brand); box-shadow:0 6px 18px var(--brand-shadow); } .gw-blk-h b { display:flex; align-items:center; gap:9px; font-size:14.5px; } .gw-blk-h b small { font-size:12px; font-weight:600; color:var(--accent); padding:2px 8px; border-radius:999px; background:var(--accent-soft); } .gw-n { width:26px; height:26px; border-radius:8px; display:inline-grid; place-items:center; font-style:normal; font-size:12px; font-weight:700; color:#fff; background:var(--brand); } .gw-cover { background:linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, var(--surface)) 0, var(--surface) 70%); } @media (max-width:900px) { .gw-hint { grid-template-columns:1fr; } } .gw-hint { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); } .gw-mock { overflow:visible; min-width:0; } .gm-slide { min-width:0; overflow:hidden; } .gm-slide b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gw-mock-cp { grid-template-columns:1fr; } .gw-mock-cp .gm-slide:not(.cover) { display:none; } @media (min-width:1500px) { .gw-mock-cp { grid-template-columns:1fr 1fr; } .gw-mock-cp .gm-slide:not(.cover) { display:flex; } } /* ── Model: four doors, then five tabs (views/library/index.php) ── */ .mtabs { position:sticky; top:0; z-index:6; display:flex; gap:4px; flex-wrap:wrap; margin:18px 0 12px; padding:5px; border-radius:14px; background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(6px); border:1px solid var(--hair); box-shadow:var(--shadow); } .mtabs button { display:inline-flex; align-items:center; gap:7px; border:0; background:none; padding:9px 14px; border-radius:10px; cursor:pointer; font:600 14px var(--font); color:var(--muted); } .mtabs button em { font-style:normal; font-size:11px; padding:1px 7px; border-radius:999px; background:var(--sunk); color:var(--body); } .mtabs button:hover { color:var(--ink); background:var(--sunk); } .mtabs button[aria-selected="true"] { color:var(--brand-ink); background:var(--brand); box-shadow:0 4px 12px var(--brand-shadow); } .mtabs button[aria-selected="true"] em { background:rgba(255,255,255,.22); color:inherit; } .mpane { animation:mpIn .2s ease-out; } @keyframes mpIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } } .mpane-h { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin:0 0 14px; padding:16px 18px; border-radius:14px; background:var(--surface); border:1px solid var(--hair); border-left:4px solid var(--brand); } .mpane-h h2 { margin:0; font:600 19px "Poppins", var(--font); } .mpane-h p { margin:3px 0 0; } .mpane > .dlib { margin-top:0; } /* compact doors: the four ways in, one row, no long scroll */ .mdoors { padding:18px 20px !important; } .mdoors h2 { margin:2px 0 4px !important; font-size:20px !important; } .mdoor { padding:12px 14px !important; gap:4px !important; min-height:0 !important; } .mdoor .mdoor-art { height:56px !important; } .mdoor > span:not(.mdoor-art) { font-size:12.5px !important; line-height:1.4 !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .mdoor em { margin-top:4px !important; } /* ── Theme normalisation: everything in the partner's console colour ── The palette (Opscon\ConsoleBrand::palette, views/partials/brand.php) sets --brand, --brand-deep and --accent for every partner, custom or OpsCon's own. These rules take the last fixed blues and teals onto it. */ :root { --mast-accent:var(--accent); } .rpb, .rpb-pick { --rp-acc:var(--accent); } .pv-map i { background:var(--brand); } .pc-pill.st-info, .dlcard-tags em.pop, .apx-st.st-demo, .apx-flag.info { background:var(--accent-soft); color:var(--accent); } .mconn-m { background:var(--brand-deep); } .sc-ic.co { background:var(--brand-deep); } .pc-health, .apx-how, .biz-health { background:var(--brand-deep); } .pc-bar i, .kpi-bar i { background:var(--brand); } .eyebrow { color:var(--accent); } input:focus, select:focus, textarea:focus { outline-color:var(--brand); } /* ══ Phones and small tablets: the partner console ══════════════════════ One column, nothing wider than the screen, long lists in tidy scrollers, and tabs that slide sideways instead of wrapping into stacks. */ a.pc-step, .biz-step, .hm-next, .hm-stats a, .hm-app, .hm-path a, .hm-grow a, .hm-biz a, .gw-tabs a, .hm-btn { text-decoration:none !important; } .biz-lay > *, .hm-lay > *, .acct > *, .tgrid > *, .gw-lay > * { min-width:0; } .itable, .tw { overflow-x:auto; -webkit-overflow-scrolling:touch; } @media (max-width:900px) { .gw-hero-l { min-width:0; max-width:100%; } .gw-hint { grid-template-columns:1fr !important; } .gw-hint-r { display:none; } } @media (max-width:760px) { .wrap { padding-left:14px !important; padding-right:14px !important; } .pagehead { flex-wrap:wrap; gap:12px; } .pagehead h1 { font-size:26px; } /* sideways tab strips */ .mtabs, .gw-tabs, .rpb-tabs, .cws-tabs, .dlib-tabs, .prc-tabs { flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .mtabs::-webkit-scrollbar, .gw-tabs::-webkit-scrollbar, .rpb-tabs::-webkit-scrollbar { display:none; } .mtabs button, .gw-tabs a, .rpb-tabs button { flex:none; white-space:nowrap; } .gw-tabs { max-width:100%; } /* Home */ .hm-hero { padding:24px 20px; gap:18px; border-radius:18px; } .hm-hero h1 { font-size:28px; } .hm-stats { grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:10px; } .hm-stats a { padding:13px 14px; } .hm-stats b { font-size:22px; } .hm-path { grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:10px; } .hm-path a { padding:13px; } .hm-path li::after { display:none; } .hm-sec { padding:16px; } /* Applications */ .apx-kpis { grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:10px; } .apx-kpi { padding:13px 14px !important; } /* Business pages: the five areas become a strip you swipe */ .biz-head .biz-right { width:100%; } .biz-ready { flex:1; } .biz-steps { display:flex !important; overflow-x:auto; gap:10px; scroll-snap-type:x mandatory; padding-bottom:4px; scrollbar-width:none; } .biz-steps::-webkit-scrollbar { display:none; } .biz-steps li { flex:0 0 72%; max-width:260px; scroll-snap-align:start; } .biz-step { min-height:0 !important; } .acct { grid-template-columns:minmax(0,1fr) !important; } .cr-packs { gap:8px; } .cr-pack span { min-width:0; } /* Model */ .mdoor-row { grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:10px; } .mdoor > span:not(.mdoor-art) { display:none !important; } .mdoor .mdoor-art { height:44px !important; } .bhead { flex-wrap:wrap; gap:8px; } /* Builder */ .bsteps li { flex:none; min-width:0; } .bsteps li:not(.now) b { display:none; } .bsteps li.now { flex:1 1 auto; } .rpb-head p { flex:1 1 100%; } .rpb-list, .rpb-ed { min-width:0; } .cws-bar { flex-wrap:wrap; gap:8px; } .cws-bar > * { flex:none; } .cws-cats.off { max-height:260px; overflow-y:auto; border:1px dashed var(--hair-strong); border-radius:12px; padding:6px; } .cws-lib .cws-pane { max-height:62vh; overflow-y:auto; -webkit-overflow-scrolling:touch; } .cws-canvas { min-width:0; } /* Grow */ .gw-hero { padding:18px; } .gw-hero h1 { font-size:24px; } .gw-hero-r { width:100%; } .gw-hero .gw-app select { min-width:0; width:100%; } .gw-new { flex-wrap:wrap; } /* Pricing */ .prc-cards { grid-template-columns:1fr !important; } } @media (max-width:420px) { .hm-stats, .apx-kpis { grid-template-columns:repeat(2, minmax(0,1fr)) !important; } .mtabs button { padding:8px 11px; font-size:13px; } } @media (max-width:760px) { .rpb .chip, .rpb .pill { white-space:normal; max-width:100%; overflow-wrap:anywhere; } .rpb-list > * { max-width:100%; } } @media (max-width:760px) { .acct-mark { display:flex !important; flex-direction:column; align-items:stretch; } .acct-drop { width:100% !important; } .dlib-q, .dlib-q input { width:100% !important; max-width:100%; box-sizing:border-box; } .dlib-h { align-items:stretch; } } @media (max-width:760px) { .acct-cols { grid-template-columns:minmax(0,1fr) !important; } .acct-cols > div { min-width:0; } .acct-cols input, .acct-cols select, .acct-cols textarea { max-width:100%; box-sizing:border-box; } .acct-color, .acct-prev { flex-wrap:wrap; min-width:0; max-width:100%; } } /* Nothing spills out of a card; long words and numbers wrap inside it. */ .card, [class$="-card"] { min-width:0; overflow-wrap:break-word; } /* ══ Tablets and narrow panes: cards size to the space they actually get ══ Container queries, so a card grid squeezed beside the assistant column reflows the same way it would on a smaller screen. */ .mdoors, .acct-brand { container-type:inline-size; } @container (max-width:700px) { .mdoor-row { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @container (max-width:640px) { .acct-cols { grid-template-columns:minmax(0,1fr) !important; } .acct-cols > div + div { border-left:0 !important; padding-left:0 !important; border-top:1px solid var(--hair); padding-top:16px; } } @media (max-width:760px) { .mdoor-row { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } /* Grow "how it works" cards: the preview drops under the steps when the column is narrow */ .gw-hint { grid-template-columns:repeat(auto-fit, minmax(min(100%,280px), 1fr)) !important; } .gw-hint > * { min-width:0; } .gw-mock { max-width:100%; box-sizing:border-box; } .gm-step span { min-width:0; } .gm-step small { overflow-wrap:anywhere; } .gm-page { min-width:0; overflow:hidden; } /* Grow pages beside the assistant: stack the saved list over the editor when the middle column is narrow */ :has(> .gw-lay) { container-type:inline-size; } @container (max-width:760px) { .gw-lay { grid-template-columns:minmax(0,1fr) !important; } .gw-list { position:static !important; } .gw-g { grid-template-columns:minmax(0,1fr) !important; } } .gw-hero-l { flex:1 1 280px; min-width:0; } .gw-tabs { max-width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; } .gw-tabs::-webkit-scrollbar { display:none; } .gw-tabs > * { flex:none; white-space:nowrap; } /* Load Model › My Models: where each source is connected in the app */ .lm-note { margin:4px 0 0; max-width:640px; line-height:1.45; } .lm-wire { display:flex; flex-direction:column; gap:3px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--hair); } .lm-wire i { font-style:normal; font-size:11.5px; color:var(--muted); padding-left:14px; position:relative; line-height:1.35; } .lm-wire i::before { content:""; position:absolute; left:2px; top:6px; width:6px; height:6px; border-radius:50%; background:var(--brand); } .lm-card:not(:has(input:checked)) .lm-wire { opacity:.45; } .pub-cap { display:block; margin-top:4px; font-style:normal; font-size:11.5px; color:var(--amber-ink, #8A5A12); } /* Data Library tabs: each kind of data its colour, icon and one line */ .dlib-tabs { display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; border-bottom:0; margin:18px 0 14px; overflow:visible; } .dlib-tabs button { display:flex; align-items:center; gap:11px; text-align:left; padding:12px 14px; border:1.5px solid var(--hair); border-radius:14px; background:var(--surface); color:var(--ink); margin:0; transition:border-color .15s, background .15s, box-shadow .15s; white-space:normal; } .dlib-tabs button:hover { border-color:color-mix(in srgb, var(--tc) 45%, var(--hair)); box-shadow:0 4px 14px rgba(16,32,48,.06); } .dlib-tabs button[aria-selected="true"] { border-color:var(--tc); background:color-mix(in srgb, var(--tc) 9%, var(--surface)); box-shadow:0 6px 18px -8px color-mix(in srgb, var(--tc) 60%, transparent); } .dlt-ic { flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--tc); background:color-mix(in srgb, var(--tc) 13%, transparent); } .dlib-tabs button[aria-selected="true"] .dlt-ic { background:var(--tc); color:#fff; } .dlt-t { display:flex; flex-direction:column; gap:2px; min-width:0; } .dlt-t b { font:600 14px var(--font); display:flex; align-items:center; gap:6px; } .dlt-t small { font-size:11.5px; color:var(--muted); font-weight:400; } .dlib-tabs em { font-style:normal; font-size:11px; font-weight:700; border-radius:999px; padding:1px 7px; margin:0; background:color-mix(in srgb, var(--tc) 14%, transparent); color:var(--tc); } .dlib-tabs button[aria-selected="true"] em { background:var(--tc); color:#fff; } .dlib-cats button[aria-pressed="true"] { background:var(--gc, var(--ink)); border-color:var(--gc, var(--ink)); color:#fff; } .dlib-cats button:hover { border-color:var(--gc, var(--ink)); } @media (max-width:1100px) { .dlib-tabs { grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:760px) { .dlib-tabs { display:flex !important; overflow-x:auto; } .dlib-tabs button { flex:0 0 72%; } } /* ══ Grow storyboard: the piece played as the reader sees it ══ */ .gs-wrap { padding:16px !important; display:flex; flex-direction:column; gap:14px; overflow:hidden; } .gs-stage { display:flex; flex-direction:column; gap:10px; } .gs-anim.gs-go { animation:gsIn .45s cubic-bezier(.2,.8,.2,1); } .gs-anim.gs-go.gs-back { animation-name:gsBack; } @keyframes gsIn { from { opacity:0; transform:translateX(28px) scale(.985); } to { opacity:1; transform:none; } } @keyframes gsBack { from { opacity:0; transform:translateX(-28px) scale(.985); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce) { .gs-anim.gs-go { animation:none; } } /* Tour: a video of the app, one step per shot */ .gs-tour .gs-screen { position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#0E1B26; box-shadow:0 14px 34px -14px rgba(10,30,45,.55); } .gs-chrome { position:absolute; inset:0 0 auto; height:28px; display:flex; align-items:center; gap:6px; padding:0 12px; background:#16283A; z-index:2; } .gs-chrome i { width:9px; height:9px; border-radius:50%; background:#3A4D60; } .gs-chrome i:first-child { background:#E06C5A; } .gs-chrome i:nth-child(2) { background:#E8B34A; } .gs-chrome i:nth-child(3) { background:#5DBB7A; } .gs-chrome span { margin-left:10px; flex:1; max-width:340px; height:18px; border-radius:6px; background:#0E1B26; color:#93A9BC; font:11px var(--mono, monospace); display:flex; align-items:center; padding:0 9px; overflow:hidden; white-space:nowrap; } .gs-app { position:absolute; inset:28px 0 0; background:#EEF3F6; overflow:hidden; } .gs-cap { position:absolute; left:4%; bottom:7%; max-width:min(62%, 520px); background:rgba(14,27,38,.88); color:#fff; border-radius:14px; padding:14px 18px; backdrop-filter:blur(6px); z-index:3; } .gs-where { display:inline-block; font:700 10.5px var(--font); letter-spacing:.08em; text-transform:uppercase; background:var(--sc, var(--brand)); color:#fff; border-radius:999px; padding:3px 9px; margin-bottom:8px; } .gs-cap b { display:block; font:700 clamp(15px, 1.7vw, 21px)/1.25 var(--font); } .gs-cap p { margin:6px 0 0; font-size:clamp(12px, 1.15vw, 14px); line-height:1.45; color:rgba(255,255,255,.86); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; } .gs-tip { position:absolute; right:4%; top:calc(28px + 6%); max-width:34%; background:#FFF8E1; color:#5B4300; border-radius:12px; padding:9px 12px; font-size:12.5px; line-height:1.4; box-shadow:0 8px 20px -10px rgba(0,0,0,.4); z-index:3; } .gs-tip b { color:#8A5A12; margin-right:4px; } /* the app, drawn small */ .gm-atlas { position:absolute; inset:0; background:#AFD3E5; } .gm-land { position:absolute; left:18%; top:-10%; width:46%; height:130%; background:#EDEAE2; border-radius:40% 60% 50% 45%; transform:rotate(12deg); } .gm-pin { position:absolute; width:14px; height:14px; border-radius:50%; background:#E0A21A; border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.25); } .gm-pin.p1 { left:38%; top:34%; } .gm-pin.p2 { left:46%; top:52%; background:#E03A2E; } .gm-pin.p3 { left:31%; top:60%; background:#12A06A; } .gm-trk { position:absolute; left:64%; top:20%; width:26%; height:3px; border-top:3px dashed #7A4FD6; transform:rotate(28deg); } .gm-side { position:absolute; left:2%; top:5%; width:20%; height:62%; background:#fff; border-radius:10px; opacity:.95; } .gm-card { position:absolute; right:2%; top:5%; width:24%; height:72%; background:#fff; border-radius:10px; opacity:.95; } .gm-con { position:absolute; inset:0; display:flex; gap:3%; padding:3%; } .gm-nav { width:18%; background:#fff; border-radius:10px; } .gm-tiles { flex:1; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:4%; } .gm-tiles i { background:#fff; border-radius:10px; border-top:4px solid var(--sc, var(--brand)); } .gm-tiles i.w2 { grid-column:span 2; } .gm-rep { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:16%; gap:3%; padding:4%; } .gm-rep .r { background:#fff; border-radius:10px; grid-column:1; } .gm-rep .r.on { outline:2px solid var(--sc, var(--brand)); } .gm-ed { grid-column:2; grid-row:1 / span 4; background:#fff; border-radius:10px; } .gm-mod { position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); gap:4%; padding:5%; } .gm-mod i { background:#fff; border-radius:10px; border-left:5px solid var(--sc, var(--brand)); } .gm-set { position:absolute; inset:8% 20%; background:#fff; border-radius:12px; display:flex; flex-direction:column; gap:8%; padding:6%; } .gm-set span { height:12%; border-radius:6px; background:#E3E9EE; } .gm-set .b { width:30%; background:var(--sc, var(--brand)); margin-top:auto; } .gm-chat { position:absolute; inset:8% 26%; display:flex; flex-direction:column; gap:6%; } .gm-chat span { height:14%; border-radius:12px; background:#fff; width:70%; } .gm-chat .q { align-self:flex-end; background:var(--sc, var(--brand)); opacity:.85; width:50%; } .gm-chat .l { height:24%; } .gm-chat .s { width:34%; } .gm-hello { position:absolute; inset:0; background:linear-gradient(135deg, var(--sc, var(--brand)), #0E1B26); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3%; color:#fff; } .gm-hello b { font:700 clamp(18px, 3vw, 34px) var(--font); } .gm-hello span { width:30%; height:6%; border-radius:999px; background:rgba(255,255,255,.35); } .gm-hello .s { width:18%; } /* Campaign: a presentation, one slide per transition */ .gs-deck .gs-slide { position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--hair); padding:5% 6% 5% 8%; box-shadow:0 14px 34px -16px rgba(10,30,45,.45); display:flex; flex-direction:column; justify-content:center; } .gs-deck .gs-slide::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2.2%; background:var(--sc, var(--brand)); } .gs-deck .gs-slide.cover { background:var(--sc, var(--brand)); color:#fff; } .gs-deck .gs-slide.cover::before { display:none; } .gs-slide h3 { margin:0; font:700 clamp(20px, 3vw, 38px)/1.15 var(--font); color:inherit; } .gs-slide .s { margin:10px 0 0; font-size:clamp(13px, 1.5vw, 19px); color:var(--muted); } .gs-slide.cover .s { color:rgba(255,255,255,.85); } .gs-slide ul { margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; } .gs-slide li { position:relative; padding-left:22px; font-size:clamp(13px, 1.45vw, 18px); line-height:1.4; } .gs-slide li::before { content:""; position:absolute; left:2px; top:.5em; width:9px; height:9px; border-radius:50%; background:var(--sc, var(--brand)); } .gs-slide.cover li::before { background:#fff; } .gs-sn { position:absolute; right:3%; top:5%; font:600 12px var(--font); opacity:.55; } .gs-say { position:absolute; left:0; right:0; bottom:0; background:rgba(16,42,65,.84); color:#fff; font-size:12.5px; line-height:1.4; padding:8px 14px; } .gs-video canvas { width:100%; height:auto; border-radius:12px; display:block; box-shadow:0 14px 34px -16px rgba(10,30,45,.45); } /* Handbook: its pages */ .gs-book { align-items:center; } .gs-book .gs-page { position:relative; width:min(100%, 640px); min-height:300px; background:#fff; border:1px solid var(--hair); border-radius:6px; padding:34px 40px 40px; box-shadow:0 1px 0 var(--hair), 6px 6px 0 -1px #fff, 6px 6px 0 0 var(--hair), 0 18px 34px -18px rgba(10,30,45,.35); } .gs-pk { font:700 10.5px var(--font); letter-spacing:.1em; text-transform:uppercase; color:var(--brand); } .gs-page h3 { margin:8px 0 12px; font:700 22px/1.25 var(--font); } .gs-page p { margin:0 0 10px; font-size:14px; line-height:1.6; color:var(--ink); } .gs-page ul { margin:6px 0 0; padding-left:20px; font-size:14px; line-height:1.6; } .gs-pn { position:absolute; bottom:12px; right:18px; font-size:11.5px; color:var(--muted); } .gs-book .gs-ctrl { width:min(100%, 640px); } /* the player bar */ .gs-ctrl { display:flex; align-items:center; gap:8px; } .gs-b { flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--hair); background:var(--surface); color:var(--ink); font-size:18px; line-height:1; cursor:pointer; display:grid; place-items:center; } .gs-b:hover { border-color:var(--brand); color:var(--brand); } .gs-play { width:40px; height:40px; background:var(--brand); border-color:var(--brand); color:#fff; font-size:14px; } .gs-play:hover { color:#fff; filter:brightness(1.08); } .gs-tl { flex:1; display:flex; gap:3px; min-width:0; } .gs-seg { height:8px; border:0; padding:0; border-radius:4px; background:var(--hair); cursor:pointer; overflow:hidden; position:relative; min-width:8px; } .gs-seg i { position:absolute; inset:0 auto 0 0; width:0; background:var(--brand); border-radius:4px; } .gs-seg.done i { width:100%; } .gs-seg.on { background:color-mix(in srgb, var(--brand) 30%, var(--hair)); } .gs-n { flex:none; font:600 12px var(--mono, monospace); color:var(--muted); min-width:44px; text-align:right; } /* the horizontal step strip */ .gs-strip { display:flex; align-items:stretch; gap:6px; overflow-x:auto; padding:4px 2px 8px; scroll-snap-type:x proximity; scrollbar-width:thin; } .gs-th { flex:0 0 190px; scroll-snap-align:center; display:flex; align-items:flex-start; gap:9px; text-align:left; padding:10px 11px; border:1.5px solid var(--hair); border-radius:12px; background:var(--surface); cursor:pointer; color:var(--ink); font:inherit; } .gs-th:hover { border-color:color-mix(in srgb, var(--brand) 50%, var(--hair)); } .gs-th.on { border-color:var(--brand); background:color-mix(in srgb, var(--brand) 8%, var(--surface)); box-shadow:0 6px 16px -10px var(--brand); } .gs-th .gw-n { flex:none; } .gs-th.on .gw-n { background:var(--brand); color:#fff; } .gs-tt { display:flex; flex-direction:column; gap:2px; min-width:0; } .gs-tt b { font-size:12.5px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .gs-tt small { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gs-arw { flex:none; align-self:center; color:var(--muted); font-size:13px; } .gs-add { flex:0 0 130px; justify-content:center; align-items:center; border-style:dashed; color:var(--brand); font-weight:600; font-size:13px; } .gs-edit { margin-top:0; } .gs-edit .gw-tools button { font-size:14px; } @media (max-width:760px) { .gs-cap { left:3%; right:3%; max-width:none; bottom:4%; padding:10px 12px; } .gs-cap p { -webkit-line-clamp:2; } .gs-tip { display:none; } .gs-th { flex-basis:160px; } .gs-book .gs-page { padding:24px 22px 34px; } .gs-slide ul { gap:4px; margin-top:10px; } } .dlib { container-type:inline-size; } @container (max-width:900px) { .dlib-tabs { grid-template-columns:repeat(2, minmax(0,1fr)) !important; } } @container (max-width:460px) { .dlib-tabs { display:flex !important; overflow-x:auto; } .dlib-tabs button { flex:0 0 78%; } } /* Super admin › Apps: approve without online payment */ .appr { margin-top:10px; border-top:1px dashed var(--hair); padding-top:10px; } .appr > summary { cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; list-style:none; } .appr > summary::-webkit-details-marker { display:none; } .appr > summary::before { content:"▸"; color:var(--brand); } .appr[open] > summary::before { content:"▾"; } .appr-k { font-weight:700; color:var(--brand); } .appr-f { margin-top:10px; padding:12px; border-radius:10px; background:color-mix(in srgb, var(--brand) 6%, var(--surface)); border:1px solid color-mix(in srgb, var(--brand) 25%, var(--hair)); } .appr-sum { grid-column:1 / -1; margin:0; } .adm-app.adm-hl { outline:2px solid var(--brand); outline-offset:2px; } /* Pricing › partner: four cards; AI credits estimator by scenario */ .prc-cards.prc-4 { grid-template-columns:repeat(4, minmax(0,1fr)); } @media (max-width:1200px) { .prc-cards.prc-4 { grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:760px) { .prc-cards.prc-4 { grid-template-columns:minmax(0,1fr); } } .aie { margin-top:22px; border:1px solid var(--hair); border-radius:18px; background:var(--surface); padding:20px; display:flex; flex-direction:column; gap:16px; } .aie-h h3 { margin:0 0 4px; font:600 18px var(--font); } .aie-sc { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; } .aie-sc button { text-align:left; border:1.5px solid var(--hair); background:var(--surface); border-radius:14px; padding:12px 14px; cursor:pointer; color:var(--ink); font:inherit; display:flex; flex-direction:column; gap:3px; } .aie-sc button b { font-size:14px; } .aie-sc button small { font-size:12px; color:var(--muted); line-height:1.35; } .aie-sc button:hover { border-color:color-mix(in srgb, var(--brand) 50%, var(--hair)); } .aie-sc button[aria-pressed="true"] { border-color:var(--brand); background:color-mix(in srgb, var(--brand) 8%, var(--surface)); box-shadow:0 6px 16px -10px var(--brand); } .aie-g { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 280px; gap:16px; align-items:stretch; } .aie-col { border-radius:14px; padding:14px 16px; border:1px solid var(--hair); display:flex; flex-direction:column; gap:4px; } .aie-col.ka { --ac:#7A4FD6; background:color-mix(in srgb, #7A4FD6 4%, var(--surface)); } .aie-col.oa { --ac:#0E7C86; background:color-mix(in srgb, #0E7C86 4%, var(--surface)); } .aie-k { display:flex; align-items:center; gap:8px; font:700 11px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--ac); margin-bottom:4px; } .aie-k i { width:10px; height:10px; border-radius:3px; background:var(--ac); } .aie-col .prc-row { grid-template-columns:minmax(0,1fr) minmax(90px,140px) 44px; } .aie-col .prc-row input { accent-color:var(--ac); } .aie-sub { margin:auto 0 0; padding-top:10px; border-top:1px dashed var(--hair); display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; } .aie-sub span { font-size:12px; color:var(--muted); } .aie-sub b { font:700 20px var(--font); color:var(--ac); } .aie-sub small { flex-basis:100%; font-size:11.5px; color:var(--muted); } .aie-tot { border-radius:14px; padding:16px; background:var(--brand-navy, #102A41); color:#fff; display:flex; flex-direction:column; gap:10px; } .aie-tot .eyebrow { color:rgba(255,255,255,.7); } .aie-tot > b { font:700 28px var(--font); } .aie-tot p { margin:0; font-size:13.5px; line-height:1.45; } .aie-tot .small.muted { color:rgba(255,255,255,.65); } .aie-bar { display:flex; height:10px; border-radius:6px; overflow:hidden; background:rgba(255,255,255,.15); } .aie-bar i { display:block; height:100%; transition:width .25s; } .aie-bar .ka { background:#B79CF0; } .aie-bar .oa { background:#5CC9C0; } .aie-tot .btn { margin-top:auto; align-self:flex-start; background:#fff; color:var(--brand-navy, #102A41); border-color:#fff; } @media (max-width:1100px) { .aie-g { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .aie-tot { grid-column:1 / -1; } .aie-sc { grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:760px) { .aie-g, .aie-sc { grid-template-columns:minmax(0,1fr); } .aie { padding:14px; } } /* Settings › Agents: Ask OpsCon, pay as you go */ .agoa .eyebrow { color:#0E7C86; } .agoa-bal { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:12px 0; } .agoa-bal > div { border:1px solid var(--hair); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; } .agoa-bal span { font-size:11.5px; color:var(--muted); } .agoa-bal b { font:700 20px var(--font); } .agoa-bal b.ok { color:#12805C; } .agoa-bal small { font-size:11.5px; color:var(--muted); } .agoa-bal.empty > div:first-child { border-color:#E8B34A; background:#FFF8E6; } .agoa-buy { display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; } .agoa-buy .cr-pack { flex:1 1 140px; } .agoa-buy .btn { align-self:center; } @media (max-width:760px) { .agoa-bal { grid-template-columns:minmax(0,1fr); } } .adm-cr { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--hair); } /* AI Credits: the two wallets */ .crw-tabs { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:6px 0 18px; } .crw-t { display:flex; gap:12px; align-items:center; padding:14px 16px; border-radius:14px; border:1.5px solid var(--hair); background:var(--surface); color:var(--ink); text-decoration:none; } .crw-t i { width:12px; height:36px; border-radius:6px; background:var(--wc); flex:none; } .crw-t b { display:block; font-size:15px; } .crw-t small { display:block; font-size:12px; color:var(--muted); } .crw-t:hover { border-color:var(--wc); } .crw-t.ka, .crw.ka { --wc:#7A4FD6; } .crw-t.oa, .crw.oa { --wc:#0E7C86; } .crw { margin:0 0 26px; padding:18px; border-radius:18px; border:1px solid var(--hair); background:color-mix(in srgb, var(--wc) 3%, var(--surface)); display:flex; flex-direction:column; gap:14px; scroll-margin-top:16px; } .crw-h h2 { margin:2px 0 4px; font:600 20px var(--font); } .crw-h p { margin:0; max-width:820px; } .crw-k { font:700 11px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--wc); } .crw-g { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:14px; align-items:start; } .crw .cr-sec h3 { margin:0 0 10px; font:600 15px var(--font); } .crw details.cr-sec > summary { cursor:pointer; } .crw-apps { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; } .crw-app { border:1px solid var(--hair); border-radius:14px; background:var(--surface); padding:12px 14px; display:flex; flex-direction:column; gap:8px; } .crw-app.empty { border-color:#E8B34A; background:#FFFBF0; } .crw-app-h { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; } .crw-app-h b { font-size:14px; } .crw-app-n { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .crw-app-n span { display:block; font-size:11px; color:var(--muted); } .crw-app-n b { font:700 18px var(--font); color:var(--wc); } .crw-app-n small { display:block; font-size:11px; color:var(--muted); } .crw-pick { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; flex:1 1 220px; } @media (max-width:900px) { .crw-g, .crw-tabs { grid-template-columns:minmax(0,1fr); } } .aie-g.two { grid-template-columns:minmax(0,1fr) 300px; } .prc-oa-g { display:grid; grid-template-columns:minmax(0,560px); } .prc-oa-card { border:1.5px solid #0E7C86; border-radius:18px; padding:20px 22px; background:color-mix(in srgb, #0E7C86 4%, var(--surface)); display:flex; flex-direction:column; gap:12px; } .prc-oa-card ul { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:14px; } .prc-oa-card .prc-btn { align-self:flex-start; } @media (max-width:900px) { .aie-g.two { grid-template-columns:minmax(0,1fr); } } #partners .actform { display:flex; flex-wrap:wrap; gap:6px; align-items:center; } /* Knowledge Agent subscription not active: the partner's own building blocks greyed out */ .ka-gate { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 16px; padding:14px 16px; border-radius:14px; border:1.5px solid #7A4FD6; background:color-mix(in srgb, #7A4FD6 7%, var(--surface)); } .ka-gate > div { flex:1 1 320px; display:flex; flex-direction:column; gap:2px; font-size:13.5px; } .ka-gate span { color:var(--muted); font-size:12.5px; } .ka-gate-ic { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:#7A4FD6; color:#fff; font-size:18px; flex:none; } .ka-gate .btn { background:#7A4FD6; border-color:#7A4FD6; color:#fff; } body.ka-off .lm-card.own, body.ka-off #agList .agcard, body.ka-off #agSuggest, body.ka-off #agNew, body.ka-off .lib-own, body.ka-off .cws-cat.own, body.ka-off [data-ka-gated] { opacity:.45; filter:grayscale(1); pointer-events:none; } body.ka-off .crail form textarea, body.ka-off .crail form button { opacity:.5; pointer-events:none; } body.ka-off .crail .crail-h::after { content:"Needs the Knowledge Agent subscription"; display:block; margin-top:4px; font-size:11.5px; color:#7A4FD6; font-weight:600; } body.ka-off #mp-mine > :not(.mpane-h), body.ka-off #mp-layers > :not(.mpane-h), body.ka-off #rAdd { opacity:.45; filter:grayscale(1); pointer-events:none; } .ka-sub { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 16px; border-radius:14px; border:1.5px solid #7A4FD6; background:var(--surface); } .ka-sub.on { border-color:var(--hair); } .ka-sub b { display:block; font:700 20px var(--font); margin:2px 0; } .ka-sub small { display:block; font-size:12px; color:var(--muted); line-height:1.4; } .ka-sub-st { display:flex; flex-direction:column; gap:4px; align-items:flex-start; } @media (max-width:900px) { .ka-sub { grid-template-columns:minmax(0,1fr); } } .prc-oa-k { font:700 11px var(--font); letter-spacing:.08em; text-transform:uppercase; color:#0E7C86; } .prc-oa-card h3 { margin:0; font:700 20px var(--font); } .prc-sec .prc-oa-g { margin:14px 0 6px; } /* ---- Purchases, subscriptions and top-ups: always on a dark panel ---- */ .buy-dark { --bd-bg:var(--brand-deep, #0F3539); --ink:#EEF4F5; --body:#DCE7E9; --muted:#9DB2B8; --faint:#7F959B; --hair:rgba(255,255,255,.12); --hair-strong:rgba(255,255,255,.24); --paper:rgba(255,255,255,.05); --surface:rgba(255,255,255,.09); --sunk:rgba(255,255,255,.04); --solid:#F2C14E; --solid-ink:#14232A; background:linear-gradient(135deg, var(--brand-deep, #0F3539) 0%, color-mix(in srgb, var(--brand-deep, #0F3539) 62%, var(--brand, #17766F)) 100%) !important; color:var(--ink); border:1px solid color-mix(in srgb, var(--brand, #17766F) 40%, transparent) !important; border-radius:16px; padding:18px 20px; box-shadow:var(--shadow); } .buy-dark h2, .buy-dark h3, .buy-dark b, .buy-dark strong { color:#fff; } .buy-dark a:not(.btn):not(.prc-btn) { color:#7FD6DE; } .buy-dark .muted, .buy-dark small { color:var(--muted); } .buy-dark input, .buy-dark select, .buy-dark textarea { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.22); } .buy-dark select option { color:#14232A; } .buy-dark .btn:not(.ghost), .buy-dark .bd-btn { background:#F2C14E; border-color:#F2C14E; color:#14232A; } .buy-dark .btn.ghost { color:#fff; border-color:rgba(255,255,255,.35); background:transparent; } .buy-dark .cr-pack span, .bd-pack span { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); } .buy-dark .cr-pack em, .bd-pack em { color:#F2C14E; } .buy-dark .cr-pack input:checked + span, .bd-pack input:checked + span { border-color:#F2C14E; box-shadow:0 0 0 3px rgba(242,193,78,.25); background:rgba(242,193,78,.1); } .buy-dark .alert { color:#14232A; } .bd-k { display:block; font:700 11px var(--font); letter-spacing:.09em; text-transform:uppercase; color:#F2C14E; margin-bottom:4px; } .buy-dark > h3 { margin:0 0 8px; font:600 17px var(--font); } .bd-note { margin:6px 0 10px; font-size:12.5px; color:var(--muted); line-height:1.45; } .bd-links { display:flex; gap:14px; flex-wrap:wrap; margin:10px 0 0; font-size:12.5px; } .bd-price b { font:700 30px "Poppins", var(--font); } .bd-price small { margin-left:6px; } .bd-bal { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:6px 0 10px; } .bd-bal b { font:700 34px "Poppins", var(--font); } .bd-bal.empty b { color:#F2C14E; } .bd-row { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); font-size:12.5px; margin-bottom:12px; } .bd-row span { color:var(--muted); } .bd-row b { font-weight:600; } .bd-packs { display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; } .bd-packs .cr-pack, .bd-pack { position:relative; cursor:pointer; flex:1 1 120px; } .bd-pack input { position:absolute; opacity:0; } .bd-pack span, .bd-packs .cr-pack span { display:flex; flex-direction:column; gap:1px; min-width:0; padding:10px 12px; border-radius:12px; border:1.5px solid; } .bd-pack b, .bd-packs .cr-pack b { font:700 18px "Poppins", var(--font); } .bd-pack small { font-size:11.5px; } .bd-pack em { font-style:normal; font-weight:700; margin-top:4px; } .bd-packs > .btn { flex:1 0 100%; justify-content:center; height:42px; } .bd-pick { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; flex:1 0 100%; } /* Settings › Agents: settings on the left, the top-up on the right */ .ag-split { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; margin:6px 0 16px; } .ag-main { display:flex; flex-direction:column; gap:16px; min-width:0; } .ag-main > .card { margin:0; } .ag-topup { position:sticky; top:16px; } .ag-state { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0; } @media (max-width:1020px) { .ag-split { grid-template-columns:minmax(0,1fr); } .ag-topup { position:static; order:-1; } } /* AI Credits: two columns */ .crw-cols { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; align-items:start; } .crw-cols > .crw { margin:0; min-width:0; } .crw-cols .cr-hero { grid-template-columns:minmax(0,1fr); } .crw-cols .cr-meter { grid-template-columns:repeat(2, minmax(0,1fr)); } .crw-cols .crw-apps { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); } .crw .ka-sub.buy-dark { display:flex; flex-direction:column; gap:6px; align-items:stretch; } .crw .ka-sub.buy-dark form .btn, .crw .ka-sub.buy-dark > .btn { width:100%; justify-content:center; } @media (max-width:1100px) { .crw-cols { grid-template-columns:minmax(0,1fr); } } @media (max-width:600px) { .crw-cols .cr-meter { grid-template-columns:minmax(0,1fr); } } /* Pricing: dark purchase cards */ .prc-card.buy-dark { padding:26px 26px 22px; } .prc-card.buy-dark ul { border-top-color:rgba(255,255,255,.14); } .prc-card.buy-dark li::before { color:#F2C14E; } .prc-card.buy-dark .prc-btn.dark, .prc-oa-card.buy-dark .prc-btn.dark { background:#F2C14E; border-color:#F2C14E; color:#14232A; } .prc-card.buy-dark .prc-flag { background:#F2C14E; color:#14232A; } .prc-oa-card.buy-dark { border-radius:18px; } .prc-oa-card.buy-dark .prc-oa-k { color:#7FD6DE; } .prc-oa-card.buy-dark.ka .prc-oa-k { color:#C9B2FF; } /* Activate / plan / seats */ .apx-act form.buy-dark { padding:14px; margin-top:8px; } #plan.buy-dark h2 { color:#fff; } /* Billing & Invoices: partner status */ .pst { margin:0 0 18px; } .pst-g { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-bottom:12px; } .pst-c { display:flex; flex-direction:column; gap:4px; padding:14px 16px; } .pst-c > b { font:700 20px "Poppins", var(--font); } .pst-c > b small { font:500 12px var(--font); } .pst-c p { margin:2px 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .pst-c > a { margin-top:auto; font-size:12.5px; font-weight:600; } @media (max-width:900px) { .pst-g { grid-template-columns:minmax(0,1fr); } } /* Partner settings (super admin) */ .ps-lead { margin:-4px 0 12px; } .ps-wallets { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:10px; } .ps-w { border:1px solid var(--hair); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; } .ps-w span { font-size:11.5px; color:var(--muted); } .ps-w b { font:700 22px "Poppins", var(--font); } .ps-w small { font-size:11px; color:var(--muted); } .ps-w.ka { border-left:4px solid #7A4FD6; } .ps-w.oa { border-left:4px solid #0E7C86; } .ps-app { border-top:1px solid var(--hair); padding:14px 0; scroll-margin-top:16px; } .ps-app:first-of-type { border-top:0; } .ps-app-h { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:8px; } .ps-members { margin:12px 0 0; padding-left:18px; } .ps-hl { outline:2px solid var(--brand); outline-offset:3px; border-radius:12px; } .card .admingrid .check { display:flex; gap:6px; align-items:center; } .ka-sub.buy-dark .bd-price b { display:inline; } .prc-oa-card.buy-dark .prc-btn { padding:0 18px; } .prc-card.buy-dark .prc-total { color:#7FD6DE; } .buy-dark .bd-packs { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; } .buy-dark .bd-packs > label { margin:0; width:auto; display:block; } .buy-dark .bd-packs > .btn, .buy-dark .bd-packs > .bd-pick { grid-column:1 / -1; width:100%; } .buy-dark .bd-packs > .bd-pick { display:flex; } .ka-sub.buy-dark .bd-price small { display:inline; } /* Purchase panels: the same flat dark as the estimator total and the business bar */ .buy-dark, .prc-oa-card.buy-dark.ka { background:var(--brand-navy, #102A41) !important; border:0 !important; box-shadow:none; border-radius:14px; } .buy-dark .bd-k, .buy-dark .prc-oa-k, .prc-oa-card.buy-dark .prc-oa-k, .prc-oa-card.buy-dark.ka .prc-oa-k { color:rgba(255,255,255,.7); } .buy-dark .btn:not(.ghost), .buy-dark .bd-btn, .prc-card.buy-dark .prc-btn.dark, .prc-oa-card.buy-dark .prc-btn.dark { background:#fff; border-color:#fff; color:var(--brand-navy, #102A41); } .buy-dark .cr-pack em, .bd-pack em { color:#fff; opacity:.85; } .buy-dark .cr-pack input:checked + span, .bd-pack input:checked + span { border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.35); background:rgba(255,255,255,.14); } .buy-dark a:not(.btn):not(.prc-btn) { color:#fff; text-decoration:underline; text-underline-offset:2px; } .prc-card.buy-dark li::before { color:#fff; } .prc-card.buy-dark .prc-flag { background:#fff; color:var(--brand-navy, #102A41); } .prc-card.buy-dark .prc-total { color:rgba(255,255,255,.75); } .bd-bal.empty b { color:#FFD58A; } /* Build Map › My Model */ .mymodel .mm-lead { margin:0 0 8px; } .mm-h { font:700 10.5px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:10px 0 6px; } .mm-list { display:flex; flex-direction:column; gap:8px; } .mm-row { border:1px solid var(--hair); border-left:4px solid var(--oc); border-radius:10px; padding:8px 10px; background:var(--surface); } .mm-top { display:flex; gap:10px; align-items:center; } .mm-t b { display:block; font-size:13.5px; } .mm-t small { display:block; font-size:11.5px; color:var(--muted); } .mm-ic { position:relative; flex:none; } .mm-icb { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; border:1.5px solid var(--hair-strong); background:color-mix(in srgb, var(--oc) 12%, var(--surface)); color:var(--oc); cursor:pointer; } .mm-icb:hover { border-color:var(--oc); } .mm-grid { position:absolute; z-index:30; top:40px; left:0; display:grid; grid-template-columns:repeat(5, 34px); gap:4px; padding:8px; background:var(--surface); border:1px solid var(--hair); border-radius:12px; box-shadow:var(--shadow-lg); } .mm-grid[hidden] { display:none; } .mm-grid button { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--ink); cursor:pointer; } .mm-grid button:hover { background:var(--sunk); } .mm-grid button[aria-selected="true"] { border-color:var(--brand); color:var(--brand); background:color-mix(in srgb, var(--brand) 10%, transparent); } .mm-opts { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; padding-left:44px; } .mm-opts .bcheck { font-size:12.5px; margin:0; } .mm-opts input:disabled + span { opacity:.5; } .cws-x.del { display:grid; place-items:center; } .cws-x.del:hover { color:var(--err); } .mcard-del { display:inline; margin:0; } .mcard-f .linkbtn.danger { color:var(--err); } /* App wallets on AI Credits: the same dark as the top-ups */ .crw-app.buy-dark { padding:12px 14px; border-radius:14px; } .crw-app.buy-dark .crw-app-n b { color:#fff; } .crw-app.buy-dark .crw-app-n span, .crw-app.buy-dark .crw-app-n small { color:rgba(255,255,255,.7); } .crw-app.buy-dark .pill { background:rgba(255,255,255,.16); color:#fff; border-color:transparent; } .crw-app.buy-dark .pill.st-active { background:rgba(61,214,140,.22); color:#C9F5DD; } .crw-app.buy-dark.empty { box-shadow:inset 0 0 0 1.5px #FFD58A; } /* Customize with AI (super admin) */ .cz { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:16px; align-items:start; } .cz > .card { margin:0; } .cz textarea { width:100%; box-sizing:border-box; } .cz-code textarea { font:12.5px/1.5 var(--mono, ui-monospace, monospace); } .cz-code label { display:flex; flex-direction:column; gap:4px; margin-top:10px; font-weight:600; font-size:.85rem; } .cz-go { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; } .cz-h { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; } .cz-h h2 { margin:0; } .ps-cz { margin-left:auto; } @media (max-width:980px) { .cz { grid-template-columns:minmax(0,1fr); } } /* AI Credits: only the top-up boxes are dark; the subscription box is light */ .crw .ka-sub { display:flex; flex-direction:column; gap:6px; align-items:stretch; padding:16px 18px; border-radius:14px; border:1.5px solid var(--wc); background:var(--surface); } .crw .ka-sub.on { border-color:var(--hair); } .crw .ka-sub .bd-k { color:var(--wc); } .crw .ka-sub .bd-price b { display:inline; color:var(--ink); } .crw .ka-sub .bd-price small, .crw .ka-sub .ka-sub-st small { display:inline; color:var(--muted); } .crw .ka-sub form .btn, .crw .ka-sub > .btn { align-self:flex-start; } /* AI Credits: the Balance box is light (only top-ups are dark) */ .crw .cr-bal { background:color-mix(in srgb, var(--wc, var(--brand)) 8%, var(--surface)); color:var(--ink); border-bottom:1px solid var(--hair); } .crw .cr-bal span { color:var(--wc, var(--brand)); opacity:1; } .crw .cr-bal b { color:var(--ink); } .crw .cr-bal small { color:var(--muted); opacity:1; } /* App › Thresholds › Your models */ .mth { margin-top:16px; } .mth-m { border-top:1px solid var(--hair); padding:14px 0; } .mth-mh { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px; } .mth-mh i { width:10px; height:10px; border-radius:50%; flex:none; } .mth-sp { flex:1; } .mth-t input, .mth-t select { width:100%; min-width:70px; } .mth-f { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; } .mth-t td:first-child select { min-width:170px; } .mth-t td:nth-child(2) select { min-width:110px; } /* AI Credits: each app's wallet in the same look as the Knowledge Agent balance */ .crw-apps.crw-wals { grid-template-columns:minmax(0,1fr); } .crw-wal .crw-wal-h { display:flex; justify-content:space-between; align-items:center; gap:8px; } .crw-wal .crw-wal-h em { font-style:normal; } .crw-wal .cr-meter a { display:inline-block; margin-top:4px; } .crw-wal.empty .cr-bal b { color:#B7791F; } /* Tour › Video (MP4) */ .gv { margin-top:18px; } .gv-h { display:flex; gap:16px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; } .gv-h h2 { margin:2px 0 4px; } .gv-bal { display:flex; flex-direction:column; align-items:flex-end; gap:1px; } .gv-bal span { font-size:11.5px; color:var(--muted); } .gv-bal b { font:700 20px var(--font); } .gv-form { margin-top:12px; display:flex; flex-direction:column; gap:12px; } .gv-kinds { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; } .gv-kind { position:relative; cursor:pointer; } .gv-kind input { position:absolute; opacity:0; } .gv-kind span { display:flex; flex-direction:column; gap:3px; padding:14px 16px; border-radius:14px; border:1.5px solid var(--hair-strong); background:var(--surface); height:100%; box-sizing:border-box; } .gv-kind b { font-size:15px; } .gv-kind small { color:var(--muted); font-size:12.5px; } .gv-kind em { font-style:normal; font-weight:700; color:var(--brand); margin-top:4px; } .gv-kind input:checked + span { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-shadow); } .gv-kind input:focus-visible + span { outline:2px solid var(--brand); outline-offset:2px; } .gv-brief { display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:.85rem; } .gv-brief textarea { width:100%; box-sizing:border-box; font-weight:400; } .gv-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .gv-row select { max-width:320px; } .gv-sp { flex:1; } .gv-list { margin-top:14px; display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; } .gv-it { border:1px solid var(--hair); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; background:var(--surface); } .gv-ith b { display:block; font-size:14px; } .gv-ith span { display:block; } .gv-bar { height:8px; border-radius:6px; background:var(--sunk); overflow:hidden; } .gv-bar i { display:block; height:100%; background:var(--brand); transition:width .6s; } .gv-play { width:100%; border-radius:10px; background:#000; max-height:260px; } .gv-a { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .gv-it .linkbtn { align-self:flex-start; } @media (max-width:700px) { .gv-kinds { grid-template-columns:minmax(0,1fr); } } /* Applications (super admin): the partner that deployed each app */ .apx-partner { display:inline-flex; align-items:center; gap:5px; margin-top:4px; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600; background:color-mix(in srgb, var(--brand) 10%, var(--surface)); color:var(--brand); text-decoration:none; width:max-content; } .apx-partner:hover { text-decoration:none; background:color-mix(in srgb, var(--brand) 18%, var(--surface)); } /* Reports & Alerts: drag a card to reorder */ .rt[draggable="true"] { cursor:grab; } .rt.rt-drag { opacity:.45; } .rt.rt-over-b { box-shadow:0 -3px 0 0 var(--brand); } .rt.rt-over-a { box-shadow:0 3px 0 0 var(--brand); } /* ── Grow › Handbook & Campaign templates (Sync with your App) ── */ .gt{margin:0 0 16px} .gt-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 12px;flex-wrap:wrap} .gt-f{display:flex;gap:4px;background:var(--sunk);padding:3px;border-radius:999px} .gt-f button{border:0;background:transparent;padding:6px 14px;border-radius:999px;font:inherit;font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer} .gt-f button[aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #0002} .gt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} .gt-c{border:1px solid var(--hair);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;background:var(--surface);transition:box-shadow .15s,border-color .15s} .gt-c:hover{border-color:var(--accent);box-shadow:0 6px 18px #0001} .gt-c.own{border-style:dashed} .gt-b{padding:12px 14px 6px;flex:1}.gt-b b{display:block;font-size:.98rem;margin:3px 0 1px}.gt-b p{font-size:.82rem;color:var(--muted);margin:6px 0 0;line-height:1.45} .gt-l{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)} .gt-bs{font-size:.74rem;color:var(--muted)} .gt-a{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px 14px} .gt-th{height:112px;background:var(--sunk);display:flex;align-items:center;justify-content:center;gap:7px;padding:14px} .gt-th span{background:var(--surface);border-radius:4px;box-shadow:0 1px 4px #0002;display:flex;flex-direction:column;gap:4px;padding:7px;position:relative;overflow:hidden} .gt-th span.cv{background:var(--accent)} .gt-th i{display:block;height:4px;border-radius:2px;background:var(--hair-strong)}.gt-th i.s{width:60%} .gt-th em{display:block;height:16px;margin:-7px -7px 3px;background:var(--accent)} .gt-th .p{width:58px;height:82px}.gt-th .tf{width:38px;height:56px;border-radius:2px} .gt-th .cd{width:44px;height:62px}.gt-th .sl{width:86px;height:50px}.gt-th .ml{width:90px;height:80px}.gt-th .sq{width:50px;height:50px} .gt-fh{margin:22px 0 10px;font-size:1rem} .gt-files{display:flex;flex-direction:column;gap:8px} .gt-fi{border:1px solid var(--hair);border-radius:12px;padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px} .gt-fi.gone{opacity:.6}.gt-fit{flex:1 1 260px;display:flex;flex-direction:column}.gt-fa{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .gt-mod{position:fixed;inset:0;z-index:9000;background:#0b1220a6;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto} .gt-mod[hidden]{display:none} .gt-dlg{background:var(--surface);color:var(--ink);border-radius:18px;max-width:560px;width:100%;padding:24px 26px;position:relative;box-shadow:0 20px 60px #0005} .gt-dlg.wide{max-width:760px}.gt-dlg h2{margin:4px 0 6px} .gt-x{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:1.5rem;color:var(--muted);cursor:pointer} .gt-out{margin:10px 0 14px;padding-left:1.3em;max-height:200px;overflow:auto;font-size:.86rem}.gt-out li{margin:3px 0} .gt-eg{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:12px 0 6px}.gt-eg label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;font-weight:600} .gt-eg .full{grid-column:1/-1}.gt-eg input,.gt-eg select,.gt-sr input,.gt-sr select,.gt-sr textarea{font:inherit;font-size:.86rem;font-weight:400;padding:8px 10px;border:1px solid var(--hair-strong);border-radius:8px;background:var(--surface);color:var(--ink);width:100%} .gt-sh{font-size:.95rem;margin:14px 0 8px} .gt-sr{border:1px solid var(--hair);border-radius:10px;padding:10px;margin:0 0 8px;display:flex;flex-direction:column;gap:6px;background:var(--sunk)} .gt-sr1{display:flex;gap:6px}.gt-sr1 .sh{flex:1}.gt-sr1 select{width:auto;flex:0 0 150px} .gt-ib{border:1px solid var(--hair-strong);background:var(--surface);border-radius:8px;width:34px;cursor:pointer;color:var(--ink)} body.gt-open{overflow:hidden} @media (max-width:640px){.gt-eg{grid-template-columns:1fr}.gt-sr1{flex-wrap:wrap}.gt-sr1 select{flex:1 1 100%}} .gt-ind{display:block;height:100%;width:40%;background:var(--accent);border-radius:inherit;animation:gtInd 1.4s ease-in-out infinite} @keyframes gtInd{0%{margin-left:-40%}100%{margin-left:100%}} .gt-fi .gv-bar{flex:1 1 100%;overflow:hidden} /* Platform control › Email settings */ .admingrid.em-grid{grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:12px} .admingrid.em-grid label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;font-weight:600} .admingrid.em-grid label.check{flex-direction:row;font-weight:400} .admingrid.em-grid .full{grid-column:1/-1} .admingrid.em-grid input:not([type=checkbox]):not([type=radio]),.admingrid.em-grid select{width:100%} .admingrid.em-grid label.check{align-items:center;gap:8px} @media (max-width:640px){.admingrid.em-grid{grid-template-columns:1fr}} .inv-a{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .inv-a form{display:inline} .inv-sent{font-size:.72rem;color:var(--muted);display:block;margin-top:3px} .inv-no{white-space:nowrap} .inv-a{flex-wrap:nowrap} #payments + .card.itable,.biz-lay .card.itable{overflow-x:auto} /* Model › Map layers: storage meter and add-on, and the animation form */ .stq{padding:14px 18px;margin:0 0 14px} .stq-t{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.9rem} .stq-t span{color:var(--muted)} .stq-bar{height:8px;border-radius:5px;background:var(--sunk);margin:8px 0;overflow:hidden} .stq-bar i{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width .3s} .stq.near .stq-bar i{background:#E0A21A} .stq-buy{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-top:8px} .stq-buy label{display:flex;flex-direction:column;gap:3px} .lf-bb{border:1px solid var(--hair);border-radius:10px;padding:8px 12px 12px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .lf-bb legend{font-size:.78rem;font-weight:600;padding:0 4px} @media (max-width:640px){.lf-bb{grid-template-columns:1fr 1fr}} .st-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .st-acts form{display:inline} .st-help{margin-top:14px}.st-help summary{cursor:pointer;font-weight:600;font-size:.88rem} .st-pre{background:var(--sunk);border-radius:8px;padding:10px 12px;font-size:.74rem;white-space:pre-wrap;word-break:break-all} .st-margin{background:var(--sunk);border-radius:10px;padding:10px 12px;font-size:.84rem;font-weight:400;line-height:1.5} .st-mini{height:6px;width:110px;border-radius:4px;background:var(--sunk);overflow:hidden;margin-bottom:3px} .st-mini i{display:block;height:100%;background:var(--accent)}.st-mini i.near{background:#E0A21A} .stq-buy{justify-content:flex-start}.stq-buy label{align-items:flex-start;margin:0} /* Over the app's plan: kept, greyed out, left out of the published app (Builder::fit/budget). */ .cws-cat.over, .cws-page.over, .cws-w.over { opacity:.5; filter:grayscale(1); } .cws-w.over { border-style:dashed; } .cws-ov { font-style:normal; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--crit, #b42318); } .cws-plan { margin:8px 0 0; font-size:12px; color:var(--muted); line-height:1.45; } .cws-plan.over span { color:var(--crit, #b42318); } .agcard.over { opacity:.5; filter:grayscale(1); } .lm-card.over { opacity:.55; filter:grayscale(1); } .rt.over { opacity:.5; filter:grayscale(1); border-style:dashed; } .bcheck.over { opacity:.5; filter:grayscale(1); } .pub-users li.over { opacity:.5; filter:grayscale(1); } /* Pricing: a plan's resource limits behind a "?" beside its name. */ .prc-card h2 { position:relative; } .prc-q { display:inline-block; vertical-align:middle; margin-left:6px; font-size:.8rem; font-weight:600; } .prc-q > summary { list-style:none; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1.5px solid currentColor; opacity:.7; cursor:pointer; font-size:12px; line-height:1; } .prc-q > summary::-webkit-details-marker { display:none; } .prc-q[open] > summary, .prc-q > summary:hover { opacity:1; } .prc-pop { position:absolute; z-index:20; left:0; right:0; top:calc(100% + 8px); text-align:left; padding:14px 16px; border-radius:12px; border:1px solid var(--hair); background:var(--surface, #fff); color:var(--ink); box-shadow:0 12px 32px rgba(15,23,42,.18); font-size:12.5px; font-weight:400; line-height:1.45; } .prc-pop > b { display:block; font-size:13px; margin-bottom:8px; } .prc-pop dl { margin:0; display:grid; grid-template-columns:1fr; gap:2px; } .prc-pop dt { font-weight:600; margin-top:6px; } .prc-pop dd { margin:0; color:var(--muted); } .prc-pop p { margin:10px 0 0; color:var(--muted); } .atl-ctry .atl-ctry-l{display:flex;align-items:center;gap:10px} .atl-ctry .atl-flag img{display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(16,32,52,.15)} .atl-ctry select{flex:1;min-width:0} /* Home › From data to a paying client: illustrated steps, in the console's brand colour */ .hm-steps { gap:22px; } .hm-steps li:not(:last-child)::after { content:"›"; right:-17px; top:44%; font:400 22px/1 var(--font, inherit); color:var(--faint); } .hm-steps a { padding:10px 10px 16px; gap:0; border-radius:14px; background:var(--surface, var(--paper)); } .hm-st-art { position:relative; display:block; border-radius:10px; overflow:hidden; background:radial-gradient(120% 90% at 85% 15%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), var(--accent-soft); } .hm-steps .hm-path-n, .wl-steps .hm-path-n { position:absolute; top:9px; left:9px; right:auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--paper, #fff); color:var(--ink); font:700 11px var(--font, inherit); box-shadow:0 1px 3px rgba(16,32,52,.12); z-index:1; } .hm-il { display:block; width:100%; height:auto; aspect-ratio:200/110; } .hm-il .b { fill:var(--brand); } .hm-il .l { fill:var(--brand); opacity:.32; } .hm-il .w { fill:var(--paper, #fff); } .hm-il .g { fill:var(--hair-strong, #dfe4ec); } .hm-il .sh { fill:var(--brand); opacity:.08; } .hm-il .o6 { opacity:.6; } .hm-il .dash { fill:none; stroke:var(--brand); stroke-width:1.4; stroke-dasharray:4 3; opacity:.55; } .hm-il .ar, .hm-il .arh, .hm-il .up, .hm-il .uph { fill:none; stroke:var(--brand); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } .hm-il .ar { stroke-dasharray:4 4; opacity:.6; } .hm-il .wl { fill:none; stroke:var(--paper, #fff); stroke-width:1.6; opacity:.7; } .hm-il .okb { fill:none; stroke:var(--brand); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } .hm-il .ln { fill:none; stroke:var(--brand); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; } .hm-il .cur { fill:var(--ink, #17202b); stroke:var(--paper, #fff); stroke-width:1.2; stroke-linejoin:round; } .hm-il .dk { fill:#17202b; } .hm-il .live { fill:#3ddc84; } .hm-il .lt { fill:#fff; font:700 6.5px var(--font, sans-serif); letter-spacing:.06em; } .hm-il .pt { fill:#fff; font:700 12px var(--font, sans-serif); } .hm-st-tx { display:flex; flex-direction:column; gap:4px; padding:14px 8px 0; } .hm-steps b { font-size:16px; } .hm-steps .hm-path-t { font-size:11px; letter-spacing:.1em; } .hm-steps a:hover .hm-st-art { background:radial-gradient(120% 90% at 85% 15%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%), var(--accent-soft); } @media (max-width:1150px) { .hm-steps li::after { display:none; } } /* Welcome popup (first sign-in) and the walkthrough tour: views/partials/welcome.php */ .wl { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:20px; background:rgba(12,20,36,.55); opacity:0; transition:opacity .2s; } .wl.in { opacity:1; } .wl.out { opacity:0; } .wl-card { position:relative; width:min(980px, 100%); max-height:calc(100vh - 40px); overflow:auto; background:var(--paper, #fff); color:var(--ink); border-radius:18px; padding:30px 30px 22px; box-shadow:0 30px 80px rgba(10,18,34,.35); transform:translateY(10px); transition:transform .25s; } .wl.in .wl-card { transform:none; } .wl-x { position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:50%; border:0; background:transparent; color:var(--muted); font-size:24px; cursor:pointer; } .wl-x:hover { background:var(--accent-soft); } .wl-h { text-align:center; max-width:640px; margin:0 auto 22px; } .wl-logo { height:34px; width:auto; margin:4px auto 14px; } .wl-h h2 { font-size:28px; margin:0 0 8px; } .wl-h p { color:var(--muted); font-size:15px; line-height:1.5; margin:0; } .wl-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; counter-reset:n; } .wl-steps li { position:relative; display:flex; flex-direction:column; gap:4px; padding:10px 10px 14px; border:1px solid var(--hair); border-radius:14px; background:var(--surface, var(--paper)); } .wl-steps li:not(:last-child)::after { content:"›"; position:absolute; right:-13px; top:30%; color:var(--faint); font-size:22px; } .wl-steps .hm-st-art { margin-bottom:10px; } .wl-steps b { font-size:15px; padding:0 4px; } .wl-steps .hm-path-t { padding:0 4px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); } .wl-steps small { padding:0 4px; font-size:12.5px; line-height:1.45; color:var(--muted); } .wl-f { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:22px; flex-wrap:wrap; } .wl-f .hm-btn:first-child { margin-right:auto; } @media (max-width:900px) { .wl-steps { grid-template-columns:repeat(2, minmax(0,1fr)); } .wl-steps li::after { display:none; } } @media (max-width:520px) { .wl-steps { grid-template-columns:1fr; } .wl-card { padding:24px 18px 18px; } .wl-f .hm-btn { flex:1; } } .wt-hole { position:fixed; z-index:1300; border-radius:12px; pointer-events:none; box-shadow:0 0 0 9999px rgba(12,20,36,.55), 0 0 0 3px var(--brand); transition:left .3s, top .3s, width .3s, height .3s; } .wt-tip { position:fixed; z-index:1301; background:var(--paper, #fff); color:var(--ink); border-radius:14px; padding:16px 18px 14px; box-shadow:0 18px 50px rgba(10,18,34,.35); transition:left .3s, top .3s; } .wt-n { display:block; font:600 11px var(--mono, monospace); color:var(--accent); letter-spacing:.06em; margin-bottom:4px; } .wt-tip b { display:block; font-size:16px; margin-bottom:6px; } .wt-tip p { margin:0; font-size:13.5px; line-height:1.5; color:var(--muted); } .wt-f { display:flex; align-items:center; gap:8px; margin-top:14px; } .wt-f span { flex:1; } .wt-skip { border:0; background:none; color:var(--muted); font-size:12.5px; cursor:pointer; padding:0; text-decoration:underline; } /* the popup and tour sit on paper, not on the dark hero */ .wl .hm-btn, .wt-tip .hm-btn { color:var(--ink); background:var(--paper, #fff); border:1px solid var(--hair-strong, var(--hair)); cursor:pointer; font:inherit; font-weight:600; font-size:14px; } .wl .hm-btn:hover, .wt-tip .hm-btn:hover { background:var(--accent-soft); } .wl .hm-btn.pri, .wt-tip .hm-btn.pri { background:var(--brand); color:var(--brand-ink, #fff); border-color:var(--brand); } .wl .hm-btn.pri:hover, .wt-tip .hm-btn.pri:hover { background:var(--brand-hi, var(--brand)); } .wt-tip .hm-btn { padding:7px 13px; font-size:13px; border-radius:10px; } .wl-steps .hm-st-art { position:relative; } .ka-ahead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; } .ka-ahead select { width:auto; min-width:150px; padding:6px 10px; } .ka-ahead.main { margin-top:12px; } .ka-ahead.main label { width:100%; font-weight:600; } /* An app's plan, paid ahead (views/ews/show.php #plan) */ .ap-st { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0 12px; } form.ap-ahead { display:flex; flex-direction:row; align-items:flex-end; justify-content:flex-start; gap:12px; flex-wrap:wrap; margin:0; } form.ap-ahead label { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:0; text-align:left; } form.ap-ahead select, form.ap-ahead input { width:auto; } form.ap-ahead .btn { margin:0; align-self:flex-end; height:40px; } /* Sign-in code (views/login-code.php) */ .otp { display:flex; gap:8px; justify-content:center; } body.bare.auth-body .auth-form .otp-d, .otp-d { width:46px; height:54px; padding:0; text-align:center; font:700 22px/1 ui-monospace, Menlo, Consolas, monospace; border-radius:10px; flex:none; } .otp-re { display:flex; gap:6px; align-items:center; justify-content:center; flex-wrap:wrap; flex-direction:row; margin:14px 0 0; } .otp-re .otp-send { background:none; border:0; padding:0; cursor:pointer; font-size:.76rem; color:var(--auth-teal, #1f6f6a); font-weight:600; } .otp-re .otp-send:disabled { color:#9AA5B0; cursor:default; } @media (max-width:380px) { .otp { gap:6px; } body.bare.auth-body .auth-form .otp-d, .otp-d { width:40px; height:50px; } } /* Builder · Agent mode · Build Console: the canvas stays out of the conversation (it covered the chat); a small read-only preview sits in it. */ .bframe.mode-agent[data-step="console"] .bstage { display:none; } .m.w .w-card.cmini { align-items:stretch; width:100%; gap:10px; } .cmini-top { display:flex; flex-direction:column; gap:2px; } .cmini-h { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .cmini-cat { width:auto; max-width:220px; padding:5px 8px; font-size:.82rem; } .cmini-tabs { display:flex; gap:4px; overflow-x:auto; scrollbar-width:thin; min-width:0; flex:1; } .cmini-tabs button { flex:none; border:1px solid var(--hair); background:var(--surface); color:var(--ink); border-radius:999px; padding:4px 10px; font-size:.76rem; cursor:pointer; white-space:nowrap; } .cmini-tabs button small { color:var(--muted); margin-left:2px; } .cmini-tabs button.on { background:var(--brand); border-color:var(--brand); color:#fff; } .cmini-tabs button.on small { color:rgba(255,255,255,.75); } .cmini-g { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:6px; max-height:280px; overflow:auto; padding:8px; border:1px solid var(--hair); border-radius:10px; background:repeating-linear-gradient(0deg, transparent 0 11px, rgba(120,140,160,.07) 11px 12px), var(--bg, #f4f6f8); } .cmini-w { background:var(--surface); border:1px solid var(--hair); border-radius:8px; padding:6px 7px; display:flex; flex-direction:column; gap:5px; min-width:0; } .cmini-w > b { font-size:.7rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); } .cmini-w > b em { font-style:normal; font-weight:500; color:var(--muted); } .cmini-w.over { opacity:.45; filter:grayscale(1); } .cmini-w .pv { height:34px; overflow:hidden; font-size:.6rem; } .cmini-w .pv-kpi b { font-size:.8rem; } .cmini-w .pv-don svg { width:30px; height:30px; } .cmini-w .pv-note { font-size:.62rem; margin:0; max-height:34px; overflow:hidden; color:var(--muted); } .cmini-empty { grid-column:1 / -1; margin:16px 0; text-align:center; font-size:.8rem; color:var(--muted); } .cmini-f { margin:0; font-size:.74rem; color:var(--muted); } .cmini-a { display:flex; gap:8px; flex-wrap:wrap; } @media (max-width:640px) { .cmini-w { grid-column:span 6 !important; } } .cmini-w .pv { width:100%; border:0; opacity:1; border-radius:5px; } .cmini-w .pv-tab, .cmini-w .pv-bars, .cmini-w .pv-don span { gap:4px; } .cmini-w .pv-tab span { gap:4px; } .cmini-w .pv-tab b, .cmini-w .pv-don b { height:4px; } .cmini-w .pv-bars i { height:5px; } .cmini-w .pv-kpi { gap:4px; } .cmini-w .pv-kpi span { padding:3px 4px; gap:3px; border-radius:5px; } .cmini-w .pv-kpi i { height:3px; } .cmini-w .pv-tl { height:34px; gap:1px; } .cmini-w .pv-tl i { height:16px; border-radius:2px; } .cmini-w .pv-map i { width:6px; height:6px; border-width:1px; } .cmini-w .pv-don { gap:6px; } /* Super admin · association portal (views/admin/association.php) */ .as-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 16px; } .as-tabs a { padding:8px 14px; border-radius:999px; border:1px solid var(--hair); background:var(--surface); color:var(--ink); text-decoration:none; font-size:.86rem; font-weight:600; } .as-tabs a:hover { border-color:var(--accent); } .as-h3 { font-size:.95rem; margin:14px 0 6px; } .as-logo { display:flex; flex-wrap:wrap; align-items:center; gap:12px; } .as-logo img { height:48px; width:auto; max-width:180px; object-fit:contain; border-radius:8px; background:var(--surface); } .as-mark { width:48px; height:48px; border-radius:12px; color:#fff; display:grid; place-items:center; font:700 22px var(--font); } .as-add { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:flex-end; } .as-plans { border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; } .as-plans legend { padding:0; margin-bottom:4px; font-weight:600; } .card[id], .ps-card[id] { scroll-margin-top:16px; } .as-add form { display:flex; flex-direction:row; flex-wrap:wrap; gap:10px; align-items:flex-end; justify-content:flex-start; } .as-add label { display:flex; flex-direction:column; gap:4px; align-items:stretch; margin:0; } .as-plan, .admingrid .as-plan { display:flex; flex-direction:row; gap:10px; align-items:flex-start; font-weight:400; cursor:pointer; } .as-plan input { width:auto; margin-top:4px; flex:none; } #pt-wel { font:inherit; line-height:1.5; } .as-k-icon img { width:48px; height:48px; object-fit:contain; } .as-k-logo img { height:56px; width:auto; max-width:240px; } .as-points { border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; } .as-points legend { padding:0; margin-bottom:4px; font-weight:600; } .admingrid .as-points label, .as-points label { display:flex; flex-direction:row; align-items:center; gap:10px; } .as-points input { flex:1; min-width:0; } .as-tick { color:var(--ok, #1F6B3E); font-weight:700; width:16px; text-align:center; } .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } #ct-desc { font:inherit; font-weight:400; line-height:1.5; } .as-signup { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:12px; background:var(--warn-soft, #FFF4E0); margin-bottom:16px; } .as-signup.on { background:var(--ok-soft, #E3F2EA); } .as-signup > div { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 320px; } /* An association member's Home (views/member/home.php) */ .mh-start { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:28px; } .mh-start p { margin:0; max-width:60ch; } .mh-app { display:flex; flex-direction:column; gap:12px; align-items:flex-start; } .mh-app-h { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px; width:100%; } .mh-dl { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px 18px; margin:0; width:100%; } .mh-dl dt { font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .mh-dl dd { margin:2px 0 0; font-weight:600; } .mh-help { margin-top:16px; } /* ================================================ association settings == Platform control › Association portal: a settings menu on the left, one section at a time on the right (all sections stacked without script). */ .as-set { display:grid; grid-template-columns:250px minmax(0,1fr); gap:18px; align-items:start; margin-top:16px; } @media (max-width:900px) { .as-set { grid-template-columns:1fr; } } .as-nav { position:sticky; top:16px; margin:0; padding:8px; display:flex; flex-direction:column; gap:2px; } @media (max-width:900px) { .as-nav { position:static; flex-direction:row; overflow-x:auto; } .as-nav small { display:none; } } .as-nav a { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:10px; color:var(--ink); text-decoration:none; flex:none; } .as-nav a:hover { background:var(--sunk); } .as-nav a.on { background:color-mix(in srgb, var(--accent) 12%, transparent); } .as-nav a.on .set-ic { background:var(--accent); color:#fff; } .as-nav .set-ic { width:34px; height:34px; border-radius:10px; } .as-nav .set-ic svg { width:18px; height:18px; } .as-nav span:last-child { display:flex; flex-direction:column; min-width:0; line-height:1.3; } .as-nav b { font-size:.9rem; font-weight:600; } .as-nav small { font-size:.74rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .as-panes { display:flex; flex-direction:column; gap:16px; min-width:0; } .as-pane { margin:0; scroll-margin-top:16px; } .as-pane[hidden] { display:none; } .as-ph { padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--hair); } .as-ph h2 { margin:0; } .as-ph p { margin:2px 0 0; max-width:70ch; } .as-form { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 18px; align-items:start; } @media (max-width:640px) { .as-form { grid-template-columns:1fr; } } .as-form > label { display:flex; flex-direction:column; gap:6px; font-size:.82rem; font-weight:600; margin:0; } .as-form > label .small.muted { font-weight:400; } .as-form .full { grid-column:1 / -1; } .as-foot { grid-column:1 / -1; display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; padding-top:16px; margin-top:4px; border-top:1px solid var(--hair); } .as-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:20px; padding:14px 16px; border:1px solid var(--hair); border-radius:12px; } .as-row > div { display:flex; flex-direction:column; gap:2px; flex:1 1 320px; min-width:0; } .as-row form { flex-direction:row; } .as-dl { margin:0; } .as-dl dd { margin:0; text-align:right; } .as-imgs { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-bottom:18px; } @media (max-width:640px) { .as-imgs { grid-template-columns:1fr; } } .as-img { border:1px solid var(--hair); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; } .as-img .acct-k { margin:0; } .as-img p { margin:0; } .as-img-box { height:110px; border-radius:10px; background:var(--sunk); display:grid; place-items:center; padding:12px; } .as-img-box img { max-width:100%; max-height:86px; object-fit:contain; } .as-k-icon .as-img-box img { width:64px; height:64px; } .as-img-box .as-mark { width:64px; height:64px; font-size:28px; } .as-img-act { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .as-img-act form { flex-direction:row; margin:0; } .as-file { position:relative; overflow:hidden; cursor:pointer; } .as-file input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; } .as-color { display:flex; gap:8px; align-items:center; } .as-color input[type=color] { width:46px; height:40px; padding:2px; flex:none; border-radius:10px; } .as-color input:not([type=color]) { flex:1; min-width:0; font-family:var(--mono); } .as-form .as-points, .as-form .as-plans { gap:8px; } .as-form .as-points legend, .as-form .as-plans legend { font-size:.82rem; font-weight:600; margin-bottom:6px; } .as-form .as-points label { display:flex; flex-direction:row; align-items:center; gap:10px; margin:0; } .as-form .as-plan { display:flex; flex-direction:row; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--hair); border-radius:10px; margin:0; font-size:.88rem; } .as-form .as-plan input { margin:0; } .as-plan-n { display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.3; } .as-plan-p { white-space:nowrap; } .as-plan-p s { margin-right:4px; } .as-pane .as-add { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; padding:14px; border-radius:12px; background:var(--sunk); } .as-add-one { display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:10px; flex:1 1 520px; } .as-add-one label { display:flex; flex-direction:column; gap:4px; margin:0; flex:1 1 140px; } .as-add-one label:first-child { flex-basis:220px; } .as-add-csv { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .as-add-csv form { flex-direction:row; margin:0; } .as-add-one > button, .as-add-csv .btn { align-self:flex-end; height:42px; display:inline-flex; align-items:center; } .as-add-one input { height:42px; } .pub-dom-pre { flex-direction:column; align-items:stretch; } .pub-dom-pre span { border-left:0; border-bottom:1px solid var(--hair); font-family:var(--mono); font-size:12.5px; padding:7px 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ================================================ member plan & payment */ .mp-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:stretch; } @media (max-width:1180px) { .mp-grid { grid-template-columns:1fr 1fr; } .mp-grid .mp-ai { grid-column:1 / -1; } } @media (max-width:760px) { .mp-grid { grid-template-columns:1fr; } } .mp-grid > .card { margin:0; } .mp-status h2, .mp-pay h2 { margin:4px 0 10px; } .mp-big { font-size:1.05rem; margin:0 0 6px; } .mp-form { display:flex; flex-direction:column; gap:14px; } .mp-plans { border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; } .mp-plan { display:flex; flex-direction:row; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--hair); border-radius:12px; cursor:pointer; margin:0; font-weight:400; } .mp-plan:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent); } .mp-plan input { width:auto; margin:0; flex:none; } .mp-plan-n { display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.35; } .mp-plan-p { display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; white-space:nowrap; } .mp-plan-p small { font-size:.7rem; color:var(--muted); } .mp-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:560px) { .mp-row { grid-template-columns:1fr; } } .mp-row label { display:flex; flex-direction:column; gap:6px; margin:0; font-weight:600; font-size:.82rem; } .mp-row .small { font-weight:400; } .mp-total { display:flex; justify-content:space-between; align-items:baseline; padding:12px 14px; border-radius:12px; background:var(--sunk); } .mp-total b { font:700 1.35rem "Poppins", var(--font); } .mh-acts { display:flex; flex-wrap:wrap; gap:8px; } .mp-ai h2 { margin:4px 0 6px; } .mp-wallets { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:10px; margin:12px 0 16px; } .mp-w { border:1px solid var(--hair); border-radius:12px; padding:10px 14px; display:flex; flex-direction:column; gap:2px; } .mp-w span { font-size:.76rem; color:var(--muted); } .mp-w b { font:700 1.4rem "Poppins", var(--font); } .mp-w small { font-size:.72rem; color:var(--muted); } .mp-buy { display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:12px; } .mp-buy > label { display:flex; flex-direction:column; gap:6px; margin:0; font-weight:600; font-size:.82rem; } .mp-packs { display:flex; flex-wrap:wrap; gap:8px; } .mp-pack { display:flex; flex-direction:column; align-items:center; gap:0; min-width:110px; padding:10px 14px; border:1px solid var(--hair); border-radius:12px; cursor:pointer; margin:0; font-weight:400; position:relative; } .mp-pack input { position:absolute; opacity:0; pointer-events:none; } .mp-pack:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent); } .mp-pack b { font:700 1.1rem "Poppins", var(--font); } .mp-pack span { font-size:.7rem; color:var(--muted); } .mp-pack em { font-style:normal; font-weight:600; margin-top:4px; } .mp-pack:focus-within { outline:2px solid var(--accent); outline-offset:2px; } .mp-buy > .btn { align-self:flex-end; } /* AI credits: the dark card in the first row */ .mp-ai { --ai-bg:color-mix(in srgb, var(--mast-accent, var(--accent)) 28%, #0B1622); background:var(--ai-bg); color:#E8EEF4; border-color:transparent; display:flex; flex-direction:column; } .mp-ai h2 { color:#fff; } .mp-ai .eyebrow { color:#9FE3C8; } .mp-ai .small.muted, .mp-ai .muted { color:#B9C7D4; } .mp-ai .mp-wallets { grid-template-columns:1fr 1fr; margin:10px 0 14px; } .mp-ai .mp-w { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.05); } .mp-ai .mp-w span, .mp-ai .mp-w small { color:#B9C7D4; } .mp-ai .mp-w b { color:#fff; } .mp-ai .mp-buy { flex-direction:column; align-items:stretch; gap:10px; margin-top:auto; } .mp-ai .mp-buy > label { color:#E8EEF4; } .mp-ai .mp-buy select { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.2); } .mp-ai .mp-buy select option { color:#14213D; } .mp-ai .mp-packs { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); } .mp-ai .mp-pack { min-width:0; border-color:rgba(255,255,255,.18); color:#fff; padding:10px 6px; } .mp-ai .mp-pack span { color:#B9C7D4; } .mp-ai .mp-pack:has(input:checked) { border-color:#fff; background:rgba(255,255,255,.12); } .mp-ai .mp-buy > .btn { align-self:stretch; background:#fff; color:#0B1622; border-color:#fff; } .mp-ai .mp-buy > .btn:disabled { opacity:.5; } .mp-status, .mp-pay { display:flex; flex-direction:column; } .hm-hero + .mh-app, .hm-hero ~ .mh-app { margin-top:16px; } /* member Account: Membership · Plans · Invoices */ .ma-tabs { display:flex; gap:4px; border-bottom:1px solid var(--hair); margin:0 0 18px; } .ma-tabs a { padding:10px 16px; color:var(--muted); text-decoration:none; font-weight:600; border-bottom:2px solid transparent; margin-bottom:-1px; } .ma-tabs a:hover { color:var(--ink); } .ma-tabs a.on { color:var(--ink); border-bottom-color:var(--mast-accent, var(--accent)); } .ma-pane[hidden] { display:none; } .mp-lead { margin:0 0 14px; } /* ================================================ phones: member console */ .mob-own { display:flex; align-items:center; gap:8px; min-width:0; color:var(--ink); text-decoration:none; } .mob-own img { width:26px; height:26px; border-radius:7px; object-fit:contain; flex:none; } .mob-own b { font:600 15px "Poppins", var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media (max-width:640px) { .ma-tabs { overflow-x:auto; } .ma-tabs a { padding:10px 12px; white-space:nowrap; } .ma-pane .admingrid { grid-template-columns:1fr; } .ma-inv { overflow:visible; } .ma-inv table, .ma-inv tbody, .ma-inv tr, .ma-inv td { display:block; width:100%; } .ma-inv thead { display:none; } .ma-inv tr { padding:12px 14px; border-bottom:1px solid var(--hair); } .ma-inv td { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:4px 0 !important; border:0 !important; text-align:right; } .ma-inv td::before { content:attr(data-l); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:left; flex:none; } .ma-inv td.num { flex-direction:row; } .ma-inv .inv-a { justify-content:flex-end; } .mh-acts .btn { flex:1 1 auto; } .hm-hero .hm-acts { flex-wrap:wrap; } .mp-plan { padding:10px 12px; gap:10px; } .mp-plan-p b { font-size:.9rem; } .mp-ai .mp-wallets { grid-template-columns:1fr 1fr; } /* Builder on a phone */ .bpanel-h { flex-direction:column; align-items:flex-start; gap:2px; } .bpanel-h h2 { white-space:normal; } .pub-brand { flex-direction:column; } .pub-logo { align-self:flex-start; } .pub-grid { grid-template-columns:1fr; } .pub-grid > span:empty { display:none; } } .atl-stn { display:flex; align-items:center; gap:3px; } .atl-stn i { width:12px; height:12px; border-radius:3px; background:#0E7C86; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.3); flex:none; transform:rotate(45deg); } .atl-stn b { font:700 10px var(--font); background:#fff; color:#0E7C86; padding:0 4px; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.2); } /* Branding: the sign-in page highlights */ .br-feat { border:0; padding:0; margin:12px 0 0; } .br-feat legend { font-size:13px; font-weight:600; margin-bottom:6px; } .br-feat-g { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; } .pub-feat-g { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; } .br-feat legend .muted { display:block; font-weight:400; font-size:12.5px; } .pub-feat > span { display:block; font-size:13px; font-weight:600; margin-bottom:6px; } @media (max-width:640px) { .br-feat-g, .pub-feat-g { grid-template-columns:repeat(2, minmax(0,1fr)); } } .atl-over { display:block; color:#B7791F; font-weight:600; font-size:11.5px; } .lm-house { font-style:normal; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:#5B4B8A; border-radius:4px; padding:1px 5px; margin-left:4px; vertical-align:2px; } /* Model: the super admin viewing a partner's Model (read only) */ .mview-pick { margin-left:auto; } .mview-pick label { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted, #6B7280); } .mview-pick select { min-width:220px; } .mview-ro .mdoors, .mview-ro [data-mtab="add"], .mview-ro #mp-add, .mview-ro form[method="post"], .mview-ro .btn.danger, .mview-ro [data-mtab-go], .mview-ro .acct-save { display:none !important; } .mview-ro input[type="range"], .mview-ro .mcard select { pointer-events:none; opacity:.6; } .mview-bar a { font-weight:700; margin-left:6px; } /* Applications › an app › Models ingested (super admin only) */ .ig-sum { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 14px; } .ig-sum div { background:#fff; border:1px solid #E3E8EF; border-radius:12px; padding:12px 14px; } .ig-sum span { display:block; font-size:12px; color:#5B6B7C; } .ig-sum b { font-size:20px; } .ig-card { margin-bottom:14px; } .ig-card h3 { margin:0 0 10px; font-size:15px; } .ig-tbl { width:100%; border-collapse:collapse; } .ig-tbl th, .ig-tbl td { text-align:left; padding:8px 6px; border-bottom:1px solid #EEF1F5; vertical-align:top; } .ig-tbl th { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#5B6B7C; } .ig-st { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:13px; } @media (max-width:640px) { .ig-sum { grid-template-columns:1fr; } .ig-tbl td:nth-child(2), .ig-tbl th:nth-child(2) { display:none; } } /* Build Map preview: a solar plant, output against capacity */ .atl-sol { position:relative; } .atl-sol i { position:absolute; inset:4px; border-radius:50%; background:conic-gradient(#E8892B calc(var(--p) * 1%), rgba(232,137,43,.18) 0); box-shadow:0 1px 4px rgba(0,0,0,.3); } .atl-sol i::after { content:""; position:absolute; inset:6px; border-radius:50%; background:#fff; } .atl-sol b { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:700 10px/1 system-ui, sans-serif; color:#7A3F0A; z-index:1; } /* Load Model › Solar plants */ .sp-list { display:grid; gap:14px; } .sp-card { border:1px solid #E3E8EF; border-radius:12px; padding:14px; background:#fff; } .sp-card h4 { margin:0 0 4px; font-size:15px; display:flex; align-items:center; gap:8px; } .sp-card h4 small { font-weight:400; color:#5B6B7C; } .sp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px 10px; margin-top:10px; } .sp-grid label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:#5B6B7C; } .sp-grid input, .sp-grid select { font-size:14px; } .sp-info { width:100%; min-height:110px; font:13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; margin-top:8px; } /* Super Powers › Starter Pack */ .sp-packs { display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:16px; } .sp-pack { border-top:4px solid var(--pc, #4668B0); display:flex; flex-direction:column; gap:10px; } .sp-pack-h { display:flex; align-items:center; gap:12px; } .sp-pack-h h2 { margin:0; font-size:19px; } .sp-pack-h p { margin:2px 0 0; } .sp-pack-h .pill { margin-left:auto; white-space:nowrap; } .sp-logo { width:96px; height:44px; border-radius:10px; border:1px solid #E3E8EF; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none; } .sp-logo img { max-width:88px; max-height:36px; } .sp-inc { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; } .sp-inc li { font-size:12px; border:1px solid #E3E8EF; border-radius:999px; padding:3px 10px; background:#F7F9FB; } .sp-ex { font-size:13px; border:1px dashed var(--pc, #4668B0); border-radius:10px; padding:9px 12px; background:color-mix(in srgb, var(--pc, #4668B0) 6%, #fff); } .sp-ex-k { display:block; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#5B6B7C; margin-bottom:2px; } .sp-ex a { margin-left:6px; } .sp-act { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:auto; } .sp-act form { margin:0; } .sp-note { margin:0; } .sp-next { border-top-color:#C9D2DC; border-style:dashed; background:transparent; justify-content:center; } .sp-next h2 { margin:0; font-size:17px; color:#5B6B7C; } /* Super Powers › Exclusivity */ .ex-b { border-top:4px solid var(--pc, #4668B0); margin-bottom:16px; } .ex-bh h2 { margin:2px 0 4px; } .ex-all { display:flex; gap:14px; align-items:flex-start; padding:12px; border-radius:10px; background:color-mix(in srgb, var(--pc, #4668B0) 7%, #fff); margin:10px 0 12px; flex-wrap:wrap; } .ex-l { display:flex; flex-direction:column; min-width:170px; } .ex-l small { color:#5B6B7C; font-size:12px; } .ex-ps { display:flex; flex-wrap:wrap; gap:6px; } .ex-p { display:inline-flex; align-items:center; gap:6px; border:1px solid #D5DCE4; border-radius:999px; padding:4px 11px; font-size:12.5px; cursor:pointer; background:#fff; user-select:none; } .ex-p input { position:absolute; opacity:0; width:1px; height:1px; } .ex-p.on { border-color:var(--pc, #4668B0); background:color-mix(in srgb, var(--pc, #4668B0) 14%, #fff); font-weight:600; } .ex-p.on::before { content:"✓"; font-size:11px; } .ex-p.lock { cursor:default; opacity:.8; } .ex-p:focus-within { outline:2px solid var(--pc, #4668B0); outline-offset:2px; } .ex-t { width:100%; border-collapse:collapse; } .ex-t th, .ex-t td { text-align:left; padding:10px 8px; border-bottom:1px solid #EEF1F5; vertical-align:top; } .ex-t th { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#5B6B7C; } .ex-kind { display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#5B6B7C; } .ex-save { position:sticky; bottom:12px; display:flex; justify-content:flex-end; } @media (max-width:640px) { .sp-packs { grid-template-columns:1fr; } .ex-t td:nth-child(2), .ex-t th:nth-child(2) { display:none; } } .sp-tpl { border:1px solid #E3E8EF; border-radius:10px; padding:10px 12px; background:#FAFBFC; } .sp-tpl summary { cursor:pointer; font-size:13.5px; } .sp-tf { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin-top:12px; } .sp-tf > label { display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:#5B6B7C; } .sp-tf fieldset { grid-column:1/-1; border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; } .sp-tf legend { font-size:12.5px; color:#5B6B7C; margin-bottom:4px; } .sp-r { display:flex; gap:8px; align-items:flex-start; font-size:13px; color:inherit; } .sp-give { grid-column:1/-1; } .sp-tf .btn { grid-column:1/-1; justify-self:start; } .sp-copies { list-style:none; margin:12px 0 0; padding:10px 0 0; border-top:1px solid #E3E8EF; display:flex; flex-direction:column; gap:6px; } .sp-copies li { display:flex; flex-direction:column; } @media (max-width:640px) { .sp-tf { grid-template-columns:1fr; } } .sp-packs { align-items:start; } .sp-tf .sp-r { display:flex !important; flex-direction:row !important; align-items:flex-start; gap:8px; font-weight:400; } .sp-tf .sp-r input { width:auto !important; flex:none; margin:3px 0 0; } .sp-next { min-height:180px; } .ex-ps .ex-p { display:inline-flex !important; flex-direction:row !important; align-items:center; white-space:nowrap; margin:0; width:auto; } /* Partner settings › Applications: extending a demo */ .ps-demo .ps-ext{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap} .ps-demo .ps-x{border:1px solid var(--hair-strong);background:var(--surface);color:var(--ink);border-radius:999px;padding:2px 8px;font-size:.7rem;cursor:pointer;line-height:1.5} .ps-demo .ps-x:hover{border-color:var(--brand);color:var(--brand)} .ps-demo[hidden]{display:none} /* Super Powers › Connections */ .cx-sum{margin:0 0 14px;padding:12px 16px;border-radius:12px;font-size:.95rem;background:var(--surface);border:1px solid var(--hair-strong)} .cx-sum.ok{border-color:#12A06A;background:color-mix(in srgb,#12A06A 8%,var(--surface))} .cx-sum.warn{border-color:#F2B01E;background:color-mix(in srgb,#F2B01E 10%,var(--surface))} .cx-sum.bad{border-color:#E03A2E;background:color-mix(in srgb,#E03A2E 8%,var(--surface))} .cx-sec{margin-bottom:14px}.cx-sec h2{font-size:1.05rem;margin:0 0 8px} .cx-t{width:100%;border-collapse:collapse}.cx-t td{padding:8px 6px;border-top:1px solid var(--hair);vertical-align:top} .cx-st{width:84px}.cx-p{display:inline-block;font-size:.72rem;font-weight:700;border-radius:999px;padding:2px 9px;color:#fff;background:#93A3B4} .cx-p.ok{background:#12A06A}.cx-p.warn{background:#C98A00}.cx-p.fail{background:#E03A2E}.cx-p.info{background:#6B7A90} /* Builder › Reports & Alerts › Sending */ .rpb-send{margin-top:16px}.rpb-send h3{margin:0 0 4px} .rps-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:10px} .rps-c{border:1px solid var(--hair-strong);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px} .rps-c h4{margin:0}.rps-c label{display:flex;flex-direction:column;gap:3px;font-size:.78rem;font-weight:600} .rps-a{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.rps-a input{flex:1;min-width:110px} .rps-log{width:100%;border-collapse:collapse}.rps-log td{border-top:1px solid var(--hair);padding:6px;vertical-align:top}