/* ============================================================ Launcher — unified styles. Theme tokens via [data-theme] on . Layout via [data-layout]. ============================================================ */ :root{ --r:12px; --r-sm:8px; --r-lg:16px; --font:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace; } [data-theme="light"]{ --bg:#eef1f6; --panel:#ffffff; --panel-2:#f6f8fb; --inset:#eef1f6; --border:#e4e8f0; --border-strong:#d2d9e6; --ink:#1b2330; --ink-2:#5a6577; --ink-3:#97a0b2; --accent:#4f5bd5; --accent-soft:#edeefc; --accent-ink:#fff; --dev:#4f5bd5; --dev-soft:#edeefc; --val:#1f9d63; --val-soft:#e4f4ec; --shadow:0 1px 2px rgba(20,30,55,.05),0 6px 16px rgba(20,30,55,.05); --shadow-hover:0 2px 4px rgba(20,30,55,.06),0 14px 34px rgba(20,30,55,.10); --shadow-pop:0 24px 70px rgba(20,30,55,.22); --overlay:rgba(20,28,48,.34); } [data-theme="dark"]{ --bg:#0a0c13; --panel:#11141e; --panel-2:#171b28; --inset:#0d1018; --border:#222838; --border-strong:#313a52; --ink:#e7eaf3; --ink-2:#9aa3bb; --ink-3:#606a83; --accent:#6ea8fe; --accent-soft:#16223d; --accent-ink:#08101f; --dev:#6ea8fe; --dev-soft:#16223d; --val:#4ad48a; --val-soft:#102a1d; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.45); --shadow-hover:0 10px 30px rgba(0,0,0,.55); --shadow-pop:0 30px 80px rgba(0,0,0,.6); --overlay:rgba(0,0,0,.55); } *{box-sizing:border-box;margin:0;padding:0;} body{ font-family:var(--font); background:var(--bg); color:var(--ink); min-height:100vh; -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5; transition:background .25s,color .25s; } [data-layout="console"][data-theme="dark"] body{ background:radial-gradient(900px 520px at 50% -10%,#141a2b 0%,transparent 60%),var(--bg); } [data-layout="console"][data-theme="light"] body{ background:radial-gradient(900px 520px at 50% -10%,#e6ebf6 0%,transparent 60%),var(--bg); } a{ color:inherit; } .wrap{ max-width:1500px; margin:0 auto; padding:24px 30px 70px; } /* ---------- Top chrome (shared) ---------- */ .topbar{ display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap; } .brand{ display:flex; align-items:center; gap:12px; } .logo{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--accent-ink); font-size:16px; flex-shrink:0; background:linear-gradient(150deg,var(--accent),color-mix(in oklab,var(--accent),#000 22%)); box-shadow:0 4px 14px color-mix(in oklab,var(--accent),transparent 62%); } .brand h1{ font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1.05; } .brand .sub{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.03em; } .spacer{ flex:1 1 20px; } /* segmented controls */ .seg{ display:flex; background:var(--panel-2); border:1px solid var(--border); border-radius:11px; padding:3px; gap:2px; } .seg button{ font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.03em; border:none; background:transparent; color:var(--ink-2); cursor:pointer; padding:7px 13px; border-radius:8px; transition:all .15s; display:flex; align-items:center; gap:7px; white-space:nowrap; } .seg button:hover{ color:var(--ink); } .seg button.active{ background:var(--panel); color:var(--ink); box-shadow:var(--shadow); } .seg.env button{ text-transform:uppercase; } .seg.env .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.4; } .seg.env button[data-env="dev"].active{ color:var(--dev); } .seg.env button[data-env="val"].active{ color:var(--val); } .seg.env button.active .dot{ opacity:1; } .seg.layout button i{ font-size:12px; } .icon-btn{ width:38px; height:38px; border-radius:11px; border:1px solid var(--border); background:var(--panel-2); color:var(--ink-2); cursor:pointer; display:grid; place-items:center; font-size:14px; transition:.15s; flex-shrink:0; } .icon-btn:hover{ color:var(--ink); border-color:var(--border-strong); } .ctrl-label{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 4px 0 8px; align-self:center; } /* search row */ .searchrow{ display:flex; gap:10px; align-items:center; margin-bottom:24px; } .search-wrap{ position:relative; flex:1; } .search{ width:100%; font-family:var(--font); font-size:14px; padding:11px 14px 11px 40px; border:1px solid var(--border); border-radius:11px; background:var(--panel); color:var(--ink); outline:none; transition:.15s; } .search:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .search-icon{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-size:13px; pointer-events:none; } .kbd{ position:absolute; right:11px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:10px; color:var(--ink-3); border:1px solid var(--border-strong); border-radius:5px; padding:2px 6px; } .add-btn{ display:flex; align-items:center; gap:8px; font-family:var(--font); font-size:13px; font-weight:600; padding:11px 16px; border-radius:11px; border:1px solid var(--border); background:var(--panel); color:var(--ink); cursor:pointer; transition:.15s; white-space:nowrap; } .add-btn:hover{ border-color:var(--accent); color:var(--accent); } /* console: bigger central search */ [data-layout="console"] .searchrow{ margin-bottom:8px; } [data-layout="console"] .search{ font-size:18px; font-weight:500; padding:17px 16px 17px 50px; border-color:var(--border-strong); border-radius:14px; box-shadow:var(--shadow); } [data-layout="console"] .search-icon{ left:20px; font-size:16px; } [data-layout="console"] .console-hint{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-bottom:24px; padding-left:4px; } [data-layout="console"] .console-hint b{ color:var(--ink-2); } .console-hint{ display:none; } [data-layout="console"] .console-hint{ display:block; } /* ============================================================ GRID container — layout-specific ============================================================ */ #grid{ display:grid; gap:18px; align-items:start; } [data-layout="atlas"] #grid{ grid-template-columns:repeat(auto-fill,minmax(286px,1fr)); } [data-layout="launchpad"] #grid{ grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:20px; } [data-layout="console"] #grid{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:8px 26px; } /* common section bits */ .sec-badge{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:6px; } .sec-badge.dev{ background:var(--dev-soft); color:var(--dev); } .sec-badge.val{ background:var(--val-soft); color:var(--val); } .sec-badge.fixed{ background:var(--panel-2); color:var(--ink-3); } .sec-badge.custom{ background:var(--accent-soft); color:var(--accent); } .del-btn{ border:none; background:transparent; color:var(--ink-3); cursor:pointer; font-size:11px; padding:4px; border-radius:6px; opacity:0; transition:.15s; } .app:hover .del-btn,.tile:hover .del-btn,.sec:hover .sec-del,.panel:hover .sec-del,.group:hover .sec-del{ opacity:.65; } .del-btn:hover{ opacity:1 !important; color:#e0524d; background:var(--panel-2); } /* ---------- ATLAS ---------- */ [data-layout="atlas"] .sec{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; } [data-layout="atlas"] .sec-head{ display:flex; align-items:center; gap:10px; padding:14px 14px 13px; cursor:pointer; user-select:none; border-bottom:1px solid var(--border); } [data-layout="atlas"] .sec.collapsed .sec-head{ border-bottom-color:transparent; } [data-layout="atlas"] .sec-head:hover .sec-name{ color:var(--accent); } [data-layout="atlas"] .sec-name{ font-family:var(--mono); font-size:13px; font-weight:600; transition:color .15s; } [data-layout="atlas"] .chev{ color:var(--ink-3); font-size:10px; width:11px; transition:transform .2s; } [data-layout="atlas"] .sec.collapsed .chev{ transform:rotate(-90deg); } [data-layout="atlas"] .sec.collapsed .sec-body{ display:none; } [data-layout="atlas"] .count{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-left:4px; } [data-layout="atlas"] .sec-body{ padding:7px; display:flex; flex-direction:column; gap:2px; } [data-layout="atlas"] .app{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink); transition:background .12s; } [data-layout="atlas"] .app:hover{ background:var(--panel-2); } [data-layout="atlas"] .app:hover .app-ico{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } [data-layout="atlas"] .app-ico{ width:30px; height:30px; border-radius:8px; flex-shrink:0; display:grid; place-items:center; font-size:12.5px; background:var(--panel-2); border:1px solid var(--border); color:var(--ink-2); transition:.14s; } [data-layout="atlas"] .app-title{ flex:1; font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ---------- CONSOLE ---------- */ [data-layout="console"] .group{ border-top:1px solid var(--border); padding-top:2px; } [data-layout="console"] .sec-head{ display:flex; align-items:center; gap:9px; padding:10px 6px 8px; cursor:pointer; user-select:none; } [data-layout="console"] .sec-head:hover .sec-name{ color:var(--accent); } [data-layout="console"] .sec-name{ font-family:var(--mono); font-size:12px; font-weight:600; transition:color .15s; } [data-layout="console"] .chev{ color:var(--ink-3); font-size:9px; width:10px; transition:transform .2s; } [data-layout="console"] .group.collapsed .chev{ transform:rotate(-90deg); } [data-layout="console"] .group.collapsed .sec-body{ display:none; } [data-layout="console"] .count{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-left:auto; } [data-layout="console"] .sec-body{ display:flex; flex-direction:column; } [data-layout="console"] .app{ display:flex; align-items:center; gap:11px; padding:8px; border-radius:8px; text-decoration:none; color:var(--ink); transition:.12s; border:1px solid transparent; } [data-layout="console"] .app:hover{ background:var(--panel); border-color:var(--border); } [data-layout="console"] .app:hover .app-ico{ color:var(--accent); } [data-layout="console"] .app-ico{ width:22px; text-align:center; color:var(--ink-2); font-size:13px; flex-shrink:0; transition:.14s; } [data-layout="console"] .app-title{ font-size:13.5px; font-weight:500; } [data-layout="console"] .app-path{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; } /* ---------- LAUNCHPAD ---------- */ [data-layout="launchpad"] .panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; } [data-layout="launchpad"] .sec-head{ display:flex; align-items:center; gap:12px; padding:16px 16px; cursor:pointer; user-select:none; } [data-layout="launchpad"] .fam{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff; font-size:15px; flex-shrink:0; background:var(--fam); box-shadow:0 4px 12px var(--fam-glow); } [data-layout="launchpad"] .ptitle{ display:flex; flex-direction:column; gap:1px; min-width:0; } [data-layout="launchpad"] .sec-name{ font-family:var(--mono); font-size:13.5px; font-weight:600; } [data-layout="launchpad"] .penv{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; } [data-layout="launchpad"] .penv.dev{ color:var(--dev); } [data-layout="launchpad"] .penv.val{ color:var(--val); } [data-layout="launchpad"] .penv.fixed,[data-layout="launchpad"] .penv.custom{ color:var(--ink-3); } [data-layout="launchpad"] .chev{ margin-left:auto; color:var(--ink-3); font-size:11px; transition:transform .2s; } [data-layout="launchpad"] .panel.collapsed .chev{ transform:rotate(-90deg); } [data-layout="launchpad"] .panel.collapsed .tiles{ display:none; } [data-layout="launchpad"] .tiles{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 14px 16px; } [data-layout="launchpad"] .tile{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink); background:var(--bg); border:1px solid transparent; transition:.14s; } [data-layout="launchpad"] .tile:hover{ background:var(--panel); border-color:var(--border-strong); box-shadow:var(--shadow-hover); transform:translateY(-1px); } [data-layout="launchpad"] .tile-ico{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-size:13px; color:var(--fam); background:var(--fam-soft); flex-shrink:0; } [data-layout="launchpad"] .tile-title{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; } /* empty */ .empty{ grid-column:1/-1; text-align:center; padding:80px 20px; color:var(--ink-2); } .empty .big{ font-size:18px; font-weight:700; color:var(--ink); margin-bottom:4px; } .empty .mono{ font-family:var(--mono); font-size:12px; color:var(--ink-3); } /* ============================================================ Modal (add / manage) ============================================================ */ .modal-overlay{ position:fixed; inset:0; background:var(--overlay); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:50; padding:24px; } .modal-overlay.open{ display:flex; } .modal{ width:100%; max-width:460px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); overflow:hidden; } .modal-head{ display:flex; align-items:center; gap:10px; padding:18px 20px; border-bottom:1px solid var(--border); } .modal-head h2{ font-size:16px; font-weight:700; letter-spacing:-.01em; } .modal-head .close{ margin-left:auto; } .modal-body{ padding:18px 20px; display:flex; flex-direction:column; gap:14px; } .field{ display:flex; flex-direction:column; gap:6px; } .field label{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); } .field input,.field select{ font-family:var(--font); font-size:13.5px; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:var(--panel-2); color:var(--ink); outline:none; transition:.15s; } .field input:focus,.field select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .row2{ display:grid; grid-template-columns:auto 1fr; gap:12px; } .icon-pick{ display:flex; gap:6px; flex-wrap:wrap; } .icon-pick button{ width:34px; height:34px; border-radius:9px; border:1px solid var(--border); background:var(--panel-2); color:var(--ink-2); cursor:pointer; font-size:13px; transition:.14s; } .icon-pick button:hover{ color:var(--ink); border-color:var(--border-strong); } .icon-pick button.sel{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } .modal-foot{ display:flex; gap:10px; padding:16px 20px; border-top:1px solid var(--border); } .btn{ font-family:var(--font); font-size:13.5px; font-weight:600; padding:10px 18px; border-radius:10px; cursor:pointer; border:1px solid var(--border); background:var(--panel-2); color:var(--ink); transition:.15s; } .btn:hover{ border-color:var(--border-strong); } .btn.primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); margin-left:auto; } .btn.primary:hover{ filter:brightness(1.06); } .hintline{ font-size:12px; color:var(--ink-3); } .hintline b{ color:var(--ink-2); font-weight:600; }