:root {
    --portal-bg: #f6f8fb;
    --portal-panel: #fff;
    --portal-text: #172033;
    --portal-muted: #667085;
    --portal-border: rgba(23,32,51,.1);
    --portal-primary: #3157d5;
    --portal-soft: rgba(49,87,213,.09);
    --portal-radius: 1rem;
    --portal-shadow: 0 12px 32px rgba(21,33,56,.06);
}
[data-bs-theme="dark"] {
    --portal-bg: #0d1117;
    --portal-panel: #151b23;
    --portal-text: #f3f4f6;
    --portal-muted: #98a2b3;
    --portal-border: rgba(255,255,255,.1);
    --portal-soft: rgba(100,130,241,.15);
    --portal-shadow: 0 14px 38px rgba(0,0,0,.24);
}
body { background: var(--portal-bg); color: var(--portal-text); min-height: 100vh; }
.portal-app { display: grid; grid-template-columns: 15.5rem minmax(0,1fr); min-height: 100vh; }
.portal-sidebar { background: #101828; color: #fff; display: flex; flex-direction: column; min-height: 100vh; position: sticky; top: 0; height: 100vh; }
.portal-brand { align-items: center; color: #fff; display: flex; gap: .75rem; padding: 1.4rem 1.1rem; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.portal-brand-mark { align-items: center; background: linear-gradient(135deg,#6b85ea,#3157d5); border-radius: .7rem; display: flex; font-weight: 800; height: 2.3rem; justify-content: center; width: 2.3rem; }
.portal-brand strong,.portal-brand small { display:block; }
.portal-brand small { color:#98a2b3; font-size:.7rem; }
.portal-nav { display:flex; flex-direction:column; gap:.2rem; padding:1rem .75rem; }
.portal-nav-link { border-radius:.65rem; color:#cbd5e1; font-size:.86rem; padding:.72rem .8rem; text-decoration:none; }
.portal-nav-link:hover,.portal-nav-link.active { background:rgba(255,255,255,.08); color:#fff; }
.portal-sidebar-footer { margin-top:auto; padding:1rem; }
.portal-topbar { align-items:center; background:color-mix(in srgb,var(--portal-bg) 88%,transparent); backdrop-filter:blur(18px); border-bottom:1px solid var(--portal-border); display:flex; justify-content:space-between; min-height:5.1rem; padding:.8rem 2rem; position:sticky; top:0; z-index:1020; }
.portal-topbar h1 { font-size:1.4rem; margin:.1rem 0 0; }
.portal-eyebrow { color:var(--portal-primary); display:block; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.portal-main { padding:1.5rem 2rem 3rem; }
.portal-welcome { align-items:center; background:linear-gradient(135deg,var(--portal-panel),var(--portal-soft)); border:1px solid var(--portal-border); border-radius:1.25rem; box-shadow:var(--portal-shadow); display:flex; justify-content:space-between; margin-bottom:1rem; padding:1.5rem; }
.portal-welcome h2 { margin:.2rem 0 .4rem; }
.portal-welcome p { color:var(--portal-muted); margin:0; }
.portal-metric-grid { display:grid; gap:1rem; grid-template-columns:repeat(6,minmax(0,1fr)); margin-bottom:1rem; }
.portal-metric-card { background:var(--portal-panel); border:1px solid var(--portal-border); border-radius:var(--portal-radius); box-shadow:var(--portal-shadow); padding:1rem; }
.portal-metric-card span { color:var(--portal-muted); display:block; font-size:.73rem; }
.portal-metric-card strong { display:block; font-size:1.6rem; margin-top:.6rem; }
.portal-grid { display:grid; gap:1rem; grid-template-columns:2fr 1fr; }
.portal-panel { background:var(--portal-panel); border:1px solid var(--portal-border); border-radius:var(--portal-radius); box-shadow:var(--portal-shadow); padding:1.2rem; }
.portal-panel-header { align-items:center; display:flex; justify-content:space-between; margin-bottom:1rem; }
.portal-panel-header h2 { font-size:1rem; margin:0; }
.portal-project-list { display:grid; gap:.7rem; }
.portal-project-item { align-items:center; border:1px solid var(--portal-border); border-radius:.8rem; display:grid; gap:.75rem; grid-template-columns:1fr auto auto; padding:.9rem; }
.portal-project-item small { color:var(--portal-muted); display:block; }
.portal-action-card { border:1px solid var(--portal-border); border-radius:.8rem; color:inherit; padding:.9rem; text-decoration:none; }
.portal-action-card:hover { background:var(--portal-soft); }
.portal-action-card strong,.portal-action-card span { display:block; }
.portal-action-card span { color:var(--portal-muted); font-size:.75rem; margin-top:.2rem; }
.portal-empty { color:var(--portal-muted); padding:2rem 1rem; text-align:center; }
.wizard-shell { max-width:76rem; margin:0 auto; }
.wizard-intro,.wizard-content,.wizard-review { background:var(--portal-panel); border:1px solid var(--portal-border); border-radius:1.2rem; box-shadow:var(--portal-shadow); padding:1.6rem; }
.wizard-workspace { display:grid; gap:1rem; grid-template-columns:16rem minmax(0,1fr); }
.wizard-steps { background:var(--portal-panel); border:1px solid var(--portal-border); border-radius:1rem; padding:.8rem; }
.wizard-step-button { background:none; border:0; border-radius:.65rem; color:var(--portal-muted); display:block; font-size:.78rem; padding:.65rem .7rem; text-align:start; width:100%; }
.wizard-step-button.active { background:var(--portal-soft); color:var(--portal-primary); font-weight:700; }
.wizard-progress-header { align-items:flex-start; display:flex; justify-content:space-between; margin-bottom:1.2rem; }
.wizard-progress-header h2 { margin:.2rem 0; }
.wizard-progress-header p { color:var(--portal-muted); margin:0; }
.wizard-score { border:1px solid var(--portal-border); border-radius:.8rem; min-width:6rem; padding:.7rem; text-align:center; }
.wizard-score strong,.wizard-score span { display:block; }
.wizard-score strong { font-size:1.3rem; }
.wizard-score span { color:var(--portal-muted); font-size:.65rem; }
.wizard-form { display:grid; gap:1rem; }
.wizard-option-grid { display:grid; gap:.65rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
.wizard-option { border:1px solid var(--portal-border); border-radius:.75rem; padding:.8rem; }
.wizard-actions { border-top:1px solid var(--portal-border); display:flex; justify-content:space-between; margin-top:1.3rem; padding-top:1rem; }
.quote-line { align-items:center; border-bottom:1px solid var(--portal-border); display:flex; justify-content:space-between; padding:.7rem 0; }
.quote-total { font-size:1.25rem; font-weight:800; }
@media(max-width:1199px){.portal-metric-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:991.98px){.portal-app{display:block}.portal-sidebar{inset-block:0;inset-inline-start:0;position:fixed;transform:translateX(-105%);transition:.2s;z-index:1040;width:15.5rem}.portal-sidebar.open{transform:translateX(0)}[dir="rtl"] .portal-sidebar{transform:translateX(105%)}[dir="rtl"] .portal-sidebar.open{transform:translateX(0)}.portal-main,.portal-topbar{padding-inline:1rem}.wizard-workspace{grid-template-columns:1fr}.wizard-steps{display:flex;overflow:auto}.wizard-step-button{min-width:10rem}}
@media(max-width:767.98px){.portal-welcome{align-items:flex-start;flex-direction:column;gap:1rem}.portal-metric-grid{grid-template-columns:repeat(2,1fr)}.portal-grid{grid-template-columns:1fr}.wizard-option-grid{grid-template-columns:1fr}}

.portal-auth-page{align-items:center;background:radial-gradient(circle at 20% 10%,rgba(49,87,213,.15),transparent 30rem),var(--portal-bg);display:flex;justify-content:center;min-height:100vh;padding:1.2rem}.portal-auth-shell{max-width:30rem;width:100%}.portal-auth-card{background:var(--portal-panel);border:1px solid var(--portal-border);border-radius:1.2rem;box-shadow:var(--portal-shadow);overflow:hidden}.portal-auth-brand{align-items:center;background:#101828;color:#fff;display:flex;gap:.75rem;padding:1.2rem}.portal-auth-brand strong,.portal-auth-brand small{display:block}.portal-auth-brand small{color:#98a2b3;font-size:.72rem}

.portal-billing-grid { display:grid; gap:1rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
.portal-account-card { background:var(--portal-panel); border:1px solid var(--portal-border); border-radius:var(--portal-radius); padding:1.1rem; }
.portal-account-card h3 { font-size:1rem; margin:.2rem 0 1rem; }
.portal-entitlement { align-items:center; border:1px solid var(--portal-border); border-radius:.7rem; display:flex; justify-content:space-between; padding:.7rem; }
.portal-entitlement small { color:var(--portal-muted); display:block; font-size:.7rem; }
.portal-download-list { display:grid; gap:.75rem; }
.portal-download-card { align-items:center; border:1px solid var(--portal-border); border-radius:.8rem; display:grid; gap:1rem; grid-template-columns:minmax(0,1fr) auto auto; padding:.9rem; }
.portal-download-card small { color:var(--portal-muted); display:block; }
@media(max-width:767.98px){.portal-billing-grid{grid-template-columns:1fr}.portal-download-card{align-items:flex-start;grid-template-columns:1fr}}

.wizard-option-group {
    border: 1px solid var(--portal-border);
    border-radius: .85rem;
    padding: .9rem;
}
.wizard-option-group .wizard-option {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    min-height: 5rem;
}

.portal-integrations-toolbar {
    align-items: end;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
}
.portal-integrations-toolbar h2 { margin: .2rem 0 .35rem; }
.portal-integration-project-picker { min-width: min(28rem, 100%); }
.portal-integration-summary {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1rem;
}
.portal-metric-code { font-size: .82rem !important; overflow-wrap: anywhere; }
.portal-provider-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-provider-card {
    background: color-mix(in srgb, var(--portal-panel) 96%, var(--portal-soft));
    border: 1px solid var(--portal-border);
    border-radius: .9rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1rem;
}
.portal-provider-card-header { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }
.portal-provider-card h3 { font-size: 1rem; margin: .15rem 0 .25rem; }
.portal-provider-card code { color: var(--portal-muted); font-size: .7rem; overflow-wrap: anywhere; }
.portal-provider-category { color: var(--portal-primary); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portal-provider-description { color: var(--portal-muted); font-size: .78rem; margin: 0; }
.portal-provider-meta { display: flex; flex-wrap: wrap; gap: .45rem 1rem; }
.portal-provider-meta span { color: var(--portal-muted); font-size: .7rem; }
.portal-provider-capabilities { display: flex; flex-wrap: wrap; gap: .35rem; }
.portal-provider-capabilities span { background: var(--portal-soft); border-radius: 999px; color: var(--portal-primary); font-size: .64rem; padding: .28rem .5rem; }
.portal-provider-actions { display: flex; gap: .5rem; margin-top: auto; }
.portal-provider-fieldset { border: 1px solid var(--portal-border); border-radius: .85rem; padding: 1rem; }
.portal-provider-fieldset legend { float: none; font-size: .8rem; font-weight: 800; padding: 0 .35rem; width: auto; }
.portal-snapshot-details { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr 1fr; }
.portal-snapshot-details div { border: 1px solid var(--portal-border); border-radius: .75rem; padding: .75rem; }
.portal-snapshot-details dt { color: var(--portal-muted); font-size: .65rem; text-transform: uppercase; }
.portal-snapshot-details dd { font-size: .76rem; margin: .25rem 0 0; overflow-wrap: anywhere; }
@media (max-width: 991.98px) {
    .portal-integrations-toolbar { align-items: stretch; flex-direction: column; }
    .portal-integration-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-provider-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .portal-integration-summary, .portal-snapshot-details { grid-template-columns: 1fr; }
}


.layout-studio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.layout-plan-card.selected{border-color:#12b76a;box-shadow:0 0 0 2px rgba(18,183,106,.12)}.layout-quality-bar{background:var(--portal-border);border-radius:99rem;height:.45rem;overflow:hidden}.layout-quality-bar span{background:linear-gradient(90deg,#3157d5,#12b76a);display:block;height:100%}.layout-preview-token{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}.layout-preview-page{border:1px solid var(--portal-border);border-radius:.8rem;margin-bottom:1rem;padding:1rem}.layout-preview-page header{display:flex;justify-content:space-between;margin-bottom:.75rem}.layout-preview-section{background:var(--portal-soft);border-radius:.55rem;display:flex;justify-content:space-between;margin:.35rem 0;padding:.55rem .7rem}.layout-preview-section small{color:var(--portal-muted)}@media(max-width:767.98px){.layout-studio-grid{grid-template-columns:1fr}.layout-preview-section{align-items:flex-start;flex-direction:column}}


/* WebOS customer workspace v1.68 */
.webos-portal{--portal-bg:transparent;--portal-panel:var(--webos-glass);--portal-text:var(--webos-ink);--portal-muted:var(--webos-muted);--portal-border:var(--webos-border);--portal-primary:var(--webos-primary);--portal-soft:color-mix(in srgb,var(--webos-primary) 10%,transparent);--portal-radius:1rem;--portal-shadow:none;overflow-x:hidden}
.webos-portal .portal-app{display:block;min-height:100vh}.portal-system-bar{z-index:2050}.portal-desktop{display:block;padding-inline:clamp(.7rem,3vw,3rem)}.portal-workspace{margin-inline:auto;max-width:104rem;width:100%}.portal-window{min-height:calc(100vh - var(--webos-bar-height) - var(--webos-dock-height) - 4rem)}
.webos-portal .portal-topbar{background:color-mix(in srgb,var(--webos-glass-strong) 80%,transparent);border:0;border-bottom:1px solid var(--webos-border);min-height:3.6rem;padding:.5rem .8rem;position:sticky;top:0}.portal-window-heading{flex:1;min-width:0;text-align:center}.portal-window-heading h1{font-size:.92rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.portal-window-heading .portal-eyebrow{font-size:.52rem}.portal-window-actions{display:flex;gap:.35rem}.webos-portal .portal-main{padding:clamp(1rem,2.5vw,2.25rem)}
.webos-launchpad{background:var(--webos-glass-strong);backdrop-filter:blur(30px) saturate(160%);border:1px solid var(--webos-border);border-radius:1.25rem;box-shadow:var(--webos-shadow);color:var(--webos-ink);display:block;height:min(72vh,46rem);inset:calc(var(--webos-bar-height) + .8rem) auto auto 50%;max-width:55rem;min-height:0;opacity:0;overflow:auto;pointer-events:none;position:fixed;transform:translate(-50%,-1rem) scale(.97);transition:.18s;width:min(calc(100% - 1.5rem),55rem);z-index:2200}.webos-launchpad.open{opacity:1;pointer-events:auto;transform:translate(-50%,0) scale(1)}[dir="rtl"] .webos-launchpad{transform:translate(50%,-1rem) scale(.97)}[dir="rtl"] .webos-launchpad.open{transform:translate(50%,0) scale(1)}
.webos-launchpad-grid{display:grid;gap:.65rem;grid-template-columns:repeat(4,minmax(0,1fr));padding:1rem}.webos-launchpad .portal-nav-link{align-items:center;background:color-mix(in srgb,var(--webos-glass) 76%,transparent);border:1px solid var(--webos-border);border-radius:1rem;color:var(--webos-ink);display:flex;flex-direction:column;gap:.55rem;justify-content:center;min-height:7.5rem;padding:.8rem;text-align:center}.webos-launchpad .portal-nav-link:hover,.webos-launchpad .portal-nav-link.active{background:color-mix(in srgb,var(--webos-primary) 12%,var(--webos-glass-strong));border-color:color-mix(in srgb,var(--webos-primary) 42%,var(--webos-border));color:var(--webos-ink)}.webos-launchpad .portal-nav-link .webos-app-icon{height:3rem;width:3rem}.webos-launchpad .portal-nav-link>span:last-child{font-size:.7rem;font-weight:750;line-height:1.25}
.portal-dock .webos-dock-app.active span{background:linear-gradient(145deg,var(--webos-primary),#8a63ff);color:#fff}.portal-dock .webos-dock-app.active::after{background:var(--webos-primary);border-radius:50%;bottom:.15rem;content:"";height:.25rem;position:absolute;width:.25rem}.portal-dock .webos-dock-app{position:relative}
.webos-dashboard-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--webos-primary) 12%,var(--webos-glass-strong)),color-mix(in srgb,var(--webos-secondary) 9%,var(--webos-glass-strong)));box-shadow:none}.webos-widget{position:relative;overflow:hidden}.webos-widget-glyph{align-items:center;background:color-mix(in srgb,var(--webos-primary) 12%,transparent);border-radius:.75rem;color:var(--webos-primary);display:flex;font-size:.72rem;font-weight:900;height:1.8rem;justify-content:center;margin-bottom:.65rem;width:1.8rem}.webos-subwindow{background:color-mix(in srgb,var(--webos-glass-strong) 70%,transparent);box-shadow:none}.webos-subwindow::before{background:linear-gradient(90deg,#ff5f57 0 .7rem,transparent .7rem .95rem,#ffbd2e .95rem 1.65rem,transparent 1.65rem 1.9rem,#28c840 1.9rem 2.6rem);content:"";display:block;height:.7rem;margin-bottom:1rem;width:2.6rem}
.portal-auth-page{background:transparent}.webos-auth-desktop{align-items:center;display:flex;justify-content:center;min-height:100vh;padding:calc(var(--webos-bar-height) + 2rem) 1rem calc(var(--webos-dock-height) + 2rem)}.webos-auth .portal-auth-card{border-radius:var(--webos-radius);box-shadow:var(--webos-shadow)}.webos-auth .portal-auth-brand{background:linear-gradient(145deg,color-mix(in srgb,var(--webos-primary) 88%,#000),#1b2540)}
.webos-portal .portal-account-card,.webos-portal .portal-panel,.webos-portal .portal-metric-card,.webos-portal .wizard-intro,.webos-portal .wizard-content,.webos-portal .wizard-review,.webos-portal .wizard-steps{background:color-mix(in srgb,var(--webos-glass-strong) 72%,transparent);box-shadow:none}
@media(max-width:900px){.webos-launchpad-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.portal-window{min-height:calc(100vh - var(--webos-bar-height) - var(--webos-dock-height) - 2rem)}}
@media(max-width:620px){.webos-launchpad-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.webos-launchpad{height:calc(100vh - var(--webos-bar-height) - var(--webos-dock-height) - 2rem)}.webos-portal .portal-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-window-heading{text-align:start}.portal-window-heading .portal-eyebrow{display:none}}

/* v1.68 WebOS experience: the customer portal behaves as an accessible desktop workspace. */
:root {
    --webos-wallpaper-a: #17213d;
    --webos-wallpaper-b: #4057a6;
    --webos-wallpaper-c: #0c7674;
    --webos-glass: rgba(255,255,255,.76);
    --webos-glass-strong: rgba(255,255,255,.92);
    --webos-window-line: rgba(255,255,255,.56);
    --webos-window-shadow: 0 32px 90px rgba(8,15,32,.28);
    --webos-system-bar: rgba(8,15,31,.72);
    --webos-dock: rgba(255,255,255,.44);
}
[data-bs-theme="dark"] {
    --webos-wallpaper-a: #070b15;
    --webos-wallpaper-b: #172447;
    --webos-wallpaper-c: #0b4e50;
    --webos-glass: rgba(16,23,39,.82);
    --webos-glass-strong: rgba(16,23,39,.95);
    --webos-window-line: rgba(255,255,255,.12);
    --webos-window-shadow: 0 34px 100px rgba(0,0,0,.55);
    --webos-system-bar: rgba(3,7,16,.8);
    --webos-dock: rgba(12,19,34,.62);
}
.webos-portal-body {
    min-height: 100vh;
    overflow-x: hidden;
    padding: 2.65rem 0 6.25rem;
    background:
        radial-gradient(circle at 14% 18%, rgba(115,141,255,.68), transparent 34rem),
        radial-gradient(circle at 86% 8%, rgba(34,197,184,.46), transparent 28rem),
        linear-gradient(135deg,var(--webos-wallpaper-a),var(--webos-wallpaper-b) 52%,var(--webos-wallpaper-c) 130%);
    background-attachment: fixed;
}
.webos-portal-body::before {
    content: "";
    position: fixed;
    inset: 2.65rem 0 0;
    pointer-events: none;
    background: linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom,#000,transparent 78%);
}
.webos-system-bar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1085;
    min-height: 2.65rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: .35rem .8rem;
    color: #f8faff;
    background: var(--webos-system-bar);
    border-bottom: 1px solid rgba(255,255,255,.13);
    backdrop-filter: blur(28px) saturate(145%);
    font-size: .75rem;
}
.webos-start-button,.webos-system-button {
    appearance: none;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
}
.webos-start-button { display:flex;align-items:center;gap:.5rem;justify-self:start;padding:0; }
.webos-brand-orb { display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:.55rem;background:linear-gradient(135deg,#7588ff,#22c5b8);font-weight:900;box-shadow:0 7px 18px rgba(0,0,0,.22); }
.webos-active-application { justify-self:center;font-weight:800; }
.webos-system-actions { display:flex;align-items:center;gap:.7rem;justify-self:end; }
.webos-system-health { display:flex;align-items:center;gap:.35rem;color:#d8e2ff; }
.webos-system-health i { width:.45rem;height:.45rem;border-radius:50%;background:#41d98b;box-shadow:0 0 0 .2rem rgba(65,217,139,.14); }
.webos-system-button { width:1.9rem;height:1.9rem;border-radius:.55rem;background:rgba(255,255,255,.09); }
.webos-desktop.portal-app {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 2rem), 104rem);
    min-height: calc(100vh - 8rem);
    margin: 1.25rem auto 0;
    display: grid;
    grid-template-columns: 17rem minmax(0,1fr);
    gap: 1rem;
    background: transparent;
}
.webos-launcher-window.portal-sidebar {
    position: sticky;
    top: 3.65rem;
    height: calc(100vh - 5rem);
    min-height: 35rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 1.15rem;
    background: rgba(11,19,38,.76);
    box-shadow: 0 26px 75px rgba(0,0,0,.26);
    backdrop-filter: blur(30px) saturate(140%);
}
.webos-launcher-titlebar {
    min-height: 2.45rem;
    display: grid;
    grid-template-columns: 4rem 1fr 2rem;
    align-items: center;
    gap: .5rem;
    padding: .35rem .65rem;
    border-bottom: 1px solid rgba(255,255,255,.09);
    color: #fff;
    font-size: .7rem;
}
.webos-launcher-titlebar strong { text-align:center; }
.webos-window-lights { display:flex;gap:.35rem; }
.webos-window-lights i,.webos-window-control { width:.7rem;height:.7rem;border-radius:50%;border:0;padding:0;display:block; }
.webos-window-lights i:first-child,.webos-window-control.close { background:#ff5f57; }
.webos-window-lights i:nth-child(2),.webos-window-control.minimise { background:#febc2e; }
.webos-window-lights i:nth-child(3),.webos-window-control.maximise { background:#28c840; }
.webos-launcher-close { color:#fff;background:transparent;border:0;font-size:1.2rem; }
.webos-launcher-window .portal-brand { padding: .85rem 1rem;border-bottom:0; }
.webos-app-search { display:block;padding:.1rem .75rem .65rem; }
.webos-app-search input { width:100%;border:1px solid rgba(255,255,255,.12);border-radius:.65rem;background:rgba(255,255,255,.08);color:#fff;padding:.58rem .7rem;font-size:.76rem;outline:none; }
.webos-app-search input::placeholder { color:#98a2b3; }
.webos-app-search input:focus { border-color:#8393ff;box-shadow:0 0 0 .18rem rgba(131,147,255,.16); }
.webos-launcher-window .portal-nav { overflow:auto;padding:.25rem .65rem 1rem; }
.webos-launcher-window .portal-nav-link { display:flex;align-items:center;gap:.7rem;padding:.62rem .7rem;border-radius:.7rem; }
.portal-nav-icon { flex:0 0 1.85rem;display:grid;place-items:center;width:1.85rem;height:1.85rem;border-radius:.55rem;background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.06));color:#fff;font-size:.84rem; }
.portal-nav-link.active .portal-nav-icon { background:linear-gradient(135deg,#7185ff,#3f58d2); }
.portal-nav-link[hidden] { display:none!important; }
.webos-workspace.portal-workspace { min-width:0;position:relative; }
.webos-desktop-shortcuts { display:grid;grid-template-columns:repeat(4,5rem);gap:.45rem;margin:0 0 .75rem .2rem; }
.webos-desktop-shortcuts a { display:grid;justify-items:center;gap:.25rem;color:#fff;text-decoration:none;text-align:center;text-shadow:0 1px 7px rgba(0,0,0,.45);font-size:.62rem;padding:.35rem;border-radius:.8rem; }
.webos-desktop-shortcuts a:hover,.webos-desktop-shortcuts a:focus-visible { background:rgba(255,255,255,.12);backdrop-filter:blur(14px); }
.webos-desktop-shortcuts span { display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:.82rem;background:linear-gradient(145deg,#fff,#dce5ff);color:#3348ad;text-shadow:none;font-size:1.1rem;box-shadow:0 10px 24px rgba(0,0,0,.2); }
.webos-desktop-shortcuts small { line-height:1.15; }
.webos-window.portal-primary-window {
    overflow: hidden;
    min-height: calc(100vh - 9.3rem);
    border: 1px solid var(--webos-window-line);
    border-radius: 1.2rem;
    background: var(--webos-glass);
    box-shadow: var(--webos-window-shadow);
    backdrop-filter: blur(34px) saturate(145%);
    transition: width .2s ease, height .2s ease, transform .2s ease, opacity .2s ease;
}
.webos-window.portal-primary-window.is-maximised { position:fixed;z-index:1075;inset:3.2rem .75rem 5.4rem;border-radius:1rem;min-height:0; }
.webos-window.portal-primary-window.is-minimised .webos-window-content { display:none; }
.webos-window.portal-primary-window.is-minimised { min-height:auto; }
.webos-window-titlebar.portal-topbar { position:relative;top:auto;z-index:5;min-height:3.55rem;display:grid;grid-template-columns:5rem 1fr 5rem;gap:1rem;padding:.48rem .8rem;background:color-mix(in srgb,var(--webos-glass-strong) 82%,transparent);border-bottom:1px solid var(--portal-border);backdrop-filter:blur(25px); }
.webos-window-controls { display:flex;align-items:center;gap:.42rem; }
.webos-window-control { cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09); }
.webos-window-control:focus-visible { outline:2px solid #fff;outline-offset:2px; }
.webos-window-heading { min-width:0;text-align:center; }
.webos-window-heading h1 { margin:.05rem 0;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.webos-window-heading .portal-eyebrow { font-size:.56rem; }
.webos-menu-button { justify-self:end;border:1px solid var(--portal-border);border-radius:.6rem;background:var(--portal-panel);color:var(--portal-text);padding:.35rem .65rem;font-size:.72rem; }
.webos-window-content.portal-main { min-height:calc(100vh - 13rem);padding:1.25rem 1.5rem 2rem;background:color-mix(in srgb,var(--portal-bg) 72%,transparent);overflow:auto; }
.webos-window-content .portal-panel,.webos-window-content .portal-metric-card,.webos-window-content .portal-account-card,.webos-window-content .wizard-intro,.webos-window-content .wizard-content,.webos-window-content .wizard-review,.webos-window-content .wizard-steps { background:color-mix(in srgb,var(--portal-panel) 90%,transparent);backdrop-filter:blur(16px); }
.webos-dock {
    position: fixed;
    z-index: 1090;
    inset: auto 50% .8rem auto;
    transform: translateX(50%);
    display: flex;
    align-items: end;
    gap: .4rem;
    padding: .48rem .6rem;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 1.25rem;
    background: var(--webos-dock);
    box-shadow: 0 18px 55px rgba(0,0,0,.28);
    backdrop-filter: blur(28px) saturate(155%);
}
.webos-dock a { min-width:3rem;display:grid;justify-items:center;gap:.12rem;color:#172033;text-decoration:none; }
.webos-dock a span { display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:.82rem;background:linear-gradient(145deg,#fff,#dce5ff);box-shadow:0 9px 20px rgba(15,23,42,.2);font-size:1.05rem;transition:.16s ease; }
.webos-dock a small { max-width:4.5rem;color:#fff;font-size:.54rem;text-align:center;text-shadow:0 1px 5px rgba(0,0,0,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.webos-dock a:hover span,.webos-dock a:focus-visible span,.webos-dock a.active span { transform:translateY(-.35rem) scale(1.08); }
.webos-dock a.active span { box-shadow:0 0 0 .18rem rgba(255,255,255,.45),0 10px 22px rgba(15,23,42,.25); }
[dir="rtl"] .webos-dock { transform:translateX(50%); }
@media(max-width:1199px){.webos-desktop.portal-app{grid-template-columns:15.5rem minmax(0,1fr)}.webos-desktop-shortcuts{grid-template-columns:repeat(4,4.5rem)}}
@media(max-width:991.98px){
    .webos-system-bar{grid-template-columns:1fr auto}.webos-active-application{display:none}
    .webos-desktop.portal-app{display:block;width:min(calc(100% - 1rem),104rem);margin-top:.75rem}
    .webos-launcher-window.portal-sidebar{position:fixed;z-index:1100;inset:3.1rem auto 5rem .5rem;width:min(21rem,calc(100% - 1rem));height:auto;transform:translateX(-110%);transition:.2s ease}
    .webos-launcher-window.portal-sidebar.open{transform:translateX(0)}
    [dir="rtl"] .webos-launcher-window.portal-sidebar{inset-inline:auto .5rem;transform:translateX(110%)}
    [dir="rtl"] .webos-launcher-window.portal-sidebar.open{transform:translateX(0)}
    .webos-desktop-shortcuts{grid-template-columns:repeat(4,minmax(0,1fr));margin:.2rem auto .75rem;max-width:28rem}
    .webos-window.portal-primary-window{min-height:calc(100vh - 9rem)}
    .webos-window.portal-primary-window.is-maximised{inset:3.15rem .4rem 5.2rem}
    .webos-window-content.portal-main{min-height:calc(100vh - 13rem);padding:1rem}
}
@media(max-width:575.98px){
    .webos-system-actions .webos-system-health{display:none}.webos-start-button strong{display:none}
    .webos-desktop-shortcuts{gap:.15rem}.webos-desktop-shortcuts a{font-size:.54rem}.webos-desktop-shortcuts span{width:2.45rem;height:2.45rem}
    .webos-window-titlebar.portal-topbar{grid-template-columns:4rem 1fr 4rem}.webos-window-heading .portal-eyebrow{display:none}
    .webos-dock{width:calc(100% - .8rem);justify-content:space-around;padding:.4rem}.webos-dock a{min-width:auto}.webos-dock a span{width:2.35rem;height:2.35rem}.webos-dock a small{display:none}
}
@media(prefers-reduced-motion:reduce){.webos-window,.webos-dock a span,.webos-launcher-window{transition:none!important}}

/* v1.70 English WebOS workspace refinement */
.webos-v170 .portal-system-bar {
    grid-template-columns: minmax(12rem,1fr) minmax(12rem,auto) minmax(18rem,1fr);
}
.webos-v170 .webos-portal-shell {
    min-height: 100vh;
    padding-top: var(--webos-bar-height);
}
.webos-v170 .portal-desktop {
    width: min(100%, 112rem);
    margin: 0 auto;
    padding: 1rem clamp(.65rem,2vw,1.6rem) calc(var(--webos-dock-height) + 2.6rem);
}
.webos-v170 .webos-desktop-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, minmax(4.8rem, 5.5rem));
    gap: .45rem;
    margin: 0 0 .8rem .2rem;
}
.webos-v170 .webos-desktop-shortcuts a {
    display: grid;
    justify-items: center;
    gap: .28rem;
    border-radius: .8rem;
    color: #fff;
    padding: .38rem;
    font-size: .6rem;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 7px rgba(0,0,0,.48);
}
.webos-v170 .webos-desktop-shortcuts a:hover,
.webos-v170 .webos-desktop-shortcuts a:focus-visible {
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
}
.webos-v170 .webos-desktop-shortcuts a span {
    display: grid;
    place-items: center;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: .84rem;
    background: linear-gradient(145deg,#fff,#dce5ff);
    box-shadow: 0 10px 24px rgba(0,0,0,.2);
    color: #3548bd;
    font-size: 1rem;
    font-weight: 900;
    text-shadow: none;
}
.webos-v170 .portal-primary-window {
    min-height: calc(100vh - 9.6rem);
    border-radius: 1.2rem;
}
.webos-v170 .webos-window-titlebar {
    position: relative;
    top: auto;
    z-index: 5;
    min-height: 3.4rem;
    display: grid;
    grid-template-columns: 5rem minmax(0,1fr) 7rem;
    gap: .7rem;
    padding: .45rem .75rem;
    background: color-mix(in srgb,var(--webos-glass-strong) 84%,transparent);
    border-bottom: 1px solid var(--portal-border);
    backdrop-filter: blur(25px);
}
.webos-v170 .portal-window-heading {
    min-width: 0;
    text-align: center;
}
.webos-v170 .portal-window-heading h1 {
    overflow: hidden;
    margin: .03rem 0;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.webos-v170 .portal-window-actions { justify-content: flex-end; }
.webos-v170 .webos-menu-button {
    border: 1px solid var(--portal-border);
    border-radius: .62rem;
    background: var(--portal-panel);
    color: var(--portal-text);
    padding: .38rem .65rem;
    font-size: .68rem;
    font-weight: 750;
}
.webos-v170 .portal-main {
    min-height: calc(100vh - 13rem);
    padding: 1.25rem 1.45rem 2rem;
    background: color-mix(in srgb,var(--portal-bg) 76%,transparent);
    overflow: auto;
}
.webos-v170 .portal-sidebar {
    position: fixed;
    z-index: 2600;
    inset: calc(var(--webos-bar-height) + .55rem) auto calc(var(--webos-dock-height) + .65rem) .75rem;
    width: min(22rem,calc(100% - 1.5rem));
    height: auto;
    min-height: 0;
    overflow: hidden;
    transform: translateX(calc(-100% - 1.5rem));
    transition: transform .2s ease;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 1.15rem;
    background: rgba(11,19,38,.88);
    box-shadow: 0 30px 90px rgba(0,0,0,.38);
    color: #fff;
    backdrop-filter: blur(30px) saturate(145%);
}
.webos-v170 .portal-sidebar.open { transform: translateX(0); }
.webos-v170 .webos-launcher-header { color: #fff; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.webos-v170 .webos-launcher-search {
    display: grid;
    grid-template-columns: 1.8rem 1fr;
    align-items: center;
    margin: .75rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: .72rem;
    background: rgba(255,255,255,.08);
    color: #b8c1d5;
}
.webos-v170 .webos-launcher-search span { text-align: center; }
.webos-v170 .webos-launcher-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    padding: .62rem .6rem .62rem 0;
    font-size: .72rem;
}
.webos-v170 .webos-launcher-search input::placeholder { color: #98a2b3; }
.webos-v170 .portal-nav {
    display: block;
    max-height: calc(100vh - 12rem);
    overflow: auto;
    padding: 0 .65rem 1rem;
}
.webos-v170 .webos-launcher-group { margin-top: .65rem; }
.webos-v170 .webos-launcher-group h2 {
    margin: 0 0 .35rem;
    padding: 0 .55rem;
    color: #8d99b2;
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.webos-v170 .webos-launchpad-app {
    display: grid;
    grid-template-columns: 2.55rem 1fr;
    align-items: center;
    gap: .65rem;
    margin-bottom: .25rem;
    padding: .58rem;
    border: 1px solid transparent;
    border-radius: .75rem;
    color: #e5eaf5;
}
.webos-v170 .webos-launchpad-app:hover,
.webos-v170 .webos-launchpad-app.active {
    border-color: rgba(255,255,255,.1);
    background: rgba(255,255,255,.09);
    color: #fff;
}
.webos-v170 .webos-launchpad-app .webos-app-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .72rem;
    font-size: .76rem;
}
.webos-v170 .webos-launchpad-app strong,
.webos-v170 .webos-launchpad-app small { display: block; }
.webos-v170 .webos-launchpad-app strong { font-size: .7rem; }
.webos-v170 .webos-launchpad-app small { margin-top: .08rem; color: #a8b2c8; font-size: .55rem; }
.webos-v170 [data-webos-app][hidden] { display: none !important; }

.portal-command-center {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(22rem,.75fr);
    gap: 1.4rem;
    margin-bottom: 1rem;
    padding: clamp(1.25rem,2.6vw,2.2rem);
    border: 1px solid var(--portal-border);
    border-radius: 1.2rem;
    background:
        radial-gradient(circle at 88% 12%,color-mix(in srgb,var(--portal-primary) 18%,transparent),transparent 18rem),
        linear-gradient(135deg,color-mix(in srgb,var(--portal-panel) 95%,transparent),color-mix(in srgb,var(--portal-soft) 70%,var(--portal-panel)));
    box-shadow: var(--portal-shadow);
}
.portal-command-copy h2 {
    max-width: 15ch;
    margin: .4rem 0 .65rem;
    font-size: clamp(1.9rem,3.6vw,3.7rem);
    line-height: .98;
    letter-spacing: -.045em;
}
.portal-command-copy p { max-width: 58ch; color: var(--portal-muted); line-height: 1.65; }
.portal-command-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.15rem; }
.portal-command-pipeline {
    align-self: center;
    display: grid;
    gap: .42rem;
    padding: .65rem;
    border: 1px solid var(--portal-border);
    border-radius: 1rem;
    background: color-mix(in srgb,var(--portal-panel) 90%,transparent);
    box-shadow: var(--portal-shadow);
}
.portal-command-pipeline div {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: center;
    gap: .55rem;
    min-height: 3.15rem;
    padding: .45rem .55rem;
    border-bottom: 1px solid var(--portal-border);
}
.portal-command-pipeline div:last-child { border-bottom: 0; }
.portal-command-pipeline span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: .58rem; background: var(--portal-soft); color: var(--portal-primary); font-size: .57rem; font-weight: 900; }
.portal-command-pipeline strong { font-size: .69rem; }
.portal-command-pipeline small { color: var(--portal-muted); font-size: .56rem; }
.webos-v170 .webos-widget-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.webos-v170 .webos-widget {
    display: grid;
    grid-template-columns: 2.6rem 1fr auto;
    align-items: center;
    gap: .7rem;
    min-height: 5rem;
}
.webos-v170 .webos-widget-glyph {
    display: grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: .78rem;
    background: linear-gradient(145deg,var(--portal-soft),color-mix(in srgb,var(--portal-primary) 18%,transparent));
    color: var(--portal-primary);
    font-weight: 900;
}
.webos-v170 .webos-widget div span,
.webos-v170 .webos-widget div small { display: block; }
.webos-v170 .webos-widget div span { color: var(--portal-text); font-weight: 800; }
.webos-v170 .webos-widget div small { margin-top: .1rem; color: var(--portal-muted); font-size: .57rem; }
.webos-v170 .webos-widget > strong { margin: 0; font-size: 1.45rem; }
.portal-dashboard-grid { grid-template-columns: minmax(0,1.45fr) minmax(20rem,.7fr); }
.portal-quick-grid { display: grid; gap: .55rem; }
.portal-quick-grid .portal-action-card { display: grid; grid-template-columns: 2.45rem 1fr; align-items: center; gap: .65rem; }
.portal-quick-grid .portal-action-card > span { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .7rem; background: var(--portal-soft); color: var(--portal-primary); font-weight: 900; }
.portal-quick-grid .portal-action-card strong,
.portal-quick-grid .portal-action-card small { display: block; }
.portal-surface-strip {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .7rem;
    margin-top: 1rem;
}
.portal-surface-strip div { display: grid; grid-template-columns: 2rem 1fr; gap: .05rem .6rem; padding: 1rem; border: 1px solid var(--portal-border); border-radius: .9rem; background: color-mix(in srgb,var(--portal-panel) 90%,transparent); box-shadow: var(--portal-shadow); }
.portal-surface-strip span { grid-row: span 2; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: .55rem; background: var(--portal-soft); color: var(--portal-primary); font-size: .56rem; font-weight: 900; }
.portal-surface-strip strong { font-size: .72rem; }
.portal-surface-strip small { color: var(--portal-muted); font-size: .58rem; }

.webos-v170 .portal-auth-shell { max-width: none; }
.webos-v170 .portal-auth-card { border-radius: 1.2rem; }
.webos-v170 .portal-auth-brand { background: color-mix(in srgb,#101828 96%,transparent); }

@media(max-width:1199px){
    .webos-v170 .portal-system-bar { grid-template-columns:minmax(12rem,1fr) auto; }
    .webos-v170 .portal-system-bar .webos-active-application { display:none; }
    .portal-command-center { grid-template-columns:1fr; }
    .portal-command-pipeline { max-width:42rem; }
}
@media(max-width:991.98px){
    .webos-v170 .portal-desktop { padding-top:.7rem; }
    .webos-v170 .webos-desktop-shortcuts { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:30rem; margin-inline:auto; }
    .webos-v170 .portal-primary-window { min-height:calc(100vh - 9rem); }
    .webos-v170 .webos-widget-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .portal-dashboard-grid { grid-template-columns:1fr; }
}
@media(max-width:767.98px){
    .webos-v170 .portal-main { padding:1rem; }
    .webos-v170 .webos-widget-grid,
    .portal-surface-strip { grid-template-columns:1fr; }
    .webos-v170 .webos-window-titlebar { grid-template-columns:4rem 1fr 5.8rem; }
    .portal-command-copy h2 { font-size:2.5rem; }
}
@media(max-width:575.98px){
    .webos-v170 .webos-desktop-shortcuts { grid-template-columns:repeat(4,1fr); gap:.2rem; }
    .webos-v170 .webos-desktop-shortcuts a { font-size:.52rem; }
    .webos-v170 .webos-desktop-shortcuts a span { width:2.4rem; height:2.4rem; }
    .portal-command-actions { display:grid; }
    .portal-command-actions .btn { width:100%; }
    .webos-v170 .webos-widget { grid-template-columns:2.4rem 1fr auto; }
}

.webos-v170.webos-portal .portal-system-bar { color:#fff; background:rgba(10,22,52,.94); border-bottom-color:rgba(255,255,255,.12); }
.webos-v170.webos-portal .portal-system-bar .webos-active-application,
.webos-v170.webos-portal .portal-system-bar .webos-system-brand,
.webos-v170.webos-portal .portal-system-bar .webos-clock { color:#fff; }
.webos-v170.webos-portal .portal-system-bar .webos-active-application small,
.webos-v170.webos-portal .portal-system-bar .webos-system-brand small,
.webos-v170.webos-portal .portal-system-bar .webos-clock,
.webos-v170.webos-portal .portal-system-bar .webos-system-health { color:#b8c4dc; }
.webos-v170.webos-portal .portal-system-bar .webos-command-button,
.webos-v170.webos-portal .portal-system-bar .webos-icon-button { color:#fff; border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.09); }
.webos-v170.webos-portal .portal-system-bar .webos-command-button kbd { color:#dce4f5; border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.08); }
