:root, :root[data-theme='dark'] {
  --font-ui: 'Vazirmatn', 'IRANSansX', Tahoma, sans-serif;
  --font-display: 'Estedad', 'Vazirmatn', sans-serif;
  --navy-950: #030b18; --navy-900: #061326; --navy-850: #091b33; --navy-800: #0c2748;
  --blue-700: #1768ff; --blue-600: #2f7cff; --blue-500: #4c91ff; --blue-400: #75adff; --cyan-400: #2bd4ee;
  --purple-500: #8a6cff; --orange-500: #f6a54a; --red-500: #ef5c76; --green-500: #29c98a;
  --bg: #050d19; --surface: #0b1728; --surface-2: #0f1e33; --surface-3: #152942;
  --text: #f2f7ff; --text-2: #b1c0d5; --text-3: #7f93ad; --border: #1c3552;
  --shadow-sm: 0 10px 30px rgba(0,0,0,.24); --shadow-md: 0 22px 60px rgba(0,0,0,.32); --shadow-lg: 0 34px 100px rgba(0,0,0,.46);
  --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --sidebar-width: 272px;
  --gradient-primary: linear-gradient(135deg, #1768ff, #2f7cff 55%, #2bd4ee);
  --mdi-icon-white: #e9e9e9;
  color-scheme: dark;
}
:root[data-theme='light'] {
  --navy-950: #071d3e; --navy-900: #0a2854; --navy-850: #103466; --navy-800: #17467e;
  --blue-700: #145fdf; --blue-600: #246fef; --blue-500: #4388f5; --blue-400: #5c96ed; --cyan-400: #0da9c6;
  --purple-500: #7357df; --orange-500: #d98228; --red-500: #dc4966; --green-500: #149967;
  --bg: #eef3f9; --surface: #ffffff; --surface-2: #f6f9fd; --surface-3: #eaf0f7;
  --text: #10213a; --text-2: #4e637d; --text-3: #74859a; --border: #d6e0ec;
  --shadow-sm: 0 8px 24px rgba(30, 64, 110, .08); --shadow-md: 0 18px 46px rgba(30, 64, 110, .12); --shadow-lg: 0 28px 80px rgba(26, 55, 96, .18);
  --gradient-primary: linear-gradient(135deg, #145fdf, #2f7cff 55%, #16b7d3);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; min-height: 100vh; font-family: var(--font-ui); background: var(--bg); color: var(--text); direction: rtl; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
.ltr { direction: ltr; unicode-bidi: embed; text-align: left; }
.block { display: block; }
.strong { font-weight: 700; }
.muted { color: var(--text-2); line-height: 1.9; font-size: .9rem; }
.material-symbols-rounded { font-size: 22px; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 420, 'GRAD' 0, 'opsz' 24; }

.button { border: 0px solid transparent; border-radius: 12px; min-height: 42px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: .9rem; transition: .2s ease; white-space: nowrap; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.button[data-loading='true'] { color: transparent; position: relative; }
.button[data-loading='true']::after { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid currentColor; border-color: #fff transparent #fff #fff; border-radius: 50%; animation: spin .7s linear infinite; color: #fff; }
.button--primary { background: var(--gradient-primary); color: #fff; box-shadow: 0 9px 24px rgba(18, 99, 238, .23); }
.button--primary:hover { box-shadow: 0 12px 30px rgba(18, 99, 238, .32); }
.button--secondary { background: color-mix(in srgb, var(--blue-600) 8%, var(--surface)); color: var(--blue-600); border-color: color-mix(in srgb, var(--blue-600) 18%, var(--border)); }
.button--secondary:hover { background: color-mix(in srgb, var(--blue-600) 13%, var(--surface)); }
.button--ghost { background: transparent; color: var(--text-2); border-color: var(--border); }
.button--ghost:hover { color: var(--blue-600); border-color: color-mix(in srgb, var(--blue-600) 45%, var(--border)); }
.button--danger { background: var(--red-500); color: white; }
.button--glass { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); backdrop-filter: blur(12px); }
.button--light { background: white; color: var(--navy-900); }
.button--large { min-height: 52px; padding-inline: 24px; border-radius: 14px; }
.button--small { min-height: 34px; padding-inline: 12px; font-size: .8rem; border-radius: 9px; }
.button--block { width: 100%; }
.icon-button { width: 40px; height: 40px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 11px; display: inline-grid; place-items: center; padding: 0; transition: .2s ease; flex: 0 0 auto; }
.icon-button:hover { color: var(--blue-600); border-color: color-mix(in srgb, var(--blue-600) 40%, var(--border)); background: color-mix(in srgb, var(--blue-600) 5%, var(--surface)); }
.icon-button--danger { color: var(--red-500); }
.text-link, .link-button { color: var(--blue-600); font-weight: 650; font-size: .87rem; }
.link-button { border: 0; background: none; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
.text-link:hover, .link-button:hover { color: var(--blue-500); }

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__mark { width: 42px; height: 42px; background: var(--gradient-primary); color: white; border-radius: 13px; display: grid; place-items: center; box-shadow: 0 9px 24px rgba(20, 103, 238, .24); }
.brand__mark .material-symbols-rounded { font-size: 27px; font-variation-settings: 'FILL' 1; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.brand b { font: 800 1.05rem var(--font-display); }
.brand small { color: var(--text-3); font-size: .69rem; letter-spacing: .08em; }

.public-shell { min-height: 100vh; overflow: hidden; background: var(--surface); }
.public-shell--transparent { background: var(--navy-950); }
.public-header { height: 76px; max-width: 1240px; margin: auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 28px; position: relative; z-index: 20; }
.public-shell--transparent .public-header { color: white; }
.public-shell--transparent .public-header .brand small { color: rgba(255,255,255,.55); }
.public-header nav { display: flex; align-items: center; gap: 30px; font-size: .88rem; color: color-mix(in srgb, currentColor 76%, transparent); }
.public-header nav a:hover { color: var(--blue-400); }
.public-header__actions { display: flex; align-items: center; gap: 10px; }
.public-shell--transparent .public-header .icon-button { background: rgba(255,255,255,.07); color: white; border-color: rgba(255,255,255,.13); }
.public-footer { max-width: 1240px; margin: auto; min-height: 120px; padding: 30px 24px; display: flex; align-items: center; gap: 30px; border-top: 1px solid var(--border); color: var(--text-2); }
.public-shell--transparent .public-footer { color: rgba(255,255,255,.62); border-color: rgba(255,255,255,.1); }
.public-footer p { margin-inline-end: auto; }

.hero { min-height: 740px; margin-top: -76px; padding: 140px 24px 40px; color: white; position: relative; background: radial-gradient(circle at 83% 25%, rgba(21,101,238,.27), transparent 32%), radial-gradient(circle at 15% 60%, rgba(27,190,222,.13), transparent 31%), linear-gradient(145deg,#04132b 0%,#071d3e 50%,#05152d 100%); }
.hero::before { content:''; position:absolute; inset:0; opacity:.22; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:58px 58px; mask-image:linear-gradient(to bottom,black,transparent 86%); }
.hero__content { max-width: 1240px; margin: auto; min-height: 520px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 65px; position: relative; z-index: 2; }
.hero__copy { position: relative; z-index: 3; }
.pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(77,158,255,.28); background: rgba(29,100,202,.15); color: #a9d2ff; padding: 8px 13px; border-radius: 999px; font-size: .78rem; font-weight: 650; backdrop-filter: blur(10px); }
.pill--light { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: white; }
.hero h1 { font: 800 clamp(2.8rem,5vw,5.1rem)/1.16 var(--font-display); letter-spacing: -.04em; margin: 24px 0 20px; }
.hero h1 em { color: transparent; background: linear-gradient(90deg,#4f9dff,#3fdbf2); background-clip: text; font-style: normal; }
.hero__copy > p { color: rgba(225,237,255,.69); font-size: 1.05rem; line-height: 2; max-width: 610px; }
.hero__actions { display:flex; gap:12px; margin-top:30px; }
.trust-row { display:flex; gap:27px; margin-top:40px; padding-top:27px; border-top:1px solid rgba(255,255,255,.1); }
.trust-row div { display:flex; flex-direction:column; gap:4px; }
.trust-row b { font-size:.83rem; }
.trust-row span { font-size:.73rem; color:rgba(255,255,255,.48); }
.hero__visual { height: 500px; position: relative; perspective: 1200px; }
.dashboard-preview { width: 680px; height: 430px; position:absolute; top:30px; left:-80px; border:1px solid rgba(255,255,255,.14); border-radius:22px; overflow:hidden; display:flex; background:rgba(11,30,62,.88); box-shadow:0 45px 100px rgba(0,0,0,.42); transform:rotateY(5deg) rotateX(1deg); backdrop-filter:blur(20px); }
.preview-sidebar { width:72px; border-left:1px solid rgba(255,255,255,.08); background:rgba(4,17,39,.58); padding:18px 12px; display:flex; flex-direction:column; align-items:center; gap:15px; }
.preview-logo { width:40px;height:40px;border-radius:12px;background:var(--gradient-primary);display:grid;place-items:center;margin-bottom:16px; }
.preview-sidebar i { width:42px;height:42px;display:grid;place-items:center;border-radius:11px;color:rgba(255,255,255,.35);font-style:normal; }
.preview-sidebar i.active { color:#fff;background:rgba(48,126,255,.24); }
.preview-main { flex:1;padding:18px; }
.preview-top { height:35px;display:flex;justify-content:space-between;align-items:center; }
.preview-top > span { width:120px;height:10px;border-radius:10px;background:rgba(255,255,255,.1); }
.preview-top div { display:flex;gap:7px; }.preview-top i{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.07);}
.preview-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px; }
.preview-stats article { padding:15px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.035);border-radius:12px;display:flex;flex-direction:column;gap:4px; }
.preview-stats span,.preview-stats small{font-size:.58rem;color:rgba(255,255,255,.43)}.preview-stats b{font-size:1.15rem}.preview-chart{height:145px;margin-top:12px;position:relative;background:rgba(255,255,255,.025);border-radius:12px;overflow:hidden}.preview-chart svg{position:absolute;inset:20px 12px 10px;color:#4089ff;width:calc(100% - 24px);height:calc(100% - 30px)}
.chart-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:55px 35px}.preview-list{margin-top:10px;display:grid;gap:6px}.preview-list>div{height:34px;border-radius:8px;background:rgba(255,255,255,.035);display:flex;align-items:center;gap:8px;padding:0 12px;font-size:.58rem}.preview-list b{flex:1}.preview-list em{font-style:normal;color:rgba(255,255,255,.42)}
.dot { width:6px;height:6px;border-radius:50%;background:var(--text-3)}.dot--success{background:#27dc9a;box-shadow:0 0 10px #27dc9a}.dot--warning{background:#f9a846}
.floating-card { position:absolute;z-index:3;border:1px solid rgba(255,255,255,.15);background:rgba(17,45,87,.8);backdrop-filter:blur(18px);border-radius:14px;padding:12px 15px;display:flex;align-items:center;gap:10px;box-shadow:0 18px 45px rgba(0,0,0,.28);animation:float 5s ease-in-out infinite; }
.floating-card>.material-symbols-rounded{width:37px;height:37px;border-radius:10px;display:grid;place-items:center;background:rgba(40,208,147,.14);color:#43e6aa}.floating-card div{display:flex;flex-direction:column}.floating-card b{font-size:.72rem}.floating-card span{font-size:.6rem;color:rgba(255,255,255,.5)}.floating-card--status{right:-20px;top:55px}.floating-card--audio{left:-50px;bottom:15px;animation-delay:-2.4s}.floating-card--audio>.material-symbols-rounded{color:#5ba8ff;background:rgba(64,137,255,.15)}
.hero__logos { max-width:1240px;margin:30px auto 0;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.26);border-top:1px solid rgba(255,255,255,.08);padding-top:28px }.hero__logos span{font-size:.72rem}.hero__logos b{font:600 .82rem var(--font-display);letter-spacing:.03em}
.section { max-width:1240px;margin:auto;padding:110px 24px; }.services-section{background:var(--surface)}.section-heading{text-align:center;max-width:680px;margin:0 auto 50px}.section-heading>span,.eyebrow{font-size:.75rem;color:var(--blue-600);font-weight:800;letter-spacing:.03em}.section-heading h2,.feature-copy h2{font:800 clamp(2rem,3.5vw,3rem)/1.45 var(--font-display);margin:12px 0}.section-heading p,.feature-copy>p{color:var(--text-2);line-height:1.95}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.service-card{border:1px solid var(--border);border-radius:22px;padding:30px;background:var(--surface);position:relative;box-shadow:var(--shadow-sm);transition:.25s ease}.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--blue-600) 25%,var(--border))}.service-card--primary{background:linear-gradient(160deg,color-mix(in srgb,var(--blue-600) 8%,var(--surface)),var(--surface) 65%)}.service-card__icon{width:55px;height:55px;border-radius:17px;display:grid;place-items:center;background:color-mix(in srgb,var(--blue-600) 10%,var(--surface));color:var(--blue-600)}.service-card__icon .material-symbols-rounded{font-size:29px}.service-tag{position:absolute;left:25px;top:25px;border-radius:99px;padding:5px 10px;background:color-mix(in srgb,var(--green-500) 12%,var(--surface));color:var(--green-500);font-size:.7rem;font-weight:800}.service-card h3{font:800 1.3rem var(--font-display);margin:22px 0 10px}.service-card p{color:var(--text-2);line-height:1.85;font-size:.88rem;min-height:73px}.service-card ul{list-style:none;padding:0;margin:23px 0;display:grid;gap:11px;color:var(--text-2);font-size:.82rem}.service-card li{display:flex;align-items:center;gap:8px}.service-card li .material-symbols-rounded{font-size:18px;color:var(--green-500)}.service-card>a{display:flex;align-items:center;justify-content:space-between;color:var(--blue-600);font-weight:750;font-size:.85rem;padding-top:17px;border-top:1px solid var(--border)}
.feature-section{max-width:none;background:var(--bg);display:grid;grid-template-columns:minmax(0,580px) minmax(420px,560px);justify-content:center;align-items:center;gap:100px}.feature-copy{}.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:35px}.feature-list>div{display:flex;gap:12px;align-items:flex-start}.feature-list>.material-symbols-rounded{}.feature-list>div>.material-symbols-rounded{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--surface);color:var(--blue-600);box-shadow:var(--shadow-sm)}.feature-list span{display:flex;flex-direction:column;gap:4px}.feature-list b{font-size:.86rem}.feature-list small{font-size:.74rem;color:var(--text-2);line-height:1.6}.feature-orbit{height:490px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px dashed color-mix(in srgb,var(--blue-600) 20%,var(--border));border-radius:50%}.orbit--1{width:310px;height:310px}.orbit--2{width:450px;height:450px}.orbit-center{width:150px;height:150px;border-radius:45px;background:var(--gradient-primary);color:white;box-shadow:0 30px 65px rgba(18,99,238,.3);display:flex;flex-direction:column;align-items:center;justify-content:center}.orbit-center>.material-symbols-rounded{font-size:42px}.orbit-center b{font:700 1.1rem var(--font-display);margin-top:5px}.orbit-center span{font-size:.68rem;opacity:.65}.orbit-item{position:absolute;width:110px;height:92px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-md);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:.76rem;font-weight:700}.orbit-item>.material-symbols-rounded{color:var(--blue-600);font-size:28px}.orbit-item--1{top:28px}.orbit-item--2{right:12px}.orbit-item--3{bottom:28px}.orbit-item--4{left:12px}
.cta-section{max-width:1192px;margin:80px auto 110px;border-radius:28px;padding:55px 60px;background:var(--gradient-primary);color:white;display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:0 30px 70px rgba(18,99,238,.24);position:relative;overflow:hidden}.cta-section::after{content:'';width:370px;height:370px;border:80px solid rgba(255,255,255,.07);border-radius:50%;position:absolute;left:-80px;top:-150px}.cta-section>div,.cta-section>a{position:relative;z-index:2}.cta-section h2{font:800 2rem/1.5 var(--font-display);margin:13px 0 7px}.cta-section p{margin:0;color:rgba(255,255,255,.72)}

.auth-page{min-height:calc(100vh - 196px);display:grid;grid-template-columns:1fr 1fr;background:var(--surface)}.auth-visual{min-height:670px;padding:70px;display:flex;align-items:center;color:white;background:radial-gradient(circle at 15% 20%,rgba(41,126,255,.35),transparent 30%),linear-gradient(145deg,var(--navy-950),#0b2855);position:relative;overflow:hidden}.auth-visual::before{content:'';position:absolute;width:520px;height:520px;border:90px solid rgba(255,255,255,.035);border-radius:50%;left:-180px;bottom:-200px}.auth-visual__content{max-width:510px;position:relative;z-index:2}.auth-visual h1{font:800 clamp(2.5rem,4vw,4rem)/1.45 var(--font-display);margin:28px 0 15px}.auth-visual__content>p{color:rgba(255,255,255,.63);line-height:2;margin-bottom:38px}.auth-feature{display:flex;align-items:center;gap:14px;border-top:1px solid rgba(255,255,255,.1);padding:18px 0}.auth-feature>.material-symbols-rounded{width:44px;height:44px;border-radius:13px;background:rgba(52,137,255,.18);display:grid;place-items:center;color:#70b4ff}.auth-feature span{display:flex;flex-direction:column;gap:4px}.auth-feature b{font-size:.86rem}.auth-feature small{font-size:.73rem;color:rgba(255,255,255,.48)}.auth-panel{padding:40px clamp(25px,6vw,100px);display:flex;align-items:center;justify-content:center;position:relative}.auth-back{position:absolute;top:30px;right:40px;color:var(--text-2);font-size:.8rem;display:flex;align-items:center;gap:7px}.auth-box{width:100%;max-width:430px}.auth-heading{text-align:center;margin-bottom:28px}.auth-icon{width:62px;height:62px;margin:auto;border-radius:20px;display:grid;place-items:center;background:color-mix(in srgb,var(--blue-600) 10%,var(--surface));color:var(--blue-600)}.auth-icon>.material-symbols-rounded{font-size:31px}.auth-heading h2{font:800 1.65rem var(--font-display);margin:15px 0 8px}.auth-heading p{color:var(--text-2);line-height:1.8;font-size:.86rem}.auth-form{display:grid;gap:17px}.auth-legal{text-align:center;color:var(--text-3);font-size:.7rem;line-height:1.8;margin-top:20px}.auth-change-phone{margin-bottom:15px}.input-with-prefix{display:flex;direction:ltr}.input-with-prefix input{border-radius:0 11px 11px 0!important}.input-with-prefix em{font-style:normal;min-width:60px;border:1px solid var(--border);border-left:0;border-radius:11px 0 0 11px;display:grid;place-items:center;color:var(--text-2);background:var(--surface-2)}.otp-input{text-align:center!important;letter-spacing:.5em;font-size:1.3rem!important;font-weight:800}.check-row{display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--text-2);cursor:pointer}.check-row input{position:absolute;opacity:0}.check-row span{width:20px;height:20px;border:1px solid var(--border);border-radius:6px;display:grid;place-items:center}.check-row span>.material-symbols-rounded{font-size:15px;opacity:0}.check-row input:checked+span{background:var(--blue-600);border-color:var(--blue-600);color:white}.check-row input:checked+span>.material-symbols-rounded{opacity:1; border: none;}
.error-page{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}.error-page>span{width:90px;height:90px;border-radius:28px;background:color-mix(in srgb,var(--blue-600) 10%,var(--surface));color:var(--blue-600);display:grid;place-items:center}.error-page>span>.material-symbols-rounded{font-size:48px}.error-page h1{font:800 2rem var(--font-display);margin:22px 0 8px}.error-page p{color:var(--text-2);margin:0 0 22px}

.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);background:var(--bg)}.sidebar{position:fixed;right:0;top:0;bottom:0;width:var(--sidebar-width);background:var(--navy-950);color:white;z-index:50;display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(3,16,37,.08)}.sidebar__top{height:76px;padding:0 20px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.08)}.brand--sidebar .brand__mark{width:39px;height:39px}.brand--sidebar small{color:rgba(255,255,255,.42)}.sidebar__mobile-close{display:none;margin-right:auto;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:white}.sidebar__scroll{flex:1;overflow:auto;padding:20px 14px 30px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.13) transparent}.nav-label{display:block;color:rgba(255,255,255,.34);font-size:.66rem;font-weight:700;padding:8px 12px;margin-bottom:5px}.nav-label--admin{margin-top:20px;color:#75b5ff}.sidebar nav{display:grid;gap:4px}.nav-item{min-height:44px;padding:0 13px;border-radius:11px;display:flex;align-items:center;gap:11px;color:rgba(230,240,255,.62);font-size:.83rem;font-weight:550;transition:.18s ease;position:relative}.nav-item:hover{background:rgba(255,255,255,.055);color:white}.nav-item--active{background:linear-gradient(90deg,rgba(25,111,255,.27),rgba(25,111,255,.1));color:white;font-weight:700}.nav-item--active::before{content:'';position:absolute;right:-14px;width:3px;height:24px;border-radius:3px 0 0 3px;background:#4d9bff;box-shadow:0 0 14px #4d9bff}.nav-item--active>.material-symbols-rounded{color:#63a8ff;font-variation-settings:'FILL' 1,'wght' 500}.nav-item>.material-symbols-rounded{font-size:21px}.sidebar__footer{min-height:75px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px}.sidebar-user{display:flex;align-items:center;gap:10px;min-width:0;flex:1;text-align: right;}.sidebar-user>div{display:flex;flex-direction:column;min-width:0}.sidebar-user b{font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user small{color:rgba(255,255,255,.38);font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar__footer>.icon-button{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.55)}.avatar{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#1a67e1,#26a8e6);color:white;display:grid;place-items:center;flex:0 0 auto}.avatar--small{width:37px;height:37px;border-radius:11px}.workspace{grid-column:2;min-width:0}.topbar{height:76px;position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--surface) 88%,transparent);border-bottom:1px solid color-mix(in srgb,var(--border) 78%,transparent);backdrop-filter:blur(18px);padding:0 28px;display:flex;align-items:center;justify-content:space-between}.topbar>div{display:flex;align-items:center;gap:12px}.topbar__menu{display:none}.topbar__title{display:flex;flex-direction:column}.topbar__title small{font-size:.65rem;color:var(--text-3)}.topbar__title b{font:700 .94rem var(--font-display)}.topbar__actions{display:flex;gap:8px}.content{padding:30px 30px 70px;max-width:1600px;width:100%;margin:auto}.sidebar-backdrop{display:none}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:26px}.page-header h1{font:800 clamp(1.55rem,2.2vw,2.1rem) var(--font-display);margin:5px 0 7px;letter-spacing:-.015em}.page-header p{margin:0;color:var(--text-2);font-size:.86rem;line-height:1.8}.page-header__actions{display:flex;gap:8px;align-items:center}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.stats-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}.stat-card{min-height:125px;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);padding:20px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.stat-card::after{content:'';position:absolute;width:90px;height:90px;border-radius:50%;left:-35px;top:-40px;background:currentColor;opacity:.045}.stat-card__icon{width:49px;height:49px;border-radius:15px;display:grid;place-items:center;flex:0 0 auto}.stat-card__icon>.material-symbols-rounded{font-size:27px}.stat-card>div:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}.stat-card span{font-size:.73rem;color:var(--text-2)}.stat-card strong{font:800 1.42rem var(--font-display);white-space:nowrap}.stat-card small{font-size:.65rem;color:var(--text-3)}.stat-card--blue{color:var(--blue-600)}.stat-card--blue .stat-card__icon{background:color-mix(in srgb,var(--blue-600) 10%,var(--surface))}.stat-card--purple{color:var(--purple-500)}.stat-card--purple .stat-card__icon{background:color-mix(in srgb,var(--purple-500) 10%,var(--surface))}.stat-card--orange{color:var(--orange-500)}.stat-card--orange .stat-card__icon{background:color-mix(in srgb,var(--orange-500) 11%,var(--surface))}.stat-card--cyan{color:#0aa9c7}.stat-card--cyan .stat-card__icon{background:color-mix(in srgb,var(--cyan-400) 12%,var(--surface))}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(330px,.9fr);gap:20px;margin-bottom:20px}.dashboard-grid--bottom{grid-template-columns:1fr 1fr}.admin-overview-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;margin-bottom:20px}.card{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);min-width:0}.card__header{min-height:62px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--border)}.card__header>div{display:flex;align-items:center;gap:9px}.card__header>div>.material-symbols-rounded{color:var(--blue-600);font-size:21px}.card__header h2{font:750 .93rem var(--font-display);margin:0}.card__body{padding:20px}.card__body>.table-wrap{margin:-20px}.table-wrap{width:calc(100% + 0px);overflow:auto;scrollbar-width:thin}.table-wrap table{width:100%;border-collapse:collapse;min-width:650px}.table-wrap th{text-align:right;color:var(--text-3);font-size:.68rem;font-weight:700;background:var(--surface-2);padding:12px 16px;border-bottom:1px solid var(--border);white-space:nowrap}.table-wrap td{padding:14px 16px;border-bottom:1px solid var(--border);font-size:.78rem;color:var(--text-2);vertical-align:middle}.table-wrap tbody tr:last-child td{border-bottom:0}.table-wrap tbody tr:hover{background:color-mix(in srgb,var(--blue-600) 2.5%,var(--surface))}.table-primary{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-align: right;}.table-primary>.material-symbols-rounded{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--blue-600) 9%,var(--surface));color:var(--blue-600);flex:0 0 auto}.table-primary>span{display:flex;flex-direction:column;gap:2px}.table-primary b{font-size:.78rem}.table-primary small{font-size:.64rem;color:var(--text-3)}.table-actions{display:flex;gap:5px;align-items:center}.table-actions .icon-button{width:34px;height:34px;border-radius:9px}.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:99px;font-size:.66rem;font-weight:750;white-space:nowrap}.badge i{width:6px;height:6px;border-radius:50%;background:currentColor}.badge--success{color:var(--green-500);background:color-mix(in srgb,var(--green-500) 10%,var(--surface))}.badge--warning{color:#db862e;background:color-mix(in srgb,var(--orange-500) 12%,var(--surface))}.badge--danger{color:var(--red-500);background:color-mix(in srgb,var(--red-500) 10%,var(--surface))}.badge--info{color:var(--blue-600);background:color-mix(in srgb,var(--blue-600) 9%,var(--surface))}.badge--neutral{color:var(--text-2);background:var(--surface-3)}.empty-state{min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;color:var(--text-2)}.empty-state>.material-symbols-rounded{font-size:45px;color:var(--text-3);margin-bottom:8px}.empty-state h3{font:750 1rem var(--font-display);color:var(--text);margin:8px}.empty-state p{font-size:.77rem;line-height:1.8;max-width:350px;margin:0 0 15px}.pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px}.pagination button{border:1px solid var(--border);background:var(--surface);color:var(--text-2);height:36px;padding:0 12px;border-radius:9px;display:flex;align-items:center;gap:5px;font-size:.74rem}.pagination button:disabled{opacity:.4}.pagination span{font-size:.7rem;color:var(--text-3)}
.notification-list{display:grid}.notification-list article{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--border)}.notification-list article:last-child{border:0}.notification-list article>span{width:35px;height:35px;border-radius:10px;background:color-mix(in srgb,var(--blue-600) 9%,var(--surface));color:var(--blue-600);display:grid;place-items:center;flex:0 0 auto}.notification-list article>div{min-width:0}.notification-list b{font-size:.76rem}.notification-list p{font-size:.69rem;color:var(--text-2);margin:3px 0;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-list small{font-size:.6rem;color:var(--text-3)}.mini-chart{height:260px;display:flex;flex-direction:column}.mini-chart__bars{flex:1;display:flex;align-items:flex-end;gap:9px;border-bottom:1px solid var(--border);padding:20px 5px 0}.mini-chart__item{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px}.mini-chart__item i{width:min(25px,65%);min-height:8px;border-radius:6px 6px 2px 2px;background:var(--blue-600);opacity:.8}.mini-chart__item i.credit{background:var(--green-500)}.mini-chart__item i.debit{background:var(--orange-500)}.mini-chart__item small{font-size:.52rem;color:var(--text-3);white-space:nowrap}.mini-chart__legend{display:flex;justify-content:center;gap:18px;padding-top:12px;font-size:.65rem;color:var(--text-2)}.mini-chart__legend span{display:flex;align-items:center;gap:5px}.mini-chart__legend i{width:8px;height:8px;border-radius:2px}.mini-chart__legend i.credit{background:var(--green-500)}.mini-chart__legend i.debit{background:var(--orange-500)}.notice{min-height:48px;padding:10px 14px;border-radius:12px;align-items:center;gap:10px;margin-bottom:18px;font-size:.77rem; display: flex; align-items: center;}.notice span{}.notice button{border:0;background:none;color:inherit;font-weight:700}.notice--warning{background:color-mix(in srgb,var(--orange-500) 11%,var(--surface));color:#bb7025;border:1px solid color-mix(in srgb,var(--orange-500) 22%,var(--border))}.notice--neutral{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.resource-grid>.empty-state{grid-column:1/-1}.resource-card{border:1px solid var(--border);background:var(--surface);border-radius:18px;padding:20px;box-shadow:var(--shadow-sm);transition:.22s}.resource-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}.resource-card>header{display:flex;align-items:center;justify-content:space-between}.resource-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--blue-600) 10%,var(--surface));color:var(--blue-600)}.resource-icon>.material-symbols-rounded{font-size:27px}.resource-card h3{font:750 1.04rem var(--font-display);margin:20px 0 4px}.resource-card>p{color:var(--text-3);font-size:.73rem;margin:0}.resource-meta{display:grid;gap:10px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:16px 0;margin:18px 0}.resource-meta span{display:flex;align-items:center;gap:7px;color:var(--text-2);font-size:.7rem}.resource-meta .material-symbols-rounded{font-size:18px;color:var(--text-3)}.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px}.detail-main{display:grid;gap:20px;align-content:start}.detail-aside,.detail-grid>aside{display:grid;gap:20px;align-content:start}.service-status-hero{display:flex;align-items:center;gap:17px;padding:5px 0 20px}.service-status-hero__icon{width:70px;height:70px;border-radius:22px;background:var(--gradient-primary);color:white;display:grid;place-items:center;box-shadow:0 15px 35px rgba(18,99,238,.24)}.service-status-hero__icon>.material-symbols-rounded{font-size:37px}.service-status-hero>div:last-child{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.service-status-hero span:first-child{width:100%;font-size:.7rem;color:var(--text-3)}.service-status-hero p{width:100%;margin:0;color:var(--text-2);font-size:.73rem}.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.quick-action{min-height:84px;border:1px solid var(--border);background:var(--surface-2);border-radius:13px;padding:12px;display:flex;align-items:center;gap:9px;text-align:right;color:var(--text)}.quick-action:hover{border-color:color-mix(in srgb,var(--blue-600) 35%,var(--border));background:color-mix(in srgb,var(--blue-600) 4%,var(--surface))}.quick-action>.material-symbols-rounded{width:36px;height:36px;border-radius:10px;background:var(--surface);color:var(--blue-600);display:grid;place-items:center;box-shadow:var(--shadow-sm)}.quick-action span{display:flex;flex-direction:column;gap:2px}.quick-action b{font-size:.72rem}.quick-action small{font-size:.59rem;color:var(--text-3)}.description-list{margin:0;display:grid}.description-list>div{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid var(--border)}.description-list>div:last-child{border:0}.description-list dt{font-size:.7rem;color:var(--text-3)}.description-list dd{margin:0;font-size:.73rem;color:var(--text);font-weight:650;text-align:left}.description-list--grid{grid-template-columns:1fr 1fr;gap:0 30px}.help-box{text-align:center;padding:10px}.help-box>.material-symbols-rounded{font-size:42px;color:var(--blue-600)}.help-box p{font-size:.73rem;color:var(--text-2);line-height:1.85}.playlist-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.playlist-card{border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;align-items:center;gap:10px}.playlist-card>span{width:37px;height:37px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--purple-500) 10%,var(--surface));color:var(--purple-500)}.playlist-card>div{flex:1;display:flex;flex-direction:column}.playlist-card b{font-size:.73rem}.playlist-card small{font-size:.62rem;color:var(--text-3)}.playlist-card .icon-button{width:33px;height:33px}.metric-bar{display:grid;gap:8px}.metric-bar>div:first-child{display:flex;justify-content:space-between;font-size:.7rem}.metric-bar span{color:var(--text-2)}.metric-bar b{font-size:.67rem}.metric-bar__track{height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden}.metric-bar__track i{display:block;height:100%;border-radius:99px;background:var(--gradient-primary)}.capacity-list{display:grid;gap:20px}.ops-health>div{display:flex;justify-content:center;gap:20px}.ops-ring{width:115px;height:115px;border:9px solid color-mix(in srgb,var(--blue-600) 15%,var(--border));border-top-color:var(--blue-600);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}.ops-ring b{font:800 1.5rem var(--font-display)}.ops-ring small{font-size:.58rem;color:var(--text-3)}.ops-health ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}.ops-health li{display:flex;align-items:center;gap:8px;font-size:.7rem;color:var(--text-2)}.ops-health li>.material-symbols-rounded{font-size:18px;color:var(--blue-600)}

.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field>span{font-size:.72rem;font-weight:650;color:var(--text-2)}.field>span b{color:var(--red-500);margin-right:3px}.field input,.field textarea,.field select{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:11px;outline:0;padding:0 12px;transition:.18s}.field input,.field select{height:44px}.field textarea{min-height:120px;padding-block:11px;resize:vertical;line-height:1.8}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue-500) 12%,transparent)}.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}.field small{font-size:.62rem;color:var(--text-3)}.field--full{grid-column:1/-1}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.toggle{display:flex;align-items:center;gap:9px;min-height:44px;cursor:pointer}.toggle input{position:absolute;opacity:0}.toggle span{width:40px;height:22px;border-radius:99px;background:var(--surface-3);border:1px solid var(--border);position:relative;transition:.2s}.toggle span::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;top:2px;right:3px;background:var(--text-3);transition:.2s}.toggle input:checked+span{background:var(--blue-600);border-color:var(--blue-600)}.toggle input:checked+span::after{right:19px;background:white}.toggle em{font-style:normal;font-size:.74rem;color:var(--text-2)}.readonly-form input{background:var(--surface-2);text-align: right; color:var(--text-2);cursor:default}.dialog{width:min(560px,calc(100vw - 28px));max-height:calc(100vh - 40px);border:0;padding:0;background:transparent;color:var(--text);overflow:visible}.dialog--wide{width:min(800px,calc(100vw - 28px))}.dialog::backdrop{background:rgba(4,14,31,.64);backdrop-filter:blur(4px)}.dialog__surface{background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;animation:dialogIn .2s ease}.dialog__header{padding:20px 22px;display:flex;align-items:flex-start;justify-content:space-between;gap:15px;border-bottom:1px solid var(--border)}.dialog__header h2{font:780 1.08rem var(--font-display);margin:0}.dialog__header p{font-size:.69rem;color:var(--text-2);line-height:1.7;margin:5px 0 0}.dialog__content{padding:22px;max-height:calc(100vh - 210px);overflow:auto}.dialog__actions{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;background:var(--surface-2)}.dialog-loading{min-height:170px;display:flex;align-items:center;justify-content:center;gap:11px;color:var(--text-2);font-size:.78rem}.spinner{width:23px;height:23px;border:3px solid var(--border);border-top-color:var(--blue-600);border-radius:50%;animation:spin .7s linear infinite}.dialog-toolbar{display:flex;gap:8px;justify-content:flex-end;margin-bottom:17px}.toast-root{position:fixed;left:20px;bottom:20px;z-index:200;display:grid;gap:10px;width:min(390px,calc(100vw - 40px))}.toast{min-height:58px;padding:10px 12px;border:1px solid var(--border);border-right:4px solid var(--blue-600);border-radius:13px;background:color-mix(in srgb,var(--surface) 93%,transparent);backdrop-filter:blur(18px);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;animation:toastIn .22s ease}.toast>.material-symbols-rounded{color:var(--blue-600)}.toast__message{font-size:.75rem;line-height:1.65;flex:1}.toast__close{width:30px;height:30px;border:0;background:transparent}.toast--success{border-right-color:var(--green-500)}.toast--success>.material-symbols-rounded{color:var(--green-500)}.toast--error{border-right-color:var(--red-500)}.toast--error>.material-symbols-rounded{color:var(--red-500)}.toast--warning{border-right-color:var(--orange-500)}.toast--warning>.material-symbols-rounded{color:var(--orange-500)}.toast--exit{animation:toastOut .18s ease forwards}
.category-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:25px}.category-tab{min-height:82px;border:1px solid var(--border);background:var(--surface);border-radius:15px;padding:14px;display:flex;align-items:center;gap:12px}.category-tab>.material-symbols-rounded{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;background:var(--surface-3);color:var(--text-2)}.category-tab>span{display:flex;flex-direction:column;gap:3px}.category-tab b{font-size:.78rem}.category-tab small{font-size:.63rem;color:var(--text-3)}.category-tab--active{border-color:color-mix(in srgb,var(--blue-600) 42%,var(--border));background:color-mix(in srgb,var(--blue-600) 5%,var(--surface))}.category-tab--active>.material-symbols-rounded{background:var(--blue-600);color:white}.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}.pricing-card{border:1px solid var(--border);background:var(--surface);border-radius:20px;padding:25px;position:relative;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}.pricing-card--featured{border-color:color-mix(in srgb,var(--blue-600) 38%,var(--border));box-shadow:0 18px 50px rgba(18,99,238,.13)}.pricing-card__badge{position:absolute;top:-12px;left:22px;background:var(--gradient-primary);color:white;border-radius:99px;padding:6px 11px;font-size:.65rem;font-weight:750}.pricing-card__icon{width:53px;height:53px;border-radius:16px;background:color-mix(in srgb,var(--blue-600) 10%,var(--surface));color:var(--blue-600);display:grid;place-items:center}.pricing-card__icon>.material-symbols-rounded{font-size:29px}.pricing-card h3{font:780 1.05rem var(--font-display);margin:18px 0 6px}.pricing-card>p{min-height:64px;color:var(--text-2);font-size:.74rem;line-height:1.8}.pricing-card__price{display:flex;align-items:baseline;gap:7px;margin:17px 0}.pricing-card__price b{font:800 1.7rem var(--font-display)}.pricing-card__price span{font-size:.65rem;color:var(--text-3)}.pricing-card ul{list-style:none;padding:17px 0;margin:0 0 18px;border-top:1px solid var(--border);display:grid;gap:11px;flex:1}.pricing-card li{font-size:.72rem;color:var(--text-2);display:flex;align-items:center;gap:7px}.pricing-card li>.material-symbols-rounded{font-size:17px;color:var(--green-500)}.filter-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.segmented{display:flex;padding:4px;border:1px solid var(--border);background:var(--surface);border-radius:11px;overflow:auto}.segmented a{min-height:34px;padding:0 14px;border-radius:8px;display:grid;place-items:center;font-size:.7rem;color:var(--text-2);white-space:nowrap}.segmented a.active{background:var(--blue-600);color:white;box-shadow:0 5px 14px rgba(18,99,238,.2)}.money{white-space:nowrap}.money--credit{color:var(--green-500)}.money--debit{color:var(--red-500)}
.invoice-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}.invoice-sheet{border:1px solid var(--border);background:var(--surface);border-radius:20px;padding:32px;box-shadow:var(--shadow-sm)}.invoice-sheet>header{display:flex;align-items:center;justify-content:space-between;padding-bottom:25px;border-bottom:1px dashed var(--border)}.invoice-title{padding:28px 0 20px}.invoice-title span{font-size:.7rem;color:var(--text-3)}.invoice-title h2{font:780 1.25rem var(--font-display);margin:5px 0}.invoice-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding:18px;background:var(--surface-2);border-radius:13px;margin:0}.invoice-meta div{min-width:0}.invoice-meta dt{font-size:.62rem;color:var(--text-3);margin-bottom:5px}.invoice-meta dd{margin:0;font-size:.7rem;font-weight:650;word-break:break-all}.invoice-items{display:grid;margin-top:20px}.invoice-items>div{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border)}.invoice-items span{display:flex;flex-direction:column}.invoice-items b{font-size:.76rem}.invoice-items small{font-size:.63rem;color:var(--text-3)}.invoice-sheet>footer{display:flex;align-items:center;justify-content:space-between;margin-top:28px;padding:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--blue-600) 9%,var(--surface)),var(--surface-2));border-radius:14px}.invoice-sheet>footer span{font-size:.75rem;color:var(--text-2)}.invoice-sheet>footer strong{font:800 1.4rem var(--font-display);color:var(--blue-600)}.gateway-list{display:grid;gap:8px;margin:18px 0}.gateway-list label{cursor:pointer}.gateway-list input{position:absolute;opacity:0}.gateway-list label>span{min-height:56px;border:1px solid var(--border);border-radius:12px;padding:10px 13px;display:flex;align-items:center;gap:10px}.gateway-list input:checked+span{border-color:var(--blue-600);background:color-mix(in srgb,var(--blue-600) 6%,var(--surface));box-shadow:0 0 0 2px color-mix(in srgb,var(--blue-600) 12%,transparent)}.gateway-list span>.material-symbols-rounded{color:var(--blue-600)}.gateway-list b{font-size:.76rem}.payment-result{text-align:center;padding:22px 5px}.payment-result>.material-symbols-rounded{font-size:52px;color:var(--green-500)}.payment-result h3{font:750 1.05rem var(--font-display);margin:9px}.payment-result p{font-size:.72rem;color:var(--text-2);line-height:1.8}.support-banner{min-height:85px;border-radius:16px;padding:17px 22px;margin-bottom:18px;background:linear-gradient(120deg,var(--navy-900),#104996);color:white;display:flex;align-items:center;gap:15px;box-shadow:var(--shadow-sm)}.support-banner>span{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.1);display:grid;place-items:center}.support-banner>span>.material-symbols-rounded{font-size:29px}.support-banner b{font:700 .88rem var(--font-display)}.support-banner p{margin:4px 0 0;color:rgba(255,255,255,.58);font-size:.7rem}.ticket-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}.ticket-thread{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}.ticket-thread>header{min-height:62px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.ticket-thread>header>div{display:flex;align-items:center;gap:10px}.ticket-thread>header span,.ticket-thread>header small{font-size:.67rem;color:var(--text-3)}.messages{padding:24px;display:grid;gap:20px;background:var(--surface-2);max-height:640px;overflow:auto}.message{display:flex;gap:10px;max-width:88%}.message--user{margin-right:auto;direction:ltr}.message--user .message__bubble{direction:rtl;background:color-mix(in srgb,var(--blue-600) 8%,var(--surface));border-color:color-mix(in srgb,var(--blue-600) 15%,var(--border))}.message__avatar{width:38px;height:38px;border-radius:11px;background:var(--surface-3);color:var(--text-2);display:grid;place-items:center;flex:0 0 auto}.message--support .message__avatar{background:var(--blue-600);color:white}.message__bubble{border:1px solid var(--border);background:var(--surface);border-radius:15px 5px 15px 15px;padding:13px 15px;min-width:180px}.message--user .message__bubble{border-radius:5px 15px 15px 15px}.message__bubble>header{display:flex;gap:25px;justify-content:space-between}.message__bubble b{font-size:.7rem}.message__bubble header span{font-size:.58rem;color:var(--text-3)}.message__bubble p{font-size:.75rem;line-height:1.9;margin:9px 0 0;color:var(--text-2)}.attachments{display:grid;gap:6px;margin-top:12px}.attachments button{min-height:48px;border:1px solid var(--border);background:var(--surface-2);border-radius:9px;display:flex;align-items:center;gap:8px;padding:7px 9px;color:var(--text)}.attachments button>span{display:flex;flex-direction:column;flex:1;text-align:right}.attachments b{font-size:.65rem}.attachments small{font-size:.55rem;color:var(--text-3)}.attachments .material-symbols-rounded{font-size:18px;color:var(--blue-600)}.reply-box{padding:16px;border-top:1px solid var(--border)}.reply-box textarea{width:100%;min-height:100px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);padding:12px;outline:0;resize:vertical}.reply-box textarea:focus{border-color:var(--blue-600)}.reply-box>div{display:flex;justify-content:flex-start;gap:8px;margin-top:8px}.file-button{overflow:hidden}.notification-timeline,.admin-notification-list{display:grid}.notification-timeline article{display:grid;grid-template-columns:42px 1fr;gap:12px;position:relative;padding-bottom:24px}.notification-timeline article>span{width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--blue-600) 10%,var(--surface));color:var(--blue-600);display:grid;place-items:center;z-index:1}.notification-timeline article:not(:last-child)::before{content:'';position:absolute;right:20px;top:42px;bottom:0;width:1px;background:var(--border)}.notification-timeline header{display:flex;justify-content:space-between;gap:15px}.notification-timeline h3{font:750 .82rem var(--font-display);margin:4px 0}.notification-timeline time{font-size:.6rem;color:var(--text-3)}.notification-timeline p{font-size:.73rem;color:var(--text-2);line-height:1.9;margin:7px 0}.profile-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px}.profile-card{border:1px solid var(--border);background:var(--surface);border-radius:18px;box-shadow:var(--shadow-sm);text-align:center;overflow:hidden;padding-bottom:24px}.profile-cover{height:100px;background:linear-gradient(135deg,var(--navy-900),var(--blue-600))}.profile-avatar{width:82px;height:82px;border:6px solid var(--surface);border-radius:24px;background:var(--gradient-primary);color:white;display:grid;place-items:center;margin:-42px auto 10px}.profile-avatar>.material-symbols-rounded{font-size:40px}.profile-card h2{font:750 1rem var(--font-display);margin:5px}.profile-card>p{font-size:.7rem;color:var(--text-3);margin:4px 0 10px}.profile-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border);margin-top:20px;padding-top:18px}.profile-stats>div{display:flex;flex-direction:column;gap:4px}.profile-stats>div+div{border-right:1px solid var(--border)}.profile-stats span{font-size:.62rem;color:var(--text-3)}.profile-stats b{font-size:.7rem}.account-status{display:grid;margin-top:22px;border-top:1px solid var(--border)}.account-status>div,.security-status>div{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--border)}.account-status>div>.material-symbols-rounded,.security-status>div>.material-symbols-rounded{width:38px;height:38px;border-radius:11px;background:var(--surface-3);color:var(--blue-600);display:grid;place-items:center}.account-status span,.security-status span{display:flex;flex-direction:column;flex:1}.account-status b,.security-status b{font-size:.72rem}.account-status small,.security-status small{font-size:.61rem;color:var(--text-3)}.account-status strong{font-size:.7rem}
.module-strip{min-height:54px;border:1px solid var(--border);background:var(--surface);border-radius:13px;padding:10px 14px;display:flex;align-items:center;gap:8px;margin-bottom:18px;font-size:.7rem;color:var(--text-2)}.module-strip b{padding:5px 9px;border-radius:99px;background:var(--surface-3);color:var(--text)}.gateway-admin-grid,.infra-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.gateway-admin-card,.infra-card{border:1px solid var(--border);background:var(--surface);border-radius:18px;padding:20px;box-shadow:var(--shadow-sm)}.gateway-admin-card header,.infra-card header{display:flex;align-items:center;justify-content:space-between}.gateway-admin-card header>span,.infra-card header>span{width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--blue-600) 10%,var(--surface));color:var(--blue-600);display:grid;place-items:center}.gateway-admin-card h3,.infra-card h3{font:750 1rem var(--font-display);margin:18px 0 5px}.gateway-admin-card p,.infra-card p{font-size:.68rem;color:var(--text-3);min-height:20px}.gateway-admin-card footer{margin-top:20px}.infra-card .metric-bar{margin:18px 0}.infra-card dl{display:grid;gap:8px;margin:16px 0}.infra-card dl>div{display:flex;justify-content:space-between}.infra-card dt{font-size:.62rem;color:var(--text-3)}.infra-card dd{font-size:.66rem;margin:0;font-weight:650}.infra-card footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:14px}.node-status{display:flex;align-items:center;gap:7px;font-size:.68rem;color:var(--text-2)}.node-status>.material-symbols-rounded{color:var(--green-500);font-size:18px}.node-detail__hero{display:flex;align-items:center;gap:14px;margin-bottom:22px}.node-detail__hero>span{width:62px;height:62px;border-radius:19px;background:var(--gradient-primary);color:white;display:grid;place-items:center}.node-detail__hero>span>.material-symbols-rounded{font-size:32px}.node-detail__hero h3{font:750 1.1rem var(--font-display);margin:0 0 4px}.node-detail__hero p{font-size:.68rem;color:var(--text-3);margin:0 0 6px}.admin-notification-list article{display:grid;grid-template-columns:42px 1fr auto;gap:12px;padding:17px 0;border-bottom:1px solid var(--border);align-items:start}.admin-notification-list article:last-child{border:0}.admin-notification-list article>span{width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--blue-600) 9%,var(--surface));color:var(--blue-600);display:grid;place-items:center}.admin-notification-list header{display:flex;align-items:center;gap:10px}.admin-notification-list h3{font:750 .8rem var(--font-display);margin:0}.admin-notification-list p{font-size:.71rem;line-height:1.85;color:var(--text-2);margin:8px 0}.admin-notification-list small{font-size:.6rem;color:var(--text-3)}.provider-state{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:14px;margin-top:18px;font-size:.7rem}.skeleton-page{display:grid;gap:15px}.skeleton{border-radius:12px;background:linear-gradient(90deg,var(--surface-3),color-mix(in srgb,var(--surface-3) 50%,var(--surface)),var(--surface-3));background-size:200% 100%;animation:shimmer 1.25s linear infinite}.skeleton--title{width:260px;height:36px}.skeleton--subtitle{width:420px;max-width:80%;height:14px}.skeleton--stat{height:125px}.skeleton--panel{height:390px}.skeleton-page .stats-grid{margin-top:18px}.audio-fields{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px}

