/* ============================================================
   Custom Launch — client portal demo (demo.php, assets/js/demo.js)
   ============================================================
   Copyright (c) 2026 Custom Launch Ltd. All Rights Reserved.
   ============================================================
   Builds on the site's tokens (site.css, inlined by head.php).
   --ac is the portal's brand colour: demo.js sets it from the
   Branding screen, and everything accented follows it.
   ============================================================ */
.demo-page{background:var(--bg);overflow:hidden;height:100dvh}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Ribbon: says this is a demo, and is the way back to the website. */
.dm-ribbon{position:relative;z-index:5;display:flex;align-items:center;gap:1rem;height:52px;padding:0 16px;
  background:linear-gradient(90deg,rgba(0,229,255,.12),rgba(6,214,160,.06) 60%,rgba(0,229,255,.1));border-bottom:1px solid rgba(0,229,255,.25)}
.dm-home img{display:block;height:38px;width:auto}
.dm-note{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-2);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-note b{color:var(--text)}
.dm-live{flex:none;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(6,214,160,.6);animation:dm-ping 2s infinite}
@keyframes dm-ping{70%,100%{box-shadow:0 0 0 8px rgba(6,214,160,0)}}
.dm-ribbon-cta{display:flex;gap:.5rem;margin-left:auto;flex:none}

/* The app. Its own palette, so light mode and brand colours stay inside it. */
.dm{--ac:#00e5ff;--p-bg:#0a0f19;--p-side:#0b111d;--p-card:#0f1624;--p-card-2:#131c2d;--p-line:rgba(148,178,214,.12);--p-line-2:rgba(148,178,214,.22);
  --p-text:#eef3f9;--p-text-2:#a9b6c8;--p-text-3:#738199;--p-warm:#ff9f43;--p-ok:#06d6a0;--p-info:#7cc4ff;--p-hover:rgba(255,255,255,.04);
  --acs:color-mix(in srgb,var(--ac) 14%,transparent);
  height:calc(100dvh - 52px);color:var(--p-text);background:var(--p-bg);font:400 15px/1.5 var(--body);transition:background .4s,color .4s}
