/* ============================================================ DALGA CONTROL ROOM — account area design system Tokens are authored for BOTH polarities. The live build keys dark off html[data-dracula-scheme="dark"]; here it is [data-theme] + prefers-color-scheme so the comp behaves the same. ============================================================ */ .dl-app{ /* — surfaces (light) — */ --dl-canvas:#f2f2f8; --dl-surface:#ffffff; --dl-surface-2:#f7f7fc; --dl-surface-3:#eeedf7; --dl-rail:#ffffff; --dl-line:#e4e2f0; --dl-line-soft:#eeedf6; /* — ink — */ --dl-text:#1a1836; --dl-text-2:#5a5775; --dl-text-3:#8a87a0; --dl-text-inv:#ffffff; /* — brand — */ --dl-accent:#6050dc; --dl-accent-hover:#5443d4; --dl-accent-press:#4a39c4; --dl-accent-ink:#4a3bc0; --dl-accent-soft:rgba(96,80,220,.10); --dl-accent-line:rgba(96,80,220,.28); --dl-on-accent:#ffffff; /* — semantic — */ --dl-ok:#0f9d76; --dl-ok-soft:rgba(15,157,118,.11); --dl-ok-line:rgba(15,157,118,.26); --dl-info:#0b8bb0; --dl-info-soft:rgba(11,139,176,.11); --dl-info-line:rgba(11,139,176,.26); --dl-warn:#a86a05; --dl-warn-soft:rgba(245,166,35,.15); --dl-warn-line:rgba(245,166,35,.4); --dl-danger:#c9365a; --dl-danger-soft:rgba(201,54,90,.10);--dl-danger-line:rgba(201,54,90,.24); --dl-neutral-soft:rgba(90,87,117,.10); --dl-neutral-line:rgba(90,87,117,.2); /* — depth: offset + blur, never a flat halo — */ --dl-sh-1:0 1px 2px rgba(26,24,54,.07), 0 1px 1px rgba(26,24,54,.04); --dl-sh-2:0 2px 4px rgba(26,24,54,.06), 0 10px 24px -12px rgba(26,24,54,.22); --dl-sh-3:0 4px 8px rgba(26,24,54,.08), 0 24px 48px -20px rgba(26,24,54,.3); --dl-ring:0 0 0 2px var(--dl-canvas), 0 0 0 4px var(--dl-accent); /* — geometry — */ --dl-r-xs:6px; --dl-r-sm:9px; --dl-r:12px; --dl-r-lg:16px; --dl-r-xl:20px; --dl-r-pill:999px; /* — type — */ --dl-f-ui:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --dl-f-display:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* — motion — */ --dl-ease:cubic-bezier(.2,.7,.3,1); --dl-t-fast:130ms; --dl-t:180ms; --dl-t-slow:240ms; --dl-eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E"); --dl-rail-w:250px; --dl-rail-w-mini:74px; --dl-topbar-h:60px; color-scheme:light; } /* Dark is chosen by the site-wide switch. data-dl-theme is stamped in from the same store Dracula writes, because Dracula removes its own attribute for an explicit light choice instead of setting it to "light". */ html[data-dl-theme="dark"] .dl-app, html:not([data-dl-theme])[data-dracula-scheme="dark"] .dl-app{ color-scheme:dark; --dl-canvas:#0a0919; --dl-surface:#12112e; --dl-surface-2:#171635; --dl-surface-3:#201e46; --dl-rail:#0e0d24; --dl-line:#2c2868; --dl-line-soft:#211e46; --dl-text:#eceaf8; --dl-text-2:#a7a3c8; --dl-text-3:#7d7a9c; --dl-text-inv:#0a0919; --dl-accent:#7d6ff0; --dl-accent-hover:#8d80f5; --dl-accent-press:#6c5ce7; --dl-accent-ink:#a99ff7; --dl-accent-soft:rgba(125,111,240,.16); --dl-accent-line:rgba(125,111,240,.38); --dl-ok:#3ddaad; --dl-ok-soft:rgba(61,218,173,.13); --dl-ok-line:rgba(61,218,173,.3); --dl-info:#3ecdf0; --dl-info-soft:rgba(62,205,240,.12); --dl-info-line:rgba(62,205,240,.3); --dl-warn:#f5a623; --dl-warn-soft:rgba(245,166,35,.14); --dl-warn-line:rgba(245,166,35,.36); --dl-danger:#ff7a97; --dl-danger-soft:rgba(255,122,151,.12);--dl-danger-line:rgba(255,122,151,.3); --dl-neutral-soft:rgba(167,163,200,.10); --dl-neutral-line:rgba(167,163,200,.2); --dl-sh-1:0 1px 2px rgba(0,0,0,.5), 0 1px 1px rgba(0,0,0,.3); --dl-sh-2:0 2px 4px rgba(0,0,0,.45), 0 12px 28px -14px rgba(0,0,0,.75); --dl-sh-3:0 6px 12px rgba(0,0,0,.5), 0 28px 56px -24px rgba(0,0,0,.85); } @media (prefers-color-scheme:dark){html:not([data-dl-theme]):not([data-dracula-scheme]) .dl-app{ color-scheme:dark; --dl-canvas:#0a0919; --dl-surface:#12112e; --dl-surface-2:#171635; --dl-surface-3:#201e46; --dl-rail:#0e0d24; --dl-line:#2c2868; --dl-line-soft:#211e46; --dl-text:#eceaf8; --dl-text-2:#a7a3c8; --dl-text-3:#7d7a9c; --dl-text-inv:#0a0919; --dl-accent:#7d6ff0; --dl-accent-hover:#8d80f5; --dl-accent-press:#6c5ce7; --dl-accent-ink:#a99ff7; --dl-accent-soft:rgba(125,111,240,.16); --dl-accent-line:rgba(125,111,240,.38); --dl-ok:#3ddaad; --dl-ok-soft:rgba(61,218,173,.13); --dl-ok-line:rgba(61,218,173,.3); --dl-info:#3ecdf0; --dl-info-soft:rgba(62,205,240,.12); --dl-info-line:rgba(62,205,240,.3); --dl-warn:#f5a623; --dl-warn-soft:rgba(245,166,35,.14); --dl-warn-line:rgba(245,166,35,.36); --dl-danger:#ff7a97; --dl-danger-soft:rgba(255,122,151,.12); --dl-danger-line:rgba(255,122,151,.3); --dl-neutral-soft:rgba(167,163,200,.10); --dl-neutral-line:rgba(167,163,200,.2); --dl-sh-1:0 1px 2px rgba(0,0,0,.5), 0 1px 1px rgba(0,0,0,.3); --dl-sh-2:0 2px 4px rgba(0,0,0,.45), 0 12px 28px -14px rgba(0,0,0,.75); --dl-sh-3:0 6px 12px rgba(0,0,0,.5), 0 28px 56px -24px rgba(0,0,0,.85); } } *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--dl-canvas);color:var(--dl-text);font-family:var(--dl-f-ui);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} /* Browser surfaces that ship with no design system — theme them. */ ::selection{background:var(--dl-accent-soft);color:var(--dl-text)} :where(input,textarea){caret-color:var(--dl-accent)} *{scrollbar-width:thin;scrollbar-color:var(--dl-line) transparent} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--dl-line);border-radius:var(--dl-r-pill);border:3px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:var(--dl-text-3);background-clip:content-box} :focus{outline:none} :focus-visible{outline:none;box-shadow:var(--dl-ring)} a{color:var(--dl-accent-ink);text-decoration-color:var(--dl-accent-line);text-underline-offset:3px} h1,h2,h3,h4{font-family:var(--dl-f-display);margin:0;letter-spacing:-.015em;line-height:1.25} p{margin:0} button{font:inherit;color:inherit} .dl-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .dl-mono{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace} /* ============================================================ ICONS */ .dl-i{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .dl-i-sm{width:16px;height:16px} .dl-i-lg{width:24px;height:24px} /* ============================================================ SHELL */ .dl-app{display:grid;grid-template-columns:var(--dl-rail-w) minmax(0,1fr);min-height:100vh} .dl-rail{position:sticky;top:var(--dl-top,0px);height:calc(100vh - var(--dl-top,0px)); background:var(--dl-rail);border-right:1px solid var(--dl-line); display:flex;flex-direction:column;z-index:40} .dl-rail-brand{display:flex;align-items:center;gap:10px;height:var(--dl-topbar-h);padding:0 18px;border-bottom:1px solid var(--dl-line-soft);flex:0 0 auto} .dl-brand-mark{width:28px;height:28px;flex:0 0 auto} .dl-brand-name{font-family:var(--dl-f-display);font-weight:700;font-size:15px;letter-spacing:-.02em;white-space:nowrap} .dl-brand-name span{color:var(--dl-text-3);font-weight:500} .dl-rail-user{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--dl-line-soft);flex:0 0 auto;min-width:0} .dl-rail-user img{width:38px;height:38px;border-radius:var(--dl-r-pill);flex:0 0 auto;background:var(--dl-surface-3);object-fit:cover} .dl-rail-user-txt{min-width:0} .dl-rail-user-name{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dl-rail-user-mail{font-size:11.5px;color:var(--dl-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dl-rail-nav{flex:1 1 auto;overflow-y:auto;padding:12px 12px 4px} .dl-nav-group{margin-bottom:4px} .dl-nav-label{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dl-text-3); padding:14px 10px 6px} .dl-nav-item{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border-radius:var(--dl-r-sm); background:transparent;border:0;cursor:pointer;color:var(--dl-text-2);font-size:13.5px;font-weight:600; text-align:left;transition:background var(--dl-t-fast) var(--dl-ease),color var(--dl-t-fast) var(--dl-ease);position:relative} .dl-nav-item:hover{background:var(--dl-surface-3);color:var(--dl-text)} .dl-nav-item[aria-current="page"]{background:var(--dl-accent-soft);color:var(--dl-accent-ink)} .dl-nav-item[aria-current="page"] .dl-i{color:var(--dl-accent)} .dl-nav-item .dl-i{color:var(--dl-text-3);transition:color var(--dl-t-fast) var(--dl-ease)} .dl-nav-item:hover .dl-i{color:var(--dl-text-2)} .dl-nav-txt{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dl-nav-count{font-size:11px;font-weight:800;color:var(--dl-text-3);font-variant-numeric:tabular-nums} .dl-nav-item[aria-current="page"] .dl-nav-count{color:var(--dl-accent-ink)} .dl-nav-dot{width:7px;height:7px;border-radius:var(--dl-r-pill);background:var(--dl-accent);flex:0 0 auto} .dl-rail-foot{flex:0 0 auto;padding:10px 12px 14px;border-top:1px solid var(--dl-line-soft);display:grid;gap:2px} /* ============================================================ TOPBAR */ .dl-main{min-width:0;display:flex;flex-direction:column} .dl-topbar{position:sticky;top:var(--dl-top,0px);z-index:30;height:var(--dl-topbar-h);flex:0 0 auto; display:flex;align-items:center;gap:12px;padding:0 22px; background:color-mix(in srgb,var(--dl-canvas) 82%,transparent);backdrop-filter:blur(12px) saturate(140%); border-bottom:1px solid var(--dl-line)} .dl-crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--dl-text-3);min-width:0} .dl-crumb b{color:var(--dl-text);font-weight:700} .dl-topbar-sp{flex:1 1 auto} .dl-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--dl-r-sm); background:transparent;border:1px solid transparent;color:var(--dl-text-2);cursor:pointer;position:relative; transition:background var(--dl-t-fast) var(--dl-ease),color var(--dl-t-fast) var(--dl-ease),border-color var(--dl-t-fast) var(--dl-ease)} .dl-iconbtn:hover{background:var(--dl-surface-3);color:var(--dl-text);border-color:var(--dl-line)} .dl-iconbtn .dl-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--dl-r-pill); background:var(--dl-accent);color:var(--dl-on-accent);font-size:10px;font-weight:800;line-height:16px;text-align:center; border:2px solid var(--dl-canvas);box-sizing:content-box} .dl-avatar-btn{width:34px;height:34px;border-radius:var(--dl-r-pill);border:1px solid var(--dl-line);padding:0;overflow:hidden; background:var(--dl-surface-3);cursor:pointer;flex:0 0 auto;transition:border-color var(--dl-t-fast) var(--dl-ease)} .dl-avatar-btn:hover{border-color:var(--dl-accent-line)} .dl-avatar-btn img{width:100%;height:100%;object-fit:cover;display:block} .dl-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;background:var(--dl-surface);border:1px solid var(--dl-line); border-radius:var(--dl-r);box-shadow:var(--dl-sh-3);padding:6px;z-index:60; opacity:0;transform:translateY(-4px) scale(.985);pointer-events:none;transform-origin:top right; transition:opacity var(--dl-t-fast) var(--dl-ease),transform var(--dl-t-fast) var(--dl-ease)} .dl-menu.dl-open{opacity:1;transform:none;pointer-events:auto} .dl-menu-hd{padding:8px 10px 9px;border-bottom:1px solid var(--dl-line-soft);margin-bottom:5px} .dl-menu-hd .dl-n{font-weight:700;font-size:13px} .dl-menu-hd .dl-e{font-size:11.5px;color:var(--dl-text-3)} .dl-menu a,.dl-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border-radius:var(--dl-r-xs); background:transparent;border:0;cursor:pointer;font-size:13px;font-weight:600;color:var(--dl-text-2); text-decoration:none;text-align:left;transition:background var(--dl-t-fast) var(--dl-ease),color var(--dl-t-fast) var(--dl-ease)} .dl-menu a:hover,.dl-menu button:hover{background:var(--dl-surface-3);color:var(--dl-text)} .dl-menu .dl-sep{height:1px;background:var(--dl-line-soft);margin:5px 0} .dl-rel{position:relative} /* ============================================================ CONTENT */ .dl-content{flex:1 1 auto;padding:26px 22px 64px;max-width:1320px;width:100%} .dl-page{display:none;animation:rise var(--dl-t-slow) var(--dl-ease) both} .dl-page.dl-on{display:block} @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}} .dl-page-hd{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:22px} .dl-page-hd h1{font-size:26px;font-weight:700} .dl-page-hd .dl-sub{color:var(--dl-text-2);font-size:13.5px;margin-top:5px;max-width:68ch} .dl-page-hd-act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} .dl-sec{margin-top:34px} .dl-sec-hd{display:flex;align-items:center;gap:12px;margin-bottom:13px} .dl-sec-hd h2{font-size:15px;font-weight:600;letter-spacing:-.005em} .dl-sec-hd .dl-c{font-size:12px;font-weight:700;color:var(--dl-text-3);font-variant-numeric:tabular-nums; background:var(--dl-neutral-soft);padding:1px 7px;border-radius:var(--dl-r-pill)} .dl-sec-hd .dl-sp{flex:1 1 auto} /* ============================================================ BUTTONS */ .dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 14px; border-radius:var(--dl-r-sm);border:1px solid var(--dl-line);background:var(--dl-surface);color:var(--dl-text); font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;text-decoration:none; transition:background var(--dl-t-fast) var(--dl-ease),border-color var(--dl-t-fast) var(--dl-ease), color var(--dl-t-fast) var(--dl-ease),transform var(--dl-t-fast) var(--dl-ease),box-shadow var(--dl-t-fast) var(--dl-ease)} .dl-btn:hover{background:var(--dl-surface-3);border-color:var(--dl-text-3)} .dl-btn:active{transform:translateY(1px)} .dl-btn-primary{background:var(--dl-accent);border-color:var(--dl-accent);color:var(--dl-on-accent);box-shadow:var(--dl-sh-1)} .dl-btn-primary:hover{background:var(--dl-accent-hover);border-color:var(--dl-accent-hover);color:var(--dl-on-accent)} .dl-btn-primary:active{background:var(--dl-accent-press)} .dl-btn-ghost{background:transparent;border-color:transparent;color:var(--dl-text-2)} .dl-btn-ghost:hover{background:var(--dl-surface-3);border-color:transparent;color:var(--dl-text)} .dl-btn-sm{height:29px;padding:0 10px;font-size:12.5px;border-radius:var(--dl-r-xs)} .dl-btn-danger{color:var(--dl-danger);border-color:var(--dl-danger-line)} .dl-btn-danger:hover{background:var(--dl-danger-soft);border-color:var(--dl-danger);color:var(--dl-danger)} .dl-btn:disabled{opacity:.45;cursor:not-allowed;transform:none} .dl-btn.dl-loading{color:transparent;pointer-events:none;position:relative} .dl-btn.dl-loading::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%; border:2px solid var(--dl-on-accent);border-top-color:transparent;animation:dl-spin .7s linear infinite} @keyframes dl-spin{to{transform:rotate(360deg)}} /* ============================================================ PANEL / CARD */ .dl-panel{background:var(--dl-surface);border:1px solid var(--dl-line);border-radius:var(--dl-r-lg);box-shadow:var(--dl-sh-1)} .dl-panel-hd{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--dl-line-soft)} .dl-panel-hd h3{font-size:14px;font-weight:600} .dl-panel-bd{padding:18px} .dl-panel-ft{padding:11px 18px;border-top:1px solid var(--dl-line-soft);display:flex;align-items:center;gap:10px} /* ============================================================ STATUS BAND */ .dl-band{position:relative;overflow:hidden;background:var(--dl-surface);border:1px solid var(--dl-line); border-radius:var(--dl-r-xl);box-shadow:var(--dl-sh-2);padding:22px 24px; display:flex;align-items:center;gap:22px;flex-wrap:wrap} /* one anchored light source — the only glow in the whole surface */ .dl-band::before{content:"";position:absolute;inset:-60% 40% 30% -20%;pointer-events:none; background:radial-gradient(60% 70% at 30% 60%,var(--dl-accent-soft),transparent 72%)} .dl-band>*{position:relative} .dl-band-av{width:52px;height:52px;border-radius:var(--dl-r-pill);border:2px solid var(--dl-surface); box-shadow:0 0 0 1px var(--dl-line),var(--dl-sh-1);object-fit:cover;background:var(--dl-surface-3);flex:0 0 auto} .dl-band-txt{min-width:260px;flex:1 1 340px} .dl-band-txt h2{font-size:19px;font-weight:600;margin-bottom:5px} .dl-band-line{font-size:13.5px;color:var(--dl-text-2);line-height:1.65} .dl-band-line b{color:var(--dl-text);font-weight:700;font-variant-numeric:tabular-nums} .dl-band-act{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto} /* ============================================================ CHIPS */ .dl-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--dl-r-pill); font-size:11.5px;font-weight:800;letter-spacing:.01em;border:1px solid transparent;white-space:nowrap} .dl-chip .dl-dot{width:6px;height:6px;border-radius:var(--dl-r-pill);background:currentColor;flex:0 0 auto} .dl-chip-ok{color:var(--dl-ok);background:var(--dl-ok-soft);border-color:var(--dl-ok-line)} .dl-chip-info{color:var(--dl-info);background:var(--dl-info-soft);border-color:var(--dl-info-line)} .dl-chip-warn{color:var(--dl-warn);background:var(--dl-warn-soft);border-color:var(--dl-warn-line)} .dl-chip-danger{color:var(--dl-danger);background:var(--dl-danger-soft);border-color:var(--dl-danger-line)} .dl-chip-neutral{color:var(--dl-text-2);background:var(--dl-neutral-soft);border-color:var(--dl-neutral-line)} .dl-chip-accent{color:var(--dl-accent-ink);background:var(--dl-accent-soft);border-color:var(--dl-accent-line)} /* filter chips */ .dl-filters{display:flex;gap:7px;flex-wrap:wrap} .dl-filter{height:29px;padding:0 12px;border-radius:var(--dl-r-pill);border:1px solid var(--dl-line);background:var(--dl-surface); color:var(--dl-text-2);font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px; transition:background var(--dl-t-fast) var(--dl-ease),color var(--dl-t-fast) var(--dl-ease),border-color var(--dl-t-fast) var(--dl-ease)} .dl-filter:hover{border-color:var(--dl-text-3);color:var(--dl-text)} .dl-filter[aria-pressed="true"]{background:var(--dl-accent);border-color:var(--dl-accent);color:var(--dl-on-accent)} .dl-filter .dl-n{font-variant-numeric:tabular-nums;opacity:.7;font-weight:800} /* ============================================================ LICENSE CARD */ .dl-lic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px} .dl-lic{background:var(--dl-surface);border:1px solid var(--dl-line);border-radius:var(--dl-r-lg);box-shadow:var(--dl-sh-1); display:flex;flex-direction:column;overflow:hidden; transition:box-shadow var(--dl-t) var(--dl-ease),border-color var(--dl-t) var(--dl-ease),transform var(--dl-t) var(--dl-ease)} .dl-lic:hover{box-shadow:var(--dl-sh-2);border-color:var(--dl-accent-line);transform:translateY(-1px)} .dl-lic-hd{display:flex;align-items:flex-start;gap:12px;padding:15px 16px 13px} .dl-lic-glyph{width:40px;height:40px;border-radius:var(--dl-r-sm);display:grid;place-items:center;flex:0 0 auto; font-family:var(--dl-f-display);font-weight:700;font-size:12.5px;letter-spacing:-.02em; background:var(--dl-accent-soft);color:var(--dl-accent-ink);border:1px solid var(--dl-accent-line)} .dl-lic-t{min-width:0;flex:1 1 auto} .dl-lic-t h3{font-size:14.5px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dl-lic-t .dl-meta{font-size:12px;color:var(--dl-text-3);margin-top:2px;font-variant-numeric:tabular-nums} .dl-lic-key{display:flex;align-items:center;gap:8px;margin:0 16px;padding:9px 11px;border-radius:var(--dl-r-sm); background:var(--dl-surface-2);border:1px solid var(--dl-line-soft)} .dl-lic-key code{flex:1 1 auto;font-size:12.5px;letter-spacing:.02em;color:var(--dl-text-2);overflow:hidden; text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace} .dl-keybtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--dl-r-xs); border:1px solid transparent;background:transparent;color:var(--dl-text-3);cursor:pointer;flex:0 0 auto; transition:background var(--dl-t-fast) var(--dl-ease),color var(--dl-t-fast) var(--dl-ease)} .dl-keybtn:hover{background:var(--dl-surface-3);color:var(--dl-text)} .dl-keybtn.dl-done{color:var(--dl-ok)} .dl-lic-rows{margin:13px 16px 0;border-top:1px solid var(--dl-line-soft)} .dl-lic-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--dl-line-soft)} .dl-lic-row:last-child{border-bottom:0} .dl-lic-row .dl-k{font-size:12px;color:var(--dl-text-3);font-weight:600;flex:0 0 96px} .dl-lic-row .dl-v{font-size:12.5px;font-weight:700;margin-left:auto;text-align:right;font-variant-numeric:tabular-nums} /* time-remaining track */ .dl-track{height:4px;border-radius:var(--dl-r-pill);background:var(--dl-neutral-soft);overflow:hidden;flex:1 1 auto;min-width:60px} .dl-track i{display:block;height:100%;border-radius:var(--dl-r-pill);background:var(--dl-ok)} .dl-track.dl-warn i{background:var(--dl-warn)} .dl-track.dl-danger i{background:var(--dl-danger)} /* device pips */ .dl-pips{display:flex;gap:4px;align-items:center} .dl-pip{width:16px;height:7px;border-radius:2px;background:var(--dl-neutral-soft);border:1px solid var(--dl-neutral-line)} .dl-pip.dl-on{background:var(--dl-accent);border-color:var(--dl-accent)} .dl-pip.dl-inf{width:auto;height:auto;border:0;background:none;color:var(--dl-accent-ink);font-weight:800;font-size:13px} .dl-lic-ft{margin-top:auto;display:flex;gap:7px;padding:13px 16px;border-top:1px solid var(--dl-line-soft);background:var(--dl-surface-2);flex-wrap:wrap} .dl-lic-ft .dl-btn{flex:1 1 auto} /* ============================================================ TABLE */ .dl-tablewrap{overflow-x:auto;border-radius:var(--dl-r-lg)} table.dl-t{width:100%;border-collapse:collapse;font-size:13px} table.dl-t th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; color:var(--dl-text-3);padding:11px 16px;background:var(--dl-surface-2);border-bottom:1px solid var(--dl-line);white-space:nowrap} table.dl-t td{padding:13px 16px;border-bottom:1px solid var(--dl-line-soft);vertical-align:middle} table.dl-t tbody tr:last-child td{border-bottom:0} table.dl-t tbody tr{transition:background var(--dl-t-fast) var(--dl-ease)} table.dl-t tbody tr:hover{background:var(--dl-surface-2)} table.dl-t .dl-r{text-align:right} td .dl-id{font-weight:700;font-variant-numeric:tabular-nums} td .dl-money{font-weight:700;font-variant-numeric:tabular-nums} td .dl-muted{color:var(--dl-text-3)} .dl-rowact{display:flex;gap:6px;justify-content:flex-end} /* stacked-card table for small screens */ .dl-stack{display:none} .dl-scard{background:var(--dl-surface);border:1px solid var(--dl-line);border-radius:var(--dl-r);padding:13px 14px;margin-bottom:9px;box-shadow:var(--dl-sh-1)} .dl-scard-hd{display:flex;align-items:center;gap:10px;margin-bottom:9px} .dl-scard-hd .dl-id{font-weight:800;font-size:13.5px} .dl-scard dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:12.5px} .dl-scard dt{color:var(--dl-text-3);font-weight:600} .dl-scard dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums} .dl-scard-ft{display:flex;gap:6px;margin-top:11px;padding-top:11px;border-top:1px solid var(--dl-line-soft)} .dl-scard-ft .dl-btn{flex:1 1 auto} /* ============================================================ LISTS */ .dl-list{display:grid} .dl-list-item{display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid var(--dl-line-soft); transition:background var(--dl-t-fast) var(--dl-ease)} .dl-list-item:last-child{border-bottom:0} .dl-list-item:hover{background:var(--dl-surface-2)} .dl-li-glyph{width:32px;height:32px;border-radius:var(--dl-r-sm);display:grid;place-items:center;flex:0 0 auto; background:var(--dl-accent-soft);color:var(--dl-accent);border:1px solid var(--dl-accent-line)} .dl-li-glyph.dl-warn{background:var(--dl-warn-soft);color:var(--dl-warn);border-color:var(--dl-warn-line)} .dl-li-glyph.dl-ok{background:var(--dl-ok-soft);color:var(--dl-ok);border-color:var(--dl-ok-line)} .dl-li-t{min-width:0;flex:1 1 auto} .dl-li-t .dl-a{font-size:13.5px;font-weight:700;line-height:1.35} .dl-li-t .dl-b{font-size:12px;color:var(--dl-text-3);margin-top:1px} .dl-li-new{width:7px;height:7px;border-radius:var(--dl-r-pill);background:var(--dl-accent);flex:0 0 auto} /* ============================================================ EMPTY / SKELETON */ .dl-empty{display:grid;justify-items:center;text-align:center;padding:54px 24px;gap:5px} .dl-empty-art{width:64px;height:64px;border-radius:var(--dl-r-lg);display:grid;place-items:center;margin-bottom:11px; background:var(--dl-surface-2);border:1px solid var(--dl-line);color:var(--dl-text-3);box-shadow:var(--dl-sh-1)} .dl-empty h3{font-size:16px;font-weight:600} .dl-empty p{font-size:13.5px;color:var(--dl-text-2);max-width:46ch;line-height:1.6} .dl-empty .dl-btn{margin-top:14px} .dl-sk{background:linear-gradient(90deg,var(--dl-surface-2) 25%,var(--dl-surface-3) 37%,var(--dl-surface-2) 63%); background-size:400% 100%;animation:shimmer 1.4s var(--dl-ease) infinite;border-radius:var(--dl-r-xs);height:12px} @keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}} .dl-sk-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--dl-line-soft)} /* ============================================================ FORMS */ .dl-form{display:grid;gap:17px;max-width:620px} .dl-frow{display:grid;gap:15px;grid-template-columns:1fr 1fr} .dl-field{display:grid;gap:6px;min-width:0} .dl-field label{font-size:12.5px;font-weight:700;color:var(--dl-text-2)} .dl-field label .dl-req{color:var(--dl-danger)} .dl-field .dl-hint{font-size:11.5px;color:var(--dl-text-3);line-height:1.5} .dl-field .dl-err{font-size:11.5px;color:var(--dl-danger);font-weight:600;display:flex;align-items:center;gap:5px} .dl-input{height:38px;padding:0 12px;border-radius:var(--dl-r-sm);border:1px solid var(--dl-line);background:var(--dl-surface-2); color:var(--dl-text);font:inherit;font-size:13.5px;width:100%; transition:border-color var(--dl-t-fast) var(--dl-ease),background var(--dl-t-fast) var(--dl-ease),box-shadow var(--dl-t-fast) var(--dl-ease)} .dl-input::placeholder{color:var(--dl-text-3)} .dl-input:hover{border-color:var(--dl-text-3)} .dl-input:focus{border-color:var(--dl-accent);background:var(--dl-surface);box-shadow:0 0 0 3px var(--dl-accent-soft);outline:none} .dl-input:disabled{opacity:.55;cursor:not-allowed} .dl-input[aria-invalid="true"]{border-color:var(--dl-danger);background:var(--dl-danger-soft)} .dl-input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--dl-danger-soft)} select.dl-input{appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--dl-text-3) 50%),linear-gradient(135deg,var(--dl-text-3) 50%,transparent 50%); background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px;background-size:5px 5px,5px 5px;background-repeat:no-repeat} fieldset{border:1px solid var(--dl-line);border-radius:var(--dl-r);padding:16px 18px 18px;margin:0} legend{font-size:12.5px;font-weight:800;padding:0 7px;color:var(--dl-text-2)} .dl-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13px;color:var(--dl-text-2);line-height:1.5} .dl-check input{appearance:none;width:17px;height:17px;flex:0 0 auto;margin-top:1px;border-radius:5px;border:1.5px solid var(--dl-line); background:var(--dl-surface-2);cursor:pointer;transition:background var(--dl-t-fast) var(--dl-ease),border-color var(--dl-t-fast) var(--dl-ease)} .dl-check input:checked{background:var(--dl-accent);border-color:var(--dl-accent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E"); background-size:13px;background-position:center;background-repeat:no-repeat} .dl-check input:focus-visible{box-shadow:var(--dl-ring)} .dl-avgrid{display:flex;flex-wrap:wrap;gap:11px} .dl-avopt{cursor:pointer;position:relative;border-radius:var(--dl-r-pill);display:block} .dl-avopt input{position:absolute;opacity:0;width:0;height:0} .dl-avopt img{width:56px;height:56px;border-radius:var(--dl-r-pill);display:block;background:var(--dl-surface-3);object-fit:cover; box-shadow:0 0 0 2px var(--dl-line);transition:box-shadow var(--dl-t-fast) var(--dl-ease),transform var(--dl-t-fast) var(--dl-ease)} .dl-avopt:hover img{transform:translateY(-2px);box-shadow:0 0 0 2px var(--dl-text-3)} .dl-avopt input:checked+img{box-shadow:0 0 0 2px var(--dl-surface),0 0 0 4px var(--dl-accent)} .dl-avopt input:focus-visible+img{box-shadow:0 0 0 2px var(--dl-surface),0 0 0 4px var(--dl-accent)} /* ============================================================ NOTE / CALLOUT */ .dl-note{display:flex;gap:11px;padding:13px 15px;border-radius:var(--dl-r);border:1px solid var(--dl-line);background:var(--dl-surface-2);font-size:13px;line-height:1.6;color:var(--dl-text-2)} .dl-note .dl-i{color:var(--dl-text-3);margin-top:1px} .dl-note b{color:var(--dl-text);font-weight:700} .dl-note-warn{background:var(--dl-warn-soft);border-color:var(--dl-warn-line);color:var(--dl-text)} .dl-note-warn .dl-i{color:var(--dl-warn)} .dl-note-accent{background:var(--dl-accent-soft);border-color:var(--dl-accent-line);color:var(--dl-text)} .dl-note-accent .dl-i{color:var(--dl-accent)} /* ============================================================ DRAWER */ .dl-scrim{position:fixed;inset:0;background:rgba(6,5,20,.55);backdrop-filter:blur(3px);z-index:70;opacity:0;pointer-events:none; transition:opacity var(--dl-t) var(--dl-ease)} .dl-scrim.dl-open{opacity:1;pointer-events:auto} .dl-drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--dl-surface);border-left:1px solid var(--dl-line); box-shadow:var(--dl-sh-3);z-index:80;display:flex;flex-direction:column; transform:translateX(102%);transition:transform var(--dl-t-slow) var(--dl-ease)} .dl-drawer.dl-open{transform:none} .dl-drawer-hd{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--dl-line)} .dl-drawer-hd h3{font-size:15px;font-weight:600;flex:1 1 auto;min-width:0} .dl-drawer-bd{flex:1 1 auto;overflow-y:auto;padding:16px 18px} .dl-drawer-ft{padding:13px 18px;border-top:1px solid var(--dl-line);display:flex;gap:8px} .dl-dev{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--dl-line-soft)} .dl-dev:last-child{border-bottom:0} .dl-dev-g{width:34px;height:34px;border-radius:var(--dl-r-sm);display:grid;place-items:center;flex:0 0 auto; background:var(--dl-surface-2);border:1px solid var(--dl-line);color:var(--dl-text-2)} .dl-dev-t{flex:1 1 auto;min-width:0} .dl-dev-t .dl-a{font-size:13px;font-weight:700} .dl-dev-t .dl-b{font-size:11.5px;color:var(--dl-text-3);font-variant-numeric:tabular-nums} /* ============================================================ TOAST */ .dl-toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:200;display:grid;gap:8px;justify-items:center} .dl-toast{display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:var(--dl-r-pill); background:var(--dl-surface);border:1px solid var(--dl-line);box-shadow:var(--dl-sh-3);font-size:13px;font-weight:700; animation:pop var(--dl-t-slow) var(--dl-ease) both} .dl-toast .dl-i{color:var(--dl-ok)} @keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}} /* ============================================================ MISC */ .dl-grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;align-items:start} .dl-stat-inline{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--dl-text-2);font-weight:600} .dl-hr{height:1px;background:var(--dl-line-soft);margin:24px 0} .dl-dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;font-size:13.5px;margin:0} .dl-dl dt{color:var(--dl-text-3);font-weight:600} .dl-dl dd{margin:0;font-weight:600} .dl-railtoggle{display:none} .dl-only-mini{display:none} /* ============================================================ RESPONSIVE */ @media (max-width:1180px){ .dl-app{grid-template-columns:var(--dl-rail-w-mini) minmax(0,1fr)} .dl-rail{width:var(--dl-rail-w-mini)} .dl-rail .dl-brand-name,.dl-rail .dl-rail-user-txt,.dl-rail .dl-nav-txt,.dl-rail .dl-nav-count,.dl-rail .dl-nav-label{display:none} .dl-rail-brand{justify-content:center;padding:0} .dl-rail-user{justify-content:center;padding:14px 0} .dl-nav-item{justify-content:center;padding:10px} .dl-nav-group{border-top:1px solid var(--dl-line-soft);padding-top:8px;margin-top:8px} .dl-nav-group:first-child{border-top:0;padding-top:0;margin-top:0} .dl-nav-dot{position:absolute;top:6px;right:9px} .dl-grid-2{grid-template-columns:1fr} } @media (max-width:860px){ .dl-app{grid-template-columns:1fr} .dl-railtoggle{display:inline-flex} .dl-rail{position:fixed;top:var(--dl-top,0px);left:0;width:var(--dl-rail-w);height:calc(100vh - var(--dl-top,0px));transform:translateX(-102%); transition:transform var(--dl-t-slow) var(--dl-ease);box-shadow:var(--dl-sh-3)} .dl-rail.dl-open{transform:none} .dl-rail .dl-brand-name,.dl-rail .dl-rail-user-txt,.dl-rail .dl-nav-txt,.dl-rail .dl-nav-count,.dl-rail .dl-nav-label{display:block} .dl-rail .dl-nav-label{display:block} .dl-rail-brand{justify-content:flex-start;padding:0 18px} .dl-rail-user{justify-content:flex-start;padding:16px 18px} .dl-nav-item{justify-content:flex-start;padding:8px 10px} .dl-nav-group{border-top:0;padding-top:0;margin-top:0} .dl-nav-dot{position:static} .dl-content{padding:20px 15px 72px} .dl-topbar{padding:0 14px} .dl-band{padding:18px;gap:16px} .dl-band-act{margin-left:0;width:100%} .dl-band-act .dl-btn{flex:1 1 auto} .dl-page-hd h1{font-size:22px} .dl-tablewrap{display:none} .dl-stack{display:block} .dl-lic-grid{grid-template-columns:1fr} .dl-frow{grid-template-columns:1fr} .dl-drawer{width:100%} } /* ============================================================ SITE INTEGRATION The account area is a self-contained app shell: it takes over the viewport, hides the marketing header/footer, and neutralises the WooCommerce / Elementor / third-party styling that would otherwise leak into it. ============================================================ */ body.dalga-account-page{overflow-x:hidden} /* Signed in, the account area is a self-contained app and takes over the viewport. Signed out, the sign-in screen keeps the site's header and footer like any other page — hence the :not(.dalga-account-auth). */ body.dalga-account-page:not(.dalga-account-auth) [data-elementor-type="header"], body.dalga-account-page:not(.dalga-account-auth) [data-elementor-type="footer"], body.dalga-account-page:not(.dalga-account-auth) .site-header, body.dalga-account-page:not(.dalga-account-auth) .site-footer{display:none!important} /* Break the shell out of Elementor's boxed content column. */ body.dalga-account-page .elementor-widget-woocommerce-my-account, body.dalga-account-page .elementor-widget-shortcode, body.dalga-account-page .elementor-widget-container, body.dalga-account-page .woocommerce, body.dalga-account-page .woocommerce-account .woocommerce{margin:0!important;padding:0!important} body.dalga-account-page:not(.dalga-account-auth) .elementor-section-wrap>.elementor-section, body.dalga-account-page:not(.dalga-account-auth) .elementor-element>.elementor-container{max-width:none!important;padding:0!important;margin:0!important} .dl-app{width:100vw;margin-left:calc(50% - 50vw);position:relative;isolation:isolate; min-height:calc(100vh - var(--dl-top,0px))} .dl-app *{box-sizing:border-box} .dl-app .hide{display:none!important} /* WooCommerce's own notices, retuned to the palette. */ .dl-app .woocommerce-message,.dl-app .woocommerce-info,.dl-app .woocommerce-error, .dl-app .woocommerce-notice,.dl-app .woocommerce-Message{ display:flex;gap:11px;align-items:flex-start;padding:13px 15px;margin:0 0 16px;border-radius:var(--dl-r); border:1px solid var(--dl-line);background:var(--dl-surface-2);color:var(--dl-text-2); font-size:13px;line-height:1.6;list-style:none} .dl-app .woocommerce-message::before,.dl-app .woocommerce-info::before, .dl-app .woocommerce-error::before{display:none} .dl-app .woocommerce-info,.dl-app .woocommerce-Message--dl-info{ background:var(--dl-accent-soft);border-color:var(--dl-accent-line);color:var(--dl-text)} .dl-app .woocommerce-error{background:var(--dl-danger-soft);border-color:var(--dl-danger-line);color:var(--dl-text)} .dl-app .woocommerce-message a,.dl-app .woocommerce-info a{color:var(--dl-accent-ink);font-weight:700} /* Anything a third-party endpoint prints (Subscriptions, Affiliate, Wordfence, the devices table) inherits the shell's type and palette. */ .dl-app .woocommerce-MyAccount-content>*{max-width:100%} .dl-app table.shop_table,.dl-app table.woocommerce-orders-table, .dl-app table.woocommerce-table,.dl-app #table-list-device,.dl-app table.table-list-devices{ width:100%;border-collapse:collapse;font-size:13px;background:var(--dl-surface); border:1px solid var(--dl-line);border-radius:var(--dl-r-lg);overflow:hidden;margin:0 0 16px} .dl-app table.shop_table th,.dl-app table.woocommerce-orders-table th, .dl-app #table-list-device th,.dl-app table.table-list-devices th{ text-align:left;font-family:var(--dl-f-ui);font-size:10.5px;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:var(--dl-text-3);padding:11px 16px;background:var(--dl-surface-2); border-bottom:1px solid var(--dl-line);border-top:0;border-left:0;border-right:0} .dl-app table.shop_table td,.dl-app table.woocommerce-orders-table td, .dl-app #table-list-device td,.dl-app table.table-list-devices td{ padding:13px 16px;border:0;border-bottom:1px solid var(--dl-line-soft);vertical-align:middle;color:var(--dl-text)} .dl-app table.shop_table tr:last-child td,.dl-app #table-list-device tr:last-child td{border-bottom:0} .dl-app table.shop_table tbody tr:hover,.dl-app #table-list-device tr:hover{background:var(--dl-surface-2)} /* Third-party buttons adopt the shell's button vocabulary. */ .dl-app .woocommerce-button,.dl-app a.button,.dl-app button.button,.dl-app input.button, .dl-app .btn-info,.dl-app .btn-danger,.dl-app .delete-serial,.dl-app .more-devices, .dl-app .dalga-ips-back,.dl-app .dalga-ips-buy-btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 14px; border-radius:var(--dl-r-sm);border:1px solid var(--dl-line);background:var(--dl-surface);color:var(--dl-text); font-family:var(--dl-f-ui);font-size:13px;font-weight:700;line-height:1;cursor:pointer;text-decoration:none; transition:background var(--dl-t-fast) var(--dl-ease),border-color var(--dl-t-fast) var(--dl-ease)} .dl-app .woocommerce-button:hover,.dl-app a.button:hover,.dl-app button.button:hover, .dl-app .btn-info:hover,.dl-app .more-devices:hover{background:var(--dl-surface-3);border-color:var(--dl-text-3)} .dl-app .woocommerce-Button,.dl-app button[type="submit"],.dl-app .dalga-ips-buy-btn{ background:var(--dl-accent);border-color:var(--dl-accent);color:var(--dl-on-accent)} .dl-app .woocommerce-Button:hover,.dl-app button[type="submit"]:hover,.dl-app .dalga-ips-buy-btn:hover{ background:var(--dl-accent-hover);border-color:var(--dl-accent-hover);color:var(--dl-on-accent)} .dl-app .btn-danger,.dl-app .delete-serial{color:var(--dl-danger);border-color:var(--dl-danger-line);background:transparent} .dl-app .btn-danger:hover,.dl-app .delete-serial:hover{background:var(--dl-danger-soft);border-color:var(--dl-danger)} /* Third-party form controls. */ .dl-app input[type="text"],.dl-app input[type="email"],.dl-app input[type="tel"], .dl-app input[type="password"],.dl-app input[type="number"],.dl-app input[type="search"], .dl-app textarea,.dl-app select{ height:38px;padding:0 12px;border-radius:var(--dl-r-sm);border:1px solid var(--dl-line); background:var(--dl-surface-2);color:var(--dl-text);font-family:var(--dl-f-ui);font-size:13.5px;width:100%; transition:border-color var(--dl-t-fast) var(--dl-ease),box-shadow var(--dl-t-fast) var(--dl-ease)} .dl-app textarea{height:auto;padding:10px 12px;min-height:96px} .dl-app input:focus,.dl-app textarea:focus,.dl-app select:focus{ border-color:var(--dl-accent);background:var(--dl-surface);box-shadow:0 0 0 3px var(--dl-accent-soft);outline:none} .dl-app label{font-family:var(--dl-f-ui);font-size:12.5px;font-weight:700;color:var(--dl-text-2)} .dl-app h1,.dl-app h2,.dl-app h3,.dl-app h4{color:var(--dl-text)} .dl-app p,.dl-app li,.dl-app td,.dl-app dd{color:var(--dl-text)} .dl-app a{color:var(--dl-accent-ink)} /* Third-party endpoint bodies sit on a panel so they never float on the canvas. */ .dl-app .dl-thirdparty{background:var(--dl-surface);border:1px solid var(--dl-line); border-radius:var(--dl-r-lg);box-shadow:var(--dl-sh-1);padding:20px} .dl-app .dl-thirdparty>h2:first-child,.dl-app .dl-thirdparty>h3:first-child{margin-top:0} /* Dalga IPs iframe. */ .dl-app .dalga-ips-frame,.dl-app #dalga-ips-frame{ width:100%;min-height:min(78vh,760px);border:1px solid var(--dl-line);border-radius:var(--dl-r-lg); background:var(--dl-surface);display:block} .dl-app .dalga-ips-view{display:grid;gap:12px} .dl-app .dalga-ips-back{justify-self:start} .dl-app .dalga-ips-loading,.dl-app .loading{ display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--dl-r); background:var(--dl-surface-2);border:1px solid var(--dl-line);color:var(--dl-text-2); font-size:13px;font-weight:600} .dl-app .dalga-ips-loading::before,.dl-app .loading::before{ content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--dl-accent); border-top-color:transparent;animation:dl-spin .7s linear infinite;flex:0 0 auto} .dl-app .alert-error{padding:13px 15px;border-radius:var(--dl-r);margin-bottom:14px; background:var(--dl-danger-soft);border:1px solid var(--dl-danger-line);color:var(--dl-text);font-size:13px} .dl-app .alert-success{padding:13px 15px;border-radius:var(--dl-r);margin-bottom:14px; background:var(--dl-ok-soft);border:1px solid var(--dl-ok-line);color:var(--dl-text);font-size:13px} @media (max-width:860px){ .dl-app .dl-thirdparty{padding:14px} } /* The legacy avatar picker renders through the edit-account hook; give it the same treatment as the rest of the form. */ .dl-app .dalga-avatar-grid{display:flex;flex-wrap:wrap;gap:11px;margin-top:10px} .dl-app .dalga-avatar-option{cursor:pointer;position:relative;display:block;border-radius:var(--dl-r-pill)} .dl-app .dalga-avatar-option input{position:absolute;opacity:0;width:0;height:0} .dl-app .dalga-avatar-option img{width:56px!important;height:56px!important;border-radius:var(--dl-r-pill);display:block; border:0!important;background:var(--dl-surface-3);object-fit:cover; box-shadow:0 0 0 2px var(--dl-line);transition:box-shadow var(--dl-t-fast) var(--dl-ease),transform var(--dl-t-fast) var(--dl-ease)} .dl-app .dalga-avatar-option:hover img{transform:translateY(-2px);box-shadow:0 0 0 2px var(--dl-text-3)} .dl-app .dalga-avatar-option input:checked+img{box-shadow:0 0 0 2px var(--dl-surface),0 0 0 4px var(--dl-accent)} .dl-app .dalga-avatar-option input:focus-visible+img{box-shadow:0 0 0 2px var(--dl-surface),0 0 0 4px var(--dl-accent)} /* Notification rows are openable. */ .dl-app .dl-notice{cursor:pointer} .dl-app .dl-notice:focus-visible{box-shadow:var(--dl-ring);border-radius:var(--dl-r-sm)} .dl-app .dl-drawer-bd p{font-size:13.5px;line-height:1.7;color:var(--dl-text-2);margin:0 0 12px} .dl-app .dl-drawer-bd :is(h1,h2,h3){font-size:15px;margin:18px 0 8px} .dl-app .dl-drawer-bd :is(h1,h2,h3):first-child{margin-top:0} .dl-app .dl-drawer-bd img{max-width:100%;height:auto;border-radius:var(--dl-r-sm)} /* Pager under the licence grid. */ .dl-app .dl-pager{display:flex;align-items:center;gap:12px;margin-top:18px} .dl-app .dl-pager-count{flex:1 1 auto;text-align:center;font-size:12.5px;font-weight:700;color:var(--dl-text-3)} /* Filter chips are links now, so they need the anchor reset. */ .dl-app a.dl-filter{text-decoration:none;color:var(--dl-text-2)} .dl-app a.dl-filter[aria-pressed="true"]{color:var(--dl-on-accent)} .dl-app .dl-filter{max-width:min(340px,60vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ============================================================ THIRD-PARTY SCREENS Wordfence, WooCommerce Subscriptions and YITH all ship light-theme CSS. Rather than let a runtime inverter guess, their surfaces are mapped onto the palette explicitly. ============================================================ */ .dl-app.dl-app .dl-thirdparty.dl-thirdparty, .dl-app.dl-app .dl-thirdparty.dl-thirdparty :is(div,span,p,li,td,th,dt,dd,label,strong,b,em,h1,h2,h3,h4,h5,h6){ color:var(--dl-text)} .dl-app.dl-app .dl-thirdparty.dl-thirdparty :is(small,.description,.wfls-sub){color:var(--dl-text-2)} /* Wordfence Login Security */ .dl-app :is(.wfls-block,.wfls-block-content,.stacked,.wfls-flex-item){ background:var(--dl-surface)!important;border-color:var(--dl-line)!important; border-radius:var(--dl-r)!important;box-shadow:none!important} .dl-app .wfls-block-header{background:var(--dl-surface-2)!important;border-color:var(--dl-line)!important; border-radius:var(--dl-r) var(--dl-r) 0 0!important} .dl-app .wfls-block-header :is(h1,h2,h3,strong){color:var(--dl-text)!important;background:transparent!important} .dl-app .wfls-notice{background:var(--dl-warn-soft)!important;border:1px solid var(--dl-warn-line)!important; color:var(--dl-text)!important;border-radius:var(--dl-r)!important} .dl-app .wfls-notice :is(a,strong){color:var(--dl-text)!important} .dl-app :is(.wfls-block,.wfls-block-content) p{background:transparent!important;color:var(--dl-text-2)!important} .dl-app .wfls-btn,.dl-app .wfls-button,.dl-app a.wfls-btn-primary,.dl-app .wfls-btn-primary{ background:var(--dl-accent)!important;border-color:var(--dl-accent)!important;color:var(--dl-on-accent)!important; border-radius:var(--dl-r-sm)!important} .dl-app .wfls-btn-default,.dl-app .wfls-btn-secondary{ background:var(--dl-surface)!important;border:1px solid var(--dl-line)!important;color:var(--dl-text)!important} /* WooCommerce Subscriptions status cell */ .dl-app :is(.subscription-status,.woocommerce-orders-table__cell-subscription-status, .order-status,.woocommerce-orders-table__cell-order-status){ background:transparent!important;color:var(--dl-text)!important;font-weight:700} .dl-app :is(.subscription-status,.woocommerce-orders-table__cell-subscription-status) mark, .dl-app :is(.order-status,.woocommerce-orders-table__cell-order-status) mark, .dl-app.dl-app .dl-thirdparty.dl-thirdparty mark{ background:var(--dl-neutral-soft)!important;color:var(--dl-text)!important; padding:1px 8px;border-radius:var(--dl-r-pill);font-size:11.5px;font-weight:800} /* YITH affiliate dashboard */ .dl-app :is(.yith-wcaf,.yith-wcaf-panel,.yith-wcaf-dashboard,.yith-wcaf-section){ background:transparent!important;color:var(--dl-text)!important} .dl-app :is(.yith-wcaf-summary__item,.yith-wcaf-box,.yith-wcaf-panel__content){ background:var(--dl-surface)!important;border:1px solid var(--dl-line)!important; border-radius:var(--dl-r)!important;color:var(--dl-text)!important} /* Anything still painting itself white inside a third-party screen. */ .dl-app.dl-app .dl-thirdparty.dl-thirdparty [style*="background:#fff"], .dl-app.dl-app .dl-thirdparty.dl-thirdparty [style*="background: #fff"], .dl-app.dl-app .dl-thirdparty.dl-thirdparty [style*="background-color:#fff"], .dl-app.dl-app .dl-thirdparty.dl-thirdparty [style*="background-color: #fff"]{ background:var(--dl-surface)!important} /* Plugin stylesheets are specific and loud; the shell's palette wins. */ .dl-app.dl-app .dl-thirdparty.dl-thirdparty :is(p,li,td,th,dt,dd,span,div,strong,b,em){color:var(--dl-text)!important} .dl-app.dl-app .dl-thirdparty.dl-thirdparty :is(h1,h2,h3,h4,h5,h6){color:var(--dl-text)!important;background:transparent!important} .dl-app.dl-app .dl-thirdparty.dl-thirdparty a:not(.dl-btn):not(.button){color:var(--dl-accent-ink)!important} .dl-app.dl-app .dl-thirdparty.dl-thirdparty :is(.description,small,.wfls-sub,.wfls-hint){color:var(--dl-text-2)!important} /* ------------------------------------------------------------------ Plugin screens paint their own surfaces — some on elements with no class at all — so every background inside a third-party screen is stripped first, then the containers worth keeping are repainted from the palette. Controls are left out of the strip so buttons, inputs and status marks keep their own fills. ------------------------------------------------------------------ */ .dl-app.dl-app .dl-thirdparty.dl-thirdparty :is(div,section,article,aside,form,fieldset,legend, ul,ol,li,table,thead,tbody,tfoot,tr,td,th,p,span,h1,h2,h3,h4,h5,h6,dl,dt,dd,figure){ background-color:transparent!important;background-image:none!important;box-shadow:none!important} .dl-app.dl-app .dl-thirdparty.dl-thirdparty :is(.wfls-block,.wfls-block-content,.stacked, .yith-wcaf-box,.yith-wcaf-summary__item,.yith-wcaf-panel__content){ background-color:var(--dl-surface)!important;border:1px solid var(--dl-line)!important; border-radius:var(--dl-r)!important} .dl-app.dl-app .dl-thirdparty.dl-thirdparty .wfls-block-header{ background-color:var(--dl-surface-2)!important;border-bottom:1px solid var(--dl-line)!important; border-radius:var(--dl-r) var(--dl-r) 0 0!important} .dl-app.dl-app .dl-thirdparty.dl-thirdparty .wfls-notice{ background-color:var(--dl-warn-soft)!important;border:1px solid var(--dl-warn-line)!important; border-radius:var(--dl-r)!important;padding:13px 15px} .dl-app.dl-app .dl-thirdparty.dl-thirdparty table:is(.shop_table,.woocommerce-orders-table,.woocommerce-table){ background-color:var(--dl-surface)!important;border:1px solid var(--dl-line)!important; border-radius:var(--dl-r-lg)!important;overflow:hidden} .dl-app.dl-app .dl-thirdparty.dl-thirdparty table th{ background-color:var(--dl-surface-2)!important;color:var(--dl-text-3)!important; font-size:10.5px!important;font-weight:800!important;letter-spacing:.09em;text-transform:uppercase} .dl-app.dl-app .dl-thirdparty.dl-thirdparty table td{border-bottom:1px solid var(--dl-line-soft)!important} /* Fieldset borders and rules that were drawn for a light ground. */ .dl-app.dl-app .dl-thirdparty.dl-thirdparty :is(fieldset,hr,.wfls-block,.wfls-block-content){border-color:var(--dl-line)!important} .dl-app.dl-app .dl-thirdparty.dl-thirdparty hr{border:0;border-top:1px solid var(--dl-line)!important} /* Form controls inside plugin screens. The strip above clears their containers; the controls themselves need the shell's field styling at a specificity plugin sheets cannot outrank. */ .dl-app.dl-app .dl-thirdparty.dl-thirdparty :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select,textarea){ background-color:var(--dl-surface-2)!important;border:1px solid var(--dl-line)!important; color:var(--dl-text)!important;border-radius:var(--dl-r-sm)!important; font-family:var(--dl-f-ui)!important;font-size:13.5px!important;padding:0 12px!important;height:38px!important; max-width:100%;box-shadow:none!important} .dl-app.dl-app .dl-thirdparty.dl-thirdparty textarea{height:auto!important;min-height:96px;padding:10px 12px!important} .dl-app.dl-app .dl-thirdparty.dl-thirdparty :is(input,select,textarea):focus{ border-color:var(--dl-accent)!important;background-color:var(--dl-surface)!important; box-shadow:0 0 0 3px var(--dl-accent-soft)!important;outline:none} .dl-app.dl-app .dl-thirdparty.dl-thirdparty ::placeholder{color:var(--dl-text-3)!important} .dl-app.dl-app .dl-thirdparty.dl-thirdparty :is(input[type="checkbox"],input[type="radio"]){ width:17px!important;height:17px!important;min-width:17px;accent-color:var(--dl-accent); background-color:var(--dl-surface-2)!important;border:1.5px solid var(--dl-line)!important} .dl-app.dl-app .dl-thirdparty.dl-thirdparty input[type="radio"]{border-radius:50%!important} /* Plugin forms were laid out against a light card; give them the shell's measure and left-aligned labels. */ .dl-app .dl-thirdparty :is(form,.become-an-affiliate-form){max-width:620px;text-align:left} .dl-app .dl-thirdparty :is(.form-row,.woocommerce-form-row,p.form-row){ display:grid;gap:6px;margin:0 0 16px;text-align:left;float:none!important;width:auto!important} .dl-app .dl-thirdparty label{display:block;text-align:left;font-size:12.5px!important;font-weight:700!important; color:var(--dl-text-2)!important;margin-bottom:2px} .dl-app .dl-thirdparty :is(.woocommerce-form__label-for-checkbox,.checkbox){ display:flex!important;align-items:flex-start;gap:9px;font-weight:600!important;color:var(--dl-text-2)!important} .dl-app .dl-thirdparty form :is(button[type="submit"],input[type="submit"]){ width:auto!important;min-width:180px} .dl-app .dl-thirdparty td .button,.dl-app .dl-thirdparty td a.button{ min-width:0!important;width:auto!important;height:29px;padding:0 10px;font-size:12.5px} /* ============================================================ AUTH SCREEN The one account page seen before the shell exists. Laid out with a plain centred column rather than place-items:center — a centred grid item sizes to its content, which collapsed the whole form to ~200px once the switcher turned this into one column. ============================================================ */ .dl-app.dl-auth{display:block;padding:56px 20px 72px;min-height:0;background:var(--dl-canvas)} body.dalga-account-auth .dl-app{min-height:0} .dl-auth-wrap{width:100%;max-width:460px;margin:0 auto;display:grid;gap:18px} .dl-auth-brand{display:flex;align-items:center;justify-content:center;gap:11px} .dl-auth-brand .dl-brand-mark{width:32px;height:32px} .dl-auth-brand .dl-brand-name{font-size:16px} .dl-auth-grid{display:grid;gap:16px;width:100%;grid-template-columns:1fr} .dl-auth-h{font-size:20px;font-weight:600;margin-bottom:5px} .dl-auth-sub{font-size:13.5px;color:var(--dl-text-2);line-height:1.6;margin-bottom:20px} .dl-auth .dl-panel-bd{padding:24px} .dl-auth .dl-form{max-width:none;width:100%} .dl-auth .dl-field{width:100%} .dl-auth-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .dl-auth-link{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--dl-accent-ink);text-decoration:none} .dl-auth-link:hover{text-decoration:underline;text-underline-offset:3px} .dl-auth .dl-btn-primary{width:100%;height:40px} .dl-auth-back{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700; color:var(--dl-text-3);text-decoration:none;justify-self:center} .dl-auth-back:hover{color:var(--dl-text-2)} .dl-auth .woocommerce-notices-wrapper:empty{display:none} .dl-auth :is(.woocommerce-message,.woocommerce-error,.woocommerce-info){width:100%;margin:0} /* WooCommerce's show/hide password control sits inside the field. */ .dl-auth .password-input,.dl-app .password-input{display:block;position:relative;width:100%} .dl-app .show-password-input{position:absolute;right:1px;top:1px;bottom:1px;width:38px; border:0;background:transparent;cursor:pointer;padding:0;border-radius:0 var(--dl-r-sm) var(--dl-r-sm) 0; color:var(--dl-text-3)} .dl-app .show-password-input::after{content:"";display:block;width:17px;height:17px;margin:0 auto; background:currentColor;-webkit-mask:var(--dl-eye) center/contain no-repeat;mask:var(--dl-eye) center/contain no-repeat} .dl-app .show-password-input:hover{color:var(--dl-text)} .dl-app .show-password-input.display-password{color:var(--dl-accent)} .dl-app .password-input .dl-input,.dl-app .password-input input{padding-right:42px!important} /* Anything a security plugin injects into the login form — Wordfence's 2FA code field arrives this way — inherits the field vocabulary so the second step of a 2FA sign-in is never left unstyled or invisible. */ .dl-auth form :is(p.form-row,.form-row,.wfls-form-row,fieldset){ display:grid;gap:6px;margin:0 0 16px;width:100%;float:none} .dl-auth form :is(p.form-row,.form-row) label{margin:0} .dl-auth form :is(input[type="text"],input[type="password"],input[type="email"], input[type="tel"],input[type="number"],select){width:100%} .dl-auth form :is(.wfls-2fa-code,#wfls-token,input[name="wfls-token"]){letter-spacing:.18em;font-size:15px} .dl-auth form :is(.wfls-notice,.wfls-block){ background:var(--dl-surface-2);border:1px solid var(--dl-line);border-radius:var(--dl-r); padding:13px 15px;margin:0 0 16px;font-size:13px;line-height:1.6;color:var(--dl-text)} /* The theme's Login / Register switcher, dressed for the shell. */ .dl-auth .login-nav-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;width:100%;max-width:440px; margin:0 auto;justify-content:space-between} .dl-auth .back-to-home{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700; color:var(--dl-text-3);text-decoration:none} .dl-auth .back-to-home:hover{color:var(--dl-text-2)} .dl-auth .form-switcher{display:inline-flex;gap:3px;padding:3px;border-radius:var(--dl-r-pill); background:var(--dl-surface-2);border:1px solid var(--dl-line)} .dl-auth .switch-btn{padding:6px 15px;border-radius:var(--dl-r-pill);font-size:12.5px;font-weight:700; color:var(--dl-text-2);text-decoration:none;transition:background var(--dl-t-fast) var(--dl-ease), color var(--dl-t-fast) var(--dl-ease)} .dl-auth .switch-btn:hover{color:var(--dl-text)} .dl-auth .switch-btn.active{background:var(--dl-accent);color:var(--dl-on-accent)} /* Register starts hidden — the switcher reveals it, and only ever shows one. */ .dl-auth .u-column2{display:none} .dl-auth .woocommerce-notices-wrapper:empty{display:none} /* ------------------------------------------------------------------ The shell owns its own ground and ink. Dracula sets a colour on for the whole site; without an explicit colour here every element that doesn't name one would inherit it, which left light mode with near-white text on white. ------------------------------------------------------------------ */ .dl-app{ background:var(--dl-canvas); color:var(--dl-text); font-family:var(--dl-f-ui); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased} .dl-app :is(h1,h2,h3,h4,h5,h6,p,span,div,li,td,th,dt,dd,label,code,b,strong,em,small,legend){color:inherit} .dl-app .dl-sub,.dl-app .dl-hint,.dl-app .dl-muted,.dl-app .dl-b, .dl-app .dl-rail-user-mail,.dl-app .dl-meta,.dl-app .dl-k{color:var(--dl-text-2)} .dl-app .dl-nav-label,.dl-app .dl-nav-count,.dl-app .dl-crumb, .dl-app .dl-pager-count,.dl-app .dl-menu-hd .dl-e{color:var(--dl-text-3)} .dl-app .dl-nav-item{color:var(--dl-text-2)} .dl-app .dl-nav-item[aria-current="page"]{color:var(--dl-accent-ink)} .dl-app .dl-crumb b{color:var(--dl-text)} .dl-app .dl-btn-primary{color:var(--dl-on-accent)} .dl-app .dl-chip{color:inherit} .dl-app .dl-chip-ok{color:var(--dl-ok)} .dl-app .dl-chip-info{color:var(--dl-info)} .dl-app .dl-chip-warn{color:var(--dl-warn)} .dl-app .dl-chip-danger{color:var(--dl-danger)} .dl-app .dl-chip-accent{color:var(--dl-accent-ink)} .dl-app .dl-chip-neutral{color:var(--dl-text-2)} .dl-app .dl-lic-glyph{color:var(--dl-accent-ink)} .dl-app .dl-lic-key code{color:var(--dl-text-2)} .dl-app a:not(.dl-btn):not(.dl-nav-item):not(.dl-filter):not(.dl-iconbtn){color:var(--dl-accent-ink)} /* ============================================================ ORDER + SUBSCRIPTION DETAIL WooCommerce and WCS render the item, totals and address tables through their own templates. They sit inside a .dl-thirdparty panel, so they inherit the strip-and-repaint treatment; these rules give them the shell's table rhythm on top of it. ============================================================ */ .dl-app .dl-thirdparty :is(table.order_details,table.subscription_details, table.woocommerce-table--order-details,table.shop_table){ margin:0!important;border:0!important;border-radius:0!important} .dl-app .dl-thirdparty :is(table.order_details,table.subscription_details) :is(th,td){ padding:12px 0!important;border-bottom:1px solid var(--dl-line-soft)!important; background-color:transparent!important} .dl-app .dl-thirdparty :is(table.order_details,table.subscription_details) thead th{ padding:0 0 10px!important;border-bottom:1px solid var(--dl-line)!important} .dl-app .dl-thirdparty :is(table.order_details,table.subscription_details) tfoot :is(th,td){ font-weight:700;border-bottom:1px solid var(--dl-line-soft)!important} .dl-app .dl-thirdparty :is(table.order_details,table.subscription_details) tfoot tr:last-child :is(th,td){ border-bottom:0!important;font-size:15px} .dl-app .dl-thirdparty td.product-name a{font-weight:700} .dl-app .dl-thirdparty td.product-name .wc-item-meta, .dl-app .dl-thirdparty td.product-name dl.variation{ margin:5px 0 0;font-size:12px;color:var(--dl-text-3)!important} .dl-app .dl-thirdparty td.product-name .wc-item-meta p{margin:0} .dl-app .dl-thirdparty :is(.product-total,.product-quantity,td.woocommerce-table__product-total){ text-align:right;font-variant-numeric:tabular-nums} /* Customer / billing address blocks. */ .dl-app .dl-thirdparty .woocommerce-customer-details, .dl-app .dl-thirdparty .woocommerce-columns--addresses{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:0} .dl-app .dl-thirdparty .woocommerce-column__title{ font-size:12.5px!important;font-weight:800!important;letter-spacing:.06em;text-transform:uppercase; color:var(--dl-text-3)!important;margin:0 0 8px} .dl-app .dl-thirdparty address{ font-style:normal;font-size:13.5px;line-height:1.7;border:0;padding:0; color:var(--dl-text)!important} /* Auto-renew toggle that WCS prints in the details table. */ .dl-app .dl-thirdparty .wcs-auto-renew-toggle{display:inline-flex;align-items:center;gap:8px} .dl-app .dl-thirdparty .subscription-auto-renew-toggle-disabled-note{ font-size:11.5px;color:var(--dl-text-3)!important} /* Related-orders table inside the subscription view. */ .dl-app .dl-thirdparty table.woocommerce-orders-table--subscriptions td{vertical-align:middle} /* The subscriptions list keeps the shell's table, so only the wrapper needs resetting. */ .dl-app .woocommerce_account_subscriptions{margin:0} /* Headings printed by WooCommerce / WCS inside a detail panel take the shell's section-heading scale instead of the theme's article scale. */ .dl-app.dl-app .dl-thirdparty.dl-thirdparty :is(h1,h2,h3){ font-family:var(--dl-f-display);font-size:15px!important;font-weight:600!important; letter-spacing:-.005em;line-height:1.3;margin:26px 0 13px!important} .dl-app.dl-app .dl-thirdparty.dl-thirdparty > :is(h1,h2,h3):first-child, .dl-app.dl-app .dl-thirdparty.dl-thirdparty .dl-panel-bd > :is(h1,h2,h3):first-child{ margin-top:0!important} .dl-app .dl-thirdparty .woocommerce-customer-details{margin-top:6px!important} .dl-app .dl-thirdparty section{margin:0} /* ============================================================ DALGA IPs BUTTON serial.js binds its handler to .dalga-ips-serial, so the class has to stay — but serial.css dresses that class in an emoji globe (::before "\1F310"), a teal-to-violet gradient and a coloured glow, all !important. The class keeps its behaviour here and loses its costume; the drawn icon in the markup is the only globe. ============================================================ */ .dl-app .dalga-ips-serial::before{content:none!important} .dl-app .dalga-ips-serial{ margin:0!important; padding:0 12px!important; font-size:12.5px!important; font-weight:700!important; letter-spacing:0!important; background:transparent!important; background-image:none!important; box-shadow:none!important; border-radius:var(--dl-r-xs)!important; transform:none!important; filter:none!important} .dl-app .dalga-ips-serial:hover{transform:none!important;filter:none!important;box-shadow:none!important} /* The one action on a card that isn't available on every licence, so it carries the accent quietly rather than shouting with a gradient. */ .dl-app .dl-btn-accent, .dl-app .dalga-ips-serial.dl-btn-accent{ background-color:var(--dl-accent-soft)!important; border:1px solid var(--dl-accent-line)!important; color:var(--dl-accent-ink)!important} .dl-app .dl-btn-accent:hover, .dl-app .dalga-ips-serial.dl-btn-accent:hover{ background-color:var(--dl-accent)!important; border-color:var(--dl-accent)!important; color:var(--dl-on-accent)!important} .dl-app .dl-btn-accent .dl-i{color:currentColor} /* On the Dalga IPs screen the pool button is the primary action. */ .dl-app .dalga-ips-serial.dl-btn-primary{ background-color:var(--dl-accent)!important; border:1px solid var(--dl-accent)!important; color:var(--dl-on-accent)!important} .dl-app .dalga-ips-serial.dl-btn-primary:hover{background-color:var(--dl-accent-hover)!important} .dl-app .dalga-ips-serial:disabled{opacity:.5;box-shadow:none!important} /* With no switcher on the page, both forms show rather than registration being unreachable. */ .dl-auth.dl-auth-no-switcher .u-column2{display:block}