/* The look (1.12): Light (the standard look of modern.css), Dark (the same in dark colours, also when the device follows)
   and Developer: a terminal-like look with a monospace font, square panels whose title sits in the top border, plain
   lines and keys for everything (devkeys.js). Loaded last. Fonts are bundled (IBM Plex Mono). */

/* ---- Your settings › The look */
.looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.look-opt{position:relative;display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:18px;border:2px solid var(--line);background:var(--surface);cursor:pointer}
.look-opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.look-opt:has(input:checked){border-color:var(--fg);box-shadow:0 0 0 4px color-mix(in srgb,var(--fg) 8%,transparent)}
.look-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.look-n{display:flex;align-items:center;gap:10px}
.look-n > span:last-child{display:grid}
.look-r{width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);flex:none;display:grid;place-items:center}
.look-opt:has(input:checked) .look-r{border-color:var(--fg)}
.look-opt:has(input:checked) .look-r::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--fg)}
.lp{height:150px;border-radius:12px;overflow:hidden;display:flex;border:1px solid #E5E8ED}
.lp i{width:30%;padding:10px;display:flex;flex-direction:column;gap:6px}
.lp b{flex:1;padding:12px;display:flex;flex-direction:column;gap:8px}
.lp u{display:block;height:7px;border-radius:4px}
.lp s{display:block;height:34px;border-radius:8px;text-decoration:none}
.lp s.w{flex:1}
.lp-light i{background:#151D29}.lp-light i u{background:#3A4658}.lp-light i u:first-child{background:#4F5BE8;width:60%}
.lp-light b{background:#F4F5F7}.lp-light b u{background:#101828;width:50%;height:10px}.lp-light s{background:#fff;border:1px solid #E5E8ED}
.lp-dark{border-color:#2A3140}
.lp-dark i{background:#0B0F15}.lp-dark i u{background:#232B37}.lp-dark i u:first-child{background:#6C7BF2;width:60%}
.lp-dark b{background:#10151C}.lp-dark b u{background:#E6EDF3;width:50%;height:10px}.lp-dark s{background:#171D26;border:1px solid #252D39}
.lp-developer{background:#0A0C10;border-color:#2B3340;font:9.5px/1.45 "IBM Plex Mono",ui-monospace,monospace;color:#C9D1D9;padding:8px;gap:6px}
.lp-developer i,.lp-developer b{border:1px solid #3B4656;padding:6px;gap:2px;font-style:normal;font-weight:400}
.lp-developer i{width:36%}
.lp-developer b{border-color:#7FD1B9}
.lp-developer em{font-style:normal;white-space:nowrap;overflow:hidden}
.lp-developer i em:first-child{color:#C792EA}
.lp-developer em.on{color:#7FD1B9}
.lp-developer em.sel{background:#1F2A36}
.look-follow{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:var(--surface-2);cursor:pointer}
.look-follow > span{flex:1;display:grid;gap:2px}
.look-follow input{appearance:none;-webkit-appearance:none;width:48px;height:28px;border-radius:999px;background:var(--line);position:relative;flex:none;margin:0;cursor:pointer;transition:background .15s}
.look-follow input::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s}
.look-follow input:checked{background:var(--fg)}
.look-follow input:checked::after{transform:translateX(20px);background:var(--surface)}
.look-follow input:disabled{opacity:.45;cursor:not-allowed}

/* ---- the icon next to the app's name (App settings › Family) */
.mark .mark-t{font:700 15px/1 var(--f-body);letter-spacing:-.02em}
html .bn-brand .mark.mk,html .rail .brand .mark.mk{background:var(--mk);color:#fff}
.mark.k1{--mk:#2B6CB0}.mark.k2{--mk:#B03A57}.mark.k3{--mk:#B7791F}.mark.k4{--mk:#2F7D5B}.mark.k5{--mk:#5B4B9A}.mark.k6{--mk:#2C7A8C}.mark.k7{--mk:#8A6D1F}.mark.k8{--mk:#4A5766}
.lbl-like{font-size:.85rem;font-weight:500}
.brand-pick{display:flex;flex-wrap:wrap;gap:8px}
.bp-opt,.bp-col{position:relative;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--fg)}
.bp-opt input,.bp-col input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.bp-opt:has(input:checked),.bp-col:has(input:checked){border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.bp-opt:has(input:focus-visible),.bp-col:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.bp-col span{width:22px;height:22px;border-radius:50%;background:var(--mk,#4F5BE8)}
.bp-col.k0 span{background:linear-gradient(135deg,#8CC8F0,#4B9FE0)}
.bp-col.k1{--mk:#2B6CB0}.bp-col.k2{--mk:#B03A57}.bp-col.k3{--mk:#B7791F}.bp-col.k4{--mk:#2F7D5B}.bp-col.k5{--mk:#5B4B9A}.bp-col.k6{--mk:#2C7A8C}.bp-col.k7{--mk:#8A6D1F}.bp-col.k8{--mk:#4A5766}

/* ==== Developer ======================================================================================================== */
:root[data-skin="developer"]{
  --bg:#0A0C10; --surface:#0A0C10; --surface-2:#141A22; --s3:#1B2532; --line:#3B4656; --fg:#C9D1D9; --muted:#8B95A3; --faint:#6E7681;
  --accent:#7FD1B9; --accent-fg:#0A0C10; --accent-soft:#12302A; --sky:#7FD1B9;
  --warn:#FFCB6B; --warn-soft:#2A2310; --danger:#F07178; --danger-soft:#2E1518; --ok:#C3E88D; --ok-soft:#1C2614; --info:#82AAFF; --info-soft:#141F36;
  --av1:#1B2532; --av2:#1B2532; --av3:#1B2532; --av4:#1B2532; --av-fg:#C792EA;
  --k1:#82AAFF; --k2:#F07178; --k3:#FFCB6B; --k4:#C3E88D; --k5:#C792EA; --k6:#7FD1B9; --k7:#F78C6C; --k8:#8B95A3;
  --dv-p:#C792EA; --dv-sel:#1B2532; --dv-hi:#E6EDF3;
  --f-display:"IBM Plex Mono",ui-monospace,Menlo,monospace; --f-body:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:0; --r-sm:0; --shadow:none; color-scheme:dark;
}
html[data-skin="developer"] body{font-size:13.5px;line-height:1.55;background:var(--bg);-webkit-font-smoothing:auto}
html[data-skin="developer"] *,html[data-skin="developer"] *::before,html[data-skin="developer"] *::after{border-radius:0!important;box-shadow:none!important;text-shadow:none!important}
html[data-skin="developer"] *{transition-duration:0s!important;animation-duration:0s!important}
html[data-skin="developer"] h1,html[data-skin="developer"] h2,html[data-skin="developer"] h3{font-family:var(--f-body);letter-spacing:0;font-weight:600}
html[data-skin="developer"] h1{font-size:1.15rem;color:var(--dv-hi)}
html[data-skin="developer"] h1::before{content:"» ";color:var(--accent)}
html[data-skin="developer"] h2{font-size:.95rem}
html[data-skin="developer"] a{color:var(--accent)}
html[data-skin="developer"] ::selection{background:#264F78;color:#fff}
html[data-skin="developer"] :focus-visible{outline:1px solid var(--accent);outline-offset:1px}
/* panels: a plain line, the title set into the top border */
html[data-skin="developer"] .card,html[data-skin="developer"] .panel,html[data-skin="developer"] .sheet,html[data-skin="developer"] section.blk,
html[data-skin="developer"] .tile,html[data-skin="developer"] .ins,html[data-skin="developer"] .cat-tile,html[data-skin="developer"] .needs{
  background:transparent!important;border:1px solid var(--line)!important;position:relative}
html[data-skin="developer"] .card:hover,html[data-skin="developer"] .card:focus-within{border-color:var(--accent)!important}
html[data-skin="developer"] .card > .card-h{margin-top:-6px}
html[data-skin="developer"] .card > .card-h h2,html[data-skin="developer"] .card > h2:first-child{position:absolute;top:-.8em;left:10px;background:var(--bg);padding:0 6px;font-size:.84rem;color:var(--muted);margin:0;line-height:1.5}
html[data-skin="developer"] .card:focus-within > .card-h h2,html[data-skin="developer"] .card:hover > .card-h h2{color:var(--accent)}
html[data-skin="developer"] .card > .card-h:has(h2:only-child){min-height:0;margin:0}
/* the frame */
html[data-skin="developer"] .banner{background:var(--bg)!important;border-bottom:1px solid var(--line)}
html[data-skin="developer"] .bn-ib,html[data-skin="developer"] .bn-search .search{background:transparent!important;border:1px solid var(--line)!important;color:var(--fg)}
html[data-skin="developer"] .rail{background:var(--bg)!important;border:1px solid var(--line)!important;margin:10px 0 10px 10px;padding-top:22px!important;color:var(--fg)}
html[data-skin="developer"] .rail .brand{position:absolute;top:-.8em;left:10px;background:var(--bg);padding:0 6px!important;font-size:.84rem;font-weight:600;color:var(--dv-p)!important;z-index:2;gap:6px}
html[data-skin="developer"] .rail .brand .mark{width:auto;height:auto;background:none!important;color:var(--dv-p)!important}
html[data-skin="developer"] .rail .brand .mark svg{width:14px;height:14px}
html[data-skin="developer"] .rail .brand-name{color:var(--dv-p)!important}
html[data-skin="developer"] .rail .navgroup .label{font-size:.78rem;letter-spacing:0;text-transform:none;color:var(--faint);font-weight:400}
html[data-skin="developer"] .rail .navgroup .label::before{content:"── "}
html[data-skin="developer"] .rail .navgroup .label::after{content:" ──────"}
html[data-skin="developer"] .nav a,html[data-skin="developer"] .nav button{padding:2px 8px!important;min-height:0!important;color:var(--fg)!important;font-weight:400!important;background:none!important;gap:8px}
html[data-skin="developer"] .nav a svg,html[data-skin="developer"] .nav button svg{width:14px;height:14px;color:var(--muted)!important}
html[data-skin="developer"] .nav a:hover{background:var(--dv-sel)!important}
html[data-skin="developer"] .nav a[aria-current="true"],html[data-skin="developer"] .nav a[aria-current="page"]{background:var(--dv-sel)!important;color:var(--dv-hi)!important}
html[data-skin="developer"] .nav a[aria-current="true"]::before,html[data-skin="developer"] .nav a[aria-current="page"]::before{content:"❯";color:var(--accent);margin-right:-2px}
html[data-skin="developer"] .nav .count{background:none!important;color:var(--warn)!important;padding:0!important}
html[data-skin="developer"] .navsub{border-left:1px solid var(--line)!important}
html[data-skin="developer"] .me{border-top:1px dashed var(--line)!important;color:var(--muted)}
/* controls */
html[data-skin="developer"] .btn{background:transparent!important;border:1px solid var(--line)!important;color:var(--fg)!important;font-weight:400!important;padding:3px 10px;min-height:0}
html[data-skin="developer"] .btn::before{content:"[";color:var(--faint);margin-right:-4px}
html[data-skin="developer"] .btn::after{content:"]";color:var(--faint);margin-left:-4px}
html[data-skin="developer"] .btn:hover{border-color:var(--accent)!important;color:var(--accent)!important}
html[data-skin="developer"] .btn.primary{border-color:var(--accent)!important;color:var(--accent)!important}
html[data-skin="developer"] .btn.danger{border-color:var(--danger)!important;color:var(--danger)!important}
html[data-skin="developer"] .btn svg{width:14px;height:14px}
html[data-skin="developer"] .input,html[data-skin="developer"] input,html[data-skin="developer"] select,html[data-skin="developer"] textarea{background:var(--bg)!important;border:1px solid var(--line)!important;color:var(--fg)!important;font-family:var(--f-body)!important}
html[data-skin="developer"] .input:focus,html[data-skin="developer"] input:focus{border-color:var(--accent)!important;outline:0}
html[data-skin="developer"] .pill,html[data-skin="developer"] .tag,html[data-skin="developer"] .chip{background:none!important;border:0!important;padding:0!important;font-weight:400}
html[data-skin="developer"] .pill::before{content:"["}html[data-skin="developer"] .pill::after{content:"]"}
html[data-skin="developer"] .tog{background:none!important;border:1px solid var(--line)!important;width:44px}
html[data-skin="developer"] .tog::after{background:var(--muted)!important}
html[data-skin="developer"] .tog[aria-checked="true"]::after{background:var(--accent)!important}
html[data-skin="developer"] .row{border-top:1px dotted var(--line)}
html[data-skin="developer"] .row.link:hover,html[data-skin="developer"] a.row:hover,html[data-skin="developer"] .dv-cur{background:var(--dv-sel)!important}
html[data-skin="developer"] .dv-cur{outline:1px solid var(--accent)!important;outline-offset:-1px}
html[data-skin="developer"] .ini,html[data-skin="developer"] .av,html[data-skin="developer"] .avatar{background:var(--surface-2)!important;color:var(--dv-p)!important;border:1px solid var(--line)}
html[data-skin="developer"] img{filter:grayscale(.35) contrast(1.05)}
html[data-skin="developer"] table th{color:var(--muted);font-weight:400;border-bottom:1px solid var(--line)}
html[data-skin="developer"] dialog,html[data-skin="developer"] .dlg,html[data-skin="developer"] .toast{background:var(--bg)!important;border:1px solid var(--accent)!important;color:var(--fg)}
html[data-skin="developer"] dialog::backdrop{background:rgba(0,0,0,.6)}
html[data-skin="developer"] .crumbs{color:var(--faint)}
html[data-skin="developer"] .crumbs a{color:var(--accent)}
/* the status line and the keys (devkeys.js) */
.dv-status{display:none}
html[data-skin="developer"] .dv-status{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;justify-content:space-between;gap:16px;padding:2px 14px;background:var(--bg);border-top:1px solid var(--line);font:12px/1.6 var(--f-body);color:var(--faint)}
html[data-skin="developer"] .dv-status b{color:var(--ok);font-weight:400}
html[data-skin="developer"] .dv-status kbd{border:1px solid var(--line);padding:0 4px;color:var(--dv-hi);font:inherit}
html[data-skin="developer"] body{padding-bottom:24px}
.dv-keys{position:fixed;inset:auto 0 26px auto;margin:0 14px;z-index:61;width:min(460px,calc(100vw - 28px));background:#0A0C10;border:1px solid #7FD1B9;color:#C9D1D9;font:13px/1.7 "IBM Plex Mono",ui-monospace,monospace;padding:18px 14px 12px}
.dv-keys h2{position:absolute;top:-.8em;left:10px;background:#0A0C10;padding:0 6px;font:600 13px/1.5 "IBM Plex Mono",monospace;color:#7FD1B9;margin:0}
.dv-keys div{display:flex;gap:10px}
.dv-keys kbd{border:1px solid #3B4656;padding:0 5px;color:#E6EDF3;font:inherit;min-width:2.2em;text-align:center}
.dv-keys span{color:#8B95A3}
@media (max-width:820px){
  html[data-skin="developer"] .rail{margin:0;border-width:0 0 1px!important}
  html[data-skin="developer"] .dv-status .k{display:none}
}
html[data-skin="developer"] .rail .navgroup .label{justify-content:flex-start!important;text-align:left;padding:6px 8px 2px!important;width:100%}
html[data-skin="developer"] .rail .navgroup .label svg{display:none}
html[data-skin="developer"] .rail .navgroup .label::after{flex:1;overflow:hidden;white-space:nowrap;content:" ────────────────────"}