.dm[data-mode="light"]{--p-bg:#f3f5f9;--p-side:#ffffff;--p-card:#ffffff;--p-card-2:#f7f9fc;--p-line:rgba(20,32,56,.1);--p-line-2:rgba(20,32,56,.18);
  --p-text:#0f1828;--p-text-2:#4a5870;--p-text-3:#7a879c;--p-warm:#e07b12;--p-ok:#05a57c;--p-info:#2b78c5;--p-hover:rgba(15,24,40,.04)}
.dm-nojs{max-width:560px;margin:4rem auto;padding:0 16px;text-align:center}
.dm-nojs a{color:var(--cyan)}
.dm-app{display:grid;grid-template-columns:260px minmax(0,1fr);height:100%}
.dm .i{flex:none}
.dm button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.dm :focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.dm :is(h1,h2,h3,p,b){color:inherit}
.dm .dm-h:focus,.dm .dm-h:focus-visible{outline:none}

/* Sidebar */
.dm-side{display:flex;flex-direction:column;min-height:0;background:var(--p-side);border-right:1px solid var(--p-line)}
.dm-brand{display:flex;align-items:center;gap:.7rem;height:86px;padding:0 1.25rem;border-bottom:1px solid var(--p-line)}
.dm-brand img{height:60px;width:auto}
.dm-mono{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;font:700 .95rem/1 var(--display);color:#fff;
  background:linear-gradient(140deg,var(--ac),color-mix(in srgb,var(--ac) 55%,#000));box-shadow:0 8px 20px -8px var(--ac)}
.dm-mono.lg{width:56px;height:56px;border-radius:16px;font-size:1.3rem}
.dm-bname{font:700 1.02rem/1.15 var(--display);letter-spacing:-.01em}
.dm-who{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--p-line)}
.dm-who b{display:block;font-size:.95rem}
.dm-who small{color:var(--p-text-3);font-size:.8rem}
.dm-av{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;font:600 .78rem/1 var(--body);background:var(--p-card-2);border:1px solid var(--p-line-2)}
.dm-av.sm{width:28px;height:28px;font-size:.66rem}
.dm-nav{display:flex;flex-direction:column;gap:2px;padding:.75rem;overflow:auto;flex:1}
.dm-nav button{position:relative;display:flex;align-items:center;gap:.8rem;padding:.65rem .8rem;border-radius:10px;color:var(--p-text-2);text-align:left;transition:background .2s,color .2s}
.dm-nav button:hover{background:var(--p-hover);color:var(--p-text)}
.dm-nav button[aria-current]{color:var(--p-text);background:var(--acs);box-shadow:inset 3px 0 0 var(--ac)}
.dm-nav button[aria-current] .i{color:var(--ac)}
.dm-count{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:auto;border-radius:99px;font:700 .7rem/1 var(--body);color:#1a0d00;background:var(--p-warm)}
.dm-side-ft{padding:.75rem;border-top:1px solid var(--p-line)}
.dm-side-ft button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem .8rem;border-radius:10px;font-size:.88rem;color:var(--ac);background:var(--acs)}

/* Icon rail layout (Branding → Menu) */
.dm[data-layout="rail"] .dm-app{grid-template-columns:76px minmax(0,1fr)}
.dm[data-layout="rail"] .dm-brand{justify-content:center;padding:0}
.dm[data-layout="rail"] .dm-brand img{height:34px}
.dm[data-layout="rail"] :is(.dm-bname,.dm-who>span:last-child,.dm-nav button>span:not(.dm-count)){display:none}
.dm[data-layout="rail"] .dm-side-ft button{font-size:0}
.dm[data-layout="rail"] .dm-who{justify-content:center;padding:1rem 0}
.dm[data-layout="rail"] .dm-nav button{justify-content:center;padding:.75rem}
.dm[data-layout="rail"] .dm-nav .dm-count{position:absolute;top:2px;right:2px;min-width:16px;height:16px;font-size:.6rem}
.dm[data-layout="rail"] .dm-side-ft button{justify-content:center}

/* Top bar */
.dm-body{display:flex;flex-direction:column;min-width:0;min-height:0}
.dm-top{display:flex;align-items:center;gap:1rem;min-height:72px;padding:.6rem 1.75rem;border-bottom:1px solid var(--p-line);background:color-mix(in srgb,var(--p-bg) 85%,transparent)}
.dm-top-t{display:flex;align-items:center;gap:.6rem;min-width:0}
.dm-h{font:600 1.1rem/1.2 var(--display);outline:none}
.dm-top small{color:var(--p-text-3);font-size:.8rem}
.dm-burger{display:none;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--p-line-2)!important}
.dm-tools{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.dm-search{display:flex;align-items:center;gap:.55rem;height:40px;padding:0 .6rem 0 .8rem;border-radius:10px;border:1px solid var(--p-line-2)!important;color:var(--p-text-2)!important;font-size:.9rem!important}
.dm-search kbd{font:500 .7rem/1 var(--mono);padding:.25rem .4rem;border-radius:5px;border:1px solid var(--p-line-2);color:var(--p-text-3)}
.dm-tool{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--p-line-2)!important;color:var(--p-text-2)!important}
.dm-tool:hover,.dm-search:hover{background:var(--p-hover)!important;color:var(--p-text)!important}
.dm-dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--p-warm);box-shadow:0 0 0 2px var(--p-bg)}
.dm-user{display:flex;align-items:center;gap:.5rem;height:40px;padding:0 .8rem 0 .35rem;border-radius:99px;border:1px solid var(--p-line-2);font-size:.9rem}
.dm-pop-wrap{position:relative}
.dm-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:320px;border-radius:14px;background:var(--p-card);border:1px solid var(--p-line-2);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);overflow:hidden}
.dm-pop-hd{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;font-weight:600;border-bottom:1px solid var(--p-line)}
.dm-pop li button{display:block;width:100%;padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--p-line)}
.dm-pop li button:hover{background:var(--p-hover)}
.dm-pop li.unread button{box-shadow:inset 3px 0 0 var(--p-warm)}
.dm-pop b{display:block;font-size:.88rem;font-weight:600}
.dm-pop small{font-size:.78rem;color:var(--p-text-3)}

/* Main + screen transition */
.dm-main{flex:1;overflow:auto;padding:1.75rem;scroll-behavior:smooth}
.dm-view{display:flex;flex-direction:column;gap:1.25rem;max-width:1180px;margin:0 auto;animation:dm-in .45s var(--ease) both}
.dm-view>*{animation:dm-in .55s var(--ease) both}
.dm-view>:nth-child(2){animation-delay:.04s}.dm-view>:nth-child(3){animation-delay:.08s}.dm-view>:nth-child(4){animation-delay:.12s}.dm-view>:nth-child(n+5){animation-delay:.16s}
@keyframes dm-in{from{opacity:0;transform:translateY(10px)}}
.dm-intro p,.dm-intro-p{color:var(--p-text-2);max-width:62ch}
.dm-h2{font:600 1.25rem/1.25 var(--display);letter-spacing:-.01em}
.dm-foot{font-size:.82rem;color:var(--p-text-3)}
.dm-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.dm-row small{color:var(--p-text-3);font-size:.8rem}
.dm-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.dm-src{font-size:.8rem;color:var(--p-text-3)}
.dm-src em,.dm-toast em{font-style:normal;color:var(--p-warm)}

/* Buttons and pills */
.dm-btn{display:inline-flex;align-items:center;gap:.45rem;height:40px;padding:0 1rem;border-radius:10px;font-weight:600!important;font-size:.9rem!important;
  border:1px solid var(--p-line-2)!important;background:var(--p-card-2)!important;transition:background .2s,border-color .2s,transform .2s}
