/* LANOARC web experience. One scoped presentation layer, removable independently. */
body[data-experience] {
  --bg:#f3f6fa; --card:#fff; --ink:#172c45; --muted:#56677d;
  --blue:#235ea9; --cyan:#235ea9; --line:#d8e1ed; --pale:#eaf1fb;
  --navy:#15324f; --teal:#126d68; --shadow:0 6px 24px #17355008;
  background:var(--bg); color:var(--ink);
  font:16px/1.65 "Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-variant-numeric:tabular-nums; -webkit-text-size-adjust:100%;
}
[data-experience] *, [data-experience] *::before, [data-experience] *::after { box-sizing:border-box }
[data-experience] :is(h1,h2,h3,h4,p,dd,a,code) { overflow-wrap:anywhere }
[data-experience] :is(h1,h2,h3,h4) { color:var(--ink); letter-spacing:-.025em; line-height:1.4 }
[data-experience] a { color:var(--blue); text-underline-offset:4px }
[data-experience] a:hover { color:#153f75 }
[data-experience] :is(button,a,input,select,textarea,summary):focus-visible { outline:3px solid #3978c8; outline-offset:4px }
[data-experience] :is(button,.button) { min-height:48px; padding:12px 20px; border-radius:10px; font-family:inherit; line-height:1.5; font-size:14px; font-weight:600; background:var(--blue); border:1px solid var(--blue); color:#fff; box-shadow:none; cursor:pointer; gap:8px; transition:background-color .16s,border-color .16s }
[data-experience] :is(button,.button):hover { background:#1b4c8b; color:#fff; transform:none; box-shadow:none }
[data-experience] :is(button,.button).secondary { background:#fff; color:var(--ink); border-color:#aabbd0 }
[data-experience] :is(button,.button).secondary:hover { background:var(--pale); border-color:var(--blue) }
[data-experience] :is(button,.button).danger { background:#fff0ef; color:#a22f35; border-color:#d69b9e }
[data-experience] :is(button,.button):disabled { opacity:.6; cursor:not-allowed }
[data-experience] .button.small { min-height:44px; padding:10px 16px }
[data-experience] .muted, [data-experience] .footnote, [data-experience] .fine-print, [data-experience] .label { color:var(--muted) }
[data-experience] .footnote { font-size:13px; line-height:1.8 }
[data-experience] .eyebrow { display:none }
[data-experience] :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) { min-height:48px; max-width:100%; padding:12px 14px; border:1px solid #a6b6ca; border-radius:8px; background:#fff; color:var(--ink); font:inherit; font-size:16px; box-shadow:none }
[data-experience] textarea { min-height:128px; resize:vertical }
[data-experience] :is(input[type=checkbox],input[type=radio]) { width:20px; height:20px; min-height:20px; flex-shrink:0; accent-color:var(--blue) }
[data-experience] label { color:var(--ink); font-size:14px }
[data-experience] :is(.helptext,.auth-note) { color:var(--muted); font-size:13px; line-height:1.8 }
[data-experience] .errorlist { color:#a22f35; padding:12px 16px 12px 32px; background:#fff0ef; border-radius:8px }
[data-experience] fieldset { min-width:0; border:1px solid var(--line); border-radius:12px; padding:16px }
[data-experience] fieldset label { display:flex; gap:12px; align-items:center; min-height:48px }
[data-experience] .card { display:block; min-width:0; padding:24px; margin-bottom:24px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow) }
[data-experience] .card h2 { font-size:24px; color:var(--ink) }
[data-experience] h3 { font-size:18px; font-weight:600; color:var(--ink) }
[data-experience] :is(.page-heading,.section-heading,.panel-heading) { gap:16px; flex-wrap:wrap }
[data-experience] .page-heading { margin:8px 0 28px; align-items:center }
[data-experience] .page-heading h2 { font-size:32px; line-height:1.35; margin:0 }
[data-experience] .page-heading p { font-size:15px; margin:8px 0 0; color:var(--muted) }
[data-experience] .panel-heading { padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid var(--line) }
[data-experience] .panel-heading h3 { margin:0 }
[data-experience] .panel-heading>a { color:var(--blue); font-size:14px }
[data-experience] :is(.actions,.spotlight-actions) { display:flex; flex-wrap:wrap; gap:12px; align-items:center }
[data-experience] .status { display:inline-flex; align-items:center; min-height:28px; padding:4px 10px; border-radius:6px; background:#e5f3ed; color:#215e44; font-size:12px; white-space:normal }
[data-experience] .status.warning { background:#fff0d6; color:#815008 }
[data-experience] .status.neutral { background:#eaf0f7; color:#465b74 }
[data-experience] :is(.notice,.message,.inline-guidance) { border-radius:10px; padding:14px 16px; line-height:1.7; font-size:13px; border:1px solid var(--line); background:#eaf0f7; color:#455a74 }
[data-experience] .message.error { background:#fff0ef; color:#a22f35; border-color:#e5b5b8 }
[data-experience] .message.warning { background:#fff4df; color:#815008; border-color:#e3c89c }
[data-experience] .notice { margin-bottom:24px }
[data-experience] .notice .icon { flex-shrink:0 }
[data-experience] .empty { padding:40px 20px; color:var(--muted); text-align:center }
[data-experience] .empty h3 { margin:12px 0 8px }
[data-experience] :is(.row,.detail-columns,.renew-layout,.plan-store-layout,.support-thread-layout,.support-list-layout) { gap:24px; align-items:start }
[data-experience] :is(.row,.detail-columns,.feature-grid,.stats)>* { min-width:0 }
[data-experience] :is(.definition-grid,.service-columns) { gap:24px }
[data-experience] .definition-grid dt { color:var(--muted); font-size:13px }
[data-experience] .definition-grid dd { margin-top:6px; color:var(--ink); font-size:16px }
[data-experience] :is(.breadcrumb,.section-tabs) { flex-wrap:wrap; gap:8px }
[data-experience] .section-tabs { border:0; padding:6px; background:#e5ecf5; border-radius:12px; margin-bottom:24px }
[data-experience] .section-tabs a { min-height:44px; display:inline-flex; align-items:center; justify-content:center; border:0; padding:10px 16px; border-radius:8px; font-size:14px; color:#465b74 }
[data-experience] .section-tabs a.selected { background:#fff; color:var(--blue); box-shadow:0 2px 6px #1735500d }
[data-experience] details { border-color:var(--line); border-radius:10px }
[data-experience] summary { min-height:44px; padding-block:10px; color:var(--ink); cursor:pointer }
[data-experience] .content-link { min-height:64px; padding:16px 0; gap:16px; color:var(--ink); border-color:var(--line) }
[data-experience] .content-link small { color:var(--muted); font-size:13px }
[data-experience] .site-footer { padding:24px 0; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); border-color:var(--line) }
[data-experience] .site-footer a { display:inline-block; padding-block:8px }
/* Workspace navigation is deliberately distinct from the task canvas. */
[data-experience]:is(.member-shell,.admin-shell) .sidebar { width:232px; inset:0 auto 0 0; border:0; border-radius:0; padding:28px 16px; background:var(--navy); color:#fff; box-shadow:none; overflow-y:auto }
[data-experience] .sidebar .brand { padding:0 12px 28px; gap:12px }
[data-experience] .sidebar .brand img { width:40px; height:40px; border-radius:12px }
[data-experience] .sidebar .brand strong { color:#fff; font-size:24px; letter-spacing:0 }
[data-experience] .sidebar .brand small { color:#bccde0; font-size:11px; letter-spacing:1px }
[data-experience] .sidebar .nav-link { color:#d5e1ef; min-height:48px; border-radius:10px; padding:12px; margin:4px 0; font-size:14px }
[data-experience] .sidebar .nav-link:hover { background:#244664; color:#fff }
[data-experience] .sidebar .nav-link.active { background:#eaf1fb; color:#184a82; box-shadow:none; font-weight:600 }
[data-experience] .sidebar .nav-link .icon { width:20px; height:20px; color:inherit }
[data-experience] .sidebar :is(.nav-group,.nav-section>summary) { color:#afc4da; font-size:12px; padding:16px 12px 8px }
[data-experience] .sidebar .sidebar-support { background:#23445f; color:#fff; padding:16px; border-radius:12px }
[data-experience] .sidebar .sidebar-support small { color:#c4d5e6; font-size:12px }
[data-experience] .sidebar .environment { background:transparent; color:#c4d5e6; font-size:12px; padding:16px 4px }
[data-experience] .sidebar .nav-count { color:#164a7d; background:#dbeafc }
[data-experience]:is(.member-shell,.admin-shell) .workspace { margin:0 0 0 232px; padding:0 36px 24px; max-width:none; min-width:0 }
[data-experience]:is(.member-shell,.admin-shell) main { max-width:1320px; margin:auto; min-width:0 }
[data-experience]:is(.member-shell,.admin-shell) .topbar { height:80px; min-height:80px; margin:0 auto 28px; padding:0; max-width:1320px; gap:16px; background:transparent; border-bottom:1px solid var(--line) }
[data-experience] .workspace-location { min-width:0; gap:12px }
[data-experience] .topbar .workspace-location h1 { font-size:16px; color:var(--ink); font-weight:600 }
[data-experience] .topbar-right { gap:16px; min-width:0 }
[data-experience] .topbar :is(.user-pill,.logout,.topbar-help) { font-size:13px }
[data-experience] .topbar .logout { background:transparent; border:0; color:var(--muted); padding:8px; min-width:44px; min-height:44px }
[data-experience] .topbar .avatar { width:36px; height:36px; border-radius:12px; background:#dce9f9; color:#234f85 }
[data-experience] .menu-toggle { background:transparent; color:var(--ink); border:1px solid var(--line); min-width:44px; padding:10px }
[data-experience] .mobile-dock,[data-experience] .sidebar-dismiss { display:none }
[data-experience] .stats { gap:16px; margin-bottom:24px }
[data-experience] .stat { padding:24px; border-radius:12px; border:1px solid var(--line); background:#fff; box-shadow:none }
[data-experience] .stat strong { font-size:32px; font-weight:600; color:var(--ink) }
[data-experience] .stat .label { font-size:13px }
[data-experience] .stat-icon { background:var(--pale); color:var(--blue); border-radius:12px }
[data-experience] .ops-queue { background:#e4edf9; color:var(--ink); border:1px solid #c4d5ed; border-radius:16px; padding:24px; margin-bottom:24px; gap:20px }
[data-experience] .ops-queue h3,[data-experience] .ops-queue p { color:var(--ink) }
[data-experience] .member-plan-card { border-top:4px solid var(--blue); padding:28px; background:#fff }
[data-experience] .member-plan-card .usage-line strong { font-size:40px; color:var(--blue); font-weight:600 }
[data-experience] .member-plan-card .service-meta { border-top:1px solid var(--line); margin-top:24px; padding-top:16px; font-size:13px; flex-wrap:wrap; gap:12px }
[data-experience] progress { accent-color:var(--blue); height:8px; border-radius:8px }
[data-experience] .setup-strip { gap:16px; background:#f3f6fa; border-radius:12px; padding:20px }
[data-experience] .setup-strip p { color:var(--muted); font-size:13px }
[data-experience] .service-spotlight { background:#eaf1fb; border:1px solid #bfd1e8; border-radius:16px; padding:24px; gap:20px; margin-bottom:24px }
[data-experience] .identity-banner { background:#e4edf9; color:var(--ink); border:1px solid #c4d5ed; border-radius:16px; padding:28px; gap:20px }
[data-experience] .identity-banner h3,[data-experience] .identity-banner p { color:var(--ink) }
[data-experience] .identity-avatar { background:var(--navy); color:#fff; border-radius:20px }
[data-experience] .renew-choice { border-radius:12px; padding:20px; gap:12px }
[data-experience] .plan-picker .renew-choice.is-selected { border:2px solid var(--blue); background:var(--pale); padding:19px }
[data-experience] .renew-choice small { font-size:13px; color:var(--muted) }
[data-experience] .renew-choice>b { font-size:24px; color:var(--blue) }
[data-experience] .checkout-progress { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px; background:#e6edf6; padding:16px; border-radius:12px; font-size:13px }
[data-experience] .checkout-progress strong { color:var(--blue) }
[data-experience] .filter-bar { display:flex; align-items:end; flex-wrap:wrap; gap:12px; padding:0; margin-bottom:20px }
[data-experience] .filter-bar input { flex:1; min-width:160px }
[data-experience] .filter-bar select { max-width:240px }
[data-experience] .table-wrap { max-width:100%; overflow:auto; border:1px solid var(--line); border-radius:12px; overscroll-behavior-x:contain }
[data-experience] table { width:100%; font-size:14px; margin:0; text-align:left }
[data-experience] th { padding:14px 16px; background:#edf2f8; color:#4d627b; font-size:13px; font-weight:600; border-bottom:1px solid var(--line); white-space:nowrap }
[data-experience] td { padding:16px; color:var(--ink); font-size:14px; border-bottom:1px solid var(--line); vertical-align:middle }
[data-experience] td small { color:var(--muted); font-size:12px; line-height:1.7 }
[data-experience] tbody tr:last-child td { border-bottom:0 }
[data-experience] tbody tr:hover { background:#f5f8fc }
[data-experience] .table-scroll-hint { font-size:12px; color:var(--muted); margin:8px 0; display:none }
[data-experience] .support-conversation { padding:0; overflow:hidden }
[data-experience] .conversation-heading { padding:24px; background:#edf2f8; border-color:var(--line) }
[data-experience] .conversation-heading h2 { font-size:20px }
[data-experience] .conversation-scroll { background:#fff; padding:24px }
[data-experience] .support-composer { padding:20px; border-color:var(--line); background:#f5f8fc }
[data-experience] .composer-toolbar { flex-wrap:wrap; gap:12px }
[data-experience] .support-composer textarea { min-height:112px }
[data-experience] :is(.guide-step,.release-choice) { border-color:var(--line); gap:20px }
[data-experience] .step-number { background:#e4edf9; color:var(--blue); border-radius:10px }
/* Public pages: a calm, spacious introduction; the arc is the brand motif. */
[data-experience].public-shell { background:#f6f8fc }
[data-experience].public-shell .workspace { max-width:1248px; margin:0 auto; padding:0 40px }
[data-experience].public-shell .public-header { max-width:1248px; min-height:96px; padding:20px 40px; margin:0 auto; background:transparent; border-bottom:1px solid var(--line); gap:24px; box-shadow:none }
[data-experience] .public-header .brand strong { color:var(--navy); font-size:24px }
[data-experience] .public-header .brand small { color:var(--muted) }
[data-experience] .public-nav a { color:#4b6079; font-size:14px; padding:12px 8px }
[data-experience] .public-nav a[aria-current] { color:var(--blue); text-decoration:underline; text-underline-offset:8px }
[data-experience].public-shell .topbar { display:none }
[data-experience].public-shell main { padding-top:24px }
[data-experience] .welcome-hero { padding:48px 0 64px; gap:64px; grid-template-columns:1.15fr 1fr }
[data-experience] .welcome-copy h1 { font-size:clamp(36px,4.5vw,60px); letter-spacing:-.045em; line-height:1.2; margin:0 0 24px; color:var(--navy) }
[data-experience] .welcome-copy>p { color:var(--muted); font-size:16px; line-height:1.9; max-width:34em }
[data-experience] .welcome-copy .actions { margin:32px 0 16px }
[data-experience] .welcome-copy .welcome-availability { border-color:#9db5d5; font-size:13px; padding-left:16px }
[data-experience] .welcome-route { position:relative; overflow:hidden; background:var(--navy); border:0; border-radius:28px 28px 96px 28px; color:#fff; padding:32px }
[data-experience] .welcome-route::after { content:""; position:absolute; width:320px; height:320px; border:1px solid #ffffff1f; border-radius:50%; right:-220px; top:40px; pointer-events:none; box-shadow:0 0 0 36px #ffffff05,0 0 0 72px #ffffff04 }
[data-experience] .welcome-route-title { border-color:#ffffff30; padding-bottom:24px }
[data-experience] .welcome-route-title strong { color:#fff; font-size:18px }
[data-experience] .welcome-route-title small { color:#c4d5e6; font-size:13px }
[data-experience] .welcome-route li { padding:16px 0; gap:16px }
[data-experience] .welcome-route li>span { background:#2c506e; color:#d8ebff; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; padding:0; flex-shrink:0; font-size:12px }
[data-experience] .welcome-route li strong { color:#fff; font-size:16px }
[data-experience] .welcome-route li p { color:#c4d5e6; font-size:13px }
[data-experience] .welcome-route>a { border-color:#ffffff30; color:#d8ebff; padding:20px 0 4px; margin-right:28px; font-size:14px }
[data-experience] .welcome-section { padding:48px 0; border-color:var(--line) }
[data-experience] .welcome-section h2,[data-experience] .welcome-closing h2 { font-size:32px; color:var(--navy); margin:0 0 12px }
[data-experience] .welcome-section-heading p,[data-experience] .welcome-help>div>p { color:var(--muted); font-size:15px }
[data-experience] .welcome-section-heading { margin-bottom:28px }
[data-experience] .welcome-plans { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px }
[data-experience] .welcome-plan { padding:24px; border-radius:16px; border:1px solid var(--line); background:#fff; box-shadow:none }
[data-experience] .welcome-plan-personal { border-color:#9cb7dc; background:#edf3fc }
[data-experience] .welcome-plan-kind { color:#526984; font-size:12px }
[data-experience] .welcome-plan h3 { color:var(--ink); font-size:22px }
[data-experience] .welcome-price { color:var(--blue); font-size:40px; font-weight:600 }
[data-experience] .welcome-price small,[data-experience] .welcome-plan ul,[data-experience] .welcome-plan-description,[data-experience] .welcome-fineprint { color:var(--muted) }
[data-experience] .welcome-plan ul { font-size:14px; line-height:1.85; padding-left:20px }
[data-experience] .welcome-plan li { margin-block:8px }
[data-experience] .welcome-plan .button { min-height:48px }
[data-experience] .welcome-plan-login { min-height:44px; padding:10px 0 0; font-size:13px }
[data-experience] .welcome-devices { border-color:var(--line); border-radius:16px }
[data-experience] .welcome-devices>a { padding:28px; border-color:var(--line) }
[data-experience] .welcome-devices>a:hover { background:var(--pale) }
[data-experience] .welcome-devices strong,[data-experience] .welcome-devices .icon { color:var(--navy) }
[data-experience] .welcome-devices span { color:var(--muted); font-size:13px }
[data-experience] .welcome-faq details { border-color:var(--line); border-radius:0; padding:12px 0 }
[data-experience] .welcome-faq summary { color:var(--ink); font-size:16px }
[data-experience] .welcome-faq p { color:var(--muted) }
[data-experience] .welcome-closing { background:#e4edf9; border-radius:16px; padding:32px; margin-bottom:32px }
[data-experience] .welcome-closing p { color:var(--muted) }
[data-experience] .auth-layout { max-width:1000px; margin:32px auto; background:#fff; border:1px solid var(--line); border-radius:24px; overflow:hidden; gap:0; box-shadow:var(--shadow) }
[data-experience] .auth-art { padding:48px 40px; background:var(--navy); border:0; border-radius:0; color:#fff }
[data-experience] .auth-art h2,[data-experience] .auth-art h2 span { color:#fff; font-size:32px; line-height:1.5 }
[data-experience] .auth-art p { color:#c4d5e6; font-size:15px }
[data-experience] .auth-features { flex-wrap:wrap; gap:12px; color:#dbe8f6 }
[data-experience] .auth-card { border:0; border-radius:0; box-shadow:none; padding:40px; background:#fff; min-width:0 }
[data-experience] .auth-heading h1 { color:var(--ink); font-size:32px }
[data-experience] .auth-heading p { color:var(--muted); font-size:14px }
[data-experience] .auth-card form>button { width:100%; margin-top:12px }
[data-experience] .auth-links a { padding-block:10px; font-size:14px }
[data-experience] .auth-start-link { color:var(--muted); font-size:13px }
[data-experience] .recovery-link { text-align:center; font-size:14px; margin:24px 0 40px }
[data-experience] .priority-item { border-radius:12px; padding:20px; gap:8px; border-color:var(--line); color:var(--muted) }
[data-experience] .priority-item strong { color:var(--ink); font-size:28px }
[data-experience] .priority-item small { font-size:12px }
[data-experience] .dashboard-columns { gap:24px }
[data-experience] .dashboard-service-strip { padding:24px; background:#eaf0f7; border-radius:16px; gap:24px }
[data-experience] .dashboard-service-strip small { font-size:12px; margin-top:8px }
[data-experience] .queue-ticket strong { font-size:15px }
[data-experience] .queue-ticket small { font-size:13px }
[data-experience] :is(.access-summary,.knowledge-hero,.support-banner) { background:#e4edf9; color:var(--ink); border:1px solid #c4d5ed; border-radius:16px; padding:28px; box-shadow:none }
[data-experience] :is(.access-summary,.knowledge-hero,.support-banner) :is(h1,h2,h3,strong) { color:var(--ink) }
[data-experience] :is(.access-summary,.knowledge-hero,.support-banner) p { color:var(--muted) }
[data-experience] .device-platform { border-radius:12px; background:var(--pale); color:var(--blue) }
[data-experience] .device-card dt { color:var(--muted); font-size:13px }
[data-experience] .device-card dd { font-size:15px }
[data-experience] .knowledge-card { border-color:var(--line) }
[data-experience] .knowledge-search { gap:12px; flex-wrap:wrap }
[data-experience] .knowledge-search input { min-width:0; flex:1 1 240px }
[data-experience] .knowledge-search select { flex:1 1 160px }
[data-experience] .order-record .record-facts { padding-block:20px; gap:20px }
[data-experience] .record-facts small { color:var(--muted); font-size:13px }
[data-experience] .record-facts strong { font-size:15px }
[data-experience] .order-record footer { flex-wrap:wrap; gap:16px }
[data-experience] :is(.onboarding-selection,.registration-contact) { background:var(--pale); border-color:#c4d5ed; color:var(--ink) }
@media(min-width:901px) {
  [data-experience] .sidebar-overlay { display:none!important }
  [data-experience] .plan-store-layout { grid-template-columns:minmax(0,1fr) 280px }
}
@media(max-width:1100px) {
  [data-experience]:is(.member-shell,.admin-shell) .workspace { padding-inline:24px }
  [data-experience] .welcome-hero { gap:32px }
  [data-experience] .public-nav { gap:8px }
  [data-experience] .public-nav a { font-size:13px }
  [data-experience] .stats { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:900px) {
  [data-experience]:is(.member-shell,.admin-shell) .workspace { margin:0; padding:0 24px 24px }
  [data-experience]:is(.member-shell,.admin-shell) .sidebar { width:min(320px,calc(100vw - 48px)); transform:translateX(-105%); z-index:101; visibility:hidden; transition:transform .2s,visibility .2s }
  [data-experience].nav-open .sidebar { transform:translateX(0); visibility:visible }
  [data-experience].nav-open { overflow:hidden }
  [data-experience].nav-open .sidebar-overlay { display:block; position:fixed; inset:0; z-index:100; background:#102b49a6; border:0; border-radius:0 }
  [data-experience] .sidebar-dismiss { display:flex; position:absolute; top:20px; right:12px; background:transparent; border:0; color:#fff; padding:8px; width:44px; height:44px; min-height:44px; font-size:24px; align-items:center; justify-content:center }
  [data-experience] .menu-toggle { display:inline-flex }
  [data-experience] .topbar .workspace-location>a,[data-experience] .topbar .workspace-location>span { display:none }
  [data-experience] .topbar .topbar-help { display:none }
  [data-experience]:is(.member-shell,.admin-shell) .topbar { min-height:72px; height:auto; margin-bottom:20px; padding-block:12px }
  [data-experience] :is(.plan-store-layout,.detail-columns,.renew-layout,.support-thread-layout,.support-list-layout) { grid-template-columns:minmax(0,1fr) }
  [data-experience] .side-stack { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
  [data-experience] .public-header .public-menu { display:flex; min-width:44px; min-height:44px; padding:10px; background:#fff; border:1px solid #aabbd0; color:var(--ink) }
  [data-experience].public-shell .public-header { position:relative; padding:16px 24px; gap:12px; min-height:80px }
  [data-experience] .public-nav { display:none; position:absolute; top:100%; left:16px; right:16px; width:auto; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; z-index:90; box-shadow:0 12px 32px #15324f24 }
  [data-experience].public-nav-open .public-nav { display:flex; flex-direction:column; align-items:stretch }
  [data-experience] .public-nav a { min-height:48px; font-size:15px; padding:12px }
  [data-experience].public-shell .workspace { padding-inline:24px }
  [data-experience] .auth-layout { grid-template-columns:.85fr 1.15fr }
  [data-experience] .auth-art { padding:32px 24px }
  [data-experience] .auth-card { padding:32px }
}
@media(max-width:600px) {
  [data-experience] { font-size:15px }
  [data-experience]:is(.member-shell,.admin-shell) .workspace { padding:0 16px 20px }
  [data-experience].member-shell .workspace { padding-bottom:calc(92px + env(safe-area-inset-bottom)) }
  [data-experience] .topbar .workspace-location h1 { font-size:15px; margin:0 }
  [data-experience] .topbar-right { gap:4px; margin-left:auto }
  [data-experience] .topbar .user-pill { max-width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:block }
  [data-experience] .topbar .user-pill .avatar { display:none }
  [data-experience] .mobile-dock { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; bottom:0; left:0; right:0; z-index:80; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); box-shadow:0 -4px 20px #17355008 }
  [data-experience] .mobile-dock a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:48px; border-radius:10px; color:#50647c; font-size:12px; text-decoration:none }
  [data-experience] .mobile-dock a[aria-current=page] { color:var(--blue); background:var(--pale); font-weight:600 }
  [data-experience] .mobile-dock .icon { width:22px; height:22px }
  [data-experience] .page-heading { margin:4px 0 20px; align-items:flex-start; gap:12px }
  [data-experience] .page-heading h2 { font-size:26px }
  [data-experience] .page-heading p { font-size:14px }
  [data-experience] .card { padding:20px; margin-bottom:16px; border-radius:14px }
  [data-experience] .card h2 { font-size:22px }
  [data-experience] h3 { font-size:17px }
  [data-experience] .notice { padding:12px; margin-bottom:20px; font-size:12px; align-items:flex-start }
  [data-experience] .stats { gap:12px; margin-bottom:16px }
  [data-experience] .stat { padding:16px; border-radius:12px; gap:8px; align-items:flex-start }
  [data-experience] .stat strong { font-size:28px }
  [data-experience] .stat-icon { display:none }
  [data-experience] :is(.row,.feature-grid,.service-columns,.definition-grid,.setup-strip,.download-grid,.new-member-steps,.form-grid,.content-grid,.side-stack) { grid-template-columns:minmax(0,1fr); gap:16px }
  [data-experience] .member-plan-card { padding:24px 20px }
  [data-experience] .member-plan-card .usage-line strong { font-size:36px }
  [data-experience] .service-columns>div+div { padding-top:20px; border-top:1px solid var(--line) }
  [data-experience] :is(.ops-queue,.service-spotlight,.identity-banner) { flex-direction:column; align-items:stretch; padding:20px; gap:16px }
  [data-experience] .actions { gap:12px }
  [data-experience] .actions :is(.button,button) { flex:1 1 auto; justify-content:center }
  [data-experience] .filter-bar { align-items:stretch }
  [data-experience] .filter-bar :is(input,select,label) { min-width:0; max-width:none; width:100%; flex:1 1 100% }
  [data-experience] .filter-bar button { flex:1 }
  [data-experience] .section-tabs { gap:4px; padding:4px; border-radius:10px }
  [data-experience] .section-tabs a { flex:1 1 auto; font-size:13px; padding:10px 12px }
  [data-experience] .platform-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) }
  [data-experience] .renew-choice { flex-wrap:wrap; gap:12px; padding:16px }
  [data-experience] .plan-picker .renew-choice.is-selected { padding:15px }
  [data-experience] .renew-choice>b { margin-left:32px; width:100%; font-size:24px }
  [data-experience] .renew-choice>b small { display:inline; margin-left:8px }
  [data-experience] .checkout-progress { gap:8px; font-size:12px; padding:12px }
  [data-experience] .table-scroll-hint { display:block }
  [data-experience] .mobile-records { border:0; border-radius:0; overflow:visible }
  [data-experience] .mobile-records table { min-width:0; display:block }
  [data-experience] .mobile-records thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
  [data-experience] .mobile-records .record-head { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
  [data-experience] .mobile-records tbody { display:block }
  [data-experience] .mobile-records tr { display:block; background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:12px; padding:8px 16px }
  [data-experience] .mobile-records td { display:grid; grid-template-columns:104px minmax(0,1fr); gap:8px 12px; padding:12px 0; border-bottom:1px solid #e6edf5; font-size:14px; min-width:0; width:auto }
  [data-experience] .mobile-records td::before { content:attr(data-label); color:var(--muted); font-size:12px; grid-column:1; grid-row:1 / span 8 }
  [data-experience] .mobile-records td>* { grid-column:2; min-width:0; margin:0 }
  [data-experience] .mobile-records tr td:last-child { border-bottom:0 }
  [data-experience] .mobile-records td[colspan] { display:block; text-align:center }
  [data-experience] .mobile-records td[colspan]::before { content:none }
  [data-experience] .mobile-records+.table-scroll-hint { display:none }
  [data-experience] .support-conversation { padding:0 }
  [data-experience] .conversation-heading { padding:20px; flex-wrap:wrap; gap:12px }
  [data-experience] .conversation-heading h2 { font-size:20px }
  [data-experience] .conversation-scroll { padding:16px; height:auto; max-height:55vh; min-height:240px }
  [data-experience] .support-composer { padding:16px }
  [data-experience] .composer-actions { display:flex; flex-wrap:wrap; width:100%; gap:8px }
  [data-experience] .composer-actions button { flex:1 }
  [data-experience] .composer-hint { font-size:12px }
  [data-experience].public-shell .public-header { padding:16px; gap:8px }
  [data-experience] .public-header .brand { gap:8px }
  [data-experience] .public-header .brand img { width:36px; height:36px }
  [data-experience] .public-header .brand strong { font-size:20px; max-width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
  [data-experience] .public-header .brand small { font-size:10px }
  [data-experience] .public-header-actions { gap:8px }
  [data-experience] .public-header-actions .login-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:36px; font-size:13px }
  [data-experience] .public-header-actions .button { font-size:12px; min-height:44px; padding:10px 12px }
  [data-experience].public-shell .workspace { padding-inline:16px }
  [data-experience].public-shell main { padding-top:16px }
  [data-experience] .welcome-hero { grid-template-columns:minmax(0,1fr); gap:32px; padding:24px 0 40px }
  [data-experience] .welcome-copy h1 { font-size:40px; line-height:1.25; margin-bottom:20px }
  [data-experience] .welcome-copy>p { font-size:15px }
  [data-experience] .welcome-copy .actions { margin-top:24px }
  [data-experience] .welcome-copy .button { padding:12px 16px; font-size:14px }
  [data-experience] .welcome-route { padding:24px; border-radius:20px 20px 64px 20px }
  [data-experience] .welcome-route li { padding:12px 0 }
  [data-experience] .welcome-section { padding:32px 0 }
  [data-experience] .welcome-section h2,[data-experience] .welcome-closing h2 { font-size:26px }
  [data-experience] .welcome-section-heading { gap:8px; margin-bottom:24px }
  [data-experience] .welcome-plans { grid-template-columns:minmax(0,1fr); gap:16px }
  [data-experience] .welcome-plan { padding:24px }
  [data-experience] .welcome-devices { grid-template-columns:repeat(2,minmax(0,1fr)) }
  [data-experience] .welcome-devices>a { padding:20px 16px }
  [data-experience] .welcome-devices strong { font-size:16px }
  [data-experience] .welcome-devices small { font-size:12px }
  [data-experience] .welcome-help { grid-template-columns:minmax(0,1fr); gap:12px }
  [data-experience] .welcome-closing { padding:24px; align-items:stretch; gap:16px }
  [data-experience] .welcome-closing .button { justify-content:center }
  [data-experience] .auth-layout { display:block; margin:8px 0 24px; border-radius:16px }
  [data-experience] .auth-art { display:none }
  [data-experience] .auth-card { padding:28px 24px }
  [data-experience] .auth-heading h1 { font-size:28px }
  [data-experience] .site-footer { display:block; font-size:12px; line-height:2; padding-block:20px }
  [data-experience] .site-footer>span { display:block }
  [data-experience] .order-workspace { display:flex; flex-direction:column; gap:24px }
  [data-experience] .order-workspace>section { order:0; width:100%; min-width:0 }
  [data-experience] .order-workspace>.purchase-panel { order:1; width:100%; position:static }
  [data-experience] .record-facts { grid-template-columns:minmax(0,1fr); gap:12px }
  [data-experience] .record-facts>div { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px }
  [data-experience] :is(.access-summary,.knowledge-hero,.support-banner) { padding:20px; gap:16px }
  [data-experience] .knowledge-search { display:flex }
  [data-experience] .knowledge-search :is(input,select,button) { flex:1 1 100%; max-width:100%; width:100% }
  [data-experience] .knowledge-search>.icon { display:none }
  [data-experience] .dashboard-service-strip { display:grid; grid-template-columns:minmax(0,1fr); padding:20px; gap:20px }
  [data-experience] .priority-item { padding:16px }
  [data-experience] .service-columns>div+div { padding-left:0 }
}
@media(prefers-reduced-motion:reduce) { [data-experience] *, [data-experience] *::before, [data-experience] *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important } }
@media print { [data-experience] :is(.sidebar,.topbar,.mobile-dock,.public-header) { display:none!important } [data-experience] .workspace { margin:0!important; padding:0!important } }