@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{50%{transform:translateY(-10px)}}@keyframes shimmer{to{background-position:-200% 0}}@keyframes dialogIn{from{opacity:0;transform:translateY(12px) scale(.98)}}@keyframes toastIn{from{opacity:0;transform:translateX(-18px)}}@keyframes toastOut{to{opacity:0;transform:translateX(-18px)}}
@media (max-width:1280px){.hero__content{gap:30px}.dashboard-preview{width:620px;left:-100px}.resource-grid,.pricing-grid,.gateway-admin-grid,.infra-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-actions{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1080px){.hero__content{grid-template-columns:1fr;min-height:auto}.hero__copy{text-align:center;max-width:760px;margin:auto}.hero__copy>p{margin-inline:auto}.hero__actions,.trust-row{justify-content:center}.hero__visual{height:430px}.dashboard-preview{left:50%;transform:translateX(-50%);top:10px}.floating-card--status{right:5%}.floating-card--audio{left:5%}.feature-section{grid-template-columns:1fr;gap:40px}.feature-copy{max-width:750px;margin:auto;text-align:center}.feature-list{text-align:right}.feature-orbit{width:min(560px,100%);margin:auto}.app-shell{grid-template-columns:240px minmax(0,1fr);--sidebar-width:240px}.stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.dashboard-grid--bottom,.admin-overview-grid{grid-template-columns:1fr}.detail-grid,.invoice-layout,.ticket-layout{grid-template-columns:1fr}.detail-aside,.detail-grid>aside{grid-template-columns:repeat(2,1fr)}.profile-grid{grid-template-columns:280px 1fr}}
@media (max-width:820px){.public-header nav{display:none}.service-grid{grid-template-columns:1fr}.app-shell{display:block}.sidebar{transform:translateX(105%);transition:.24s ease;box-shadow:var(--shadow-lg)}.app-shell--sidebar-open .sidebar{transform:translateX(0)}.sidebar__mobile-close{display:grid}.sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(3,14,31,.55);backdrop-filter:blur(3px);z-index:45;opacity:0;pointer-events:none;transition:.2s}.app-shell--sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto}.workspace{min-height:100vh}.topbar{padding:0 18px}.topbar__menu{display:grid}.content{padding:23px 18px 60px}.auth-page{grid-template-columns:1fr}.auth-visual{display:none}.auth-panel{min-height:650px}.category-tabs{grid-template-columns:1fr 1fr}.profile-grid{grid-template-columns:1fr}.profile-card{max-width:420px;width:100%;margin:auto}.detail-aside,.detail-grid>aside{grid-template-columns:1fr}.invoice-meta{grid-template-columns:1fr 1fr}.messages{max-height:none}.public-footer{flex-wrap:wrap}.public-footer p{width:100%;order:3}}
@media (max-width:640px){.public-header{height:68px;padding-inline:15px}.public-header__actions .button{padding-inline:12px;font-size:.76rem}.hero{padding:115px 16px 30px}.hero h1{font-size:2.65rem}.hero__copy>p{font-size:.9rem}.hero__actions{flex-direction:column}.trust-row{gap:14px;justify-content:space-between}.trust-row div{text-align:center}.hero__visual{height:330px;margin-top:20px}.dashboard-preview{width:560px;height:350px;transform:translateX(-50%) scale(.75);transform-origin:top center}.floating-card{display:none}.hero__logos{flex-wrap:wrap;gap:15px;justify-content:center}.hero__logos span{width:100%;text-align:center}.section{padding:75px 17px}.feature-list{grid-template-columns:1fr}.feature-orbit{height:390px;transform:scale(.8)}.cta-section{margin:45px 14px 70px;padding:35px 24px;flex-direction:column;align-items:flex-start}.cta-section h2{font-size:1.5rem}.auth-panel{padding:70px 18px 30px}.auth-back{right:18px}.page-header{align-items:flex-start;flex-direction:column}.page-header__actions{width:100%}.page-header__actions .button{flex:1}.stats-grid,.stats-grid--three{grid-template-columns:1fr 1fr;gap:10px}.stat-card{min-height:110px;padding:15px;gap:10px}.stat-card__icon{width:42px;height:42px}.stat-card strong{font-size:1.1rem}.resource-grid,.pricing-grid,.gateway-admin-grid,.infra-grid{grid-template-columns:1fr}.category-tabs{grid-template-columns:1fr}.form-grid,.audio-fields{grid-template-columns:1fr}.field--full{grid-column:auto}.quick-actions{grid-template-columns:1fr 1fr}.playlist-grid{grid-template-columns:1fr}.description-list--grid{grid-template-columns:1fr}.invoice-sheet{padding:20px}.invoice-meta{grid-template-columns:1fr}.ticket-thread>header{align-items:flex-start;flex-direction:column;padding-block:13px}.message{max-width:100%}.messages{padding:15px}.admin-notification-list article{grid-template-columns:38px 1fr}.admin-notification-list article>.table-actions{grid-column:2}.topbar__title small{display:none}.card__body{padding:15px}.card__body>.table-wrap{margin:-15px}.dialog__content{padding:17px}.dialog__header,.dialog__actions{padding-inline:17px}.filter-bar{overflow:auto}.segmented{min-width:max-content}.support-banner{align-items:flex-start}.public-footer{padding-inline:17px}.public-footer>span:last-child{font-size:.7rem}}
@media (max-width:420px){.stats-grid,.stats-grid--three{grid-template-columns:1fr}.stat-card{min-height:95px}.trust-row{display:none}.hero__visual{height:270px}.dashboard-preview{transform:translateX(-50%) scale(.61)}.orbit-item{width:95px}.quick-actions{grid-template-columns:1fr}.topbar__actions>.icon-button:first-child{display:none}.button{padding-inline:13px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.admin-resource-actions{display:grid;gap:9px}

/* Dark-only application refinements */
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 85% 0%, rgba(47,124,255,.11), transparent 34%), radial-gradient(circle at 0% 85%, rgba(43,212,238,.06), transparent 30%); }
.public-shell { background: var(--bg); }
.card { background: linear-gradient(180deg, rgba(15,30,51,.96), rgba(10,23,40,.96)); }
.icon-button.is-spinning .material-symbols-rounded { animation: spin .8s linear infinite; }
.panel-switch { max-width: 170px; }