.dm-btn:hover{border-color:color-mix(in srgb,var(--ac) 50%,transparent)!important}
.dm-btn:active{transform:translateY(1px)}
.dm-btn.sm{height:32px;padding:0 .75rem;font-size:.82rem!important;flex:none}
.dm-btn.ghost{background:transparent!important}
.dm-btn.primary{color:#fff!important;border-color:transparent!important;background:linear-gradient(140deg,var(--ac),color-mix(in srgb,var(--ac) 62%,#003))!important;box-shadow:0 10px 24px -10px var(--ac)}
.dm-btn.primary:hover{filter:brightness(1.08)}
.dm-btn.busy{opacity:.8;cursor:progress}
.dm-spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:dm-spin .7s linear infinite}
@keyframes dm-spin{to{transform:rotate(360deg)}}
.dm-link{display:inline-flex;align-items:center;gap:.3rem;margin-left:auto;font-size:.85rem!important;font-weight:600!important;color:var(--ac)!important}
.dm-back{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;font-size:.88rem!important;color:var(--p-text-2)!important}
.dm-back:hover{color:var(--p-text)!important}
.dm-pill{display:inline-flex;align-items:center;flex:none;height:24px;padding:0 .6rem;border-radius:99px;font-size:.74rem;font-weight:600;white-space:nowrap}
.dm-pill.ok{color:var(--p-ok);background:color-mix(in srgb,var(--p-ok) 13%,transparent)}
.dm-pill.warn{color:var(--p-warm);background:color-mix(in srgb,var(--p-warm) 14%,transparent)}
.dm-pill.info{color:var(--p-info);background:color-mix(in srgb,var(--p-info) 14%,transparent)}
.dm-pill.mute{color:var(--p-text-3);background:var(--p-hover)}

