:root{
  --portal-bg:#f4f6f8;
  --portal-surface:#ffffff;
  --portal-surface-soft:#f8fafc;
  --portal-border:#dfe4ea;
  --portal-text:#172033;
  --portal-muted:#667085;
  --portal-orange:#f97316;
  --portal-orange-dark:#d95d08;
  --portal-shadow:0 8px 24px rgba(15,23,42,.07);
}

html,body{background:var(--portal-bg);color:var(--portal-text);color-scheme:light}
.app-shell{background:var(--portal-bg)}
.main-area{min-height:calc(100vh - 70px);background:var(--portal-bg)}

/* Authentication intentionally stays dark over the DST artwork. */
.auth-layout{color:#f8fafc}
.auth-brand strong,.auth-copy h1,.auth-form h2{color:#f8fafc}
.auth-brand small,.auth-form .form-hint,.auth-note{color:#aeb8c5}
.auth-tab{color:#94a3b8}.auth-tab.is-active{color:#fb923c}

/* Shared customer navigation */
.store-header{border-bottom:1px solid var(--portal-border);background:rgba(255,255,255,.96);box-shadow:0 1px 8px rgba(15,23,42,.04);backdrop-filter:blur(14px)}
.store-header.scrolled{border-color:var(--portal-border);background:rgba(255,255,255,.98)}
.store-brand{color:var(--portal-text)}
.store-brand .brand-mark{border:0;background:var(--portal-orange);color:#fff;box-shadow:none}
.store-brand .brand-mark:after{display:none}
.store-brand strong{font-size:15px}.store-brand small{color:#8490a3;font-size:10px}
.side-link{color:#667085;font-size:14px;font-weight:700}
.side-link-external{text-decoration:none}
.side-link:hover,.side-link.is-active{color:var(--portal-orange-dark)}
.side-link.is-active:after{height:3px;background:var(--portal-orange)}
.icon-button,.user-menu{color:#667085}
.icon-button:hover,.user-menu:hover{border-color:var(--portal-border);background:#f8fafc;color:var(--portal-text)}
.user-menu{color:var(--portal-text);font-size:13px}
.avatar,.big-avatar{background:#fff1e8;color:var(--portal-orange-dark)}
.user-popover{border-color:var(--portal-border);background:#fff;color:var(--portal-text);box-shadow:var(--portal-shadow)}
.user-popover small{color:var(--portal-muted)}
.user-popover button,.user-popover a{color:#344054;font-size:12px}
.user-popover button:hover,.user-popover a:hover{background:#fff7ed;color:var(--portal-orange-dark)}
.member-actions,.guest-auth-actions{display:flex;align-items:center;gap:7px}
.guest-auth-actions button{min-height:36px;padding:0 13px;border:1px solid var(--portal-border);border-radius:6px;background:#fff;color:#344054;font-size:11px;font-weight:800;white-space:nowrap}
.guest-auth-actions .guest-register{border-color:var(--portal-orange);background:var(--portal-orange);color:#fff}
.guest-auth-actions button:hover{border-color:#fdba74;color:var(--portal-orange-dark)}
.guest-auth-actions .guest-register:hover{border-color:var(--portal-orange-dark);background:var(--portal-orange-dark);color:#fff}

/* Storefront keeps the DST image, while content below becomes easy to scan. */
.storefront-home{background:var(--portal-bg);color:var(--portal-text)}
.storefront-hero{min-height:min(760px,88vh);background-image:linear-gradient(90deg,rgba(5,9,15,.94) 0%,rgba(5,9,15,.82) 40%,rgba(5,9,15,.2) 70%),linear-gradient(180deg,transparent 72%,rgba(5,9,15,.64)),url("../images/storefront-hero.png")}
.storefront-hero h1{font-size:64px;color:#fff}
.storefront-hero-copy>p{color:#d2d8e1;font-size:17px}
.hero-label{font-size:12px}
.hero-primary,.hero-secondary{font-size:13px}
.hero-assurances{font-size:12px}
.home-pricing,.setup-journey,.operations-story,.home-faq,.customer-services{border-color:var(--portal-border)}
.section-intro h2{color:var(--portal-text);font-size:30px}
.section-intro>p{color:var(--portal-muted);font-size:14px;line-height:1.7}
.section-number{color:var(--portal-orange)}
.plans-common{border-color:var(--portal-border);color:#475467;font-size:12px}
.plan-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.storefront-plan-card{
  display:flex;
  flex-direction:column;
  min-height:402px;
  border-color:var(--portal-border)!important;
  background:#fff!important;
  color:var(--portal-text)!important;
  box-shadow:0 4px 16px rgba(15,23,42,.05)!important;
}
.storefront-plan-card:hover{border-color:#f5a36c!important;box-shadow:var(--portal-shadow)!important}
.storefront-plan-card h3{display:flex;align-items:flex-start;min-height:51px;font-size:21px!important;line-height:1.2}
.storefront-plan-card .plan-cycle{color:var(--portal-muted)!important;font-size:12px!important}
.storefront-plan-card .plan-price{color:#111827!important;font-size:36px!important}
.storefront-plan-card .plan-summary{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(52px,1fr));min-height:104px;border-color:var(--portal-border);background:var(--portal-border)}
.storefront-plan-card .plan-summary span{background:#fff;color:var(--portal-muted);font-size:11px}
.storefront-plan-card .plan-summary strong{color:var(--portal-text);font-size:13px}
.storefront-plan-card .plan-cta{margin-top:auto;color:#fff!important;font-size:13px!important}
.storefront-plan-card{padding:22px!important}
.storefront-plan-card h3{min-height:2.4em;margin-bottom:10px!important}
.storefront-plan-card .plan-cycle{min-height:18px}
.storefront-plan-card .plan-price{min-height:40px;margin:12px 0 18px!important;line-height:1.1}
.storefront-plan-card .plan-summary{margin-bottom:18px!important}
.storefront-plan-card .plan-summary span{min-height:54px;padding:0 12px!important}
.storefront-plan-card.is-recommended{border-color:var(--portal-border)!important;box-shadow:0 4px 16px rgba(15,23,42,.05)!important}
.journey-line:before{background:#d5dae1}
.journey-line li>span{border-color:#d8dee7;background:#fff;color:var(--portal-orange-dark);font-size:10px}
.journey-line strong{color:var(--portal-text);font-size:14px}
.journey-line p{color:var(--portal-muted);font-size:12px}
.story-row{border-color:var(--portal-border)}
.story-copy h3{color:var(--portal-text);font-size:23px}
.story-copy p{color:var(--portal-muted);font-size:14px}
.story-console,.story-list,.story-backup{border-color:var(--portal-border);background:#fff;box-shadow:0 4px 16px rgba(15,23,42,.05)}
.story-example{color:#98a2b3;font-size:10px}
.console-title{border-color:var(--portal-border);color:var(--portal-text);font-size:12px}
.story-console dl div,.story-list>div{border-color:var(--portal-border)}
.story-console dt,.story-list small,.story-backup span{color:var(--portal-muted);font-size:11px}
.story-console dd,.story-list strong,.story-backup strong{color:var(--portal-text)}
.story-list b{font-size:10px}
.story-backup button{border-color:var(--portal-border);background:#fff;color:var(--portal-text);font-size:11px}
.faq-lines{border-color:var(--portal-border)}
.faq-lines details{border-color:var(--portal-border)}
.faq-lines summary{color:var(--portal-text);font-size:15px}
.faq-lines p{color:var(--portal-muted);font-size:13px}
.storefront-footer{color:var(--portal-text)}
.footer-brand .brand-mark{border:0;background:var(--portal-orange);color:#fff;box-shadow:none}
.footer-brand .brand-mark:after{display:none}
.footer-brand p,.storefront-footer nav button,.storefront-footer nav a,.system-state{color:var(--portal-muted);font-size:11px}

/* Inner customer pages */
.page-panel:not([data-panel="dashboard"]){color:var(--portal-text)}
.inner-page-header>span,.inner-page-header>div>span{font-size:11px}
.inner-page-header h1{color:var(--portal-text);font-size:34px}
.inner-page-header p{color:var(--portal-muted);font-size:14px}
.outline-btn,.btn-secondary{border-color:var(--portal-border);background:#fff;color:#344054;font-size:12px}
.outline-btn:hover,.btn-secondary:hover{border-color:#f5a36c;background:#fff7ed;color:var(--portal-orange-dark)}
.btn-primary,.primary-small{color:#fff}
.surface,.plan-card,.package-card,.metric-card,.command-surface{border-color:var(--portal-border);background:#fff;box-shadow:0 3px 12px rgba(15,23,42,.04)}
.service-list-head{color:#667085;font-size:11px}
.package-card{min-height:88px;color:var(--portal-text)}
.package-card:hover{border-color:#f5a36c;background:#fffaf7}
.package-card h3{font-size:15px}.package-card p{color:var(--portal-muted);font-size:11px}
.package-spec-row{color:#344054;font-size:11px}
.package-spec-row span{border-color:var(--portal-border);background:#f8fafc}
.package-runtime small{color:#98a2b3;font-size:10px}.package-runtime strong{font-size:12px}
.package-open{border-color:#fed7aa;background:#fff7ed;color:var(--portal-orange-dark);font-size:11px}
.soft-badge{background:#eff6ff;color:#2563eb}
.status-pill{border-color:var(--portal-border);background:#fff;color:#667085;font-size:11px}
.status-pill.running{border-color:#a7e4c3;background:#ecfdf3;color:#168554}
.status-pill.error{border-color:#fecaca;background:#fef2f2;color:#dc2626}
.status-pill.stopped{border-color:#d0d5dd;background:#f9fafb;color:#667085}
.skeleton{border-color:var(--portal-border);background:#e9edf2}
.skeleton:after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent)}

/* Checkout and account */
.checkout-page,.terms-page{color:var(--portal-text)}
.checkout-heading h1,.terms-heading h1{color:var(--portal-text)}
.checkout-heading p,.terms-heading p{color:var(--portal-muted);font-size:13px}
.checkout-summary,.checkout-total,.terms-page{border-color:var(--portal-border);background:#fff;box-shadow:var(--portal-shadow)}
.checkout-description,.checkout-provisioning li,.terms-content p{color:var(--portal-muted);font-size:12px}
.checkout-specs,.checkout-specs div,.terms-content,.terms-content section{border-color:var(--portal-border)}
.checkout-specs dt{color:#667085;font-size:10px}.checkout-specs dd{color:var(--portal-text);font-size:13px}
.checkout-total>div{color:var(--portal-muted);font-size:12px}.checkout-total>div strong{color:var(--portal-text)}
.terms-consent{color:#475467;font-size:11px}
.account-layout{border-color:var(--portal-border);background:#fff;box-shadow:var(--portal-shadow)}
.account-identity{border-color:var(--portal-border)}
.account-identity h2,.account-details dd{color:var(--portal-text)}
.account-identity p,.account-details dt{color:var(--portal-muted)}
.account-details div{border-color:var(--portal-border)}

/* Control Panel: light operational UI, terminal remains dark. */
.page-panel[data-panel="service-detail"]{padding-top:100px;color:var(--portal-text)}
.workspace-title h1{color:var(--portal-text);font-size:25px}
.workspace-title p{color:var(--portal-muted);font-size:12px}
.icon-back{border-color:var(--portal-border);background:#fff;color:#667085}
.package-dashboard-shell{border-color:var(--portal-border);background:#fff;box-shadow:var(--portal-shadow)}
.package-dashboard-sidebar{border-color:var(--portal-border);background:#fff}
.package-dashboard-brand{border-color:var(--portal-border)}
.package-dashboard-brand strong{color:var(--portal-text);font-size:13px}
.package-dashboard-brand small{color:var(--portal-muted);font-size:10px}
.workspace-tab{color:#667085;font-size:12px}
.workspace-tab:hover{background:#f8fafc;color:var(--portal-text)}
.workspace-tab.is-active{border-left-color:var(--portal-orange);background:#fff3eb;color:var(--portal-orange-dark)}
.package-dashboard-main{background:#f6f8fa}
.runtime-summary,.command-surface,.context-strip,.surface{border-color:var(--portal-border);background:#fff;color:var(--portal-text)}
.surface-head,.runtime-summary-grid,.runtime-summary-item,.context-strip>div,.data-row,.mod-row,.backup-row,.mods-list,.backup-list,.mod-add-form,.backup-form,.credentials-form{border-color:var(--portal-border)}
.surface-head h2{color:var(--portal-text);font-size:15px}.surface-head p{color:var(--portal-muted);font-size:11px}
.runtime-summary-item small,.context-strip small{color:#667085;font-size:10px}
.runtime-summary-item strong,.context-strip strong{color:var(--portal-text)}
.runtime-summary-item p{color:var(--portal-muted);font-size:10px}
.runtime-summary .runtime-summary-grid{border-color:#334155;background:#334155}
.runtime-summary .runtime-summary-item{border-color:#334155;background:#172033}
.runtime-summary .runtime-summary-item small{color:#b8c2d0}
.runtime-summary .runtime-summary-item strong{color:#f8fafc}
.runtime-summary .runtime-summary-item p{color:#c5ceda}
.runtime-summary .runtime-summary-item .metric-bar{background:#344258}
.runtime-summary .runtime-summary-item .metric-bar span{background:#f97316}
.command-surface>div:first-child strong{font-size:13px}.command-surface>div:first-child small{color:var(--portal-muted);font-size:10px}
.btn-command{border-color:var(--portal-border);background:#fff;color:#344054;font-size:11px}
.btn-command.start{border-color:#86d5ae;background:#ecfdf3;color:#168554}
.btn-command.restart{border-color:#fed7aa;background:#fff7ed;color:#c2410c}
.btn-command.stop{border-color:#fecaca;background:#fff;color:#dc2626}
.btn-command.delete{border-color:#fca5a5;background:#fef2f2;color:#b42318}
.package-operation-status{border-color:#fed7aa;background:#fff7ed;color:#c2410c;font-size:12px}
.data-row strong,.mod-row strong,.backup-row strong{color:var(--portal-text);font-size:12px}
.data-row small,.mod-row small,.backup-row small{color:var(--portal-muted);font-size:10px}
.runtime-table th,.runtime-table td{border-color:var(--portal-border);color:#475467;font-size:11px}
.runtime-table th{color:#667085;font-size:10px;background:#f8fafc}
.runtime-table strong{color:var(--portal-text)}
.table-action{border-color:var(--portal-border);background:#fff;color:#344054;font-size:10px}
.log-search{border-color:var(--portal-border);background:#fff}.log-search input{color:var(--portal-text);font-size:11px}
.server-log{background:#0c111b;color:#a7f3d0;font-size:11px}
.log-filters button{color:#667085;font-size:10px}.log-filters button.is-active{border-color:var(--portal-border);background:#f2f4f7;color:var(--portal-text)}
.mod-add-form label{color:#344054;font-size:11px}
.mod-add-form textarea,input,select{border-color:var(--portal-border);background:#fff;color:var(--portal-text)}
.backup-form{grid-template-columns:minmax(220px,1fr) minmax(150px,.45fr) minmax(150px,.45fr) auto;align-items:end}
.backup-form>label{display:grid;grid-template-columns:1fr;gap:7px;color:#475467;font-size:11px;font-weight:700}
.backup-form>label>select{width:100%}
.field-with-unit{display:grid;grid-template-columns:minmax(70px,1fr) 42px;align-items:center;border:1px solid var(--portal-border);border-radius:6px;background:#fff;overflow:hidden}
.field-with-unit input{width:100%;min-height:40px;border:0;border-radius:0;box-shadow:none}
.field-with-unit small{color:#667085;font-size:10px;text-align:center}
.deploy-steps li{color:#667085;font-size:10px}.deploy-steps span{border-color:#cfd6df;background:#fff}
.dropzone{border-color:#c6ced8;background:#f8fafc}.dropzone:hover,.dropzone.is-dragging{border-color:var(--portal-orange);background:#fff7ed}
.danger-zone{border-color:#fecaca;background:#fffafa}.danger-zone h2{color:#b42318;font-size:13px}.danger-zone p{color:#8b5b5e;font-size:11px}
.danger-zone-actions label{color:#8b5b5e}.danger-zone-actions select{border-color:#fecaca;background:#fff;color:#7f1d1d}

.toast{font-size:12px}
.confirm-modal{border-color:var(--portal-border);background:#fff;color:var(--portal-text)}
.confirm-modal p{color:var(--portal-muted);font-size:12px}
.payment-modal{border-color:var(--portal-border);background:#fff;color:var(--portal-text);box-shadow:0 28px 90px rgba(15,23,42,.24)}
.payment-modal-head,.payment-detail-row{border-color:var(--portal-border)}
.payment-modal-head p,.payment-detail-row span{color:var(--portal-muted)}
.payment-modal-close{border-color:var(--portal-border);background:#f8fafc;color:#475467}

/* Modal layers: the package workspace is z-index 80. Confirmation must sit
   above it, including when it is opened from the payment modal. */
.modal-backdrop{z-index:200}
#payment-modal{z-index:220}
#confirm-modal{z-index:300}
body.confirm-modal-open{overflow:hidden}
#confirm-modal .confirm-modal{position:relative;z-index:1}

@media(max-width:760px){
  .store-header-inner{background:#fff}
  .store-nav{border-color:var(--portal-border);background:#fff}
  .side-link:hover,.side-link.is-active{background:#fff7ed;color:var(--portal-orange-dark)}
  .storefront-hero{min-height:690px}
  .storefront-hero h1{font-size:42px}
  .section-intro h2{font-size:25px}
  .plan-grid{grid-template-columns:1fr}
  .package-dashboard-main{padding:12px}
  .page-panel[data-panel="service-detail"]{padding-top:78px}
  .backup-form{grid-template-columns:1fr}
  .workspace-tabs{background:#fff}
}

/* Compact customer portal modeled after a conventional VPS customer area. */
@media(min-width:761px){
  .app-shell{padding-left:244px}
  .store-header{position:fixed;inset:0 auto 0 0;width:244px;border-right:1px solid var(--portal-border);border-bottom:0;box-shadow:2px 0 12px rgba(15,23,42,.03)}
  .store-header-inner{display:flex;align-items:stretch;flex-direction:column;gap:0;width:100%;height:100%;padding:0}
  .store-brand{display:flex;width:100%;min-height:72px;padding:0 20px;border-bottom:1px solid var(--portal-border)}
  .store-brand .brand-mark{width:38px;height:38px}
  .store-nav{display:flex;align-items:stretch;flex-direction:column;gap:3px;width:100%;height:auto;padding:20px 13px}
  .nav-group{display:block;padding:14px 12px 6px;color:#98a2b3;font-size:9px;font-weight:800}
  .side-link{display:flex;align-items:center;gap:12px;width:100%;min-height:47px;padding:0 14px;border-radius:6px;font-size:18px;text-align:left}
  .side-link svg{width:20px;height:20px}
  .side-link.is-active{background:#fff1e8;color:#c2410c}
  .side-link.is-active:after{top:9px;right:auto;bottom:9px;left:0;width:3px;height:auto;border-radius:3px}
  #page-title{position:absolute;top:0;left:244px;z-index:19;display:flex;align-items:center;width:calc(100vw - 244px);height:72px;padding-left:30px;border-bottom:1px solid var(--portal-border);background:#fff;color:var(--portal-text);font-size:16px;white-space:nowrap}
  .top-actions{position:absolute;top:0;right:auto;left:calc(100vw - 24px);z-index:22;width:max-content;height:72px;margin:0;transform:translateX(-100%)}
  .main-area{min-height:100vh;padding-top:72px}
}
.nav-group{color:#98a2b3}
.storefront-home{width:min(100% - 48px,1380px);margin:0 auto;padding:34px 0 56px;background:transparent}
.portal-welcome{display:grid;grid-template-columns:minmax(300px,1.2fr) minmax(430px,1fr) 180px;gap:22px;align-items:center;padding:30px 32px;border-radius:8px;background:#f97316;color:#fff;box-shadow:0 12px 30px rgba(194,65,12,.18)}
.portal-welcome-copy>span{font-size:10px;font-weight:800;opacity:.78}
.portal-welcome-copy h1{margin:7px 0 5px;font-size:26px;line-height:1.25}.portal-welcome-copy h1 strong{font-weight:800}
.portal-welcome-copy p{margin:0;color:#fff7ed;font-size:12px}
.portal-summary{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;border:1px solid rgba(255,255,255,.28);border-radius:7px;background:rgba(255,255,255,.1)}
.portal-summary div{min-height:82px;padding:17px;border-right:1px solid rgba(255,255,255,.22)}.portal-summary div:last-child{border:0}
.portal-summary small,.portal-summary strong{display:block}.portal-summary small{font-size:8px;font-weight:800;opacity:.8}.portal-summary strong{margin-top:6px;font-size:23px}
.portal-welcome-actions{display:grid;gap:8px}
.portal-welcome-actions button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:1px solid rgba(255,255,255,.44);border-radius:6px;background:rgba(255,255,255,.12);color:#fff;font-size:10px;font-weight:800}
.portal-welcome-actions button:first-child{border-color:#fff;background:#fff;color:#c2410c}
.portal-welcome-actions svg{width:15px}
.portal-welcome.is-guest{grid-template-columns:minmax(300px,1fr) 180px}
.home-pricing,.setup-journey,.home-faq,.customer-services{width:100%;padding:36px 0;border-bottom:1px solid var(--portal-border)}
.portal-section-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}
.portal-section-head>div{display:flex;align-items:center;gap:13px}
.portal-section-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid #fed7aa;border-radius:7px;background:#fff7ed;color:#ea580c}
.portal-section-icon svg{width:20px}
.portal-section-head h2{margin:0 0 3px;color:var(--portal-text);font-size:20px}
.portal-section-head p{margin:0;color:var(--portal-muted);font-size:11px}
.home-pricing .plan-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.home-pricing .storefront-plan-card{min-height:245px!important;padding:19px!important}
.home-pricing .storefront-plan-card h3{margin-bottom:12px!important;font-size:17px!important}
.home-pricing .storefront-plan-card .plan-price{margin-bottom:15px!important;font-size:27px!important}
.home-pricing .storefront-plan-card .plan-summary{margin-bottom:15px}
.journey-line li{padding:0 10px}.journey-line strong{font-size:12px}.journey-line p{font-size:10px}
.home-faq{padding-bottom:16px}.faq-lines summary{padding:16px 2px;font-size:12px}.faq-lines p{font-size:11px}
.page-panel:not([data-panel="dashboard"]){width:min(100% - 48px,1380px);padding:32px 0 56px}
.inner-page-header{padding-top:0;margin-bottom:22px}.inner-page-header h1{margin:5px 0 6px;font-size:28px}.inner-page-header p{font-size:12px}
.page-panel[data-panel="service-detail"]{width:min(100% - 36px,1500px);padding-top:26px}
.package-dashboard-shell{min-height:690px}
.account-page{max-width:1000px!important}

@media(max-width:1100px) and (min-width:761px){
  .portal-welcome{grid-template-columns:1fr 1fr}
  .portal-welcome-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}
  .plan-grid,.home-pricing .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .store-header{position:sticky}
  #page-title,.nav-group{display:none}
  .storefront-home{width:calc(100% - 24px);padding:18px 0 40px}
  .portal-welcome{grid-template-columns:1fr;padding:22px 18px}
  .portal-welcome.is-guest{grid-template-columns:1fr}
  .portal-welcome-copy h1{font-size:22px}
  .portal-summary{grid-template-columns:repeat(3,1fr)}
  .portal-summary div{min-height:72px;padding:13px 10px}
  .portal-summary strong{font-size:19px}
  .portal-welcome-actions{grid-template-columns:1fr 1fr}
  .guest-auth-actions{gap:5px}.guest-auth-actions button{min-height:32px;padding:0 9px;font-size:9px}
  .home-pricing,.setup-journey,.home-faq,.customer-services{padding:28px 0}
  .plan-grid,.home-pricing .plan-grid{grid-template-columns:1fr}
  .portal-section-head h2{font-size:18px}
  .page-panel:not([data-panel="dashboard"]){width:calc(100% - 24px);padding:24px 0 44px}
  .page-panel[data-panel="service-detail"]{width:calc(100% - 16px);padding-top:18px}
}

/* Account page */
.account-page .inner-page-header{max-width:980px;margin-right:auto;margin-left:auto}
.account-page .account-layout{grid-template-columns:310px 1fr;max-width:980px;margin:0 auto;border:1px solid var(--portal-border);border-radius:8px;overflow:hidden}
.account-page .account-identity{display:flex;align-items:center;flex-direction:column;justify-content:center;min-height:290px;padding:38px 28px;border-right:1px solid var(--portal-border);text-align:center}
.account-page .account-identity .big-avatar{width:70px;height:70px;font-size:20px}
.account-page .account-identity h2{font-size:21px}.account-page .account-identity p{font-size:12px}
.account-page .account-role{margin-top:15px;padding:5px 9px;border-radius:999px;background:#fff1e8;color:#c2410c;font-size:10px}
.account-page .account-details{display:grid;align-content:center}
.account-page .account-details div{grid-template-columns:190px 1fr;padding:24px 30px}
.account-page .account-details dt{font-size:11px}.account-page .account-details dd{font-size:12px}

/* Standalone guide and support views */
.portal-info-page{max-width:980px!important}
.guide-steps{margin:0;padding:0;border:1px solid var(--portal-border);border-radius:8px;background:#fff;list-style:none;overflow:hidden}
.guide-steps li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:22px 24px;border-bottom:1px solid var(--portal-border)}
.guide-steps li:last-child{border:0}.guide-steps>li>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff1e8;color:#c2410c;font-size:11px;font-weight:800}
.guide-steps strong{font-size:14px}.guide-steps p{margin:5px 0 0;color:var(--portal-muted);font-size:12px;line-height:1.6}
.guide-steps code,.guide-notes code{padding:2px 5px;border-radius:4px;background:#f1f3f5;color:#344054;font:11px ui-monospace,SFMono-Regular,Menlo,monospace}
.guide-notes{margin-top:16px;padding:20px 24px;border:1px solid var(--portal-border);border-radius:8px;background:#fff}
.guide-notes h2{margin:0 0 10px;color:var(--portal-text);font-size:15px}
.guide-notes p{margin:7px 0 0;color:var(--portal-muted);font-size:12px;line-height:1.65}
.support-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;border:1px solid var(--portal-border);border-radius:8px;background:#fff}
.support-panel>div{display:flex;align-items:center;gap:14px}.support-panel strong{font-size:14px}.support-panel p{margin:4px 0 0;color:var(--portal-muted);font-size:11px}
.support-contacts{display:flex!important;align-items:stretch!important;gap:10px}
.support-contacts a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 9px;min-width:220px;padding:10px 12px;border:1px solid var(--portal-border);border-radius:6px;color:#c2410c;text-decoration:none}
.support-contacts a:hover{border-color:#f5a36c;background:#fff7ed}
.support-contacts small{grid-column:1/-1;color:var(--portal-muted);font-size:10px}
.support-contacts strong{font-size:12px}
.support-contacts svg{grid-column:2;grid-row:2;width:14px}

/* Control Panel opens as a real full-screen modal from "Gói của tôi". */
body.control-panel-modal-open{overflow:hidden}
.page-panel[data-panel="service-detail"].is-active{position:fixed;inset:14px;z-index:80;width:auto;max-width:none;margin:0;padding:0;border:1px solid var(--portal-border);border-radius:10px;background:#f4f6f8;box-shadow:0 0 0 100vmax rgba(15,23,42,.58),0 28px 90px rgba(15,23,42,.28);overflow:auto}
.page-panel[data-panel="service-detail"] .workspace-header{position:sticky;top:0;z-index:5;min-height:72px;margin:0;padding:12px 18px;border-bottom:1px solid var(--portal-border);background:#fff}
.page-panel[data-panel="service-detail"] .package-dashboard-shell{min-height:calc(100vh - 102px);border:0;border-radius:0;box-shadow:none}
.workspace-tab{border:0;background:transparent;font-family:inherit}
.workspace-tab:focus-visible{outline:2px solid #f97316;outline-offset:2px}
.package-dashboard-main[data-workspace-view] .workspace-grid,.package-dashboard-main[data-workspace-view] .workspace-lower-grid{display:block}

@media(max-width:760px){
  .account-page .account-layout{grid-template-columns:1fr}
  .account-page .account-identity{min-height:220px;border-right:0;border-bottom:1px solid var(--portal-border)}
  .account-page .account-details div{grid-template-columns:1fr;gap:7px;padding:18px}
  .support-panel{align-items:flex-start;flex-direction:column}.support-contacts{align-items:stretch!important;flex-direction:column;width:100%}.support-contacts a{width:100%;min-width:0}
  .page-panel[data-panel="service-detail"].is-active{inset:0;border:0;border-radius:0}
}