.nav-group { display: grid; gap: 4px; }
.nav-subtree { margin: 2px 29px 8px 8px; padding-right: 13px; border-right: 1px solid rgba(255,255,255,.1); display: grid; gap: 3px; }
.nav-subitem { min-height: 34px; padding: 7px 10px; border-radius: 9px; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.48); font-size: .72rem; transition: .18s ease; }
.nav-subitem i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.nav-subitem:hover, .nav-subitem--active { color: #d8e8ff; background: rgba(47,124,255,.12); }
.nav-subitem--active { box-shadow: inset -2px 0 #4c91ff; }

.card__body > .table-wrap,
.card__body > .table_wrap {
  width: calc(100% + 40px);
  max-width: none;
  margin-block: -20px;
  margin-inline: -20px;
}
.table-wrap, .table_wrap { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; }

.dashboard-endpoint-note { margin-bottom: 20px; padding: 15px 18px; border: 1px solid rgba(47,124,255,.28); border-radius: 14px; background: linear-gradient(135deg, rgba(47,124,255,.1), rgba(43,212,238,.04)); display: flex; align-items: center; gap: 13px; color: var(--text-2); }
.dashboard-endpoint-note > .material-symbols-rounded { color: var(--cyan-400); font-size: 28px; }
.dashboard-endpoint-note > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dashboard-endpoint-note b { color: var(--text); }
.dashboard-endpoint-note code { direction: ltr; color: #9cc4ff; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.06); border-radius: 7px; padding: 4px 8px; }
.dashboard-endpoint-note small { width: 100%; }
.dashboard-endpoint-note--admin { border-color: rgba(138,108,255,.28); background: linear-gradient(135deg, rgba(138,108,255,.1), rgba(47,124,255,.04)); }

.dashboard-shortcuts, .admin-shortcuts { display: grid; gap: 10px; }
.dashboard-shortcuts { grid-template-columns: 1fr 1fr; }
.admin-shortcuts { grid-template-columns: repeat(2, minmax(0,1fr)); }
.dashboard-shortcuts a, .admin-shortcuts a { min-height: 78px; padding: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.018); border-radius: 13px; display: grid; grid-template-columns: 38px minmax(0,1fr) 24px; align-items: center; gap: 10px; transition: .18s ease; }
.dashboard-shortcuts a:hover, .admin-shortcuts a:hover { transform: translateY(-2px); border-color: rgba(76,145,255,.45); background: rgba(47,124,255,.07); }
.dashboard-shortcuts a > .material-symbols-rounded:first-child, .admin-shortcuts a > .material-symbols-rounded:first-child { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--blue-400); background: rgba(47,124,255,.12); }
.dashboard-shortcuts span, .admin-shortcuts span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dashboard-shortcuts small, .admin-shortcuts small { color: var(--text-3); font-size: .67rem; }
.mock-dashboard-state { min-height: 240px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--text-2); }
.mock-dashboard-state > .material-symbols-rounded { font-size: 48px; color: var(--blue-400); }
.mock-dashboard-state h3 { margin: 13px 0 6px; color: var(--text); }
.mock-dashboard-state p { max-width: 440px; line-height: 1.9; }
.mock-dashboard-state code { direction: ltr; color: #9cc4ff; }

.product-browser { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 20px; align-items: start; }
.product-category-panel { position: sticky; top: 96px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.product-category-panel > header { min-height: 64px; padding: 13px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
.product-category-panel > header > .material-symbols-rounded { color: var(--blue-400); }
.product-category-panel > header div { display: flex; flex-direction: column; }
.product-category-panel > header small { color: var(--text-3); font-size: .67rem; }
.product-category-panel nav { padding: 9px; display: grid; gap: 6px; }
.product-category-panel nav a { min-height: 64px; padding: 10px; border-radius: 11px; display: grid; grid-template-columns: 36px minmax(0,1fr) 20px; align-items: center; gap: 9px; color: var(--text-2); }
.product-category-panel nav a:hover, .product-category-panel nav a.active { background: rgba(47,124,255,.1); color: var(--text); }
.product-category-panel nav a.active { box-shadow: inset -2px 0 var(--blue-500); }
.product-category-panel nav a > .material-symbols-rounded:first-child { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--blue-400); background: rgba(47,124,255,.11); }
.product-category-panel nav a span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.product-category-panel nav a small { color: var(--text-3); font-size: .63rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-browser .pricing-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

.finance-hero { margin-bottom: 20px; display: grid; grid-template-columns: minmax(330px,.9fr) minmax(0,1.1fr); gap: 20px; }
.wallet-bank-card { min-height: 240px; padding: 24px; border-radius: 24px; overflow: hidden; position: relative; color: white; background: radial-gradient(circle at 15% 10%, rgba(43,212,238,.26), transparent 34%), linear-gradient(135deg,#0b3a77,#0c56bd 55%,#0a8fac); box-shadow: 0 25px 70px rgba(0,54,140,.36); display: flex; flex-direction: column; justify-content: space-between; }
.wallet-bank-card::before { content: ''; position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(135deg,black,transparent); }
.wallet-bank-card__shine { position: absolute; width: 220px; height: 220px; border-radius: 50%; left: -70px; bottom: -120px; background: rgba(255,255,255,.1); filter: blur(2px); }
.wallet-bank-card > * { position: relative; z-index: 1; }
.wallet-bank-card header, .wallet-bank-card footer { display: flex; align-items: center; justify-content: space-between; }
.wallet-bank-card header span { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.wallet-bank-card > div:not(.wallet-bank-card__shine) { display: flex; flex-direction: column; gap: 5px; }
.wallet-bank-card small, .wallet-bank-card em { color: rgba(255,255,255,.68); font-style: normal; font-size: .7rem; }
.wallet-bank-card strong { font: 800 1.65rem var(--font-display); }
.wallet-bank-card footer { font-size: .78rem; }
.finance-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.finance-summary article { min-height: 112px; padding: 16px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); display: flex; align-items: center; gap: 12px; }
.finance-summary article > .material-symbols-rounded { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--blue-400); background: rgba(47,124,255,.11); }
.finance-summary span { display: flex; flex-direction: column; gap: 4px; }
.finance-summary small { color: var(--text-3); }
.finance-tabs { margin-bottom: 16px; display: inline-flex; padding: 5px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.finance-tabs a { min-height: 38px; padding: 0 14px; border-radius: 9px; display: flex; align-items: center; gap: 7px; color: var(--text-2); font-size: .78rem; font-weight: 700; }
.finance-tabs a.active { color: white; background: linear-gradient(135deg,#1768ff,#2f7cff); }

.dns-provider-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.dns-provider-card { min-height: 230px; padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg,var(--surface),var(--surface-2)); display: flex; flex-direction: column; transition: .2s ease; }
.dns-provider-card:not(.dns-provider-card--disabled):hover { transform: translateY(-3px); border-color: rgba(76,145,255,.45); box-shadow: var(--shadow-md); }
.dns-provider-card header, .dns-provider-card footer { display: flex; align-items: center; justify-content: space-between; }
.dns-provider-card__logo { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--blue-400); background: rgba(47,124,255,.13); }
.dns-provider-card h3 { margin: 24px 0 8px; font: 750 1.05rem var(--font-display); }
.dns-provider-card p { margin: 0; color: var(--text-2); line-height: 1.9; font-size: .8rem; }
.dns-provider-card footer { margin-top: auto; padding-top: 20px; color: var(--blue-400); font-weight: 700; font-size: .78rem; }
.dns-provider-card--disabled { opacity: .55; }

@media (max-width: 1080px) {
  .product-browser { grid-template-columns: 1fr; }
  .product-category-panel { position: static; }
  .product-category-panel nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .finance-hero { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .panel-switch { font-size: 0; width: 40px; min-height: 40px; padding: 0; }
  .panel-switch .material-symbols-rounded { font-size: 22px; }
  .admin-shortcuts, .dashboard-shortcuts { grid-template-columns: 1fr; }
  .dns-provider-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .card__body > .table-wrap, .card__body > .table_wrap { width: calc(100% + 30px); margin-inline: -15px; margin-block: -15px; }
  .product-browser .pricing-grid, .product-category-panel nav, .finance-summary { grid-template-columns: 1fr; }
  .wallet-bank-card { min-height: 220px; }
  .dns-provider-grid { grid-template-columns: 1fr; }
}

/* Header wallet and public notification center */
.topbar-wallet {
  min-width: 190px;
  height: 44px;
  padding: 5px 8px 5px 6px;
  border: 1px solid rgba(76,145,255,.24);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(47,124,255,.12), rgba(43,212,238,.045));
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-wallet > span { min-width: 0; display: flex; flex: 1; flex-direction: column; line-height: 1.25; }
.topbar-wallet small { color: var(--text-3); font-size: .57rem; }
.topbar-wallet b { color: var(--text); font-size: .72rem; white-space: nowrap; }
.topbar-wallet__add {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--gradient-primary);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(23,104,255,.25);
}
.topbar-wallet__add .material-symbols-rounded { font-size: 19px; }
.topbar-notification { position: relative; overflow: visible; }
.topbar-notification > [data-user-notification-count] {
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: 99px;
  background: #ff5573;
  color: #fff;
  display: grid;
  place-items: center;
  font: 750 .57rem var(--font-primary);
  line-height: 1;
}

.user-notification-list { display: grid; gap: 8px; }
.user-notification-item {
  width: 100%;
  min-height: 76px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.018);
  color: var(--text);
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto 22px;
  align-items: center;
  gap: 11px;
  text-align: right;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.user-notification-item:hover { border-color: rgba(76,145,255,.4); background: rgba(47,124,255,.07); transform: translateY(-1px); }
.user-notification-item__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(47,124,255,.12); color: var(--blue-400); }
.user-notification-item__copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.user-notification-item__copy b { font: 720 .78rem var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-notification-item__copy small { color: var(--text-2); font-size: .66rem; line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-notification-item time { color: var(--text-3); font-size: .59rem; white-space: nowrap; }
.user-notification-item > .material-symbols-rounded:last-child { color: var(--text-3); font-size: 19px; }
.user-notification-list--compact .user-notification-item { min-height: 66px; grid-template-columns: 38px minmax(0,1fr) 20px; }
.user-notification-list--compact .user-notification-item__icon { width: 38px; height: 38px; }
.user-notification-list--compact .user-notification-item time { display: none; }
.notification-empty { min-height: 220px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 7px; color: var(--text-2); }
.notification-empty > .material-symbols-rounded { font-size: 42px; color: var(--blue-400); }
.notification-empty b { color: var(--text); font: 740 .88rem var(--font-display); }
.notification-empty span { max-width: 310px; color: var(--text-3); font-size: .69rem; line-height: 1.8; }
.notification-detail { min-height: 120px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: start; gap: 13px; }
.notification-detail > .material-symbols-rounded { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(47,124,255,.12); color: var(--blue-400); }
.notification-detail p { margin: 2px 0 0; color: var(--text-2); font-size: .76rem; line-height: 2; }
.dialog--compact { width: min(430px, calc(100vw - 28px)); }
.dialog--compact .dialog__content { padding-top: 18px; }

/* Compact finance overview */
.finance-overview { margin-bottom: 20px; display: grid; grid-template-columns: minmax(270px,.7fr) minmax(0,1.3fr); gap: 16px; align-items: stretch; }
.wallet-balance-card {
    min-height: 154px;
    padding: 18px;
    border: 1px solid rgba(76,145,255,.28);
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    background: radial-gradient(circle at 0 100%, rgba(43,212,238,.12), transparent 38%), linear-gradient(145deg, rgba(47,124,255,.15), rgba(13,27,47,.98));
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    gap: inherit;
    justify-items: stretch;
    align-content: stretch;
    grid-auto-flow: row;
    align-items: center;
}
.wallet-balance-card::after { content: ''; position: absolute; width: 150px; height: 150px; left: -75px; top: -80px; border-radius: 50%; border: 24px solid rgba(255,255,255,.025); }
.wallet-balance-card > * { position: relative; z-index: 1; }
.wallet-balance-card__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--gradient-primary); box-shadow: 0 12px 25px rgba(23,104,255,.25); }
.wallet-balance-card > div:nth-child(2) { min-width: 0; display: flex; flex-direction: column-reverse; gap: 1px; }
.wallet-balance-card small, .wallet-balance-card span { color: var(--text-3); font-size: .64rem; }
.wallet-balance-card strong { color: var(--text); font: 800 1.35rem var(--font-display); white-space: nowrap; }
.wallet-balance-card .button { grid-column: 1 / -1; justify-self: start; }
.finance-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.finance-metrics article { min-height: 72px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, rgba(15,30,51,.96), rgba(10,23,40,.96)); display: flex; align-items: center; gap: 11px; }
.finance-metrics article > .material-symbols-rounded { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--blue-400); background: rgba(47,124,255,.1); }
.finance-metrics article span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.finance-metrics article small { color: var(--text-3); font-size: .62rem; }
.finance-metrics article b { color: var(--text); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Route transition overlay */
.route-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  background: rgba(3,10,21,.18);
  backdrop-filter: blur(0);
  opacity: 0;
  pointer-events: none;
  transition: opacity .17s ease, backdrop-filter .17s ease, background .17s ease;
}
.route-loading-overlay[aria-hidden="true"] { display: none; }
.route-loading-overlay--visible { opacity: 1; pointer-events: all; background: rgba(3,10,21,.52); backdrop-filter: blur(8px); }
.route-loading-card { min-width: 190px; padding: 20px 24px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(10,23,40,.9); box-shadow: 0 25px 70px rgba(0,0,0,.35); display: grid; grid-template-columns: 42px 28px; align-items: center; justify-content: center; gap: 12px 15px; }
.route-loading-logo { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--gradient-primary); }
.route-loading-spinner { width: 25px; height: 25px; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--blue-400); border-radius: 50%; animation: spin .7s linear infinite; }
.route-loading-card b { grid-column: 1 / -1; color: var(--text-2); font-size: .68rem; text-align: center; }

/* Rounded table hover surface */
.table-wrap table, .table_wrap table { border-collapse: separate; border-spacing: 0; }
.table-wrap tbody tr:hover td, .table_wrap tbody tr:hover td { background: rgba(47,124,255,.065); }
.table-wrap tbody tr:hover td:first-child, .table_wrap tbody tr:hover td:first-child { border-radius: 0 12px 12px 0; }
.table-wrap tbody tr:hover td:last-child, .table_wrap tbody tr:hover td:last-child { border-radius: 12px 0 0 12px; }

@media (max-width: 1080px) {
  .finance-overview { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .topbar-wallet { min-width: 160px; }
  .topbar-wallet small { display: none; }
}
@media (max-width: 640px) {
  .topbar-wallet { min-width: 0; width: 44px; padding: 5px; border-color: transparent; background: transparent; }
  .topbar-wallet > span { display: none; }
  .topbar-wallet__add { width: 34px; height: 34px; }
  .topbar__actions { gap: 5px; }
  .finance-metrics { grid-template-columns: 1fr 1fr; }
  .user-notification-item { grid-template-columns: 38px minmax(0,1fr) 20px; }
  .user-notification-item time { display: none; }
}
@media (max-width: 420px) {
  .panel-switch { display: none; }
  .finance-metrics { grid-template-columns: 1fr; }
}
.dialog--compact .dialog__header .icon-button { width: 30px; height: 30px; border-radius: 9px; }
.dialog--compact .dialog__header .icon-button .material-symbols-rounded { font-size: 18px; }
#charge-wallet-inline .material-symbols-rounded {
  color: var(--mdi-icon-white) !important;
  font-size: 15px;
}

/* TeaCloud primary mark and resilient vector controls */
.svg-icon { width: 1em; height: 1em; display: block; flex: 0 0 auto; }
.teacloud-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand__mark {
  width: 44px;
  height: 44px;
  padding: 2px;
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}
.brand--sidebar .brand__mark { width: 42px; height: 42px; }
.brand__logo { filter: drop-shadow(0 8px 14px rgba(23,104,255,.2)); }
.preview-logo { padding: 1px; overflow: hidden; }
.preview-logo__image { width: 30px; height: 30px; }
.orbit-center { padding: 16px; }
.orbit-center__logo { width: 58px; height: 58px; margin-bottom: 3px; filter: drop-shadow(0 12px 18px rgba(0,30,90,.28)); }
.stat-card__brand { width: 42px; height: 42px; }
.route-loading-logo { padding: 2px; background: transparent; }
.route-loading-logo__image { width: 42px; height: 42px; filter: drop-shadow(0 9px 16px rgba(23,104,255,.25)); }

.topbar-notification__icon { width: 22px; height: 22px; }
.topbar-notification > [data-user-notification-count] {
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: 99px;
  background: #ff5573;
  color: #fff;
  display: grid;
  place-items: center;
  font: 750 .57rem var(--font-ui);
  line-height: 1;
}