/* Cards */
.dm-card{border-radius:16px;background:var(--p-card);border:1px solid var(--p-line);box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 20px 40px -30px rgba(0,0,0,.6);overflow:hidden}
.dm-card-hd{display:flex;align-items:center;gap:.6rem;padding:1rem 1.25rem;border-bottom:1px solid var(--p-line)}
.dm-card-hd .i{color:var(--ac)}
.dm-card-hd h2{font:600 .98rem/1.2 var(--body)}
.dm-card-hd .dm-count,.dm-card-hd .dm-pill,.dm-card-hd .dm-legend{margin-left:auto}
.dm-card>.dm-foot,.dm-card>.dm-row{padding:0 1.25rem 1.1rem}
.dm-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.dm-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.dm-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.dm-list li{display:flex;align-items:center;gap:.9rem;padding:.9rem 1.25rem;border-top:1px solid var(--p-line)}
.dm-list li:first-child{border-top:0}
.dm-list.tight li{padding:.7rem 1.25rem}
.dm-list li>span:nth-child(2){flex:1;min-width:0}
.dm-list b{display:block;font-size:.92rem;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.dm-list small{display:block;font-size:.8rem;color:var(--p-text-3)}
.dm-list li.done b{color:var(--p-text-2);text-decoration:line-through;text-decoration-color:var(--p-text-3)}
.dm-when{flex:none;white-space:nowrap}
.dm-li-ic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;color:var(--ac);background:var(--acs)}
.dm-li-ic.warm{color:var(--p-warm);background:color-mix(in srgb,var(--p-warm) 13%,transparent)}
.dm-li-ic.ok{color:var(--p-ok);background:color-mix(in srgb,var(--p-ok) 13%,transparent)}
.dm-stat{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;padding:1.25rem;border-radius:16px;text-align:left;
  background:radial-gradient(120% 90% at 0% 0%,var(--acs),transparent 55%),var(--p-card);border:1px solid var(--p-line)!important;transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
button.dm-stat:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ac) 40%,transparent)!important;box-shadow:0 24px 40px -26px var(--ac)}
.dm-stat>span:not(.dm-stat-ic):not(.dm-track){font-size:.88rem;color:var(--p-text-2)}
.dm-stat>small{font-size:.8rem;color:var(--p-text-3)}
.dm-stat b{font:700 1.75rem/1.1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dm-stat b small{font:500 .9rem var(--body);color:var(--p-text-3);letter-spacing:0}
.dm-stat b.ok,.ok{color:var(--p-ok)}
.warm{color:var(--p-warm)}
.dm-stat .up{color:var(--p-ok)}.dm-stat .down{color:var(--p-warm)}
.dm-stat-ic{display:grid;place-items:center;width:38px;height:38px;margin-bottom:.6rem;border-radius:11px;color:var(--ac);background:var(--acs)}
.dm-stat-ic.ok{color:var(--p-ok);background:color-mix(in srgb,var(--p-ok) 13%,transparent)}
.dm-stat-ic.warm{color:var(--p-warm);background:color-mix(in srgb,var(--p-warm) 13%,transparent)}
.dm-track{display:block;height:6px;border-radius:99px;background:var(--p-hover);overflow:hidden;width:100%}
.dm-track i{display:block;height:100%;border-radius:inherit;background:var(--ac);animation:dm-grow 1s var(--ease) both}
@keyframes dm-grow{from{width:0}}

/* Home hero */
.dm-hero{position:relative;display:flex;align-items:center;gap:1.75rem;padding:1.75rem;border-radius:20px;overflow:hidden;
  background:radial-gradient(80% 140% at 100% 0%,color-mix(in srgb,var(--ac) 22%,transparent),transparent 60%),linear-gradient(135deg,#14213a,#0c1322);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent)}
.dm[data-mode="light"] .dm-hero{background:radial-gradient(80% 140% at 100% 0%,color-mix(in srgb,var(--ac) 18%,transparent),transparent 60%),linear-gradient(135deg,#ffffff,#eef3fa)}
.dm-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 70% 20%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 85% 70%,rgba(255,255,255,.35),transparent),radial-gradient(1px 1px at 45% 80%,rgba(255,255,255,.3),transparent);pointer-events:none}
.dm-orb{position:relative;flex:none;display:grid;place-items:center;width:130px;height:130px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--p-warm) 45%,transparent)}
.dm-orb::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid transparent;border-top-color:var(--p-warm);animation:dm-spin 6s linear infinite}
.dm-orb span{display:grid;place-items:center;align-content:center;width:84px;height:84px;border-radius:50%;text-align:center;font:700 .66rem/1.1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#2a1600;
  background:radial-gradient(circle at 35% 30%,#ffd28f,#ff9f43 60%,#d9761f);box-shadow:0 0 40px -6px rgba(255,159,67,.7)}
.dm-orb b{font:700 1.5rem/1 var(--display)}
.dm-hero-t{position:relative;flex:1;min-width:0}
.dm-hero-t>small{font-size:.85rem;color:var(--p-text-2)}
.dm-hero h1{font:700 clamp(1.5rem,2.6vw,2rem)/1.15 var(--display);letter-spacing:-.02em;margin:.2rem 0}
.dm-hero p{color:var(--p-text-2)}
.dm-kpis{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.dm-kpis button{display:flex;flex-direction:column;gap:.2rem;padding:.6rem .9rem;border-radius:12px;text-align:left;border:1px solid var(--p-line-2)!important;background:rgba(255,255,255,.03)!important;transition:border-color .2s,transform .2s}
.dm-kpis button:hover{border-color:color-mix(in srgb,var(--ac) 55%,transparent)!important;transform:translateY(-2px)}
.dm-kpis small{font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--p-text-3)}
.dm-kpis b{font:600 1.1rem/1 var(--display)}
.dm-hero>.dm-btn{position:relative;align-self:flex-start}

/* Charts */
.dm-spark{display:block;width:100%;height:110px;margin-top:1rem}
.dm-spark .area,.dm-chart .area{fill:url(#none);fill:color-mix(in srgb,var(--ac) 14%,transparent)}
.dm-spark .ln,.dm-chart .ln{fill:none;stroke:var(--ac);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:dm-draw 1.4s var(--ease) .15s forwards}
@keyframes dm-draw{to{stroke-dashoffset:0}}
.dm-spark-n{padding:.6rem 1.25rem 1.1rem;color:var(--p-text-2);font-size:.9rem}
.dm-spark-n b{font:700 1.3rem var(--display);color:var(--p-text)}
.dm-spark-n .up,.dm-stat small.up{color:var(--p-ok)}
.dm-chart{position:relative;padding:1.25rem 1.25rem 2.2rem}
.dm-chart svg{display:block;width:100%;height:clamp(200px,32vh,320px);overflow:visible}
.dm-chart .grid line{stroke:var(--p-line);vector-effect:non-scaling-stroke}
.dm-chart .prev{fill:none;stroke:var(--p-text-3);stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;opacity:.7}
.dm-chart .cursor{stroke:var(--p-text-2);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .2s}
.dm-tip{position:absolute;top:.8rem;transform:translateX(-50%);padding:.45rem .7rem;border-radius:10px;font-size:.82rem;white-space:nowrap;pointer-events:none;
  background:var(--p-card-2);border:1px solid var(--p-line-2);box-shadow:0 12px 30px -12px rgba(0,0,0,.6)}
.dm-tip small{display:block;color:var(--p-text-3);font-size:.74rem}
.dm-x{position:absolute;left:1.25rem;right:1.25rem;bottom:.7rem;height:1rem}
.dm-x span{position:absolute;transform:translateX(-50%);font-size:.74rem;color:var(--p-text-3);white-space:nowrap}
.dm-x .k0{transform:none}.dm-x .k2{transform:translateX(-100%)}
.dm-legend{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--p-text-3)}
.dm-legend i{width:16px;height:3px;border-radius:2px;background:var(--ac)}
.dm-legend i.prev{margin-left:.6rem;background:repeating-linear-gradient(90deg,var(--p-text-3) 0 4px,transparent 4px 7px)}
.dm-seg{display:inline-flex;padding:3px;gap:2px;border-radius:12px;background:var(--p-card);border:1px solid var(--p-line-2)}
.dm-seg button{height:34px;padding:0 .9rem;border-radius:9px;font-size:.86rem!important;font-weight:500!important;color:var(--p-text-2)!important;transition:background .2s,color .2s}
.dm-seg button[aria-pressed="true"]{color:var(--p-text)!important;background:var(--acs)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 45%,transparent)}
.dm-bars{display:flex;flex-direction:column;gap:.9rem;padding:1.15rem 1.25rem}
.dm-bars li{display:grid;grid-template-columns:minmax(0,11rem) 1fr 3rem;align-items:center;gap:.8rem;font-size:.88rem}
.dm-bars li>span:first-child{display:flex;align-items:center;gap:.45rem;color:var(--p-text-2)}
.dm-bars b{text-align:right;font-variant-numeric:tabular-nums}
.dm-bars .dm-track{height:8px}
.dm-table{width:100%;border-collapse:collapse;font-size:.9rem}
.dm-table th{padding:.7rem 1.25rem;text-align:left;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--p-text-3);border-bottom:1px solid var(--p-line)}
.dm-table td{padding:.75rem 1.25rem;border-bottom:1px solid var(--p-line);vertical-align:middle}
.dm-table tr:last-child td{border-bottom:0}
.dm-table td small{display:block;font-size:.78rem;color:var(--p-text-3)}
.dm-table th:last-child,.dm-table td:last-child{text-align:right}
.dm-table.rows tbody tr{transition:background .2s}
.dm-table.rows tbody tr:hover{background:var(--p-hover)}

/* Websites */
.dm-sites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;perspective:1400px}
.dm-site{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;text-align:left;background:var(--p-card);border:1px solid var(--p-line)!important;transition:transform .5s var(--ease),border-color .3s,box-shadow .4s}
.dm-site:hover{transform:translateY(-4px) rotateX(3deg);border-color:color-mix(in srgb,var(--ac) 45%,transparent)!important;box-shadow:0 30px 50px -30px var(--ac)}
.dm-site-shot{position:relative;display:block;height:150px;background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 22%,var(--p-card-2)),var(--p-card-2));border-bottom:1px solid var(--p-line);overflow:hidden}
.dm-site-shot>i{position:absolute;top:10px;width:7px;height:7px;border-radius:50%;background:var(--p-line-2)}
.dm-site-shot>i:nth-child(1){left:12px}.dm-site-shot>i:nth-child(2){left:24px}.dm-site-shot>i:nth-child(3){left:36px}
.dm-site-pg{position:absolute;left:14%;right:14%;top:30px;bottom:-20px;padding:12px;border-radius:10px 10px 0 0;background:var(--p-card);box-shadow:0 -10px 30px -10px rgba(0,0,0,.4);transition:transform .6s var(--ease)}
.dm-site:hover .dm-site-pg{transform:translateY(-6px)}
.dm-site-pg b{display:block;width:55%;height:12px;border-radius:4px;background:color-mix(in srgb,var(--ac) 60%,transparent)}
.dm-site-pg em{display:block;width:80%;height:6px;margin-top:8px;border-radius:3px;background:var(--p-line-2)}
.dm-site-pg em+em{width:65%}
.dm-site-pg span{display:block;width:34%;height:16px;margin-top:12px;border-radius:5px;background:var(--ac);opacity:.8}
.dm-site-b{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.15rem 1.2rem}
.dm-site-t{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.dm-site-t b{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-site-b>small{color:var(--p-text-3);font-size:.82rem}
.dm-site-m{display:flex;flex-direction:column;gap:.3rem;margin-top:.5rem;font-size:.8rem;color:var(--p-text-2)}
.dm-site-m span{display:flex;align-items:center;gap:.45rem}
.dm-site-m .i{color:var(--ac)}
.dm-site-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.dm-site-hd p{color:var(--p-text-2);font-size:.9rem}
.dm-status{flex:none;width:10px;height:10px;border-radius:50%;background:var(--p-ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--p-ok) 18%,transparent)}
.dm-status.build{background:var(--p-info);box-shadow:0 0 0 4px color-mix(in srgb,var(--p-info) 18%,transparent)}

/* Security */
.dm-shield{display:flex;align-items:center;gap:2rem;padding:1.75rem;border-radius:20px;background:radial-gradient(70% 140% at 0% 50%,color-mix(in srgb,var(--p-ok) 18%,transparent),transparent 60%),var(--p-card);border:1px solid color-mix(in srgb,var(--p-ok) 30%,transparent)}
.dm-shield small{font-size:.82rem;color:var(--p-text-3)}
.dm-shield h1{font:700 2rem/1.1 var(--display);color:var(--p-ok);margin:.15rem 0 .3rem}
.dm-shield p{color:var(--p-text-2);margin-bottom:1rem}
.dm-shield p b{color:var(--p-text)}
.dm-radar{position:relative;flex:none;display:grid;place-items:center;width:150px;height:150px;color:var(--p-ok)}
.dm-radar i{position:absolute;inset:calc(var(--k,0) * 18%);border-radius:50%;border:1px solid color-mix(in srgb,var(--p-ok) 35%,transparent)}
.dm-radar i:nth-child(2){--k:1}.dm-radar i:nth-child(3){--k:2;background:color-mix(in srgb,var(--p-ok) 10%,transparent)}
.dm-radar span{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--p-ok) 40%,transparent),transparent 22%);animation:dm-spin 4s linear infinite}
.dm-radar .i{position:relative}
.dm-uptime{display:flex;flex-direction:column}
.dm-uptime li{display:grid;grid-template-columns:12rem 1fr auto;align-items:center;gap:1rem;padding:.7rem 1.25rem;border-top:1px solid var(--p-line)}
.dm-uptime li:first-child{border-top:0}
.dm-uptime li>span:first-child{display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--p-text-2)}
.dm-uptime li>span:first-child .i{color:var(--ac)}
.dm-uptime b{font-weight:600;color:var(--p-text)}
.dm-cells{display:grid;grid-template-columns:repeat(60,1fr);gap:2px;height:26px}
.dm-cells i{border-radius:2px;background:color-mix(in srgb,var(--p-ok) 70%,transparent);transition:transform .15s}
.dm-cells i:hover{transform:scaleY(1.25);background:var(--p-ok)}
.dm-cells i.m{background:var(--gold)}
.dm-uptime+.dm-foot{padding:.4rem 1.25rem 1rem}

/* Projects */
.dm-proj-hd{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.5rem 1.5rem .5rem}
.dm-proj-hd small{font-size:.8rem;color:var(--p-text-3)}
.dm-proj-hd p{color:var(--p-text-2);font-size:.9rem}
.dm-ring{--p:0;position:relative;flex:none;display:grid;place-items:center;align-content:center;width:96px;height:96px;border-radius:50%;
  background:conic-gradient(var(--ac) calc(var(--p) * 1%),var(--p-hover) 0)}
.dm-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--p-card)}
.dm-ring b,.dm-ring small{position:relative;line-height:1.1}
.dm-ring b{font:700 1.3rem var(--display)}
.dm-ring small{font-size:.72rem;color:var(--p-text-3)}
.dm-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;padding:1rem 1.5rem 1.5rem;counter-reset:st}
.dm-stages li{position:relative;display:flex;flex-direction:column;gap:.3rem;padding-top:2.4rem;font-size:.88rem}
.dm-stages li::before{content:"";position:absolute;left:28px;right:-.75rem;top:13px;height:2px;background:var(--p-line-2)}
.dm-stages li:last-child::before{display:none}
.dm-stages li.done::before{background:var(--ac)}
.dm-stage-dot{position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--p-line-2);background:var(--p-card);color:#fff}
.dm-stages .done .dm-stage-dot{background:var(--ac);border-color:var(--ac)}
.dm-stages .now .dm-stage-dot{border-color:var(--ac);box-shadow:0 0 0 5px var(--acs)}
.dm-stages .now .dm-stage-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ac);animation:dm-pulse 1.6s ease-in-out infinite}
@keyframes dm-pulse{50%{transform:scale(.6);opacity:.6}}
.dm-stages small{color:var(--p-text-3);font-size:.8rem}
.dm-stages .next b{color:var(--p-text-2)}
.dm-stages .dm-track{margin-top:.3rem}