/* Row-based infrastructure management */
.infrastructure-table-card .table-wrap table { min-width: 920px; }
.infrastructure-table-card .table-actions-cell { width: 1%; white-space: nowrap; }
.infrastructure-table-card .table-primary { min-width: 190px; }
.infrastructure-table-card .table-primary small { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runtime-status {
  max-width: 210px;
  min-height: 29px;
  padding: 5px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .68rem;
  font-weight: 720;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.runtime-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px currentColor; opacity: .8; }
.runtime-status--online { color: var(--green-500); background: color-mix(in srgb,var(--green-500) 10%,var(--surface)); }
.runtime-status--offline { color: var(--text-3); background: var(--surface-3); }
.table-capacity { min-width: 150px; display: grid; gap: 7px; }
.table-capacity > span { color: var(--text-3); font-size: .64rem; }
.table-capacity > span b { color: var(--text); font-size: .72rem; }
.table-capacity > div { width: 100%; height: 5px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.table-capacity > div i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue-700),var(--cyan-400)); }
.infrastructure-port { display: inline-block; color: var(--text); font-weight: 650; white-space: nowrap; }
.infrastructure-capacity { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.infrastructure-capacity b { color: var(--text); font: 760 .88rem var(--font-display); }
.infrastructure-capacity small { color: var(--text-3); font-size: .62rem; }

@media (max-width: 640px) {
  .brand__mark, .brand--sidebar .brand__mark { width: 39px; height: 39px; }
}

/* Enum-aware service and infrastructure presentation */
.service-metrics { margin-bottom: 20px; }
.service-tables { display: grid; gap: 20px; }
.service-table-card .table-wrap table { min-width: 760px; }
.service-table-card .table-actions-cell { width: 1%; white-space: nowrap; }
.service-runtime-state {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}
.service-runtime-state > span:first-child { color: var(--text-3); font-size: .69rem; }
.service-runtime-state p { margin: 0; color: var(--text-2); font-size: .69rem; line-height: 1.7; }
.quick-actions--service { grid-template-columns: repeat(4,minmax(0,1fr)); }
.quick-action--success { border-color: color-mix(in srgb,var(--green-500) 28%,var(--border)); }
.quick-action--success > .material-symbols-rounded { color: var(--green-500); }
.quick-action--danger { border-color: color-mix(in srgb,var(--red-500) 28%,var(--border)); }
.quick-action--danger > .material-symbols-rounded { color: var(--red-500); }

.privilege-card .card__body { padding: 16px; }
.privilege-token { display: grid; gap: 14px; }
.privilege-token__meta { display: flex; align-items: center; gap: 11px; }
.privilege-token__meta > .material-symbols-rounded {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  color: var(--cyan-400); background: color-mix(in srgb,var(--cyan-400) 10%,var(--surface));
}
.privilege-token__meta span { display: grid; gap: 2px; }
.privilege-token__meta b { font-size: .76rem; }
.privilege-token__meta small { color: var(--text-3); font-size: .63rem; }
.privilege-token__value {
  width: 100%; min-height: 62px; padding: 11px 13px; border: 1px solid var(--border);
  border-radius: 13px; background: #071426; color: var(--text); display: flex;
  align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
}
.privilege-token__value code {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  direction: ltr; text-align: left; font-size: .72rem; letter-spacing: .025em;
  filter: blur(7px); opacity: .72; user-select: none; transition: filter .18s ease,opacity .18s ease;
}
.privilege-token__value > span { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; color: var(--blue-400); font-size: .66rem; }
.privilege-token--revealed .privilege-token__value code { filter: none; opacity: 1; user-select: text; }
.privilege-token__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.privilege-token__actions button:disabled { opacity: .42; cursor: not-allowed; }
.runtime-status-badge { display: inline-flex; }

@media (max-width: 900px) {
  .quick-actions--service { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-runtime-state { grid-template-columns: auto auto; }
  .service-runtime-state p { grid-column: 1/-1; }
}
@media (max-width: 560px) {
  .quick-actions--service { grid-template-columns: 1fr; }
  .privilege-token__value { align-items: flex-start; flex-direction: column; }
  .privilege-token__value code { width: 100%; }
  .privilege-token__actions { align-items: stretch; flex-direction: column; }
}

/* 2026-07 backend synchronization: filters and responsive navigation */
.nav-group__row { display: grid; grid-template-columns: minmax(0,1fr) 36px; align-items: center; gap: 3px; }
.nav-group__row > .nav-item { min-width: 0; }
.nav-subtree-toggle {
  width: 34px; height: 34px; padding: 0; border: 0px solid transparent; border-radius: 9px;
  background: transparent; color: rgba(230,240,255,.5); display: grid; place-items: center; cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-subtree-toggle:hover { color: #fff; background: rgba(255,255,255,.065); }
.nav-subtree-toggle .material-symbols-rounded { margin: 0; font-size: 20px; }
.nav-subtree[hidden] { display: none !important; }
.nav-subtree__empty { padding: 8px 10px; color: rgba(255,255,255,.34); font-size: .65rem; }

.finance-filter-panel,
.admin-resource-filter {
  margin: 0 0 18px; padding: 16px; border: 1px solid var(--border); border-radius: 17px;
  background: linear-gradient(180deg, rgba(15,30,51,.96), rgba(10,23,40,.96));
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; align-items: end;
}
.finance-filter-panel__actions,
.admin-resource-filter__actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.admin-resource-filter { grid-template-columns: repeat(3,minmax(0,1fr)); }
.admin-resource-owner-field { min-width: 0; }
.owner-select-button {
  min-height: 46px; width: 100%; padding: 6px 11px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2); color: var(--text); display: grid; grid-template-columns: 32px minmax(0,1fr) 22px;
  align-items: center; gap: 8px; text-align: right; cursor: pointer;
}
.owner-select-button:hover { border-color: rgba(76,145,255,.55); background: rgba(47,124,255,.07); }
.owner-select-button > .material-symbols-rounded:first-child { color: var(--blue-400); }
.owner-select-button > .material-symbols-rounded:last-child { color: var(--text-3); }
.owner-select-button span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.owner-select-button small { color: var(--text-3); font-size: .57rem; }
.owner-select-button b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }

.owner-picker { display: grid; gap: 14px; }
.owner-picker__filters { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(180px,.6fr); gap: 12px; }
.owner-picker__results { min-height: 280px; max-height: min(520px,58vh); overflow: auto; padding: 2px; }
.owner-picker__list { display: grid; gap: 7px; }
.owner-picker__item {
  width: 100%; min-height: 66px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 13px;
  background: rgba(255,255,255,.018); color: var(--text); display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto 20px; align-items: center; gap: 10px; text-align: right; cursor: pointer;
}
.owner-picker__item:hover { border-color: rgba(76,145,255,.48); background: rgba(47,124,255,.07); }
.owner-picker__avatar { position: relative; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(47,124,255,.11); color: var(--blue-400); }
.owner-picker__item > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.owner-picker__item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.owner-picker__item small { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: .61rem; }
.owner-picker__item small i { font-style: normal; }
.owner-picker__item > .material-symbols-rounded:last-child { color: var(--text-3); font-size: 19px; }
.service-transactions-card .table-wrap table { min-width: 650px; }

@media (max-width: 980px) {
  .finance-filter-panel { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-resource-filter { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-resource-owner-field { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .panel-switch {
    display: grid; place-items: center; align-content: center; justify-content: center;
    width: 40px; min-width: 40px; flex: 0 0 40px; min-height: 40px; padding: 0; line-height: 1;
  }
  .panel-switch .material-symbols-rounded { margin: 0; line-height: 1; }
}
@media (max-width: 640px) {
  .topbar-wallet {
    width: auto; min-width: 122px; max-width: 142px; height: 40px; padding: 4px 6px 4px 5px;
    border-color: rgba(76,145,255,.24); background: linear-gradient(135deg, rgba(47,124,255,.12), rgba(43,212,238,.045));
  }
  .topbar-wallet > span { display: flex; }
  .topbar-wallet small { display: none; }
  .topbar-wallet b { font-size: .64rem; overflow: hidden; text-overflow: ellipsis; }
  .topbar-wallet__add { width: 30px; height: 30px; flex: 0 0 30px; }
  .finance-filter-panel, .admin-resource-filter, .owner-picker__filters { grid-template-columns: 1fr; }
  .admin-resource-owner-field { grid-column: auto; }
  .finance-filter-panel__actions, .admin-resource-filter__actions { justify-content: stretch; }
  .finance-filter-panel__actions .button, .admin-resource-filter__actions .button { flex: 1; }
  .owner-picker__item { grid-template-columns: 36px minmax(0,1fr) 18px; }
  .owner-picker__item .badge { display: none; }
  .owner-picker__avatar { width: 36px; height: 36px; }
}
@media (max-width: 420px) {
  .panel-switch { display: grid; }
  .topbar-wallet { min-width: 108px; max-width: 118px; }
  .topbar-wallet b { font-size: .59rem; }
}

/* Backend availability and maintenance state */
.maintenance-banner {
  position: fixed;
  z-index: 90;
  top: 88px;
  right: 24px;
  left: 24px;
  max-width: 1180px;
  min-height: 64px;
  margin-inline: auto;
  padding: 12px 16px;
  border: 1px solid rgba(246,165,74,.38);
  border-radius: 16px;
  background: rgba(45,29,13,.94);
  box-shadow: 0 18px 55px rgba(0,0,0,.38);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  gap: 13px;
}
.maintenance-banner > .material-symbols-rounded { color: var(--orange-500); font-size: 28px; }
.maintenance-banner > div { min-width: 0; margin-inline-end: auto; display: flex; flex-direction: column; gap: 2px; }
.maintenance-banner b { color: #ffe7bf; }
.maintenance-banner span { color: #d4bea0; font-size: .78rem; line-height: 1.7; }
.maintenance-dialog__content { display: grid; justify-items: center; gap: 14px; text-align: center; }
.maintenance-dialog__content > .material-symbols-rounded { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: var(--orange-500); background: rgba(246,165,74,.12); font-size: 32px; }
.maintenance-dialog__content p { margin: 0; color: var(--text-2); line-height: 1.9; }
.dashboard-access--disabled { opacity: .48; cursor: not-allowed !important; filter: saturate(.55); }

/* Stable custom select control for RTL. The arrow is fixed on the visual left. */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  padding-inline: 14px 42px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237f93ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 17px 17px;
}
select:not([multiple]):focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234c91ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

/* Inline service controls */
.service-label-editor {
  min-height: 72px;
  margin: -4px 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(47,124,255,.07), rgba(255,255,255,.015));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.service-label-editor > div:first-child {
  min-width: 0;
  flex: 1;
  display: flex;
  gap: 11px;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row-reverse;
}
.service-label-editor > div:first-child > .material-symbols-rounded { color: var(--blue-400); }
.service-label-editor span { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.service-label-editor small { color: var(--text-3); font-size: .67rem; }
.service-label-editor input {
  width: 100%;
  min-height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: 750 1rem var(--font-display);
}
.service-label-editor--editing input { padding-inline: 10px; border-color: rgba(76,145,255,.48); background: var(--surface-2); }
.service-label-editor__actions { display: flex; gap: 7px; }
.service-label-editor__save { color: var(--green-500); }
.service-label-editor__cancel { color: var(--red-500); }

/* Minimal financial filters live in the transaction-card header */
.finance-transactions-card > .card__header { align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.finance-filter-toolbar { margin-inline-start: auto; display: flex; align-items: end; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.finance-filter-toolbar label { display: flex; flex-direction: column; gap: 4px; }
.finance-filter-toolbar label > span { padding-inline: 4px; color: var(--text-3); font-size: .59rem; }
.finance-filter-toolbar select,
.finance-filter-toolbar input { min-height: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px; background-color: var(--surface-2); color: var(--text-2); font-size: .72rem; }
.finance-filter-toolbar select { min-width: 104px; padding-block: 0; }
.finance-filter-toolbar input { width: 164px; padding-inline: 9px; direction: ltr; }
.finance-filter-toolbar .icon-button { width: 34px; height: 34px; border-radius: 9px; }

/* Admin user filtering and backend owner search */
.admin-user-filter {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(160px,.8fr) minmax(160px,.8fr) auto auto;
  align-items: end;
  gap: 10px;
}
.admin-user-filter .field { margin: 0; }
.owner-picker__filters { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 10px; }

@media (max-width: 980px) {
  .admin-user-filter { grid-template-columns: 1fr 1fr; }
  .admin-user-filter > .field:first-child { grid-column: 1 / -1; }
  .owner-picker__filters { grid-template-columns: 1fr 1fr; }
  .owner-picker__filters > .field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .maintenance-banner { top: 74px; right: 12px; left: 12px; padding: 11px; }
  .maintenance-banner .button { font-size: 0; width: 36px; padding: 0; }
  .maintenance-banner .button .material-symbols-rounded { font-size: 20px; }
  .finance-filter-toolbar { width: 100%; justify-content: stretch; }
  .finance-filter-toolbar label { flex: 1 1 130px; }
  .finance-filter-toolbar input, .finance-filter-toolbar select { width: 100%; min-width: 0; }
  .admin-user-filter, .owner-picker__filters { grid-template-columns: 1fr; }
  .admin-user-filter > .field:first-child, .owner-picker__filters > .field:first-child { grid-column: auto; }
  /* .service-label-editor { align-items: flex-end; } */
}

/* Admin live service status (mock until backend endpoint is available) */
.live-status-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid rgba(56, 189, 248, .24);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(14, 116, 144, .16), rgba(15, 23, 42, .72));
}
.live-status-banner > .material-symbols-rounded { color: #38bdf8; }
.live-status-banner div { display: grid; gap: 3px; flex: 1; }
.live-status-banner small, .live-status-banner > span { color: var(--text-muted); }
.live-status-layout { display: grid; gap: 18px; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.5fr); align-items: start; }
.live-component-list { display: grid; gap: 10px; }
.live-component { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: rgba(15, 23, 42, .58); }
.live-component > div, .live-component aside { display: flex; align-items: center; gap: 10px; }
.live-component > div > div { display: grid; gap: 3px; }
.live-component small { color: var(--text-muted); }
.live-component aside { flex-wrap: wrap; justify-content: flex-end; }
.live-component--success > div > span { color: #34d399; }
.live-component--warning > div > span { color: #fbbf24; }
.live-component--danger > div > span { color: #fb7185; }
.live-terminal-card { overflow: hidden; min-width: 0; border: 1px solid rgba(51, 65, 85, .92); border-radius: 16px; background: #050910; box-shadow: 0 24px 70px rgba(0, 0, 0, .34), inset 0 1px rgba(255,255,255,.03); }
.live-terminal-card__header { display: flex; align-items: center; gap: 13px; padding: 12px 15px; border-bottom: 1px solid #1e293b; background: linear-gradient(180deg, #111827, #0b1120); }
.live-terminal-card__header > div:nth-child(2) { display: grid; gap: 2px; flex: 1; }
.live-terminal-card__header small { color: #64748b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr; text-align: left; }
.terminal-dots { display: flex; gap: 6px; direction: ltr; }
.terminal-dots i { width: 10px; height: 10px; border-radius: 50%; background: #fb7185; }
.terminal-dots i:nth-child(2) { background: #fbbf24; }
.terminal-dots i:nth-child(3) { background: #34d399; }
.terminal-live-indicator { display: inline-flex; align-items: center; gap: 7px; color: #86efac; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr; }
.terminal-live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 5px rgba(34,197,94,.1); animation: terminal-pulse 1.7s infinite; }
.live-terminal { min-height: 430px; max-height: 62vh; overflow: auto; padding: 18px; color: #cbd5e1; font: 13px/1.9 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; direction: ltr; text-align: left; background-image: radial-gradient(circle at 80% 0, rgba(14,165,233,.06), transparent 34%); }
.live-terminal__line { display: grid; grid-template-columns: 82px 70px 150px minmax(0, 1fr); gap: 10px; padding: 3px 0; }
.live-terminal__line time { color: #64748b; }
.live-terminal__level { font-weight: 800; }
.live-terminal__source { color: #7dd3fc; }
.live-terminal__line code { white-space: pre-wrap; overflow-wrap: anywhere; color: inherit; }
.live-terminal__line--success .live-terminal__level { color: #34d399; }
.live-terminal__line--info .live-terminal__level { color: #60a5fa; }
.live-terminal__line--warn .live-terminal__level { color: #fbbf24; }
.live-terminal__line--error .live-terminal__level { color: #fb7185; }
.live-terminal__cursor { display: flex; align-items: center; gap: 5px; margin-top: 12px; color: #94a3b8; }
.live-terminal__cursor span { color: #34d399; }
.live-terminal__cursor em { color: #60a5fa; font-style: normal; }
.live-terminal__cursor i { display: inline-block; width: 8px; height: 16px; background: #e2e8f0; animation: terminal-cursor 1s steps(1) infinite; }
.filter-bar--with-user { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.filter-user-control { display: flex; align-items: center; gap: 8px; }
.owner-select-button--compact { min-width: 220px; padding-block: 8px; }
@keyframes terminal-pulse { 50% { opacity: .4; transform: scale(.78); } }
@keyframes terminal-cursor { 50% { opacity: 0; } }
@media (max-width: 1000px) { .live-status-layout { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
  .live-status-banner { align-items: flex-start; flex-wrap: wrap; }
  .live-status-banner > span { width: 100%; padding-inline-start: 36px; }
  .live-terminal { min-height: 360px; padding: 13px; font-size: 11px; }
  .live-terminal__line { grid-template-columns: 64px 54px minmax(90px, .5fr) minmax(180px, 1fr); gap: 7px; min-width: 580px; }
  .terminal-live-indicator { font-size: 0; }
  .filter-user-control, .owner-select-button--compact { width: 100%; }
  .owner-select-button--compact { min-width: 0; }
}

/* Resource periods, node references and compact expiration metadata */
.expiration-cell { display: inline-grid; gap: 3px; min-width: 150px; }
.expiration-cell > b { color: var(--text); font-size: .75rem; font-weight: 720; white-space: nowrap; }
.expiration-cell > small { color: var(--text-3); font-size: .62rem; white-space: nowrap; }
.node-reference-button { min-width: 150px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid color-mix(in srgb,var(--blue-600) 23%,var(--border)); border-radius: 10px; background: color-mix(in srgb,var(--blue-600) 6%,var(--surface)); color: var(--text-2); }
.node-reference-button > .material-symbols-rounded:first-child { color: var(--blue-500); font-size: 18px; }
.node-reference-button > .material-symbols-rounded:last-child { margin-inline-start: auto; color: var(--text-3); font-size: 17px; }
.node-reference-button span { font-size: .64rem; }
.node-reference-button b { color: var(--text); font-size: .67rem; direction: ltr; }
.node-reference-button:hover { border-color: color-mix(in srgb,var(--blue-500) 54%,var(--border)); background: color-mix(in srgb,var(--blue-600) 11%,var(--surface)); }
.resource-type-tabs { border: 0; background: var(--surface-2); }
.resource-type-tabs a { display: flex; align-items: center; gap: 6px; }
.resource-type-tabs .material-symbols-rounded { font-size: 17px; }
.admin-resource-filter--inside-card { grid-template-columns: minmax(190px,.65fr) minmax(280px,1.35fr); padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.admin-resource-table { min-width: 0; }
.admin-resource-table .table-wrap { border: 1px solid var(--border); border-radius: 13px; }
.admin-resource-table .table-wrap table { min-width: 1080px; }
.admin-resource-card > .card__header { flex-wrap: wrap; padding-block: 10px; }

/* TeaSpeak connection information */
.teaspeak-connection { display: grid; gap: 12px; }
.teaspeak-connection__endpoint { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid color-mix(in srgb,var(--cyan-400) 24%,var(--border)); border-radius: 13px; background: color-mix(in srgb,var(--cyan-400) 5%,var(--surface-2)); }
.teaspeak-connection__endpoint > span { display: grid; justify-items: center; gap: 2px; color: var(--cyan-400); }
.teaspeak-connection__endpoint > span small { color: var(--text-3); font-size: .58rem; white-space: nowrap; }
.teaspeak-connection__endpoint code { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); font: 760 .87rem/1.6 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; text-align: left; }
.teaspeak-connection__parts { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 10px; }
.teaspeak-connection__parts button { border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); color: var(--text-2); min-width: 0; padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; text-align: right; }
.teaspeak-connection__parts button:hover { border-color: color-mix(in srgb,var(--blue-500) 43%,var(--border)); background: var(--surface-3); }
.teaspeak-connection__parts span { color: var(--text-3); font-size: .62rem; }
.teaspeak-connection__parts b { overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: .75rem; text-align: left; }
.teaspeak-connection__parts .material-symbols-rounded { font-size: 17px; color: var(--blue-500); }
.teaspeak-connection--admin .teaspeak-connection__endpoint { margin: 0; }

/* Focused backend monitoring log — intentionally not styled as a desktop terminal window */
.monitoring-log-card .card__body { padding: 0; }
.backend-log-toolbar { min-height: 58px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.backend-log-toolbar > div { display: flex; align-items: center; gap: 10px; }
.backend-log-toolbar > div > .material-symbols-rounded { color: var(--green-500); }
.backend-log-toolbar span { display: grid; gap: 2px; }
.backend-log-toolbar b { font-size: .76rem; }
.backend-log-toolbar small, .backend-log-toolbar time { color: var(--text-3); font-size: .62rem; }
.backend-log { min-height: 500px; max-height: calc(100vh - 280px); overflow: auto; padding: 12px 16px; background: #070b12; color: #cbd5e1; font: 12.5px/1.75 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; direction: ltr; text-align: left; }
.backend-log__line { display: grid; grid-template-columns: 78px 66px 150px minmax(0,1fr); gap: 10px; padding: 7px 5px; border-bottom: 1px solid rgba(148,163,184,.08); }
.backend-log__line:last-child { border-bottom: 0; }
.backend-log__line time { color: #64748b; }
.backend-log__line > span { font-weight: 800; }
.backend-log__line > b { color: #7dd3fc; font-weight: 650; }
.backend-log__line code { color: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.backend-log__line--success > span { color: #34d399; }
.backend-log__line--info > span { color: #60a5fa; }
.backend-log__line--warn > span { color: #fbbf24; }
.backend-log__line--error > span { color: #fb7185; }

@media (max-width: 820px) {
  .admin-resource-filter--inside-card { grid-template-columns: 1fr; }
  .resource-type-tabs { width: 100%; }
  .resource-type-tabs a { flex: 1; }
  .teaspeak-connection__parts { grid-template-columns: 1fr; }
  .backend-log-toolbar { align-items: flex-start; flex-direction: column; }
  .backend-log { min-height: 430px; padding: 10px; font-size: 11px; }
  .backend-log__line { grid-template-columns: 62px 52px minmax(100px,.55fr) minmax(220px,1fr); min-width: 560px; gap: 7px; }
}

/* Ticket readability, role-aware alignment, and attachment selection */
.service-status-hero__icon {
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
}
.service-status-hero__icon > .material-symbols-rounded {
  width: auto;
  height: auto;
  color: var(--mdi-icon-white) !important;
  display: grid;
  justify-content: center;
  font-size: 46px !important;
  line-height: 1;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;
}
.wallet-balance-card__icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
}
.wallet-balance-card__icon > .material-symbols-rounded {
  width: auto;
  height: auto;
  font-size: 33px !important;
  color: var(--mdi-icon-white) !important;
  line-height: 1;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 40;
}

.messages {
  gap: 22px;
  padding: 28px;
}
.message {
  width: fit-content;
  max-width: min(90%, 760px);
  gap: 12px;
  align-items: flex-start;
}
.message--own {
  margin-inline-end: auto;
  direction: rtl;
}
.message--other {
  margin-inline-start: auto;
  direction: ltr;
}
.message__avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 13px;
}
.message__avatar > .material-symbols-rounded {
  font-size: 23px;
}
.message--staff .message__avatar {
  color: #fff;
  background: linear-gradient(135deg, #397cff, #7658df);
}
.message--customer .message__avatar {
  color: #8cc8ff;
  background: rgba(32, 126, 226, .14);
}
.message__bubble {
  direction: rtl;
  min-width: 220px;
  padding: 16px 18px;
  border-radius: 17px;
}
.message--own .message__bubble {
  border-start-start-radius: 6px;
}
.message--other .message__bubble {
  border-start-end-radius: 6px;
}
.message--staff .message__bubble {
  border-color: rgba(114, 99, 222, .24);
  background: linear-gradient(145deg, rgba(68, 92, 178, .14), rgba(80, 62, 139, .09));
}
.message--customer .message__bubble {
  border-color: rgba(52, 150, 220, .2);
  background: linear-gradient(145deg, rgba(30, 113, 178, .11), rgba(18, 74, 126, .07));
}
.message__bubble > header {
  gap: 22px;
  align-items: center;
}
.message__sender {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.message__bubble b {
  font-size: .78rem;
}
.message__bubble header > span {
  font-size: .62rem;
  white-space: nowrap;
}
.message__bubble p {
  margin-top: 10px;
  font-size: .86rem;
  line-height: 2;
  color: var(--text-2);
}
.message-role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: .56rem;
  font-weight: 750;
  white-space: nowrap;
}
.message-role-badge--admin {
  color: #d8ceff;
  background: rgba(128, 98, 228, .17);
  border: 1px solid rgba(148, 119, 238, .22);
}
.message-role-badge--support {
  color: #b9ddff;
  background: rgba(47, 124, 255, .15);
  border: 1px solid rgba(76, 145, 255, .2);
}
.reply-box textarea {
  min-height: 112px;
  font-size: .84rem;
  line-height: 1.9;
}
.reply-box__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.ticket-selected-files {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ticket-selected-files[hidden] {
  display: none;
}
.ticket-selected-file {
  max-width: 100%;
  min-height: 44px;
  padding: 6px 8px 6px 6px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(76, 145, 255, .18);
  border-radius: 11px;
  color: var(--text);
  background: rgba(47, 124, 255, .07);
}
.ticket-selected-file > .material-symbols-rounded {
  color: var(--blue-400);
  font-size: 20px;
}
.ticket-selected-file > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ticket-selected-file b {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .67rem;
}
.ticket-selected-file small {
  color: var(--text-3);
  font-size: .56rem;
}
.ticket-selected-file__remove {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0 solid transparent;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  background: transparent;
}
.ticket-selected-file__remove:hover {
  color: #fff;
  background: rgba(239, 68, 68, .18);
}
.ticket-selected-file__remove > .material-symbols-rounded {
  font-size: 17px;
}

@media (max-width: 640px) {
  .messages { padding: 17px; gap: 18px; }
  .message { max-width: 100%; }
  .message__avatar { width: 38px; height: 38px; flex-basis: 38px; }
  .message__bubble { min-width: 0; padding: 14px 15px; }
  .message__bubble p { font-size: .82rem; }
  .service-status-hero__icon { width: 68px; height: 68px; flex-basis: 68px; }
  .service-status-hero__icon > .material-symbols-rounded { font-size: 39px !important; }
  .wallet-balance-card__icon { width: 52px; height: 52px; flex-basis: 52px; }
  .wallet-balance-card__icon > .material-symbols-rounded { font-size: 30px !important; }
}
.ticket-selected-files--form { margin-top: -4px; }

/* 0.1.2 interaction alignment and denser financial filtering */
.finance-transactions-card > .card__header {
  min-height: 86px;
  padding-block: 16px;
  align-items: center;
}
.finance-filter-toolbar { gap: 9px; }
.finance-filter-toolbar label > span { font-size: .64rem; }
.finance-filter-toolbar select,
.finance-filter-toolbar input {
  min-height: 40px;
  height: 40px;
  font-size: .76rem;
  border-radius: 10px;
}
.finance-filter-toolbar select { min-width: 116px; }
.finance-filter-toolbar input { width: 178px; }
.finance-filter-toolbar .icon-button { width: 40px; height: 40px; border-radius: 10px; }

/* Explicit RTL decisions requested for these exact action groups. */
.admin-resource-filter__actions,
.reply-box__actions {
  justify-content: flex-start;
}

.ticket-selected-file {
  animation: ticket-file-in .16s ease-out;
}
@keyframes ticket-file-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .finance-transactions-card > .card__header { min-height: 0; padding-block: 13px; }
  .admin-resource-filter__actions,
  .reply-box__actions { justify-content: flex-start; }
}

/* Dashboard overview connected to /v1/dashboard/overview */
.dashboard-active-services {
  display: grid;
  gap: 8px;
}
.dashboard-active-services > a {
  min-height: 60px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .018);
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.dashboard-active-services > a:hover {
  transform: translateY(-1px);
  border-color: rgba(76, 145, 255, .38);
  background: rgba(47, 124, 255, .065);
}
.dashboard-active-services__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--blue-400);
  background: rgba(47, 124, 255, .12);
}
.dashboard-active-services__icon > .material-symbols-rounded { font-size: 21px; }
.dashboard-active-services > a > span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dashboard-active-services b,
.dashboard-active-services small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-active-services b { font-size: .73rem; }
.dashboard-active-services small { color: var(--text-3); font-size: .61rem; }
.dashboard-active-services > a > .material-symbols-rounded:last-child { color: var(--text-3); font-size: 19px; }

.dashboard-recent-tickets-card { margin-top: 20px; }
.dashboard-recent-tickets { display: grid; }
.dashboard-recent-tickets > a {
  min-height: 66px;
  padding: 10px 4px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 150px 22px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  transition: background-color .16s ease, padding-inline .16s ease;
}
.dashboard-recent-tickets > a:first-child { padding-top: 4px; }
.dashboard-recent-tickets > a:last-child { border-bottom: 0; padding-bottom: 4px; }
.dashboard-recent-tickets > a:hover {
  padding-inline: 10px;
  border-radius: 11px;
  background: rgba(47, 124, 255, .055);
}
.dashboard-recent-tickets__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--blue-400);
  background: rgba(47, 124, 255, .1);
}
.dashboard-recent-tickets__icon > .material-symbols-rounded { font-size: 20px; }
.dashboard-recent-tickets__subject {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dashboard-recent-tickets__subject b,
.dashboard-recent-tickets__subject small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-recent-tickets__subject b { font-size: .75rem; }
.dashboard-recent-tickets__subject small { color: var(--text-3); font-size: .61rem; }
.dashboard-recent-tickets time { color: var(--text-3); font-size: .62rem; white-space: nowrap; }
.dashboard-recent-tickets > a > .material-symbols-rounded:last-child { color: var(--text-3); font-size: 19px; }

/* Explicit ticket reply order: send on the right, attachment immediately to its left. */
.reply-box__actions {
  direction: rtl;
  justify-content: flex-start;
}

@media (max-width: 760px) {
  .dashboard-recent-tickets > a {
    grid-template-columns: 38px minmax(0, 1fr) auto 20px;
    gap: 9px;
  }
  .dashboard-recent-tickets time { display: none; }
}
@media (max-width: 480px) {
  .dashboard-recent-tickets__status { display: none; }
  .dashboard-recent-tickets > a { grid-template-columns: 36px minmax(0, 1fr) 20px; }
}

/* Inline TeaSpeak endpoint inside the main service status card. */
.teaspeak-connection--inline {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.teaspeak-connection--inline .teaspeak-connection__endpoint {
  margin: 0;
}
.teaspeak-connection__empty {
  min-height: 66px;
  border: 1px dashed var(--border);
  border-radius: 13px;
  background: var(--surface-2);
  color: var(--text-2);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.teaspeak-connection__empty > .material-symbols-rounded {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--cyan-400);
  background: color-mix(in srgb,var(--cyan-400) 10%,var(--surface));
}
.teaspeak-connection__empty span { display: flex; flex-direction: column; gap: 3px; }
.teaspeak-connection__empty b { font-size: .73rem; color: var(--text); }
.teaspeak-connection__empty small { font-size: .62rem; color: var(--text-3); }

/* Invoice token: compact inline value with a tiny copy action. */
.invoice-token {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  direction: ltr;
  vertical-align: middle;
}
.invoice-token__compact {
  display: inline-block;
  min-width: 0;
  max-width: 176px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 .68rem/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.invoice-token__copy {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0 solid transparent;
  border-radius: 7px;
  color: var(--text-3);
  background: transparent;
  cursor: pointer;
}
.invoice-token__copy:hover,
.invoice-token__copy:focus-visible {
  color: var(--blue-500);
  background: color-mix(in srgb,var(--blue-500) 10%,transparent);
  outline: 0;
}
.invoice-token__copy .material-symbols-rounded { font-size: 15px; }

.payment-redirect-result {
  min-height: 120px;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 14px;
  align-items: start;
  padding: 4px 0;
}
.payment-redirect-result > .material-symbols-rounded {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 30px;
}
.payment-redirect-result--success > .material-symbols-rounded {
  color: var(--green-500);
  background: color-mix(in srgb,var(--green-500) 12%,var(--surface));
}
.payment-redirect-result--failed > .material-symbols-rounded {
  color: var(--red-500);
  background: color-mix(in srgb,var(--red-500) 11%,var(--surface));
}
.payment-redirect-result h3 { margin: 3px 0 7px; font: 760 .9rem/1.8 var(--font-display); }
.payment-redirect-result p { margin: 0 0 12px; color: var(--text-2); font-size: .7rem; line-height: 1.9; }

.admin-invoice-filter-card { margin-bottom: 20px; }
.admin-invoice-tools { display: grid; gap: 17px; }
.admin-invoice-filter {
  display: grid;
  grid-template-columns: minmax(150px,.8fr) minmax(190px,1fr) minmax(190px,1fr) minmax(240px,1.2fr);
  gap: 12px;
  align-items: end;
}
.admin-invoice-filter > label,
.admin-invoice-token-loader > label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-invoice-filter > label > span,
.admin-invoice-token-loader > label > span { color: var(--text-3); font-size: .62rem; }
.admin-invoice-filter select,
.admin-invoice-filter input,
.admin-invoice-token-loader input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--surface-2);
  color: var(--text);
  padding-inline: 12px;
  outline: 0;
}
.admin-invoice-filter select:focus,
.admin-invoice-filter input:focus,
.admin-invoice-token-loader input:focus { border-color: var(--blue-500); }
.admin-invoice-filter__user { display: flex; align-items: center; gap: 7px; }
.admin-invoice-filter__user .owner-select-button { flex: 1; }
.admin-invoice-filter__actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}
.admin-invoice-token-loader {
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: minmax(260px,1fr) auto;
  align-items: end;
  gap: 10px;
}
.payment-transaction-detail { display: grid; gap: 14px; }
.payment-transaction-detail__hero {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.payment-transaction-detail__hero > .material-symbols-rounded {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--blue-500);
  background: color-mix(in srgb,var(--blue-500) 10%,var(--surface));
}
.payment-transaction-detail__hero span { display: flex; flex-direction: column; gap: 3px; }
.payment-transaction-detail__hero small { color: var(--text-3); font-size: .6rem; }
.payment-transaction-detail__hero b { color: var(--text); font-size: .78rem; }
.admin-invoice-detail .invoice-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }

@media (max-width: 1100px) {
  .admin-invoice-filter { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .teaspeak-connection__endpoint { grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; }
  .teaspeak-connection__endpoint code { font-size: .72rem; }
  .admin-invoice-filter { grid-template-columns: 1fr; }
  .admin-invoice-filter__actions { grid-column: auto; flex-wrap: wrap; }
  .admin-invoice-filter__actions .button { flex: 1; }
  .admin-invoice-token-loader { grid-template-columns: 1fr; }
  .admin-invoice-token-loader .button { width: 100%; }
  .admin-invoice-detail .invoice-meta { grid-template-columns: 1fr; }
  .payment-redirect-result { grid-template-columns: 44px minmax(0,1fr); gap: 10px; }
  .payment-redirect-result > .material-symbols-rounded { width: 44px; height: 44px; font-size: 25px; }
}


/* Mock admin dashboard and contextual metrics */
.admin-section-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(170px,1fr));
  gap: 11px;
  margin-bottom: 18px;
}
.admin-section-metric {
  min-width: 0;
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.admin-section-metric > span {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--blue-500);
  background: color-mix(in srgb,var(--blue-500) 10%,var(--surface));
}
.admin-section-metric--cyan > span { color: var(--cyan-400); background: color-mix(in srgb,var(--cyan-400) 10%,var(--surface)); }
.admin-section-metric--purple > span { color: var(--purple-500); background: color-mix(in srgb,var(--purple-500) 10%,var(--surface)); }
.admin-section-metric--orange > span { color: var(--orange-500); background: color-mix(in srgb,var(--orange-500) 10%,var(--surface)); }
.admin-section-metric > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-section-metric small { color: var(--text-3); font-size: .59rem; }
.admin-section-metric b { color: var(--text); font: 780 .92rem/1.5 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-section-metric em { color: var(--text-3); font-size: .56rem; font-style: normal; }
.admin-wallet-charts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }
.admin-wallet-chart-card { margin: 0; }
.admin-chart-description { margin: 0 0 14px; color: var(--text-3); font-size: .64rem; line-height: 1.8; }
.admin-comparison-list { display: grid; gap: 14px; }
.admin-comparison-calendar-note { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; color: var(--text-3); font-size: .55rem; line-height: 1.7; }
.admin-comparison-calendar-note .material-symbols-rounded { font-size: 14px; }
.admin-comparison-row { display: grid; gap: 8px; padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.admin-comparison-row:last-child { padding-bottom: 0; border-bottom: 0; }
.admin-comparison-row > header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 9px; align-items: center; }
.admin-comparison-row > header span { color: var(--text-2); font-size: .63rem; }
.admin-comparison-row > header b { color: var(--text); font-size: .69rem; justify-self: start; }
.admin-trend { padding: 3px 7px; border-radius: 99px; font-size: .55rem; font-style: normal; white-space: nowrap; }
.admin-trend--positive { color: var(--green-500); background: color-mix(in srgb,var(--green-500) 10%,transparent); }
.admin-trend--negative { color: var(--red-500); background: color-mix(in srgb,var(--red-500) 10%,transparent); }
.admin-trend--neutral { color: var(--text-3); background: var(--surface-3); }
.admin-comparison-bars { display: grid; gap: 6px; }
.admin-comparison-bars > div { min-width: 0; display: grid; grid-template-columns: 58px minmax(70px,1fr) auto; gap: 8px; align-items: center; position: relative; }
.admin-comparison-bars small { color: var(--text-3); font-size: .54rem; }
.admin-comparison-bars i { height: 7px; max-width: 100%; border-radius: 99px; background: var(--gradient-primary); box-shadow: 0 0 0 1px color-mix(in srgb,var(--blue-500) 10%,transparent); }
.admin-comparison-bars > div:nth-child(2) i { opacity: .35; }
.admin-comparison-bars b { color: var(--text-3); font-size: .53rem; font-weight: 600; white-space: nowrap; }
.admin-overview-metric-groups { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.admin-metric-group { min-width: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); padding: 15px; }
.admin-metric-group > header { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.admin-metric-group > header > span { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 10px; color: var(--blue-500); background: color-mix(in srgb,var(--blue-500) 9%,var(--surface)); }
.admin-metric-group > header > div { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.admin-metric-group h3 { margin: 0; font: 740 .72rem/1.5 var(--font-display); }
.admin-metric-group header a { display: inline-flex; align-items: center; color: var(--blue-500); font-size: .54rem; white-space: nowrap; }
.admin-metric-group header a .material-symbols-rounded { font-size: 15px; }
.admin-metric-group dl { display: grid; gap: 7px; margin: 0; }
.admin-metric-group dl > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 7px; border-top: 1px dashed var(--border); }
.admin-metric-group dt { color: var(--text-3); font-size: .58rem; }
.admin-metric-group dd { margin: 0; color: var(--text); font-size: .64rem; font-weight: 750; text-align: left; }
.admin-invoice-detail aside { display: flex; flex-direction: column; gap: 16px; }
.admin-invoice-detail aside > .card { margin: 0; }

@media (max-width: 1080px) {
  .admin-overview-metric-groups { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .admin-wallet-charts { grid-template-columns: 1fr; }
  .admin-dashboard-highlights .stat-card strong { font-size: 1rem; }
}
@media (max-width: 560px) {
  .admin-section-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-overview-metric-groups { grid-template-columns: 1fr; }
  .admin-comparison-row > header { grid-template-columns: auto 1fr; }
  .admin-trend { grid-column: 1 / -1; justify-self: start; }
  .admin-comparison-bars > div { grid-template-columns: 50px minmax(50px,1fr); }
  .admin-comparison-bars b { grid-column: 2; }
  .invoice-token__compact { max-width: 132px; }
}

/* User online presence */
.user-presence-avatar {
  position: relative;
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.8rem;
  background: rgba(118, 143, 255, 0.1);
}
.user-presence-avatar > .material-symbols-rounded,
.user-presence-avatar > .material-symbols-outlined {
  font-size: 1.35rem;
}
.user-presence-dot {
  position: absolute;
  inset-inline-end: -0.05rem;
  inset-block-end: -0.05rem;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  border: 2px solid var(--surface, #111827);
  background: #687386;
  box-sizing: border-box;
}
.user-presence-dot--online {
  background: #36d399;
  box-shadow: 0 0 0 0 rgba(54, 211, 153, 0.34);
  animation: user-presence-heartbeat 2.4s ease-out infinite;
}
.user-presence-dot--offline {
  background: #687386;
}
.user-online-status {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.user-online-status .user-presence-avatar {
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 0.65rem;
}
@keyframes user-presence-heartbeat {
  0%, 52%, 100% { box-shadow: 0 0 0 0 rgba(54, 211, 153, 0); }
  10% { box-shadow: 0 0 0 0.28rem rgba(54, 211, 153, 0.16); }
  22% { box-shadow: 0 0 0 0 rgba(54, 211, 153, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .user-presence-dot--online { animation: none; }
}

/* Provisioning strategy management */
.provision-strategy-card {
  margin-block: 1rem;
}
.provision-strategy-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.provision-strategy-summary > div {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}
.provision-strategy-summary > div > .material-symbols-rounded,
.provision-strategy-summary > div > .material-symbols-outlined {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 0.9rem;
  font-size: 1.45rem;
  background: rgba(118, 143, 255, 0.12);
  color: var(--primary, #91a7ff);
}
.provision-strategy-summary small,
.provision-strategy-summary b,
.provision-strategy-summary p {
  display: block;
}
.provision-strategy-summary small {
  color: var(--text-muted, #94a3b8);
  margin-block-end: 0.15rem;
}
.provision-strategy-summary b {
  font-size: 1.05rem;
}
.provision-strategy-summary p {
  margin: 0.35rem 0 0;
  color: var(--text-muted, #94a3b8);
  line-height: 1.85;
  max-width: 58rem;
}
.provision-strategy-form {
  margin: 0;
}
.provision-strategy-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}
.provision-strategy-option {
  position: relative;
  display: block;
  cursor: pointer;
}
.provision-strategy-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.provision-strategy-option span {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.4rem 0.75rem;
  min-height: 8.2rem;
  padding: 1rem;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.16));
  border-radius: 1rem;
  background: rgba(15, 23, 42, 0.42);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.provision-strategy-option b {
  font-size: 0.98rem;
}
.provision-strategy-option code {
  direction: ltr;
  font-size: 0.68rem;
  color: var(--text-muted, #94a3b8);
  background: rgba(148, 163, 184, 0.08);
  border-radius: 0.45rem;
  padding: 0.22rem 0.38rem;
}
.provision-strategy-option small {
  grid-column: 1 / -1;
  color: var(--text-muted, #94a3b8);
  line-height: 1.8;
}
.provision-strategy-option:hover span {
  border-color: rgba(118, 143, 255, 0.48);
}
.provision-strategy-option input:checked + span {
  border-color: var(--primary, #7c8fff);
  background: rgba(118, 143, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(118, 143, 255, 0.16);
}
.provision-strategy-option input:focus-visible + span {
  outline: 2px solid var(--primary, #7c8fff);
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .provision-strategy-summary {
    align-items: stretch;
    flex-direction: column;
  }
  .provision-strategy-summary > .button {
    width: 100%;
  }
  .provision-strategy-options {
    grid-template-columns: 1fr;
  }
}

/* Public TeaCloud experience */
.tea-hero {
  position: relative;
  min-height: 760px;
  margin-top: -76px;
  padding: 145px 24px 78px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 22%, rgba(63, 139, 255, .25), transparent 31%),
    radial-gradient(circle at 16% 78%, rgba(30, 202, 197, .12), transparent 30%),
    linear-gradient(145deg, #04132b 0%, #071f43 56%, #06162f 100%);
}
.tea-hero__pattern {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(to bottom, #000 4%, transparent 92%);
}
.tea-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  align-items: center;
  gap: 72px;
  width: min(1240px, 100%);
  min-height: 530px;
  margin: auto;
}
.tea-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: rgba(238,246,255,.84);
  font-size: .76rem;
  font-weight: 750;
  backdrop-filter: blur(12px);
}
.tea-kicker .material-symbols-rounded { font-size: 18px; color: #78b8ff; }
.tea-kicker--dark {
  border-color: color-mix(in srgb, var(--blue-600) 22%, var(--border));
  background: color-mix(in srgb, var(--blue-600) 9%, var(--surface));
  color: var(--blue-400);
}
.tea-hero h1 {
  max-width: 720px;
  margin: 24px 0 20px;
  font: 850 clamp(2.8rem, 4.1vw, 5.25rem)/1.24 var(--font-display);
  letter-spacing: -.045em;
}
.tea-hero h1 em {
  font-size: clamp(1.45rem,7.5vw,3.3rem);
  color: transparent;
  background: linear-gradient(90deg, #62a7ff, #51e3dd);
  background-clip: text;
  font-style: normal;
}
.tea-hero__copy > p {
  max-width: 660px;
  margin: 0;
  color: rgba(225,237,255,.7);
  font-size: 1.04rem;
  line-height: 2.05;
}
.tea-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.tea-hero__promises {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.tea-hero__promises span { display: inline-flex; align-items: center; gap: 7px; color: rgba(236,244,255,.62); font-size: .78rem; }
.tea-hero__promises .material-symbols-rounded { color: #72b0ff; font-size: 19px; }
.tea-hero__visual { min-height: 510px; display: grid; place-items: center; position: relative; }
.tea-cup-scene {
  position: relative;
  width: min(520px, 100%);
  height: 470px;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.tea-cup-scene::before {
  content: '';
  z-index: 2;
  background-color: rgb(14 18 45 / 46%);
  position: absolute;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(126,177,255,.17);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgb(8 21 42 / 28%), 0 0 0 90px rgb(10 20 40 / 32%);
}
.tea-cup {
  position: absolute;
  z-index: 3;
  top: 154px;
  width: 190px;
  height: 150px;
  border-radius: 32px 32px 70px 70px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(210,228,255,.86));
  box-shadow: inset -18px -16px 32px rgba(63,108,171,.13), 0 34px 70px rgba(0,0,0,.3);
}
.tea-cup::before {
  content: '';
  position: absolute;
  left: -62px;
  top: 24px;
  width: 82px;
  height: 78px;
  border: 17px solid rgba(232,242,255,.91);
  border-right: 0;
  border-radius: 42px 0 0 42px;
}
.tea-cup::after {
  content: '';
  position: absolute;
  inset: 8px 13px auto;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, #7e4d24, #b8793c);
  box-shadow: inset 0 7px 10px rgba(31,16,6,.34);
}
.tea-cup > span { position: absolute; inset: 60px 0 auto; display: grid; place-items: center; }
.tea-cup__logo { width: 54px; height: 54px; object-fit: contain; }
.tea-saucer {
  position: absolute;
  z-index: 2;
  top: 285px;
  width: 280px;
  height: 55px;
  border-radius: 50%;
  background: linear-gradient(180deg, #eff6ff, #afc7e5);
  box-shadow: 0 31px 55px rgba(0,0,0,.28);
}
.tea-steam {
  position: absolute;
  z-index: 3;
  top: 53px;
  width: 22px;
  height: 105px;
  border-radius: 50%;
  border-inline-start: 4px solid rgba(167,215,255,.33);
  filter: blur(.2px);
  animation: tea-steam-rise 4.2s ease-in-out infinite;
}
.tea-steam--one { margin-inline-start: -58px; transform: rotate(10deg); }
.tea-steam--two { height: 125px; animation-delay: -1.5s; }
.tea-steam--three { margin-inline-start: 62px; transform: rotate(-10deg); animation-delay: -2.8s; }
@keyframes tea-steam-rise { 0%,100% { opacity: .15; translate: 0 14px; } 50% { opacity: .72; translate: 0 -8px; } }
.tea-float-card {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 205px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 17px;
  background: rgba(7,25,54,.72);
  box-shadow: 0 18px 42px rgba(0,0,0,.24);
  backdrop-filter: blur(16px);
}
.tea-float-card > .material-symbols-rounded { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(80,145,255,.15); color: #70b0ff; }
.tea-float-card div { display: flex; flex-direction: column; gap: 3px; }
.tea-float-card b { font-size: .79rem; }
.tea-float-card small { color: rgba(255,255,255,.49); font-size: .68rem; }
.tea-float-card--service { top: 70px; right: -8px; }
.tea-float-card--wallet { bottom: 41px; right: 18px; }
.tea-float-card--period { top: 208px; left: -16px; }
.tea-story-strip {
  width: min(1180px, calc(100% - 48px));
  margin: -34px auto 0;
  padding: 22px 28px;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 21px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
}
.tea-story-strip > div { display: grid; grid-template-columns: 38px 1fr; gap: 2px 11px; align-items: center; }
.tea-story-strip > div > span { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--blue-600) 12%, var(--surface)); color: var(--blue-400); font-weight: 800; }
.tea-story-strip b { font-size: .83rem; }
.tea-story-strip small { color: var(--text-3); font-size: .68rem; }
.tea-story-strip > i { color: var(--text-3); }
.public-products-section, .public-products-page, .tea-benefits-section, .rules-page, .public-page-cta {
  width: min(1240px, 100%);
  margin-inline: auto;
  padding-inline: 24px;
}
.public-products-section { padding-block: 112px 90px; }
.public-section-heading { max-width: 720px; margin-bottom: 42px; }
.public-section-heading--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.public-section-heading--split > div { max-width: 720px; }
.public-section-heading span { color: var(--blue-400); font-size: .75rem; font-weight: 800; }
.public-section-heading h2 { margin: 10px 0 8px; font: 800 clamp(2rem, 3.5vw, 3.05rem)/1.48 var(--font-display); }
.public-section-heading p { margin: 0; color: var(--text-2); line-height: 1.95; }
.public-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 19px; }
.public-product-grid--page { grid-template-columns: repeat(2, minmax(0,1fr)); }
.public-product-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--surface-2) 58%, var(--surface)), var(--surface));
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.public-product-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--blue-500) 38%, var(--border)); box-shadow: var(--shadow-md); }
.public-product-card--featured { background: linear-gradient(155deg, color-mix(in srgb, var(--blue-600) 12%, var(--surface)), var(--surface) 68%); }
.public-product-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.public-product-card__icon { width: 51px; height: 51px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--blue-600) 13%, var(--surface)); color: var(--blue-400); }
.public-product-card__icon .material-symbols-rounded { font-size: 27px; }
.public-product-card__mock { padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-3); font-size: .64rem; }
.public-product-card small { color: var(--blue-400); font-weight: 700; }
.public-product-card h3 { margin: 6px 0 9px; font: 800 1.18rem var(--font-display); }
.public-product-card p { min-height: 74px; margin: 0; color: var(--text-2); line-height: 1.86; font-size: .83rem; }
.public-product-card__facts { display: flex; flex-wrap: wrap; gap: 9px; }
.public-product-card__facts span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: .7rem; }
.public-product-card__facts .material-symbols-rounded { font-size: 16px; color: var(--blue-400); }
.public-product-card__action { margin-top: auto; padding-top: 17px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; color: var(--blue-400); font-size: .8rem; font-weight: 750; }
.tea-benefits-section { padding-block: 95px 105px; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 75px; align-items: center; }
.tea-benefits-section__intro h2 { margin: 16px 0 12px; font: 800 clamp(2rem,3.6vw,3.25rem)/1.52 var(--font-display); }
.tea-benefits-section__intro > p { color: var(--text-2); line-height: 2; }
.tea-benefits-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.tea-benefits-grid article { padding: 23px; border: 1px solid var(--border); border-radius: 19px; background: var(--surface); }
.tea-benefits-grid article > .material-symbols-rounded { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb,var(--blue-600) 11%,var(--surface)); color: var(--blue-400); }
.tea-benefits-grid h3 { margin: 17px 0 8px; font-size: .95rem; }
.tea-benefits-grid p { margin: 0; color: var(--text-2); line-height: 1.85; font-size: .78rem; }
.tea-quote-section {
  width: min(1180px, calc(100% - 48px));
  margin: 15px auto 100px;
  display: grid;
  grid-template-columns: 105px 1fr;
  align-items: center;
  gap: 34px;
  padding: 42px 48px;
  border: 1px solid color-mix(in srgb,var(--blue-600) 26%,var(--border));
  border-radius: 26px;
  background: linear-gradient(135deg, color-mix(in srgb,var(--blue-600) 10%,var(--surface)), var(--surface));
}
.tea-quote-section__mark { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 28px; background: var(--gradient-primary); color: #fff; }
.tea-quote-section__mark .material-symbols-rounded { font-size: 44px; }
.tea-quote-section span { color: var(--blue-400); font-size: .73rem; font-weight: 800; }
.tea-quote-section h2 { margin: 8px 0; font: 800 clamp(1.5rem,2.7vw,2.35rem)/1.55 var(--font-display); }
.tea-quote-section p { margin: 0; color: var(--text-2); line-height: 1.9; }
.tea-cta-section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto 110px;
  padding: 48px 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  overflow: hidden;
  position: relative;
  border-radius: 28px;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 30px 70px rgba(18,99,238,.22);
}
.tea-cta-section::before { content: ''; position: absolute; left: -80px; top: -140px; width: 350px; height: 350px; border: 70px solid rgba(255,255,255,.06); border-radius: 50%; }
.tea-cta-section > * { position: relative; z-index: 1; }
.tea-cta-section span { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.72); font-size: .75rem; }
.tea-cta-section h2 { margin: 9px 0 6px; font: 800 2rem/1.5 var(--font-display); }
.tea-cta-section p { margin: 0; color: rgba(255,255,255,.7); }
.public-page-hero { padding: 90px 24px 72px; text-align: center; background: radial-gradient(circle at 50% 0, rgba(65,137,255,.16), transparent 42%), var(--surface); border-bottom: 1px solid var(--border); }
.public-page-hero .tea-kicker { margin: auto; }
.public-page-hero h1 { max-width: 840px; margin: 22px auto 12px; font: 850 clamp(2.25rem,4vw,4rem)/1.45 var(--font-display); }
.public-page-hero p { max-width: 760px; margin: auto; color: var(--text-2); line-height: 2; }
.public-products-page { padding-block: 58px 96px; }
.public-product-page-note { margin-bottom: 22px; padding: 13px 15px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); color: var(--text-2); font-size: .76rem; }
.public-product-page-note .material-symbols-rounded { color: var(--blue-400); }
.public-page-cta { margin-bottom: 95px; padding-block: 31px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.public-page-cta h2 { margin: 0 0 6px; font: 800 1.45rem var(--font-display); }
.public-page-cta p { margin: 0; color: var(--text-2); }
.rules-page { padding-block: 60px 100px; display: grid; grid-template-columns: 320px minmax(0,1fr); align-items: start; gap: 38px; }
.rules-page__summary { position: sticky; top: 98px; padding: 25px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.rules-page__summary > span { color: var(--blue-400); font-size: .72rem; font-weight: 800; }
.rules-page__summary h2 { margin: 9px 0; font: 800 1.4rem var(--font-display); }
.rules-page__summary p { margin: 0 0 22px; color: var(--text-2); line-height: 1.95; font-size: .8rem; }
.rules-list { display: grid; gap: 13px; }
.rules-list article { display: grid; grid-template-columns: 48px 1fr; gap: 15px; padding: 23px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.rules-list article > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb,var(--blue-600) 10%,var(--surface)); color: var(--blue-400); }
.rules-list small { color: var(--text-3); }
.rules-list h3 { margin: 4px 0 8px; font-size: 1rem; }
.rules-list p { margin: 0; color: var(--text-2); line-height: 2; font-size: .82rem; }

@media (max-width: 1020px) {
  .tea-hero__inner { grid-template-columns: 1fr; gap: 25px; }
  .tea-hero__copy { text-align: center; }
  .tea-kicker, .tea-hero__actions { margin-inline: auto; }
  .tea-hero__actions {
    justify-content: center;
  }
  .tea-hero h1 {
    max-width: none;
  }
  .tea-hero__copy > p { margin-inline: auto; }
  .tea-hero__promises { justify-content: center; }
  .tea-hero__visual { min-height: 455px; }
  .tea-story-strip { grid-template-columns: 1fr 1fr 1fr; }
  .tea-story-strip > i { display: none; }
  .public-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tea-benefits-section { grid-template-columns: 1fr; gap: 38px; }
}
@media (max-width: 760px) {
  .public-header nav { display: none; }
  .tea-hero { padding: 125px 18px 58px; }
  .tea-hero h1 { font-size: clamp(2.45rem,12vw,3.6rem); }
  .tea-hero__copy > p { font-size: .92rem; }
  .tea-hero__visual { min-height: 410px; }
  .tea-cup-scene { transform: scale(.84); transform-origin: center; width: 118%; }
  .tea-story-strip { width: calc(100% - 28px); grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .public-products-section, .public-products-page, .tea-benefits-section, .rules-page, .public-page-cta { padding-inline: 16px; }
  .public-section-heading--split { align-items: stretch; flex-direction: column; }
  .public-section-heading--split .button { width: 100%; }
  .public-product-grid, .public-product-grid--page, .tea-benefits-grid { grid-template-columns: 1fr; }
  .public-product-card p { min-height: 0; }
  .tea-quote-section { width: calc(100% - 28px); grid-template-columns: 1fr; padding: 29px; }
  .tea-quote-section__mark { width: 65px; height: 65px; border-radius: 20px; }
  .tea-cta-section { width: calc(100% - 28px); padding: 35px 25px; align-items: stretch; flex-direction: column; }
  .tea-cta-section .button { width: 100%; }
  .public-page-hero { padding: 62px 18px 52px; }
  .public-page-cta { align-items: stretch; flex-direction: column; }
  .public-page-cta .button { width: 100%; }
  .rules-page { grid-template-columns: 1fr; }
  .rules-page__summary { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .tea-steam { animation: none; }
  .public-product-card { transition: none; }
}

/* Product presentation contract and renderer */
.product-presentation-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.product-presentation-badges--compact { gap: 5px; margin-top: 6px; }
.product-presentation-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 5px 14px rgba(3,10,28,.12);
}
.product-presentation-badges--compact .product-presentation-badge { min-height: 21px; padding: 3px 7px; font-size: .58rem; }
.product-presentation-badge--primary { background: linear-gradient(135deg, #2563eb, #4f7dff); }
.product-presentation-badge--success { background: linear-gradient(135deg, #059669, #22c55e); }
.product-presentation-badge--warning { background: linear-gradient(135deg, #d97706, #fbbf24); color: #271500; }
.product-presentation-badge--danger { background: linear-gradient(135deg, #dc2626, #fb7185); }
.product-presentation-badge--info { background: linear-gradient(135deg, #0284c7, #38bdf8); }
.product-presentation-badge--neutral { background: linear-gradient(135deg, #475569, #64748b); }
.product-presentation-badge--ocean { background: linear-gradient(135deg, #075985, #06b6d4); }
.product-presentation-badge--violet { background: linear-gradient(135deg, #6d28d9, #a78bfa); }
.product-presentation-badge--sunset { background: linear-gradient(135deg, #f97316, #ec4899); }
.product-presentation-badge--forest { background: linear-gradient(135deg, #166534, #65a30d); }
.product-presentation-badge--rose { background: linear-gradient(135deg, #be123c, #f472b6); }
.product-presentation-badge--amber { background: linear-gradient(135deg, #92400e, #f59e0b); }
.product-presentation-badge--cyan { background: linear-gradient(135deg, #0e7490, #22d3ee); color: #04232a; }
.product-presentation-badge--indigo { background: linear-gradient(135deg, #3730a3, #6366f1); }
.product-presentation-badge--lime { background: linear-gradient(135deg, #4d7c0f, #a3e635); color: #172500; }
.product-presentation-badge--graphite { background: linear-gradient(135deg, #111827, #4b5563); }
.product-presentation-badge--aurora { background: linear-gradient(120deg, #0f766e, #2563eb 48%, #7c3aed); }
.product-presentation-badge--royal { background: linear-gradient(135deg, #312e81, #7c3aed 55%, #c026d3); }
.product-presentation-badge--fire { background: linear-gradient(135deg, #991b1b, #f97316 65%, #facc15); color: #2b0d00; }
.product-presentation-badge--mint { background: linear-gradient(135deg, #047857, #5eead4); color: #03251e; }

.product-presentation-features {
  list-style: none;
  display: grid;
  gap: 10px;
  padding: 16px 0;
  margin: 0 0 18px;
  border-top: 1px solid var(--border);
  flex: 1;
}
.product-presentation-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: .75rem;
}
.product-presentation-features li > .material-symbols-rounded { flex: 0 0 auto; font-size: 18px; }
.product-presentation-features li.is-enabled > .material-symbols-rounded { color: var(--green-500); }
.product-presentation-features li.is-disabled { color: var(--text-3); text-decoration: line-through; opacity: .7; }
.product-presentation-features li.is-disabled > .material-symbols-rounded { color: var(--red-500); }

.pricing-card--presentation { gap: 0; }
.pricing-card__presentation-top { min-height: 56px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pricing-card__presentation-top .product-presentation-badges { flex: 1; padding-top: 2px; }
.pricing-card--presentation > p { min-height: 76px; }
.pricing-card--presentation .pricing-card__icon { flex: 0 0 auto; }

.admin-product-identity { min-width: 210px; display: flex; flex-direction: column; align-items: flex-start; }
.admin-product-identity .table-primary { width: 100%; }

.product-admin-form { align-items: start; }
.product-presentation-editor {
  margin-top: 8px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--blue-500) 25%, var(--border));
  border-radius: 19px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--blue-600) 6%, var(--surface)), var(--surface));
}
.product-presentation-editor__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.product-presentation-editor__header > div { max-width: 680px; }
.product-presentation-editor__header span { color: var(--blue-400); font-size: .7rem; font-weight: 800; }
.product-presentation-editor__header h3 { margin: 4px 0 6px; font: 800 1.05rem var(--font-display); }
.product-presentation-editor__header p { margin: 0; color: var(--text-3); font-size: .7rem; line-height: 1.8; }
.product-presentation-editor__contract { flex: 0 0 auto; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-3) !important; font: 650 .58rem ui-monospace, monospace !important; direction: ltr; }
.product-presentation-editor__columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; margin-top: 16px; }
.product-presentation-builder { min-width: 0; padding: 15px; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.product-presentation-builder > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.product-presentation-builder > header div { display: flex; flex-direction: column; gap: 2px; }
.product-presentation-builder > header b { font-size: .8rem; }
.product-presentation-builder > header small { color: var(--text-3); font-size: .61rem; }
.product-presentation-builder [data-product-feature-list], .product-presentation-builder [data-product-badge-list] { display: grid; gap: 8px; }
.product-editor-row { min-width: 0; display: grid; align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.product-editor-row--feature { grid-template-columns: 22px minmax(0,1fr) 35px 35px; }
.product-editor-row--badge { grid-template-columns: minmax(80px,auto) minmax(0,1fr) 35px; cursor: pointer; }
.product-editor-row--badge.is-active { border-color: color-mix(in srgb, var(--blue-500) 55%, var(--border)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue-500) 15%, transparent); }
.product-editor-row input[type="text"] { min-width: 0; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--surface-2); color: var(--text); }
.product-editor-row__drag { color: var(--text-3); display: grid; place-items: center; }
.product-editor-row__drag .material-symbols-rounded { font-size: 18px; }
.product-feature-state { position: relative; width: 35px; height: 35px; cursor: pointer; }
.product-feature-state input { position: absolute; opacity: 0; pointer-events: none; }
.product-feature-state span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--red-500) 11%, var(--surface)); color: var(--red-500); }
.product-feature-state.is-enabled span { background: color-mix(in srgb, var(--green-500) 12%, var(--surface)); color: var(--green-500); }
.product-feature-state .material-symbols-rounded { font-size: 18px; }
.product-editor-empty { margin: 0; padding: 12px; border: 1px dashed var(--border); border-radius: 10px; color: var(--text-3); text-align: center; font-size: .67rem; }
.product-badge-palette { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border); }
.product-badge-palette > span { display: block; margin-bottom: 8px; color: var(--text-3); font-size: .62rem; }
.product-badge-palette > div { display: flex; flex-wrap: wrap; gap: 6px; max-height: 134px; overflow: auto; padding: 2px; }
.product-badge-style-option { padding: 2px; border: 1px solid transparent; border-radius: 999px; background: transparent; cursor: pointer; }
.product-badge-style-option.is-active { border-color: var(--blue-400); box-shadow: 0 0 0 2px color-mix(in srgb,var(--blue-500) 15%,transparent); }
.product-presentation-editor__preview { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.product-presentation-editor__preview > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.product-presentation-editor__preview > header span { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 750; }
.product-presentation-editor__preview > header small { color: var(--text-3); font-size: .61rem; }
.product-presentation-preview-card { max-width: 560px; display: grid; gap: 10px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.product-presentation-preview-card h4 { margin: 0; font: 800 1rem var(--font-display); }
.product-presentation-preview-card p { margin: 0; color: var(--text-2); font-size: .73rem; line-height: 1.8; }
.product-presentation-preview-card .product-presentation-features { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 2px 0 0; padding-bottom: 0; }

/* Wider public experience on desktop */
@media (min-width: 1280px) {
  .tea-hero { padding-inline: clamp(36px, 4.5vw, 78px); }
  .tea-hero__pattern {
    inset-block: -5%;
    inset-inline: -7vw;
    width: auto;
    background-size: 68px 68px;
    opacity: .24;
  }
  .tea-hero__inner {
    width: min(1380px, 100%);
    grid-template-columns: minmax(0,.92fr) minmax(500px,1.08fr);
    gap: clamp(74px,7vw,112px);
  }
  .tea-cup-scene { width: min(580px, 100%); transform: scale(1.045); }
  .tea-story-strip { width: min(1320px, calc(100% - 64px)); }
  .public-products-section, .public-products-page, .tea-benefits-section, .rules-page, .public-page-cta {
    width: min(1380px, 100%);
    padding-inline: 32px;
  }
  .tea-quote-section, .tea-cta-section { width: min(1320px, calc(100% - 64px)); }
  .public-product-grid { gap: 24px; }
}

@media (max-width: 760px) {
  .product-presentation-editor { padding: 14px; }
  .product-presentation-editor__header { flex-direction: column; }
  .product-presentation-editor__columns { grid-template-columns: 1fr; }
  .product-editor-row--badge { grid-template-columns: 1fr 35px; }
  .product-editor-row--badge > .product-presentation-badge { grid-column: 1 / -1; justify-self: start; }
  .product-presentation-preview-card .product-presentation-features { grid-template-columns: 1fr; }
  .pricing-card__presentation-top { flex-direction: column-reverse; }
}

/* Product presentation refinements */
.pricing-card--presentation > h3 {
  font-size: 1.18rem;
  line-height: 1.55;
}
.pricing-card--presentation .product-presentation-badge {
  min-height: 28px;
  padding: 5px 11px;
  font-size: .72rem;
}
.pricing-card--presentation > .button:last-child {
  margin-top: auto;
}
.product-editor-row--badge input[type="text"] {
  cursor: text;
}
.product-presentation-editor__preview > [data-product-presentation-preview] {
  width: 100%;
  display: flex;
  justify-content: center;
}
.product-presentation-editor__preview .pricing-card {
  width: min(440px, 100%);
}

/* Public catalog, glass header, and landing navigation enhancements */
.public-header {
  position: sticky;
  top: 0;
  width: min(1380px, 100%);
  max-width: none;
  transition: min-height .24s ease, height .24s ease, background-color .24s ease, border-color .24s ease, box-shadow .24s ease, backdrop-filter .24s ease;
}
.public-header--scrolled {
  height: 68px;
  padding-inline: 22px;
  border: 1px solid color-mix(in srgb, var(--blue-500) 14%, var(--border));
  border-top: 0;
  border-radius: 0 0 20px 20px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 16px 42px rgba(2, 13, 31, .16);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
.public-shell--transparent .public-header--scrolled {
  color: #fff;
  border-color: rgba(255,255,255,.11);
  background: rgba(4, 19, 43, .76);
}
.public-shell--transparent .public-header--scrolled .brand small { color: rgba(255,255,255,.62); }

.public-category-tabs {
  display: flex;
  align-items: center;
  gap: 9px;
  overflow-x: auto;
  padding: 5px 2px 12px;
  scrollbar-width: thin;
}
.public-category-tabs--landing { margin: 29px 0 18px; }
.public-category-tabs--page { margin-bottom: 28px; }
.public-category-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text-2);
  font: 700 .78rem var(--font-body);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}
.public-category-tab:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--blue-500) 38%, var(--border)); color: var(--text-1); }
.public-category-tab.is-active {
  border-color: color-mix(in srgb, var(--blue-500) 48%, var(--border));
  background: color-mix(in srgb, var(--blue-600) 12%, var(--surface));
  color: var(--blue-400);
}
.public-category-tabs--landing .public-category-tab.is-active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  transform-origin: right center;
  background: var(--gradient-primary);
  animation: publicCategoryTimer 7s linear both;
}
@keyframes publicCategoryTimer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.public-product-grid--live { min-height: 420px; transition: opacity .18s ease; }
.public-product-grid--live.is-loading { opacity: .7; }
.public-catalog-loading,
.public-catalog-state {
  grid-column: 1 / -1;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 28px;
  border: 1px dashed var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text-2);
  text-align: right;
}
.public-catalog-state > .material-symbols-rounded { font-size: 36px; color: var(--blue-400); }
.public-catalog-state b { display: block; margin-bottom: 5px; color: var(--text-1); }
.public-catalog-state p { margin: 0; line-height: 1.8; }
.public-catalog-state--error > .material-symbols-rounded { color: var(--red-500); }
.public-catalog-state .button { margin-inline-start: auto; }
.public-products-overview { display: grid; gap: 55px; }
.public-product-category-group { scroll-margin-top: 98px; }
.public-product-category-group > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 19px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.public-product-category-group > header span { display: inline-flex; align-items: center; gap: 7px; color: var(--blue-400); font-size: .74rem; font-weight: 800; }
.public-product-category-group > header h2 { margin: 7px 0 5px; font: 800 1.45rem var(--font-display); }
.public-product-category-group > header p { margin: 0; color: var(--text-2); font-size: .79rem; }
.public-product-category-group > header > b { flex: 0 0 auto; color: var(--text-3); font-size: .74rem; }
.public-products-page .pricing-card { min-height: 100%; }

.landing-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 35;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: rgba(5, 24, 52, .82);
  color: #fff;
  box-shadow: 0 15px 38px rgba(2, 13, 31, .24);
  backdrop-filter: blur(14px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) scale(.94);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.landing-back-to-top:hover { background: var(--blue-600); }
.landing-back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

@media (max-width: 760px) {
  .public-header, .public-header--scrolled { width: 100%; border-radius: 0; padding-inline: 15px; }
  .public-category-tabs { margin-inline: -2px; }
  .public-product-grid--live { min-height: 300px; }
  .public-catalog-state { align-items: flex-start; flex-direction: column; text-align: right; }
  .public-catalog-state .button { width: 100%; margin: 5px 0 0; }
  .public-product-category-group > header { align-items: flex-start; flex-direction: column; }
  .landing-back-to-top { left: 15px; bottom: 15px; width: 44px; height: 44px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .public-category-tabs--landing .public-category-tab.is-active::after { animation: none; transform: scaleX(1); }
  .landing-back-to-top, .public-category-tab, .public-header { transition: none; }
}


/* Stable public header — optimized */
.public-header-wrap {
  position: sticky;
  top: 0;
  z-index: 80;
  width: 100%;
  height: 76px;
  color: var(--text);
  background: var(--surface);
  border-bottom: 1px solid transparent;

  transition:
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;

  will-change: background-color, border-color;
}

.public-shell--transparent .public-header-wrap {
  color: #fff;
  background: #06162f82;
  border-bottom: 1px solid rgba(117, 173, 255, .22);
}

.public-header {
  position: relative;
  width: min(1380px, 100%);
  height: 76px;
  margin: 0 auto;
  padding-inline: 32px;

  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  transform-origin: top center;
  transition: transform .22s ease;
  will-change: transform;
}

.public-header-wrap--scrolled {
  border-bottom-color: color-mix(in srgb, var(--blue-500) 22%, var(--border));
  background: color-mix(in srgb, var(--surface) 96%, var(--blue-700) 4%);
  box-shadow: 0 8px 22px rgba(2,13,31,.14);
}

.public-shell--transparent .public-header-wrap--scrolled {
  background: #081d3b82;
  border-bottom-color: rgba(117,173,255,.22);
}

.public-header-wrap--scrolled .public-header {
  transform: scale(.94);
}

.public-header-wrap .brand__mark {
  transition: transform .22s ease;
  will-change: transform;
}

.public-header-wrap--scrolled .brand__mark {
  transform: scale(.92);
}

@media (max-width:760px) {

  .public-header-wrap {
    height:68px;
  }

  .public-header {
    height:68px;
    padding-inline:15px;
  }

  .public-header-wrap--scrolled .public-header {
    transform: scale(.97);
  }

}

@media (prefers-reduced-motion:reduce){

  .public-header-wrap,
  .public-header,
  .brand__mark{
    transition:none;
  }

}


/* Light theme — blue, high-contrast and layout-compatible */
:root[data-theme='light'] body::before {
  background: radial-gradient(circle at 84% 0%, rgba(47,124,255,.10), transparent 34%), radial-gradient(circle at 0 86%, rgba(43,212,238,.07), transparent 31%);
}
:root[data-theme='light'] .public-shell,
:root[data-theme='light'] .public-shell--transparent { background: var(--bg); }
:root[data-theme='light'] .card,
:root[data-theme='light'] .finance-metrics article,
:root[data-theme='light'] .finance-filter-panel,
:root[data-theme='light'] .admin-resource-filter {
  background: linear-gradient(180deg, #fff, #f9fbfe);
}
:root[data-theme='light'] .topbar {
  background: rgba(255,255,255,.94);
  border-bottom-color: var(--border);
  box-shadow: 0 7px 22px rgba(35,66,105,.06);
}
:root[data-theme='light'] .icon-button { box-shadow: 0 3px 10px rgba(35,66,105,.04); }
:root[data-theme='light'] .sidebar { background: linear-gradient(180deg, #071d3e, #092851); box-shadow: -5px 0 28px rgba(24,52,91,.14); }
:root[data-theme='light'] .dialog::backdrop { background: rgba(25,43,68,.38); }
:root[data-theme='light'] .toast { background: rgba(255,255,255,.97); backdrop-filter: none; }
:root[data-theme='light'] .dashboard-endpoint-note code,
:root[data-theme='light'] .mock-dashboard-state code {
  color: #245da9;
  background: #edf4fd;
  border-color: #d5e4f5;
}
:root[data-theme='light'] .dashboard-shortcuts a,
:root[data-theme='light'] .admin-shortcuts a,
:root[data-theme='light'] .user-notification-item,
:root[data-theme='light'] .owner-picker__item { background: #fff; }
:root[data-theme='light'] .wallet-balance-card {
  background: radial-gradient(circle at 0 100%, rgba(43,212,238,.13), transparent 42%), linear-gradient(145deg, rgba(47,124,255,.12), #fff 72%);
}
:root[data-theme='light'] .wallet-balance-card::after { border-color: rgba(47,124,255,.035); }
:root[data-theme='light'] .route-loading-overlay--visible { background: rgba(222,231,243,.70); }
:root[data-theme='light'] .route-loading-card {
  border-color: var(--border);
  background: rgba(255,255,255,.97);
  box-shadow: var(--shadow-lg);
}
:root[data-theme='light'] .route-loading-spinner { border-color: #d8e3f0; border-top-color: var(--blue-600); }
:root[data-theme='light'] .privilege-token__value { background: #f3f7fc; }
:root[data-theme='light'] .maintenance-banner {
  border-color: #edbd79;
  background: #fff6e8;
  box-shadow: 0 16px 45px rgba(118,76,20,.13);
  backdrop-filter: none;
}
:root[data-theme='light'] .maintenance-banner b { color: #7e4e12; }
:root[data-theme='light'] .maintenance-banner span { color: #8b6a3e; }
:root[data-theme='light'] .service-label-editor { background: linear-gradient(135deg, #f4f8ff, #fff); }
:root[data-theme='light'] .live-status-banner { background: linear-gradient(135deg, rgba(14,116,144,.10), #fff); }
:root[data-theme='light'] .live-component { background: #f8fafc; }
:root[data-theme='light'] .messages { background: #f4f7fb; }
:root[data-theme='light'] .message--staff .message__bubble,
:root[data-theme='light'] .message--own .message__bubble { background: linear-gradient(145deg, #eef4ff, #f5f1ff); }
:root[data-theme='light'] .message--customer .message__bubble,
:root[data-theme='light'] .message--other .message__bubble { background: #fff; }
:root[data-theme='light'] .ticket-selected-file { background: #f7fafe; }
:root[data-theme='light'] .product-presentation-editor,
:root[data-theme='light'] .product-presentation-builder { background: linear-gradient(145deg, #f5f8fe, #fff); }
:root[data-theme='light'] .product-editor-row { background: #fff; }
:root[data-theme='light'] .product-editor-row input[type='text'] { background: #f1f5fa; }
:root[data-theme='light'] .admin-metric-group,
:root[data-theme='light'] .admin-section-metric { background: #fff; }
:root[data-theme='light'] .table-wrap tbody tr:hover td,
:root[data-theme='light'] .table_wrap tbody tr:hover td { background: #eef5ff; }
:root[data-theme='light'] .backend-log-toolbar { background: #f5f8fc; }
/* Monitoring consoles intentionally remain dark for log readability. */

/* Public pages in light mode */
:root[data-theme='light'] .public-header-wrap,
:root[data-theme='light'] .public-shell--transparent .public-header-wrap {
  color: var(--text);
  background: #ffffff69;
  border-bottom: 1px solid #fff;
}
:root[data-theme='light'] .public-header-wrap--scrolled,
:root[data-theme='light'] .public-shell--transparent .public-header-wrap--scrolled {
  color: var(--text);
  background: #f8fbff82;
  border-bottom-color: #cfddeb;
  box-shadow: 0 12px 30px rgba(33,66,108,.10);
}
:root[data-theme='light'] .public-shell--transparent .public-header .brand small,
:root[data-theme='light'] .public-shell--transparent .public-header-wrap--scrolled .brand small { color: var(--text-3); }
:root[data-theme='light'] .public-shell--transparent .public-header .icon-button { background: #f4f7fb; color: var(--text-2); border-color: var(--border); }
:root[data-theme='light'] .public-footer,
:root[data-theme='light'] .public-shell--transparent .public-footer { color: var(--text-2); border-color: var(--border); }
:root[data-theme='light'] .tea-hero {
  color: var(--text);
  background:
    radial-gradient(circle at 78% 20%, rgba(70,141,255,.20), transparent 34%),
    radial-gradient(circle at 15% 82%, rgba(38,197,205,.12), transparent 32%),
    linear-gradient(145deg, #f9fbff 0%, #edf5ff 55%, #f5fbff 100%);
}
:root[data-theme='light'] .tea-hero__pattern {
  opacity: .55;
  background-image: linear-gradient(rgba(52,103,166,.065) 1px, transparent 1px), linear-gradient(90deg, rgba(52,103,166,.065) 1px, transparent 1px);
}
:root[data-theme='light'] .tea-kicker {
  border-color: rgba(36,111,239,.18);
  background: rgba(255,255,255,.78);
  color: #365a84;
  backdrop-filter: none;
}
:root[data-theme='light'] .tea-hero__copy > p { color: var(--text-2); }
:root[data-theme='light'] .tea-hero__promises { border-top-color: rgba(34,91,160,.13); }
:root[data-theme='light'] .tea-hero__promises span { color: #4f6680; }
:root[data-theme='light'] .tea-cup-scene::before {
  background-color: rgb(236 236 249 / 50%);
  border-color: rgba(38,111,207,.16);
  box-shadow: 0 0 0 45px rgba(47,124,255,.035), 0 0 0 90px rgba(47,124,255,.022);
}
:root[data-theme='light'] .tea-float-card {
  border-color: rgba(56,103,164,.15);
  background: rgba(255,255,255,.92);
  color: var(--text);
  box-shadow: 0 18px 40px rgba(43,78,125,.14);
  backdrop-filter: none;
}
:root[data-theme='light'] .tea-float-card small { color: var(--text-3); }
:root[data-theme='light'] .tea-steam { border-inline-start-color: rgba(56,134,201,.30); }
:root[data-theme='light'] .tea-hero .button--glass {
  background: #fff;
  color: var(--blue-700);
  border-color: #cbdcf0;
  backdrop-filter: none;
  box-shadow: var(--shadow-sm);
}
:root[data-theme='light'] .tea-story-strip { background: #fff; backdrop-filter: none; }
:root[data-theme='light'] .public-product-card { background: linear-gradient(155deg, #f7faff, #fff); }
:root[data-theme='light'] .public-product-card--featured { background: linear-gradient(155deg, #edf5ff, #fff 72%); }
:root[data-theme='light'] .public-catalog-loading,
:root[data-theme='light'] .public-catalog-state { background: #f9fbfe; }
:root[data-theme='light'] .tea-quote-section { background: linear-gradient(145deg, #f4f8fe, #fff); }
:root[data-theme='light'] .public-page-hero { background: radial-gradient(circle at 50% 0, rgba(65,137,255,.14), transparent 44%), #f7faff; }
:root[data-theme='light'] .rules-page__summary { background: #fff; }
:root[data-theme='light'] .landing-back-to-top {
  border-color: #cbd9e9;
  background: #fff;
  color: var(--blue-700);
  box-shadow: 0 13px 32px rgba(36,69,112,.16);
  backdrop-filter: none;
}
:root[data-theme='light'] .landing-back-to-top:hover { background: #eaf2ff; }

/* Theme controls */
.public-theme-toggle,
.topbar-theme-toggle,
.sidebar-theme-toggle { flex: 0 0 auto; }
.sidebar-theme-toggle { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.72); }
.sidebar-theme-toggle:hover { color: #fff; background: rgba(255,255,255,.10); }
:root[data-theme='light'] .topbar-theme-toggle,
:root[data-theme='light'] .public-theme-toggle { background: #f5f8fc; }

html, body, .app-shell, .workspace, .public-shell, .card, .dialog__surface, .topbar, .field input, .field textarea, .field select {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
@media (max-width: 820px) {
  .topbar-theme-toggle { display: none; }
}
@media (max-width: 420px) {
  .public-theme-toggle { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  html, body, .app-shell, .workspace, .public-shell, .card, .dialog__surface, .topbar, .field input, .field textarea, .field select { transition: none; }
}
:root[data-theme='light'] .public-shell--transparent .public-header { color: var(--text); }

/* Auth visual in the light theme */
:root[data-theme='light'] .auth-visual {
  color: var(--text);
  background:
    radial-gradient(circle at 16% 20%, rgba(36,111,239,.18), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(13,169,198,.12), transparent 35%),
    linear-gradient(145deg, #edf5ff, #f8fbff 58%, #e9f2ff);
  border-left: 1px solid var(--border);
}
:root[data-theme='light'] .auth-visual::before { border-color: rgba(36,111,239,.055); }
:root[data-theme='light'] .auth-visual .pill--light {
  color: var(--blue-700);
  border-color: rgba(36,111,239,.22);
  background: rgba(36,111,239,.08);
  backdrop-filter: none;
}
:root[data-theme='light'] .auth-visual__content > p { color: var(--text-2); }
:root[data-theme='light'] .auth-feature { border-color: rgba(16,33,58,.09); }
:root[data-theme='light'] .auth-feature > .material-symbols-rounded {
  color: var(--blue-700);
  background: rgba(36,111,239,.1);
}
:root[data-theme='light'] .auth-feature small { color: var(--text-3); }

/* Dashboard guide entry above the sidebar footer */
.sidebar-guide-wrap {
  padding: 10px 14px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.sidebar-guide {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(117,181,255,.16);
  border-radius: 11px;
  color: rgba(230,240,255,.72);
  background: rgba(47,124,255,.07);
  display: grid;
  grid-template-columns: 22px minmax(0,1fr) 18px;
  align-items: center;
  gap: 9px;
  text-align: right;
  font-size: .76rem;
  font-weight: 700;
  transition: .18s ease;
}
.sidebar-guide:hover {
  color: #fff;
  border-color: rgba(117,181,255,.3);
  background: rgba(47,124,255,.13);
}
.sidebar-guide > .material-symbols-rounded { font-size: 19px; color: #75b5ff; }
.sidebar-guide > .material-symbols-rounded:last-child { color: rgba(230,240,255,.42); font-size: 17px; }

/* JSON-driven first-use dashboard tour */
body.dashboard-tour-open { overscroll-behavior: none; }
.dashboard-tour {
  position: fixed;
  inset: 0;
  z-index: 1000;
  direction: rtl;
  pointer-events: auto;
}
.dashboard-tour--center {
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2,9,20,.72);
}
.dashboard-tour__spotlight {
  position: fixed;
  z-index: 1;
  border: 2px solid rgba(117,173,255,.92);
  border-radius: 15px;
  background: transparent;
  box-shadow: 0 0 0 9999px rgba(2,8,18,.72), 0 0 0 5px rgba(47,124,255,.13), 0 14px 45px rgba(0,0,0,.24);
  pointer-events: none;
  transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease, border-radius .22s ease;
}
.dashboard-tour__pointer {
  position: fixed;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font: 900 1.45rem/1 var(--font-ui);
  pointer-events: none;
  animation: dashboard-tour-pointer 1.35s ease-in-out infinite;
}
.dashboard-tour__card {
  position: fixed;
  z-index: 4;
  width: min(410px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 22px;
  border: 1px solid color-mix(in srgb,var(--blue-500) 22%,var(--border));
  border-radius: 21px;
  color: var(--text);
  background: color-mix(in srgb,var(--surface) 97%,var(--blue-500) 3%);
  box-shadow: 0 30px 90px rgba(0,0,0,.42);
  scrollbar-width: thin;
}
.dashboard-tour--center .dashboard-tour__card {
  position: relative;
  inset: auto;
  width: min(460px, calc(100vw - 36px));
  text-align: center;
}
.dashboard-tour__close {
  position: absolute;
  top: 13px;
  left: 13px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  background: var(--surface-2);
}
.dashboard-tour__close:hover { color: var(--red-500); border-color: color-mix(in srgb,var(--red-500) 38%,var(--border)); }
.dashboard-tour__close .material-symbols-rounded { font-size: 19px; }
.dashboard-tour__meta {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}
.dashboard-tour__meta span { color: var(--text-3); font-size: .66rem; font-weight: 700; }
.dashboard-tour__meta i {
  position: relative;
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}
.dashboard-tour__meta i::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--tour-progress);
  border-radius: inherit;
  background: var(--gradient-primary);
  transition: width .24s ease;
}
.dashboard-tour__heading {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  align-items: start;
  gap: 13px;
}
.dashboard-tour__heading > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--blue-500);
  background: color-mix(in srgb,var(--blue-500) 11%,var(--surface));
}
.dashboard-tour__heading > span .material-symbols-rounded { font-size: 26px; }
.dashboard-tour__heading h2 {
  margin: 1px 0 8px;
  font: 800 1.06rem/1.65 var(--font-display);
}
.dashboard-tour__heading p {
  margin: 0;
  color: var(--text-2);
  font-size: .82rem;
  line-height: 1.95;
}
.dashboard-tour--center .dashboard-tour__heading {
  grid-template-columns: 1fr;
  justify-items: center;
}
.dashboard-tour--center .dashboard-tour__heading > span { width: 60px; height: 60px; border-radius: 19px; }
.dashboard-tour--center .dashboard-tour__heading > span .material-symbols-rounded { font-size: 32px; }
.dashboard-tour__actions {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding-top: 17px;
  border-top: 1px solid var(--border);
}
.dashboard-tour__actions .button { min-height: 38px; padding-inline: 12px; font-size: .74rem; }
.dashboard-tour-target { scroll-margin: 90px; }

:root[data-theme='light'] .dashboard-tour--center { background: rgba(18,37,64,.56); }
:root[data-theme='light'] .dashboard-tour__spotlight {
  border-color: rgba(20,95,223,.92);
  box-shadow: 0 0 0 9999px rgba(22,43,72,.55), 0 0 0 5px rgba(36,111,239,.13), 0 14px 40px rgba(31,61,102,.2);
}
:root[data-theme='light'] .dashboard-tour__card {
  background: #fff;
  box-shadow: 0 28px 75px rgba(25,53,92,.24);
}

@keyframes dashboard-tour-pointer {
  0%,100% { margin-left: 0; }
  50% { margin-left: 8px; }
}
@media (max-width: 820px) {
  .dashboard-tour__card {
    right: 12px !important;
    left: 12px !important;
    width: auto;
    max-height: min(410px, calc(100vh - 24px));
    padding: 18px;
  }
  .dashboard-tour--center .dashboard-tour__card { right: auto !important; left: auto !important; width: min(440px, calc(100vw - 28px)); }
  .dashboard-tour__heading { grid-template-columns: 42px minmax(0,1fr); gap: 10px; }
  .dashboard-tour__heading > span { width: 42px; height: 42px; border-radius: 13px; }
  .dashboard-tour__heading h2 { font-size: .95rem; }
  .dashboard-tour__heading p { font-size: .75rem; line-height: 1.85; }
  .dashboard-tour__actions { grid-template-columns: 1fr 1fr; }
  .dashboard-tour__actions > span { display: none; }
  .dashboard-tour__actions [data-tour-cancel] { grid-column: 1 / -1; order: 3; }
  .dashboard-tour__actions .button { width: 100%; }
  .dashboard-tour__pointer { width: 36px; height: 36px; font-size: 1.2rem; }
}
@media (max-width: 440px) {
  .dashboard-tour__card { padding: 16px; }
  .dashboard-tour__meta { padding-left: 38px; }
  .dashboard-tour__actions { gap: 7px; }
  .dashboard-tour__actions .button { padding-inline: 8px; font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-tour__spotlight, .dashboard-tour__meta i::after { transition: none; }
  .dashboard-tour__pointer { animation: none; }
}

/* 2026-07-29 sidebar guide and cached user identity refinements */
.sidebar-guide-wrap {
  padding: 7px 20px 5px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.sidebar-guide {
  width: auto;
  min-height: 30px;
  padding: 2px 0;
  border: 0 solid transparent;
  border-radius: 0;
  color: rgba(230,240,255,.58);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-align: right;
  font-size: .71rem;
  font-weight: 650;
  box-shadow: none;
}
.sidebar-guide:hover,
.sidebar-guide:focus-visible {
  color: #fff;
  border-color: transparent;
  background: transparent;
  outline: 0;
}
.sidebar-guide > .material-symbols-rounded {
  color: #75b5ff;
  font-size: 18px;
}
.sidebar-user b,
.sidebar-user small { max-width: 150px; }
.sidebar__footer .sidebar-theme-toggle { display: none !important; }

/* The sidebar theme control was removed; keep the header control available on mobile. */
@media (max-width: 820px) {
  .topbar-theme-toggle { display: grid !important; }
}
@media (max-width: 420px) {
  .topbar-theme-toggle { width: 36px; height: 36px; }
  .sidebar-user b, .sidebar-user small { max-width: 142px; }
}

/* 2026-07-31 animated landing creature and frosted content layers */
.public-shell--creature {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(circle at 15% 14%, color-mix(in srgb,var(--cyan-400) 8%,transparent), transparent 34%),
    radial-gradient(circle at 86% 44%, color-mix(in srgb,var(--blue-600) 9%,transparent), transparent 38%),
    var(--bg);
}
.public-shell--creature > main,
.public-shell--creature > .public-footer {
  position: relative;
}
.public-shell--creature > .public-header-wrap { z-index: 40; }
.public-shell--creature > .maintenance-banner { z-index: 90; }

.landing-creature {
  --creature-opacity: .82;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  opacity: var(--creature-opacity);
}
.landing-creature__ambient {
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(circle at 31% 32%, rgba(47,124,255,.18), transparent 23%),
    radial-gradient(circle at 70% 61%, rgba(43,212,238,.12), transparent 27%),
    radial-gradient(circle at 57% 17%, rgba(138,108,255,.13), transparent 22%);
  filter: blur(58px) saturate(135%);
  opacity: .92;
  transform: translateZ(0);
}
.landing-creature__grid {
  --creature-rows: 13;
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(82vmin, 860px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(var(--creature-rows), minmax(0,1fr));
  grid-template-rows: repeat(var(--creature-rows), minmax(0,1fr));
  gap: clamp(4px, .58vmin, 9px);
  transform: translate3d(-50%,-50%,0) rotate(-4deg);
  filter: saturate(126%);
  will-change: transform;
}
.landing-creature__particle {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  will-change: transform;
}
.landing-creature__particle::before {
  content: '';
  width: clamp(4px, .58vmin, 9px);
  aspect-ratio: 1;
  border-radius: 999px;
  opacity: var(--particle-opacity);
  background: hsl(var(--particle-hue) 86% var(--particle-lightness));
  box-shadow:
    0 0 var(--particle-glow) hsl(var(--particle-hue) 92% 62% / .72),
    0 0 var(--particle-glow-wide) hsl(var(--particle-hue) 90% 58% / .2);
  mix-blend-mode: plus-lighter;
  transform: scale(var(--particle-scale));
  animation: landing-creature-pulse 5.8s cubic-bezier(.45,0,.22,1) infinite;
  animation-delay: var(--particle-delay);
  will-change: transform, opacity;
}
.landing-creature.is-following-pointer .landing-creature__particle::before {
  animation-duration: 3.9s;
}
.landing-creature--reduced-motion .landing-creature__particle::before { animation: none; }

.public-shell--creature .tea-hero {
  z-index: 1;
  background: transparent;
}
.public-shell--creature .tea-hero__pattern { opacity: .12; }
.public-shell--creature .tea-hero__copy,
.public-shell--creature .tea-cup-scene {
  /* border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(145deg, rgba(8,29,62,.46), rgba(5,20,43,.24));
  box-shadow: 0 28px 80px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(20px) saturate(132%);
  -webkit-backdrop-filter: blur(20px) saturate(132%); */
}
.public-shell--creature .tea-hero__copy {
  padding: clamp(25px,3.2vw,46px);
  border-radius: 30px;
}
.public-shell--creature .tea-cup-scene {
  border-radius: 38px;
}

.landing-glass-panel {
  position: relative;
  z-index: 2;
  border: 1px solid color-mix(in srgb,var(--blue-400) 14%,var(--border));
  background: color-mix(in srgb,var(--surface) 78%,transparent);
  box-shadow: 0 28px 75px rgba(0,0,0,.13), inset 0 1px color-mix(in srgb,#fff 7%,transparent);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}
.public-shell--creature .tea-story-strip {
  background: color-mix(in srgb,var(--surface) 78%,transparent);
}
.public-shell--creature .public-products-section,
.public-shell--creature .tea-benefits-section {
  margin-block: 64px;
  padding: 58px 42px;
  border-radius: 32px;
}
.public-shell--creature .public-products-section {
  width: min(1320px,calc(100% - 48px));
}
.public-shell--creature .tea-benefits-section {
  width: min(1320px,calc(100% - 48px));
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
}
.public-shell--creature .pricing-card,
.public-shell--creature .tea-benefits-grid article {
  background: color-mix(in srgb,var(--surface) 86%,transparent);
  backdrop-filter: blur(15px) saturate(118%);
  -webkit-backdrop-filter: blur(15px) saturate(118%);
}
.public-shell--creature .tea-quote-section {
  background: linear-gradient(135deg,
    color-mix(in srgb,var(--blue-600) 12%,transparent),
    color-mix(in srgb,var(--surface) 79%,transparent));
}
.public-shell--creature .tea-cta-section {
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(20,95,223,.9), rgba(47,124,255,.84) 52%, rgba(13,169,198,.82));
  backdrop-filter: blur(22px) saturate(132%);
  -webkit-backdrop-filter: blur(22px) saturate(132%);
}
.public-shell--creature .public-header-wrap {
  backdrop-filter: blur(18px) saturate(128%);
  -webkit-backdrop-filter: blur(18px) saturate(128%);
}

:root[data-theme='light'] .landing-creature {
  --creature-opacity: .58;
}
:root[data-theme='light'] .landing-creature__ambient {
  background:
    radial-gradient(circle at 31% 32%, rgba(20,95,223,.14), transparent 24%),
    radial-gradient(circle at 70% 61%, rgba(13,169,198,.11), transparent 28%),
    radial-gradient(circle at 57% 17%, rgba(115,87,223,.1), transparent 23%);
}
:root[data-theme='light'] .landing-creature__particle::before {
  mix-blend-mode: multiply;
  box-shadow:
    0 0 var(--particle-glow) hsl(var(--particle-hue) 78% 46% / .28),
    0 0 var(--particle-glow-wide) hsl(var(--particle-hue) 82% 48% / .12);
}
:root[data-theme='light'] .public-shell--creature .tea-hero {
  color: var(--text);
  background: transparent;
}
:root[data-theme='light'] .public-shell--creature .tea-hero__copy,
:root[data-theme='light'] .public-shell--creature .tea-cup-scene {
  /* border-color: rgba(20,95,223,.13);
  background: linear-gradient(145deg, rgba(255,255,255,.74), rgba(241,247,255,.56));
  box-shadow: 0 25px 70px rgba(31,69,119,.1), inset 0 1px rgba(255,255,255,.8); */
}
:root[data-theme='light'] .public-shell--creature .tea-hero__copy > p,
:root[data-theme='light'] .public-shell--creature .tea-hero__promises span { color: var(--text-2); }
:root[data-theme='light'] .public-shell--creature .tea-hero__promises { border-top-color: rgba(20,95,223,.12); }
:root[data-theme='light'] .landing-glass-panel {
  /* border-color: rgba(20,95,223,.12);
  background: rgba(255,255,255,.68);
  box-shadow: 0 25px 70px rgba(31,69,119,.1), inset 0 1px rgba(255,255,255,.82); */
}
:root[data-theme='light'] .public-shell--creature .tea-cta-section {
      /* border-color: rgba(255,255,255,.16); */
    background: linear-gradient(135deg, rgb(20 95 223 / 21%), rgba(47, 124, 255, .84) 52%, rgb(13 169 198 / 44%));
    backdrop-filter: blur(22px) saturate(132%);
    -webkit-backdrop-filter: blur(22px) saturate(132%);
}
:root[data-theme='light'] .public-shell--creature .pricing-card,
:root[data-theme='light'] .public-shell--creature .tea-benefits-grid article {
  background: rgba(255,255,255,.76);
}


@keyframes landing-creature-pulse {
  0%, 76%, 100% {
    opacity: var(--particle-opacity-low);
    transform: scale(var(--particle-scale));
  }
  84% {
    opacity: var(--particle-opacity-high);
    transform: scale(var(--particle-scale-pulse));
  }
  92% {
    opacity: var(--particle-opacity);
    transform: scale(var(--particle-scale-soft));
  }
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .landing-glass-panel,
  .public-shell--creature .tea-hero__copy,
  .public-shell--creature .tea-cup-scene { background: color-mix(in srgb,var(--surface) 94%,var(--bg)); }
}

@media (max-width: 1020px) {
  .public-shell--creature .tea-benefits-section { grid-template-columns: 1fr; }
  .public-shell--creature .tea-hero__copy { max-width: 760px; margin-inline: auto; }
  .landing-creature__grid { width: min(96vmin,760px); }
}
@media (max-width: 760px) {
  .landing-creature { --creature-opacity: .6; }
  .landing-creature__grid { width: 112vmin; gap: 5px; }
  .public-shell--creature .tea-hero__copy { padding: 24px 19px; border-radius: 24px; }
  .public-shell--creature .tea-cup-scene { border-radius: 30px; }
  .public-shell--creature .public-products-section,
  .public-shell--creature .tea-benefits-section {
    width: calc(100% - 28px);
    margin-block: 34px;
    padding: 38px 16px;
    border-radius: 25px;
  }
  .public-shell--creature .tea-story-strip,
  .public-shell--creature .tea-quote-section,
  .public-shell--creature .tea-cta-section { backdrop-filter: blur(18px) saturate(118%); -webkit-backdrop-filter: blur(18px) saturate(118%); }
}
@media (max-width: 480px) {
  .landing-creature { --creature-opacity: .46; }
  .landing-creature__grid { width: 126vmin; }
  .landing-creature__particle::before { width: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-creature { opacity: .38; }
  .landing-creature__particle { transform: none !important; }
  .landing-creature__particle::before { animation: none; }
}

/* 2026-07-31 Anime.js creature fidelity and performance correction */
.landing-creature {
  --creature-opacity: .76;
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  opacity: 0;
  transition: opacity .35s ease;
}
.landing-creature--ready { opacity: var(--creature-opacity); }
.landing-creature__ambient {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 31% 32%, rgba(47,124,255,.14), transparent 22%),
    radial-gradient(circle at 70% 61%, rgba(43,212,238,.1), transparent 25%),
    radial-gradient(circle at 57% 17%, rgba(138,108,255,.1), transparent 21%);
  filter: blur(42px) saturate(125%);
  opacity: .72;
  transform: translateZ(0);
}
.landing-creature__grid {
  position: relative;
  inset: auto;
  width: 130em;
  height: 130em;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  font-size: .2vh;
  transform: none;
  filter: saturate(122%);
  will-change: auto;
}
.landing-creature__particle {
  position: relative;
  display: block;
  width: 4em;
  height: 4em;
  min-width: 0;
  min-height: 0;
  margin: 3em;
  border-radius: 2em;
  transform-style: preserve-3d;
  mix-blend-mode: plus-lighter;
  will-change: transform, opacity;
}
.landing-creature__particle::before { content: none; animation: none; }
.landing-creature.is-following-pointer .landing-creature__particle::before { animation: none; }
.landing-creature--reduced-motion {
  opacity: .34;
}
.landing-creature--reduced-motion .landing-creature__particle {
  transform: none !important;
  will-change: auto;
}
.landing-creature--load-failed .landing-creature__grid { display: none; }
:root[data-theme='light'] .landing-creature { --creature-opacity: .52; }
:root[data-theme='light'] .landing-creature__particle { mix-blend-mode: multiply; }

@media (max-width: 760px) {
  .landing-creature { --creature-opacity: .58; }
  .landing-creature__grid { font-size: .18vh; }
}
@media (max-width: 480px) {
  .landing-creature { --creature-opacity: .42; }
  .landing-creature__grid { font-size: .17vh; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-creature { opacity: .3; transition: none; }
}

/* Landing-only tea cup loader */
html.landing-loader-lock,
html.landing-loader-lock body {
  overflow: hidden;
}
.landing-loader-screen {
  --landing-loader-cup: #f7fbff;
  --landing-loader-steam-soft: rgba(226,240,255,.16);
  --landing-loader-steam-mid: rgba(226,240,255,.46);
  --landing-loader-steam-strong: rgba(226,240,255,.72);
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #eef6ff;
  background:
    radial-gradient(circle at 50% 42%, rgba(47,124,255,.18), transparent 28%),
    radial-gradient(circle at 20% 75%, rgba(43,212,238,.09), transparent 30%),
    linear-gradient(145deg, #030b18, #071a35 54%, #061326);
  opacity: 1;
  visibility: visible;
  transition: opacity .36s ease, visibility .36s ease;
}
.landing-loader-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, #000 14%, transparent 75%);
}
.landing-loader-screen--leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.landing-loader-screen__glow {
  position: absolute;
  width: min(62vw, 680px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,124,255,.16), rgba(43,212,238,.055) 38%, transparent 69%);
  filter: blur(24px);
  transform: translateZ(0);
}
.landing-loader-screen__content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 28px;
  min-width: min(320px, calc(100vw - 40px));
  padding: 38px 42px 32px;
  text-align: center;
}
.landing-loader-screen__content > div {
  display: grid;
  gap: 6px;
}
.landing-loader-screen__content b {
  font: 850 1.25rem/1.5 var(--font-display);
  letter-spacing: -.015em;
}
.landing-loader-screen__content small {
  color: rgba(226,238,255,.6);
  font-size: .74rem;
  line-height: 1.8;
}
.landing-loader-screen .loader {
  --color-1: var(--landing-loader-cup);
  --color-2: transparent;
  --color-3: var(--landing-loader-steam-soft);
  --color-4: var(--landing-loader-steam-mid);
  --color-5: var(--landing-loader-steam-strong);
  --size: 1.75px;
  width: calc(48 * var(--size));
  height: calc(40 * var(--size));
  margin-top: calc(30 * var(--size));
  display: inline-block;
  position: relative;
  background: var(--color-1);
  border-radius: 15% 15% 35% 35%;
  box-shadow: 0 20px 46px rgba(0,0,0,.24), inset -8px -7px 16px rgba(70,116,175,.12);
}
.landing-loader-screen .loader::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: calc(45 * var(--size));
  top: calc(8 * var(--size));
  border: calc(4 * var(--size)) solid var(--color-1);
  width: calc(16 * var(--size));
  height: calc(20 * var(--size));
  border-radius: 0 calc(4 * var(--size)) calc(4 * var(--size)) 0;
}
.landing-loader-screen .loader::before {
  content: '';
  position: absolute;
  width: calc(1 * var(--size));
  height: calc(10 * var(--size));
  color: var(--color-1);
  top: calc(-15 * var(--size));
  left: calc(11 * var(--size));
  box-sizing: border-box;
  animation: landing-tea-loader 1s ease infinite;
}
@keyframes landing-tea-loader {
  0% {
    box-shadow:
      calc(2 * var(--size)) 0 var(--color-2),
      calc(12 * var(--size)) 0 var(--color-3),
      calc(20 * var(--size)) 0 var(--color-2);
  }
  50% {
    box-shadow:
      calc(2 * var(--size)) calc(-5 * var(--size)) var(--color-4),
      calc(12 * var(--size)) calc(-3 * var(--size)) var(--color-4),
      calc(20 * var(--size)) calc(-2 * var(--size)) var(--color-5);
  }
  100% {
    box-shadow:
      calc(2 * var(--size)) calc(-8 * var(--size)) var(--color-2),
      calc(12 * var(--size)) calc(-5 * var(--size)) var(--color-2),
      calc(20 * var(--size)) calc(-5 * var(--size)) var(--color-2);
  }
}
:root[data-theme='light'] .landing-loader-screen {
  --landing-loader-cup: #1768ff;
  --landing-loader-steam-soft: rgba(20,95,223,.12);
  --landing-loader-steam-mid: rgba(20,95,223,.38);
  --landing-loader-steam-strong: rgba(13,169,198,.56);
  color: var(--text);
  background:
    radial-gradient(circle at 50% 42%, rgba(47,124,255,.13), transparent 29%),
    radial-gradient(circle at 20% 75%, rgba(13,169,198,.08), transparent 31%),
    linear-gradient(145deg, #f8fbff, #edf4fc 55%, #e8f1fb);
}
:root[data-theme='light'] .landing-loader-screen::before {
  opacity: .34;
  background-image:
    linear-gradient(rgba(20,95,223,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,95,223,.055) 1px, transparent 1px);
}
:root[data-theme='light'] .landing-loader-screen__glow {
  background: radial-gradient(circle, rgba(47,124,255,.14), rgba(13,169,198,.045) 38%, transparent 69%);
}
:root[data-theme='light'] .landing-loader-screen__content small { color: var(--text-2); }
:root[data-theme='light'] .landing-loader-screen .loader {
  box-shadow: 0 20px 44px rgba(30,64,110,.16), inset -8px -7px 16px rgba(255,255,255,.16);
}
@media (max-width: 640px) {
  .landing-loader-screen__content { gap: 24px; padding: 30px 24px 26px; }
  .landing-loader-screen .loader { --size: 1.48px; }
  .landing-loader-screen__content b { font-size: 1.08rem; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-loader-screen { transition: none; }
  .landing-loader-screen .loader::before {
    animation: none;
    box-shadow:
      calc(2 * var(--size)) calc(-5 * var(--size)) var(--color-4),
      calc(12 * var(--size)) calc(-3 * var(--size)) var(--color-4),
      calc(20 * var(--size)) calc(-2 * var(--size)) var(--color-5);
  }
}

/* DNS provisioning: user assignment flow, TeaSpeak connection, and admin zone records */
.dns-address-cell {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.dns-address-cell > .material-symbols-rounded { color: var(--blue-500); font-size: 19px; }
.dns-address-cell b { overflow-wrap: anywhere; }

.resource-picker { display: grid; gap: 14px; }
.resource-picker__results { min-height: 280px; max-height: min(540px, 60vh); overflow: auto; padding: 2px; }
.resource-picker__list { display: grid; gap: 8px; }
.resource-picker__item {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 72%, var(--surface));
  color: var(--text);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 11px;
  text-align: right;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.resource-picker__item:hover,
.resource-picker__item.is-selected {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--blue-500) 52%, var(--border));
  background: color-mix(in srgb, var(--blue-600) 8%, var(--surface));
}
.resource-picker__item.is-selected { box-shadow: inset -3px 0 var(--blue-500); }
.resource-picker__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--blue-500);
  background: color-mix(in srgb, var(--blue-600) 11%, var(--surface));
}
.resource-picker__copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.resource-picker__copy b,
.resource-picker__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-picker__copy b { font-size: .78rem; }
.resource-picker__copy small { color: var(--text-3); font-size: .62rem; }
.resource-picker__item > .material-symbols-rounded:last-child { color: var(--text-3); font-size: 19px; }
.resource-picker__item.is-selected > .material-symbols-rounded:last-child { color: var(--green-500); }

.dns-assignment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dns-resource-field { min-width: 0; }
.resource-select-button {
  width: 100%;
  min-height: 50px;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 9px;
  text-align: right;
}
.resource-select-button:hover { border-color: color-mix(in srgb, var(--blue-500) 50%, var(--border)); background: color-mix(in srgb, var(--blue-600) 6%, var(--surface)); }
.resource-select-button__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--blue-500); background: color-mix(in srgb, var(--blue-600) 11%, var(--surface)); }
.resource-select-button > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.resource-select-button small { color: var(--text-3); font-size: .58rem; }
.resource-select-button b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.resource-select-button > .material-symbols-rounded:last-child { color: var(--text-3); }

.dns-subdomain-input {
  min-width: 0;
  height: 46px;
  display: flex;
  direction: ltr;
  border: 1px solid var(--border);
  border-radius: 11px;
  overflow: hidden;
  background: var(--surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.dns-subdomain-input:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-500) 12%, transparent); }
.dns-subdomain-input input { min-width: 90px; height: 100%; flex: 1; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; direction: ltr; text-align: left; }
.dns-subdomain-input > span { max-width: 55%; padding-inline: 11px; display: flex; align-items: center; border-inline-start: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font: 650 .72rem ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dns-availability {
  min-height: 52px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .7rem;
  line-height: 1.7;
}
.dns-availability > .material-symbols-rounded { font-size: 21px; }
.dns-availability--available { color: var(--green-500); border-color: color-mix(in srgb, var(--green-500) 33%, var(--border)); background: color-mix(in srgb, var(--green-500) 8%, var(--surface)); }
.dns-availability--taken,
.dns-availability--invalid { color: var(--red-500); border-color: color-mix(in srgb, var(--red-500) 30%, var(--border)); background: color-mix(in srgb, var(--red-500) 7%, var(--surface)); }
.dns-availability--checking,
.dns-availability--waiting { color: var(--blue-500); border-color: color-mix(in srgb, var(--blue-500) 28%, var(--border)); background: color-mix(in srgb, var(--blue-500) 7%, var(--surface)); }
.dns-availability--error { color: var(--orange-500); border-color: color-mix(in srgb, var(--orange-500) 30%, var(--border)); background: color-mix(in srgb, var(--orange-500) 7%, var(--surface)); }
.spinner--small { width: 18px; height: 18px; border-width: 2px; flex: 0 0 18px; }

.teaspeak-connection--inline { gap: 10px; }
.teaspeak-dns-connection,
.teaspeak-dns-add {
  width: 100%;
  min-height: 66px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--blue-500) 24%, var(--border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--blue-600) 5%, var(--surface-2));
  color: var(--text);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  text-align: right;
}
.teaspeak-dns-connection__icon,
.teaspeak-dns-add > .material-symbols-rounded:first-child {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--cyan-400);
  background: color-mix(in srgb, var(--cyan-400) 10%, var(--surface));
}
.teaspeak-dns-connection > span:nth-child(2),
.teaspeak-dns-add > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.teaspeak-dns-connection small,
.teaspeak-dns-add small { color: var(--text-3); font-size: .61rem; }
.teaspeak-dns-connection b,
.teaspeak-dns-add b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }
.teaspeak-dns-connection__actions { display: flex; gap: 6px; }
.teaspeak-dns-add { cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.teaspeak-dns-add:hover { border-color: color-mix(in srgb, var(--blue-500) 55%, var(--border)); background: color-mix(in srgb, var(--blue-600) 9%, var(--surface)); }
.teaspeak-dns-add > .material-symbols-rounded:last-child { color: var(--text-3); }

.dns-zone-card .table-wrap table { min-width: 680px; }
.dns-record-table table { min-width: 1180px; }
.dns-record-row--assigned td { background: color-mix(in srgb, var(--blue-600) 7%, var(--surface)); }
.dns-record-row--assigned td:first-child { box-shadow: inset -3px 0 var(--blue-500); }
.dns-record-row--assigned:hover td { background: color-mix(in srgb, var(--blue-600) 11%, var(--surface)) !important; }
.dns-record-value { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: .67rem; }
.node-reference-button--compact { min-width: 128px; }
.node-reference-button--compact span { font-size: .6rem; }
.user-dns-card .table-wrap table { min-width: 820px; }

:root[data-theme='light'] .dns-record-row--assigned td { background: color-mix(in srgb, var(--blue-600) 6%, #fff); }
:root[data-theme='light'] .dns-record-row--assigned:hover td { background: color-mix(in srgb, var(--blue-600) 10%, #fff) !important; }

@media (max-width: 700px) {
  .dns-assignment-form { grid-template-columns: 1fr; }
  .dns-assignment-form .field--full { grid-column: auto; }
  .resource-picker__item { grid-template-columns: 38px minmax(0, 1fr) 20px; }
  .resource-picker__item .badge { display: none; }
  .resource-picker__icon { width: 38px; height: 38px; }
  .dns-subdomain-input > span { max-width: 48%; font-size: .63rem; }
  .teaspeak-dns-connection,
  .teaspeak-dns-add { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 10px; }
  .teaspeak-dns-connection__icon,
  .teaspeak-dns-add > .material-symbols-rounded:first-child { width: 38px; height: 38px; }
}

/* DNS record source separation and collapsible tables */
.dns-record-groups {
  display: grid;
  gap: 14px;
}
.dns-record-group {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2) 68%, var(--surface));
}
.dns-record-group > summary {
  min-height: 72px;
  padding: 12px 15px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 11px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .18s ease;
}
.dns-record-group > summary::-webkit-details-marker { display: none; }
.dns-record-group > summary:hover { background: color-mix(in srgb, var(--blue-600) 5%, var(--surface)); }
.dns-record-group[open] > summary { border-bottom: 1px solid var(--border); }
.dns-record-group__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--blue-500);
  background: color-mix(in srgb, var(--blue-600) 11%, var(--surface));
}
.dns-record-group__copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dns-record-group__copy b { font: 750 .82rem var(--font-display); }
.dns-record-group__copy small { color: var(--text-3); font-size: .63rem; line-height: 1.7; }
.dns-record-group__count {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: .62rem;
  white-space: nowrap;
}
.dns-record-group__chevron { color: var(--text-3); transition: transform .18s ease; }
.dns-record-group[open] .dns-record-group__chevron { transform: rotate(180deg); }
.dns-record-group__body { padding: 0; }
.dns-record-group__body > .empty-state { min-height: 180px; }
.dns-record-table--provider table { min-width: 680px; }
.dns-record-table--teacloud table { min-width: 1180px; }
.dns-record-value-cell { min-width: 0; display: inline-grid; gap: 3px; }
.dns-record-value-cell small { color: var(--text-3); font: 600 .57rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.dns-record-placeholder {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 5px 9px;
  border: 1px dashed var(--border);
  border-radius: 9px;
  color: var(--text-3);
  background: var(--surface-2);
  font-size: .62rem;
  white-space: nowrap;
}
.dns-record-row--detached td { background: color-mix(in srgb, var(--orange-500) 5%, var(--surface)); }
.dns-record-row--detached td:first-child { box-shadow: inset -3px 0 var(--orange-500); }
.dns-record-row--detached:hover td { background: color-mix(in srgb, var(--orange-500) 9%, var(--surface)) !important; }
.dns-field-hints { display: grid; gap: 3px; }
.dns-field-hints small { color: var(--text-3); font-size: .62rem; line-height: 1.75; }
.dns-field-hints b { color: var(--text-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
:root[data-theme='light'] .dns-record-row--detached td { background: color-mix(in srgb, var(--orange-500) 5%, #fff); }
:root[data-theme='light'] .dns-record-row--detached:hover td { background: color-mix(in srgb, var(--orange-500) 9%, #fff) !important; }
@media (max-width: 640px) {
  .dns-record-group > summary { grid-template-columns: 38px minmax(0, 1fr) 20px; padding: 11px; }
  .dns-record-group__icon { width: 38px; height: 38px; }
  .dns-record-group__count { grid-column: 2; justify-self: start; }
  .dns-record-group__chevron { grid-column: 3; grid-row: 1; }
}

/* Live backend log stream over STOMP WebSocket */
.backend-log-toolbar__meta {
  min-width: 0;
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.backend-log-toolbar__meta > small,
.backend-log-toolbar__meta > time {
  color: var(--text-3);
  font-size: .62rem;
  white-space: nowrap;
}
.backend-log-connection {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  display: inline-flex !important;
  grid-auto-flow: column;
  align-items: center;
  gap: 7px;
  font-size: .65rem;
  font-weight: 750;
  white-space: nowrap;
}
.backend-log-connection i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.backend-log-connection b { font: inherit; }
.backend-log-connection--success { color: var(--green-500); background: color-mix(in srgb, var(--green-500) 11%, transparent); }
.backend-log-connection--info { color: var(--blue-400); background: color-mix(in srgb, var(--blue-500) 11%, transparent); }
.backend-log-connection--warning { color: var(--orange-500); background: color-mix(in srgb, var(--orange-500) 12%, transparent); }
.backend-log-connection--danger { color: var(--red-500); background: color-mix(in srgb, var(--red-500) 11%, transparent); }
.backend-log-connection--neutral { color: var(--text-3); background: var(--surface-3); }
.backend-log-connection--success i { animation: terminal-pulse 1.7s infinite; }
.backend-log__line {
  grid-template-columns: 78px 66px minmax(130px, 190px) minmax(110px, 160px) minmax(280px, 1fr);
  align-items: start;
}
.backend-log__line > b,
.backend-log__line > em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.backend-log__line > em {
  color: #94a3b8;
  font-style: normal;
}
.backend-log__line--debug > span { color: #a78bfa; }
.backend-log__empty {
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: #64748b;
  text-align: center;
}
.backend-log__empty > .material-symbols-rounded { font-size: 34px; }

@media (max-width: 920px) {
  .backend-log-toolbar__meta { width: 100%; justify-content: flex-start; }
  .backend-log__line {
    grid-template-columns: 64px 54px 145px 120px minmax(260px, 1fr);
    min-width: 720px;
    gap: 7px;
  }
}
@media (max-width: 640px) {
  .backend-log-toolbar__meta > small { width: 100%; }
  .backend-log__empty { min-height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .backend-log-connection--success i { animation: none; }
}

/* Application settings and invoice tax presentation */
.system-settings-card .card__body{padding:0}.system-settings-form{display:grid}.system-settings-group{padding:22px 24px;border-bottom:1px solid var(--border)}.system-settings-group>header{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}.system-settings-group>header>.material-symbols-rounded{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--blue-600) 10%,var(--surface));color:var(--blue-600)}.system-settings-group h3{margin:0;font:750 .84rem var(--font-display)}.system-settings-group p{margin:5px 0 0;color:var(--text-3);font-size:.66rem;line-height:1.8}.system-settings-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.system-settings-fields--three{grid-template-columns:repeat(3,minmax(0,1fr))}.system-setting-field{display:grid;gap:7px;padding:15px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2)}.system-setting-field>span{font-size:.68rem;font-weight:700;color:var(--text-2)}.system-setting-field>div{height:43px;display:flex;align-items:center;border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden}.system-setting-field input{width:100%;height:100%;border:0;background:transparent;color:var(--text);padding:0 12px;outline:0;font:750 .78rem var(--font-display);direction:ltr;text-align:left}.system-setting-field input:focus{box-shadow:inset 0 0 0 1px var(--blue-600)}.system-setting-field em{align-self:stretch;min-width:60px;padding:0 10px;background:var(--surface-3);border-right:1px solid var(--border);display:grid;place-items:center;font-style:normal;font-size:.62rem;color:var(--text-3)}.system-setting-field small{font-size:.59rem;line-height:1.75;color:var(--text-3)}.system-settings-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 24px;background:var(--surface-2)}.system-settings-actions p{display:flex;align-items:center;gap:7px;margin:0;color:var(--text-3);font-size:.62rem;line-height:1.8}.system-settings-actions p>.material-symbols-rounded{font-size:18px;color:var(--blue-600)}.system-settings-actions code{direction:ltr;padding:1px 5px;border-radius:5px;background:var(--surface-3);color:var(--text-2)}.system-settings-error{padding:20px}.invoice-amount-cell{display:grid;gap:3px;min-width:130px}.invoice-amount-cell>b{font-size:.72rem;color:var(--text)}.invoice-amount-cell>small{font-size:.56rem;color:var(--text-3);white-space:nowrap}.invoice-tax-breakdown{display:grid;gap:9px;margin:22px 0 0;padding:14px 17px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}.invoice-tax-breakdown>div{display:flex;align-items:center;justify-content:space-between;gap:16px}.invoice-tax-breakdown dt{font-size:.65rem;color:var(--text-3)}.invoice-tax-breakdown dd{margin:0;font-size:.68rem;font-weight:700;color:var(--text-2)}
@media(max-width:900px){.system-settings-fields--three{grid-template-columns:1fr 1fr}.system-settings-actions{align-items:flex-start;flex-direction:column}.system-settings-actions .button{width:100%}}
@media(max-width:620px){.system-settings-group{padding:18px}.system-settings-fields,.system-settings-fields--three{grid-template-columns:1fr}.system-settings-actions{padding:16px 18px}.invoice-amount-cell>small{white-space:normal}}

/* System settings fold, duration editor, and page spacing */
.system-page-stack {
  display: grid;
  gap: 24px;
  min-width: 0;
}
.system-page-stack > .card {
  min-width: 0;
  margin: 0;
  overflow: hidden;
}
.system-settings-fold {
  display: block;
  background: var(--surface);
}
.system-settings-fold > summary {
  min-height: 76px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  padding: 14px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .18s ease, border-color .18s ease;
}
.system-settings-fold > summary::-webkit-details-marker { display: none; }
.system-settings-fold > summary:hover {
  background: color-mix(in srgb, var(--blue-600) 4%, var(--surface-2));
}
.system-settings-fold__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--blue-600) 18%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue-600) 8%, var(--surface));
  color: var(--blue-600);
}
.system-settings-fold__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.system-settings-fold__copy b {
  color: var(--text);
  font: 760 .76rem var(--font-display);
}
.system-settings-fold__copy small {
  overflow: hidden;
  color: var(--text-3);
  font-size: .62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-settings-fold__status {
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: .58rem;
  white-space: nowrap;
}
.system-settings-fold--dirty .system-settings-fold__status {
  border-color: color-mix(in srgb, var(--orange-500) 38%, var(--border));
  background: color-mix(in srgb, var(--orange-500) 9%, var(--surface));
  color: var(--orange-600, #d97706);
}
.system-settings-fold__chevron {
  display: grid;
  place-items: center;
  color: var(--text-3);
  transition: transform .2s ease;
}
.system-settings-fold[open] .system-settings-fold__chevron { transform: rotate(180deg); }
.system-settings-fold__body {
  border-top: 1px solid var(--border);
}
.system-duration-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.system-duration-setting {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-2);
}
.system-duration-setting__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--cyan-500) 10%, var(--surface));
  color: var(--cyan-500);
}
.system-duration-setting__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.system-duration-setting__copy > small {
  color: var(--text-3);
  font-size: .59rem;
}
.system-duration-setting__copy > b {
  color: var(--text);
  font: 760 .82rem var(--font-display);
}
.system-duration-setting__copy > em {
  color: var(--blue-600);
  font-style: normal;
  font-size: .57rem;
  direction: rtl;
}
.system-duration-setting__copy > p {
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: .58rem;
  line-height: 1.75;
}
.system-duration-setting > .button {
  grid-column: 1 / -1;
  width: 100%;
  justify-content: center;
  margin-top: 2px;
}
.duration-editor-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, .65fr);
  gap: 13px;
}
.duration-editor-form .field { margin: 0; }
.duration-editor-preview {
  grid-column: 1 / -1;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--blue-600) 20%, var(--border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--blue-600) 6%, var(--surface-2));
  color: var(--text-3);
  font-size: .63rem;
}
.duration-editor-preview > .material-symbols-rounded {
  color: var(--blue-600);
  font-size: 19px;
}
.duration-editor-preview b {
  color: var(--text);
  font-weight: 750;
}

@media (max-width: 900px) {
  .system-duration-settings { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .system-page-stack { gap: 18px; }
  .system-settings-fold > summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 13px 15px;
  }
  .system-settings-fold__status { display: none; }
  .system-settings-fold__copy small { white-space: normal; line-height: 1.65; }
  .system-duration-settings { grid-template-columns: 1fr; }
  .duration-editor-form { grid-template-columns: 1fr; }
}

/* AudioBot scoped panel access */
.quick-action:disabled,
.button:disabled {
  cursor: not-allowed;
  opacity: .58;
  transform: none;
}
.quick-action--panel {
  border-color: color-mix(in srgb, var(--purple-500) 32%, var(--border));
  background: color-mix(in srgb, var(--purple-500) 6%, var(--surface-2));
}
.quick-action--panel > .material-symbols-rounded {
  color: var(--purple-500);
}
.audio-bot-access {
  display: grid;
  gap: 12px;
}
.audio-bot-access__item {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-2);
}
.audio-bot-access__item > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-3);
}
.audio-bot-access__item > span > .material-symbols-rounded {
  font-size: 19px;
  color: var(--blue-600);
}
.audio-bot-access__item > span small {
  font-size: .64rem;
  font-weight: 700;
}
.audio-bot-access__url {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-width: 0;
  padding: 10px 11px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--blue-600);
  font-size: .72rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.audio-bot-access__url > .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 17px;
}
.audio-bot-access__credential-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.audio-bot-access__credential-row code,
.audio-bot-access__item > code {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: .68rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
  user-select: all;
}
.audio-bot-access__meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 9px 3px;
  color: var(--text-3);
  font-size: .62rem;
}
.audio-bot-access__meta > .material-symbols-rounded {
  font-size: 18px;
}
.audio-bot-access__meta b {
  color: var(--text-2);
  font-size: .64rem;
}
.audio-bot-access__hint {
  margin: 0;
  color: var(--text-3);
  font-size: .61rem;
  line-height: 1.85;
}

/* AudioBot scoped panel — inline resource detail card */
.audio-bot-panel-card { overflow: hidden; }
.audio-bot-panel-card__header { align-items: center; gap: 12px; }
.audio-bot-panel-card__header > div { min-width: 0; flex-wrap: wrap; }
.audio-bot-panel-card__body {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1.45fr);
  gap: 14px 18px;
  align-items: center;
}
.audio-bot-panel-card__intro { display: flex; align-items: center; gap: 12px; min-width: 0; }
.audio-bot-panel-card__icon {
  width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center;
  border-radius: 14px; color: var(--purple-500);
  background: color-mix(in srgb, var(--purple-500) 10%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--purple-500) 22%, var(--border));
}
.audio-bot-panel-card__icon .material-symbols-rounded { font-size: 24px; }
.audio-bot-panel-card__intro b { display: block; color: var(--text-1); font-size: .76rem; margin-bottom: 5px; }
.audio-bot-panel-card__intro p { margin: 0; color: var(--text-3); font-size: .62rem; line-height: 1.85; }
.audio-bot-panel-card__access { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.audio-bot-panel-card__field {
  min-width: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: 13px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}
.audio-bot-panel-card__field > span { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--text-3); }
.audio-bot-panel-card__field > span .material-symbols-rounded { font-size: 17px; color: var(--blue-600); }
.audio-bot-panel-card__field > span small { font-size: .59rem; font-weight: 750; }
.audio-bot-panel-card__masked,
.audio-bot-panel-card__url,
.audio-bot-panel-card__plain-value {
  min-width: 0; display: block; color: var(--text-2); font-size: .66rem; font-weight: 720; overflow-wrap: anywhere;
}
.audio-bot-panel-card__access.is-locked .audio-bot-panel-card__masked {
  filter: blur(5px); opacity: .62; user-select: none; pointer-events: none;
}
.audio-bot-panel-card__access.is-revealed .audio-bot-panel-card__masked { filter: none; opacity: 1; }
.audio-bot-panel-card__value-row {
  min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center;
}
.audio-bot-panel-card__value-row .icon-button { width: 30px; height: 30px; border-radius: 8px; }
.audio-bot-panel-card__url { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--blue-600); text-decoration: none; }
.audio-bot-panel-card__url:hover { text-decoration: underline; }
.audio-bot-panel-card__url .material-symbols-rounded { flex: 0 0 auto; font-size: 16px; }
.audio-bot-panel-card__plain-value { padding: 0; border: 0; background: transparent; font-size: .64rem; user-select: all; }
.audio-bot-panel-card__meta {
  display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 4px;
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 99px;
  color: var(--text-3); background: var(--surface-2); font-size: .56rem; white-space: nowrap;
}
.audio-bot-panel-card__meta[hidden] { display: none !important; }
.audio-bot-panel-card__meta .material-symbols-rounded { font-size: 14px; }
.audio-bot-panel-card__meta b { color: var(--text-2); font-size: .58rem; }
.audio-bot-panel-card__message { grid-column: 1 / -1; }
.audio-bot-panel-card__message:empty { display: none; }

@media (max-width: 820px) {
  .audio-bot-panel-card__body { grid-template-columns: 1fr; }
  .audio-bot-panel-card__message { grid-column: 1; }
}

@media (max-width: 560px) {
  .audio-bot-panel-card__header { align-items: flex-start; flex-direction: column; }
  .audio-bot-panel-card__header .button { width: 100%; }
  .audio-bot-panel-card__access { grid-template-columns: 1fr; }
}

/* TeaCup 1.0.0 — admin user-owned tabs */
.admin-user-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -2px 0 18px;
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}
.admin-user-tabs > a {
  flex: 0 0 auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--text-3);
  text-decoration: none;
  font-size: .68rem;
  font-weight: 760;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.admin-user-tabs > a .material-symbols-rounded { font-size: 18px; }
.admin-user-tabs > a:hover { color: var(--text-1); background: var(--surface-3); }
.admin-user-tabs > a.active {
  color: var(--blue-600);
  border-color: color-mix(in srgb, var(--blue-600) 24%, var(--border));
  background: color-mix(in srgb, var(--blue-600) 10%, var(--surface-2));
}
.admin-user-tab-content { min-width: 0; }
.admin-user-owned-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}
.admin-user-owned-filter--invoice { grid-template-columns: minmax(150px, .8fr) repeat(2, minmax(190px, 1fr)) auto; }
.admin-user-owned-filter__actions { display: flex; gap: 7px; align-items: center; padding-bottom: 1px; }

/* Locked resources */
.resource-lock-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--red-500) 34%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--red-500) 8%, var(--surface-2));
  color: var(--text-2);
}
.resource-lock-banner > .material-symbols-rounded {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--red-500) 14%, transparent);
  color: var(--red-500);
}
.resource-lock-banner b { display: block; margin-bottom: 3px; color: var(--text-1); font-size: .72rem; }
.resource-lock-banner span { color: var(--text-3); font-size: .62rem; line-height: 1.8; }
.resource-action--locked,
.resource-action--locked:hover,
.resource-action--locked:focus {
  cursor: not-allowed !important;
  opacity: .5 !important;
  filter: saturate(.45);
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}
.audio-bot-panel-card--disabled { opacity: .8; }
.audio-bot-panel-card--disabled .audio-bot-panel-card__access,
.audio-bot-panel-card--disabled .audio-bot-panel-card__intro { opacity: .72; }

/* Credential editing */
.password-reveal-field__control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-1);
}
.password-reveal-field__control:focus-within { border-color: color-mix(in srgb, var(--blue-600) 52%, var(--border)); }
.password-reveal-field__control input {
  min-width: 0;
  width: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.password-reveal-field__control .icon-button {
  width: 38px;
  height: 100%;
  min-height: 38px;
  border: 0;
  border-inline-start: 1px solid var(--border);
  border-radius: 0;
}
.secret-inline { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.secret-inline code { max-width: 230px; overflow-wrap: anywhere; user-select: all; }
.admin-audio-node-panel-card { margin-top: 0; }
.admin-audio-node-panel-card code { direction: ltr; unicode-bidi: isolate; }

@media (max-width: 900px) {
  .admin-user-owned-filter,
  .admin-user-owned-filter--invoice { grid-template-columns: 1fr 1fr; }
  .admin-user-owned-filter__actions { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .admin-user-tabs { margin-inline: -2px; padding: 4px; }
  .admin-user-tabs > a { min-height: 36px; padding: 0 11px; }
  .admin-user-owned-filter,
  .admin-user-owned-filter--invoice { grid-template-columns: 1fr; }
  .admin-user-owned-filter__actions { grid-column: 1; flex-wrap: wrap; }
  .resource-lock-banner { align-items: flex-start; }
}

/* TeaCup 1.0.1: keep AudioBot node panel reveal local; hide copy controls until revealed. */
.admin-audio-node-panel-card .audio-bot-panel-card__access.is-locked .icon-button {
  display: none;
}