/* Support */
.dm-tk-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--p-line)}
.dm-tk-hd small{font-size:.8rem;color:var(--p-text-3)}
.dm-thread{display:flex;flex-direction:column;gap:1rem;padding:1.5rem}
.dm-thread li{display:flex;gap:.75rem;max-width:80%;animation:dm-in .4s var(--ease) both}
.dm-thread li.you{align-self:flex-end;flex-direction:row-reverse;text-align:right}
.dm-thread p{padding:.8rem 1rem;border-radius:14px;background:var(--p-card-2);border:1px solid var(--p-line);text-align:left}
.dm-thread li.you p{background:var(--acs);border-color:color-mix(in srgb,var(--ac) 30%,transparent)}
.dm-thread small{display:block;margin-top:.3rem;font-size:.75rem;color:var(--p-text-3)}
.dm-reply{padding:0 1.5rem 1.5rem}

/* Forms */
.dm-form{display:flex;flex-direction:column;gap:1rem;padding:1.15rem 1.25rem}
.dm-dialog .dm-form{padding:1rem 0 0}
.dm-form label,.dm-form legend{display:flex;flex-direction:column;gap:.4rem;font-size:.85rem;font-weight:600;color:var(--p-text-2)}
.dm-form fieldset{border:0;display:flex;flex-direction:column;gap:.4rem}
.dm-form input:not([type="color"]),.dm-form select,.dm-form textarea{width:100%;padding:.7rem .85rem;border-radius:10px;font:400 .95rem/1.4 var(--body);color:var(--p-text);
  background:var(--p-bg);border:1px solid var(--p-line-2);transition:border-color .2s,box-shadow .2s}
.dm-form :is(input,select,textarea):focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--acs)}
.dm-form textarea{resize:vertical}
.dm-color{display:flex;align-items:center;gap:.7rem;font:500 .9rem var(--mono);color:var(--p-text)}
.dm-color input{width:48px;height:40px;padding:2px;border-radius:10px;border:1px solid var(--p-line-2);background:var(--p-bg);cursor:pointer}

/* Branding */
.dm-brand-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.75rem}
.dm-swatch{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.9rem;border-radius:14px;text-align:left;background:var(--p-card);border:1px solid var(--p-line)!important;transition:transform .3s var(--ease),border-color .2s}
.dm-swatch:hover{transform:translateY(-3px)}
.dm-swatch[aria-pressed="true"]{border-color:var(--sw)!important;box-shadow:0 0 0 1px var(--sw),0 16px 30px -18px var(--sw)}
.dm-sw-chip{width:32px;height:32px;margin-bottom:.5rem;border-radius:10px;background:linear-gradient(140deg,var(--sw),color-mix(in srgb,var(--sw) 55%,#000))}
.dm-swatch b{font-size:.84rem;line-height:1.25}
.dm-swatch small{font-size:.74rem;color:var(--p-text-3)}
.dm-login{display:grid;place-items:center;margin:1.25rem;padding:2rem 1rem;border-radius:14px;background:radial-gradient(60% 80% at 50% 0%,color-mix(in srgb,var(--lac) 25%,transparent),transparent),var(--p-card-2);border:1px solid var(--p-line)}
.dm-login-in{display:flex;flex-direction:column;align-items:center;gap:.45rem;width:min(260px,100%);text-align:center}
.dm-login .dm-mono{background:linear-gradient(140deg,var(--lac),color-mix(in srgb,var(--lac) 55%,#000));box-shadow:0 10px 24px -10px var(--lac)}
.dm-login-in>b{font:700 1.1rem var(--display);margin-top:.3rem}
.dm-login-in>small{color:var(--p-text-3);font-size:.8rem;margin-bottom:.6rem}
.dm-fake-in{width:100%;padding:.6rem .8rem;border-radius:9px;text-align:left;font-size:.82rem;color:var(--p-text-3);background:var(--p-bg);border:1px solid var(--p-line-2)}
.dm-fake-btn{width:100%;margin-top:.3rem;padding:.65rem;border-radius:9px;font-weight:600;font-size:.88rem;color:#fff;background:var(--lac)}

/* Toasts */
.dm-toasts{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:.5rem;max-width:min(420px,calc(100vw - 32px))}
.dm-toast{display:flex;gap:.6rem;align-items:flex-start;padding:.8rem 1rem;border-radius:12px;font-size:.88rem;color:var(--p-text);
  background:var(--p-card-2);border:1px solid var(--p-line-2);box-shadow:0 20px 40px -16px rgba(0,0,0,.7);animation:dm-toast .4s var(--ease) both;transition:opacity .4s,transform .4s}
.dm-toast .i{color:var(--p-ok);margin-top:.15rem}
.dm-toast.sim .i{color:var(--p-warm)}
.dm-toast.out{opacity:0;transform:translateY(8px)}
@keyframes dm-toast{from{opacity:0;transform:translateY(12px) scale(.98)}}

/* Dialogs */
.dm-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px}
.dm-scrim{position:absolute;inset:0;background:rgba(2,5,10,.78);animation:dm-fade .25s both}
@keyframes dm-fade{from{opacity:0}}
.dm-dialog{position:relative;width:min(520px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:1.6rem;border-radius:20px;color:var(--p-text);
  background:var(--p-card);border:1px solid var(--p-line-2);box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 60px -30px var(--ac);animation:dm-pop .4s var(--ease) both;outline:none}
.dm-dialog.wide{width:min(680px,100%)}
@keyframes dm-pop{from{opacity:0;transform:translateY(14px) scale(.97)}}
.dm-dialog>p{color:var(--p-text-2);margin-top:.5rem}
.dm-dialog .dm-row{margin-top:1.25rem}
.dm-x-btn{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:var(--p-text-2)!important}
.dm-x-btn:hover{background:var(--p-hover)!important}
.dm-tips{display:flex;flex-direction:column;gap:.4rem;margin:1rem 0}
.dm-tips button{display:flex;align-items:center;gap:.7rem;width:100%;padding:.7rem .9rem;border-radius:12px;text-align:left;border:1px solid var(--p-line)!important;transition:border-color .2s,background .2s}
.dm-tips button:hover{border-color:color-mix(in srgb,var(--ac) 50%,transparent)!important;background:var(--acs)!important}
.dm-tips .i{color:var(--ac)}
.dm-dialog.pal{padding:0;width:min(560px,100%);align-self:start;margin-top:12vh}
.dm-pal-in{display:flex;align-items:center;gap:.7rem;padding:1rem 1.2rem;border-bottom:1px solid var(--p-line);color:var(--p-text-3)}
.dm-pal-in input{flex:1;border:0;background:none;font:400 1rem var(--body);color:var(--p-text);outline:none}
.dm-pal{max-height:50vh;overflow:auto;padding:.5rem}
.dm-pal li{display:flex;align-items:center;gap:.7rem;padding:.65rem .8rem;border-radius:10px;cursor:pointer;color:var(--p-text-2)}
.dm-pal li b{flex:1;font-weight:500;color:var(--p-text)}
.dm-pal li small{font-size:.75rem;color:var(--p-text-3)}
.dm-pal li[aria-selected="true"],.dm-pal li:hover{background:var(--acs)}
.dm-pal li[aria-selected="true"] .i{color:var(--ac)}
.dm-pal .none{cursor:default}
.dm-dialog.pal .dm-x-btn{display:none}

/* Invoice */
.dm-inv header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding-bottom:1.25rem;border-bottom:1px solid var(--p-line)}
.dm-inv header>div:first-child{display:flex;align-items:center;gap:.7rem;font:700 1.05rem var(--display)}
.dm-inv-no{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;margin-right:2.5rem}
.dm-inv-no h2{font:700 1.4rem/1 var(--display)}
.dm-inv-no small{color:var(--p-text-3);font:500 .8rem var(--mono)}
.dm-inv-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1.25rem 0}
.dm-inv-meta dt{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--p-text-3)}
.dm-inv-meta dd{margin-top:.25rem;font-size:.9rem}
.dm-inv .dm-table th,.dm-inv .dm-table td{padding-left:0;padding-right:0}
.dm-inv .dm-table td:nth-child(2),.dm-inv .dm-table th:nth-child(2){text-align:center}
.dm-inv tfoot td{padding-top:1rem;font:700 1.15rem var(--display);border:0}
.dm-inv .dm-foot{margin-top:1rem}

/* Phones and small laptops */
@media (max-width:1100px){
  .dm-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-brand-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dm-sites{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-search span,.dm-search kbd{display:none}
}
@media (max-width:900px){
  .dm-app,.dm[data-layout="rail"] .dm-app{grid-template-columns:1fr}
  .dm-side{position:fixed;left:0;top:52px;bottom:0;z-index:40;width:280px;transform:translateX(-100%);transition:transform .35s var(--ease);box-shadow:30px 0 60px -30px rgba(0,0,0,.8)}
  .dm.nav-open .dm-side{transform:none}
  .dm[data-layout="rail"] :is(.dm-bname,.dm-who>span:last-child,.dm-nav button>span:not(.dm-count)){display:revert}
  .dm[data-layout="rail"] .dm-side-ft button{font-size:inherit}
  .dm[data-layout="rail"] .dm-nav button{justify-content:flex-start}
  .dm-burger{display:grid}
  .dm-grid2,.dm-grid3{grid-template-columns:1fr}
  .dm-stages{grid-template-columns:1fr;gap:1rem}
  .dm-stages li{padding:0 0 0 2.6rem}
  .dm-stages li::before{left:13px;right:auto;top:30px;bottom:-1rem;width:2px;height:auto}
  .dm-uptime li{grid-template-columns:1fr auto}
  .dm-cells{grid-column:1/-1;grid-row:2;height:20px}
}
@media (max-width:640px){
  .dm-ribbon{gap:.6rem;padding:0 10px}
  .dm-note span:last-child,.dm-ribbon-cta .btn-ghost{display:none}
  .dm-home img{height:32px}
  .dm-top{padding:.5rem 12px;min-height:60px}
  .dm-top small,.dm-user{display:none}
  .dm-main{padding:12px}
  .dm-view{gap:.9rem}
  .dm-hero{flex-direction:column;align-items:flex-start;padding:1.25rem;gap:1rem}
  .dm-orb{width:96px;height:96px}.dm-orb span{width:64px;height:64px}
  .dm-sites{grid-template-columns:1fr}
  .dm-grid4{grid-template-columns:1fr 1fr;gap:.75rem}
  .dm-legend{display:none}
  .dm-stat{padding:1rem}
  .dm-stat b{font-size:1.35rem}
  .dm-brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-shield{flex-direction:column;align-items:flex-start;padding:1.25rem}
  .dm-radar{width:110px;height:110px}
  .dm-bars li{grid-template-columns:1fr 2.5rem}
  .dm-bars .dm-track{grid-column:1/-1;grid-row:2}
  .dm-list li{flex-wrap:wrap;padding:.8rem 1rem}
  .dm-list li>span:nth-child(2){flex-basis:calc(100% - 52px)}
  .dm-list li .dm-btn{margin-left:52px}
  .dm-table.rows th:nth-child(2),.dm-table.rows td:nth-child(2){display:none}
  .dm-table th,.dm-table td{padding-left:1rem;padding-right:1rem}
  .dm-thread li{max-width:95%}
  .dm-inv-meta{grid-template-columns:1fr 1fr}
  .dm-pop{position:fixed;left:12px;right:12px;top:120px;width:auto}
}
@media (prefers-reduced-motion:reduce){
  .dm *,.dm *::before,.dm *::after{animation:none!important;transition:none!important}
  .dm-spark .ln,.dm-chart .ln{stroke-dashoffset:0}
}