@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
    --bg:#f5f5f7;
    --surface:#ffffff;
    --surface-soft:#fbfbfd;
    --text:#172033;
    --muted:#667085;
    --line:#e2e5ea;
    --blue:#0071e3;
    --blue-hover:#0077ed;
    --brand-secondary:#6e5cff;
    --green:#16884d;
    --green-soft:#eaf8f0;
    --amber:#9a6a00;
    --amber-soft:#fff5d9;
    --red:#a3313f;
    --red-soft:#fff0f2;
    --radius:30px;
    --page:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:13px;line-height:1.45;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}
.hidden{display:none!important}.center{text-align:center}.muted{color:var(--muted)}
.page{width:min(var(--page),calc(100% - 40px));margin:auto;padding:32px 0 52px}

/* GLOBAL HEADER */
.top-nav{
    min-height:78px;background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid rgba(15,23,42,.06);position:sticky;top:0;z-index:80;
}
.top-nav-inner{
    width:min(var(--page),calc(100% - 40px));min-height:78px;margin:auto;
    display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.product-brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.product-mark{width:50px;height:50px;display:block;flex:0 0 auto;border-radius:14px;object-fit:contain;box-shadow:0 8px 22px rgba(0,77,190,.16);image-rendering:-webkit-optimize-contrast}
.product-brand-copy{display:flex;flex-direction:column;min-width:0}
.product-brand-copy strong{font-size:25px;line-height:1.05;font-weight:700;letter-spacing:-.4px;display:block}
.product-brand-copy small{margin-top:4px;font-size:10px;line-height:1.1;color:var(--muted);white-space:nowrap}
.brand-token{color:#0b2a78}.brand-desk{color:#218cff}
.header-right{display:flex;align-items:center;justify-content:flex-end;gap:18px;min-width:0}
.client-brand{text-align:right;display:flex;flex-direction:column;min-width:0}
.client-brand strong{font-size:14px;line-height:1.1;font-weight:600;white-space:nowrap}
.client-brand small{font-size:10px;color:var(--muted);margin-top:3px}
.nav-actions{display:flex;align-items:center;gap:7px}

/* BUTTONS */
.btn{
    min-height:38px;padding:0 16px;border-radius:30px;border:1px solid rgba(15,23,42,.10);
    background:#fff;color:var(--text);display:inline-flex;align-items:center;justify-content:center;
    text-decoration:none;font-size:13px;line-height:1;font-weight:500;white-space:nowrap;
    transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.btn:hover{background:#f7f8fa;border-color:rgba(15,23,42,.16);transform:translateY(-1px)}
.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 5px 14px color-mix(in srgb,var(--blue) 18%,transparent)}
.btn.primary:hover{filter:brightness(.98)}
.btn.dark{background:#172033;color:#fff;border-color:#172033}
.btn.success{background:var(--green);color:#fff;border-color:var(--green)}
.btn.warning{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.btn.danger{background:var(--red-soft);color:var(--red);border-color:transparent}
.btn.small{min-height:31px;padding:0 11px;font-size:11px}

/* HERO */
.hero{padding:6px 0 28px}
.eyebrow{margin-bottom:7px;color:var(--blue);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hero h1{max-width:820px;margin:0;font-size:28px;line-height:1.08;font-weight:650;letter-spacing:-.8px}
.hero p{max-width:650px;margin:9px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.customer-hero{
    position:relative;overflow:hidden;margin:-32px calc((100vw - min(var(--page),calc(100% - 40px)))/-2) 24px;
    padding:36px max(20px,calc((100vw - var(--page))/2)) 32px;min-height:220px;border-radius:0 0 30px 30px;
    background:radial-gradient(circle at 83% 18%,rgba(181,111,255,.28),transparent 29%),
               radial-gradient(circle at 68% 72%,rgba(66,176,255,.22),transparent 32%),
               linear-gradient(135deg,#e9f4ff 0%,#eef5ff 45%,#f5eaff 100%);
}
.customer-hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 74% 48%,rgba(255,255,255,.8) 0 2px,transparent 3px) 0 0/30px 30px;
    mask-image:linear-gradient(to right,transparent 45%,black 76%,transparent);
}
.hero-copy{position:relative;z-index:2;max-width:590px}
.customer-hero h1{font-size:42px;line-height:1;letter-spacing:-1.55px}
.customer-hero p{max-width:430px;font-size:14px;color:#40536d}
.hero-art{position:absolute;right:max(34px,calc((100vw - var(--page))/2));top:50%;width:280px;height:155px;transform:translateY(-48%)}
.hero-doc{position:absolute;right:42px;top:18px;width:132px;height:122px;border-radius:20px;background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.9);box-shadow:0 16px 32px rgba(56,76,127,.13)}
.hero-doc::before,.hero-doc::after{content:"";position:absolute;left:45px;height:8px;border-radius:99px;background:#c8d3ff}
.hero-doc::before{top:35px;width:61px}.hero-doc::after{top:59px;width:47px}
.hero-user,.hero-check{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 24px rgba(60,75,120,.16)}
.hero-user{width:66px;height:66px;right:149px;top:27px;background:linear-gradient(180deg,#8c7cff,#5b52ed)}
.hero-user::before{content:"●";font-size:26px}
.hero-check{width:54px;height:54px;right:23px;bottom:5px;background:linear-gradient(180deg,#41dba1,#00b979);font-size:28px;font-weight:700}
.hero-check::before{content:"✓"}

/* TITLES/SECTIONS */
.section{margin-top:24px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}
.section-head h2{margin:0;font-size:21px;line-height:1.15;font-weight:650;letter-spacing:-.45px}
.section-head p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.page-title h1{margin:0;font-size:27px;line-height:1.05;font-weight:650;letter-spacing:-.7px}
.page-title p{margin:6px 0 0;color:var(--muted);font-size:12px}

/* PANELS/CARDS */
.panel{background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:28px;overflow:hidden;box-shadow:0 8px 24px rgba(38,53,77,.035)}
.panel-pad{padding:21px}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{min-height:172px;padding:21px;background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:28px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 8px 24px rgba(38,53,77,.035)}
.card-kicker{margin-bottom:7px;color:var(--blue);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.card h3{margin:0;font-size:18px;line-height:1.15;font-weight:650;letter-spacing:-.3px}
.card p{margin:7px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}
.admin-card-icon{width:42px;height:42px;border-radius:14px;background:#eef5ff;color:var(--blue);display:grid;place-items:center;font-size:18px;margin-bottom:18px}

/* FORMS */
.field{margin-bottom:12px}.field label{display:block;margin:0 0 5px;font-size:12px;font-weight:600;color:#344054}
input,select,textarea{width:100%;min-height:42px;border-radius:17px;border:1px solid var(--line);background:#fff;color:var(--text);outline:none;padding:0 13px;font-size:13px}
textarea{min-height:86px;padding:10px 13px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 9%,transparent)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.full{grid-column:1/-1}
.form-row{display:flex;gap:9px;align-items:end;flex-wrap:wrap}
.checkbox-line{display:flex;align-items:center;gap:8px;font-size:12px;color:#475467}
.checkbox-line input{width:17px;height:17px;min-height:17px}
.notice{padding:10px 13px;border-radius:17px;font-size:12px;line-height:1.4;background:#f1f7ff;border:1px solid #dce9f8;color:#3e5871}
.notice.error{background:var(--red-soft);border-color:#f0c3ca;color:var(--red)}
.notice.success{background:var(--green-soft);border-color:#cbe7d5;color:var(--green)}

/* STEPS */
.steps{display:flex;align-items:center;margin:0 0 18px}
.step{display:flex;align-items:center;gap:7px;min-width:max-content;color:#8a8a8e;font-size:12px;font-weight:500}
.step span{width:27px;height:27px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e8e8ed;color:#6e6e73;font-size:11px}
.step.active{color:var(--text);font-weight:650}.step.active span{background:var(--blue);color:#fff}.step-line{flex:1;height:1px;background:#d8d8dc;margin:0 10px}

/* CUSTOMER SERVICE CARDS */
.service-list{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.service-card{
    --accent:#287cff;--accent-bg:#e5f0ff;min-height:80px;width:100%;padding:11px 17px;border-radius:28px;
    border:1px solid rgba(15,23,42,.055);background:rgba(255,255,255,.96);display:grid;grid-template-columns:52px 1fr auto;
    align-items:center;gap:13px;text-align:left;color:var(--text);box-shadow:0 8px 22px rgba(46,62,91,.04);
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.service-card:hover{transform:translateY(-1px);border-color:rgba(15,23,42,.12);box-shadow:0 10px 25px rgba(46,62,91,.07)}
.service-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 11%,transparent)}
.service-icon{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--accent);background:var(--accent-bg)}
.service-icon svg{width:26px;height:26px;stroke:currentColor}.service-copy{min-width:0}
.service-name{display:block;font-size:15px;line-height:1.15;font-weight:650;letter-spacing:-.12px}
.service-desc{display:block;margin-top:4px;font-size:11px;line-height:1.3;color:var(--muted)}
.service-arrow{font-size:21px;color:#667085}
.service-card:nth-child(1){--accent:#287cff;--accent-bg:#e5f0ff}.service-card:nth-child(2){--accent:#0bbf74;--accent-bg:#e3f8ef}
.service-card:nth-child(3){--accent:#7d52ff;--accent-bg:#efe8ff}.service-card:nth-child(4){--accent:#f0a000;--accent-bg:#fff2d7}
.service-card:nth-child(5){--accent:#ef4d8e;--accent-bg:#ffe6f0}.service-card:nth-child(6){--accent:#0aaed0;--accent-bg:#e1f8fc}
.service-card:nth-child(7){--accent:#6c4eff;--accent-bg:#eeeaff}

/* TOKEN/STATS */
.token-result{text-align:center;padding:38px 20px}.token-label{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.token-big{margin:8px 0;font-size:60px;line-height:.95;font-weight:700;letter-spacing:-1.5px}.queue-number{margin-top:8px;font-size:18px;font-weight:650}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat{min-height:96px;padding:17px;border-radius:25px;background:#fff;border:1px solid rgba(15,23,42,.06);box-shadow:0 8px 22px rgba(46,62,91,.035)}
.stat-label{margin-bottom:9px;color:var(--muted);font-size:11px}.stat-value{font-size:27px;line-height:1;font-weight:650;letter-spacing:-.6px}.stat-value small{font-size:11px;color:var(--muted);font-weight:500}

/* DASHBOARD TOOLBAR & TABLE */
.toolbar{display:grid;grid-template-columns:160px 190px minmax(220px,1fr) auto;gap:9px;align-items:end;padding:14px;background:#fafbfc;border-bottom:1px solid rgba(15,23,42,.06)}
.toolbar .field{margin:0}.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th{padding:11px 13px;text-align:left;background:#fbfbfd;border-bottom:1px solid rgba(15,23,42,.06);color:#667085;font-size:10px;line-height:1.3;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
td{padding:12px 13px;border-bottom:1px solid rgba(15,23,42,.05);font-size:12px;line-height:1.35;vertical-align:middle}
tr:last-child td{border-bottom:0}.token-pill,.status-pill,.priority-pill{display:inline-flex;align-items:center;min-height:25px;padding:0 9px;border-radius:30px;font-size:10px;font-weight:650;white-space:nowrap}
.token-pill{background:#edf5ff;color:#0667ca}.status-waiting{background:var(--amber-soft);color:var(--amber)}.status-called{background:#edf5ff;color:#1769bf}
.status-serving,.status-completed{background:var(--green-soft);color:var(--green)}.status-skipped{background:var(--red-soft);color:var(--red)}
.priority-normal{background:#f0f0f2;color:#666}.priority-senior{background:var(--amber-soft);color:var(--amber)}.priority-pwd{background:#f1ecff;color:#6c4bc1}
.queue-actions{display:flex;flex-wrap:wrap;gap:4px}

/* LOGIN */
.login-page{min-height:calc(100vh - 68px);background:radial-gradient(circle at 15% 20%,rgba(0,113,227,.10),transparent 26%),radial-gradient(circle at 84% 65%,rgba(110,92,255,.10),transparent 28%),var(--bg)}
.login-wrap{min-height:calc(100vh - 68px);display:grid;place-items:center;padding:28px 18px}
.login-card{width:min(410px,100%);background:rgba(255,255,255,.96);border:1px solid rgba(15,23,42,.06);border-radius:28px;padding:26px;box-shadow:0 18px 50px rgba(38,53,77,.08)}
.login-card h1{margin:0;font-size:27px;line-height:1;font-weight:650;letter-spacing:-.7px}.login-card p{margin:9px 0 20px;color:var(--muted);font-size:12px}

/* REPORTS */
.report-filters{padding:16px;display:grid;grid-template-columns:repeat(4,minmax(135px,1fr));gap:10px;align-items:end}
.report-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.report-customer strong{display:block}.report-customer small{display:block;color:var(--muted);margin-top:2px}
.details-btn{border:0;background:#edf5ff;color:#0667ca;border-radius:30px;min-height:29px;padding:0 10px;font-size:10px;font-weight:650}
.report-modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;padding:18px;z-index:200}
.report-modal.open{display:flex}.report-modal-card{width:min(560px,100%);max-height:85vh;overflow:auto;background:#fff;border-radius:28px;padding:22px;box-shadow:0 30px 80px rgba(15,23,42,.22)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-item{background:#f7f8fa;border-radius:17px;padding:12px}.detail-item span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.detail-item strong{display:block;margin-top:4px;font-size:13px}

/* SETTINGS */
.settings-preview{border-radius:24px;padding:20px;background:linear-gradient(135deg,#eaf4ff,#f5eaff);border:1px solid rgba(15,23,42,.05)}
.color-input{display:grid;grid-template-columns:46px 1fr;gap:8px;align-items:center}.color-input input[type=color]{padding:3px;width:46px}

/* FOOTER */
.app-footer{text-align:center;color:#98a2b3;font-size:10px;padding:4px 20px 24px}

/* TV */
.tv-body{background:#090b10;color:#fff;min-height:100vh}.tv-shell{width:min(1500px,calc(100% - 48px));margin:auto;padding:22px 0}
.tv-top{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:28px;padding-bottom:18px;border-bottom:1px solid #242833}
.tv-product{display:flex;align-items:center;gap:11px}.tv-product img{width:42px;height:42px}.tv-product h1{margin:0;font-size:19px}.tv-product p{margin:3px 0 0;color:#98a2b3;font-size:10px}
.tv-company{text-align:center}.tv-company strong{display:block;font-size:16px}.tv-company span{font-size:10px;color:#98a2b3}
.tv-time{text-align:right;font-size:21px;font-weight:650}.tv-date{margin-top:3px;color:#98a2b3;font-size:10px}
.tv-heading{margin-bottom:13px}.tv-heading .eyebrow{color:#55a8ff}.tv-heading h2{margin:0;font-size:21px}
.tv-serving{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:11px}.tv-card{min-height:210px;border-radius:27px;background:#12151d;border:1px solid #292e39;padding:18px;text-align:center}
.tv-token{margin:20px 0 10px;font-size:76px;line-height:.9;font-weight:700;letter-spacing:-2px}.tv-counter{font-size:21px;font-weight:650}.tv-service{margin-top:5px;color:#aab1bd;font-size:11px}
.tv-wait-panel{margin-top:13px;border-radius:27px;background:#12151d;border:1px solid #292e39;padding:17px}.tv-wait-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:11px}
.tv-wait-head h3{margin:0;font-size:20px}.tv-wait-list{display:flex;flex-wrap:wrap;gap:7px}.tv-wait-token{min-height:39px;padding:0 13px;border-radius:30px;background:#1c202a;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:650}
.tv-voice{min-height:33px;padding:0 12px;border-radius:30px;border:1px solid #353b48;background:#1c202a;color:#fff;font-size:10px;font-weight:600}.tv-voice.enabled{background:#1f8a4c;border-color:#1f8a4c}

/* TABLET */
@media(max-width:1000px){
    .card-grid{grid-template-columns:repeat(2,1fr)}
    .stat-grid{grid-template-columns:repeat(2,1fr)}
    .toolbar{grid-template-columns:1fr 1fr}
    .report-filters{grid-template-columns:1fr 1fr}
    .hero-art{opacity:.72;right:20px}
}

/* MOBILE */
@media(max-width:700px){
    .page{width:calc(100% - 18px);padding:18px 0 34px}
    .top-nav,.top-nav-inner{min-height:62px}.top-nav-inner{width:calc(100% - 18px);gap:8px}
    .product-mark{width:33px;height:33px}.product-brand{gap:7px}
    .product-brand-copy strong{font-size:14px}.product-brand-copy small{display:none}
    .header-right{gap:7px}.client-brand strong{font-size:11px;max-width:125px;overflow:hidden;text-overflow:ellipsis}.client-brand small{font-size:9px}
    .nav-actions .btn{padding:0 10px}.btn{min-height:34px;font-size:11px;padding:0 12px}

    .customer-hero{margin:-18px -9px 17px;min-height:220px;padding:24px 17px 20px;border-radius:0 0 25px 25px}
    .customer-hero h1{font-size:28px;max-width:220px;letter-spacing:-.8px}.customer-hero p{font-size:12px;max-width:245px}
    .hero-art{width:174px;height:108px;right:5px;opacity:.78}.hero-doc{width:88px;height:83px;right:18px;top:14px;border-radius:15px}
    .hero-doc::before{left:30px;top:26px;width:42px;height:6px}.hero-doc::after{left:30px;top:44px;width:31px;height:6px}
    .hero-user{width:45px;height:45px;right:101px;top:20px}.hero-user::before{font-size:18px}.hero-check{width:39px;height:39px;right:6px;bottom:4px;font-size:19px}

    .steps{margin-bottom:15px}.step{font-size:10px;gap:4px}.step span{width:24px;height:24px;font-size:10px}.step-line{margin:0 5px}
    .section{margin-top:18px}.section-head{margin-bottom:9px}.section-head h2{font-size:19px}.section-head p{font-size:11px}
    .service-list{grid-template-columns:1fr;gap:7px}.service-card{min-height:66px;padding:7px 12px;border-radius:22px;grid-template-columns:44px 1fr auto;gap:10px}
    .service-icon{width:44px;height:44px;border-radius:14px}.service-icon svg{width:22px;height:22px}.service-name{font-size:14px}.service-desc{font-size:10px;margin-top:2px}.service-arrow{font-size:18px}
    .form-grid,.stat-grid,.toolbar,.report-filters,.detail-grid{grid-template-columns:1fr}.full{grid-column:auto}.panel{border-radius:23px}.panel-pad{padding:15px}
    .page-title{align-items:flex-start;flex-direction:column;margin-bottom:17px}.page-title h1{font-size:23px}
    .card-grid{grid-template-columns:1fr}.card{min-height:140px;padding:16px;border-radius:23px}.card h3{font-size:17px}
    .stat{min-height:78px;padding:13px;border-radius:21px}.stat-value{font-size:23px}
    .token-big{font-size:50px}.login-card{padding:20px;border-radius:23px}.login-card h1{font-size:24px}
    .report-actions{width:100%}.report-actions .btn{flex:1}
    .tv-shell{width:calc(100% - 14px);padding:10px 0}.tv-top{margin-bottom:18px;align-items:flex-start}.tv-company{display:none}.tv-product h1{font-size:15px}.tv-product img{width:34px;height:34px}
    .tv-serving{grid-template-columns:1fr}.tv-card{min-height:155px;border-radius:23px}.tv-token{font-size:52px}.tv-counter{font-size:18px}.tv-wait-panel{border-radius:23px}
}

/* V6.1 BRANDING OVERRIDE */

@media(max-width:700px){
    .product-mark{width:38px;height:38px}
    .product-brand-copy strong{font-size:18px;line-height:1.05}
}


/* =========================================================
   V6.2 UNIFIED TOKEN DESK VISUAL SYSTEM
   Dashboard / Admin / Reports / Settings / TV
   ========================================================= */

body:not(.tv-body){
    background:
        radial-gradient(circle at 8% 8%,rgba(81,164,255,.055),transparent 24%),
        radial-gradient(circle at 92% 12%,rgba(171,111,255,.055),transparent 24%),
        #f5f5f7;
}

/* All internal page introductions now echo the customer hero */
.page-title,
.hero:not(.customer-hero){
    position:relative;
    overflow:hidden;
    padding:24px 26px;
    margin:0 0 22px;
    border-radius:28px;
    background:
        radial-gradient(circle at 88% 16%,rgba(183,128,255,.18),transparent 27%),
        radial-gradient(circle at 72% 80%,rgba(77,173,255,.15),transparent 30%),
        linear-gradient(135deg,#eef6ff 0%,#f3f7ff 48%,#f8efff 100%);
    border:1px solid rgba(82,120,170,.08);
    box-shadow:0 10px 30px rgba(46,62,91,.035);
}
.page-title::after,
.hero:not(.customer-hero)::after{
    content:"";
    position:absolute;
    right:20px;
    top:0;
    width:38%;
    height:100%;
    background-image:radial-gradient(circle,rgba(255,255,255,.78) 1.5px,transparent 1.8px);
    background-size:20px 20px;
    opacity:.7;
    mask-image:linear-gradient(to right,transparent,black);
    pointer-events:none;
}
.page-title > *,
.hero:not(.customer-hero) > *{position:relative;z-index:2}
.page-title h1,
.hero:not(.customer-hero) h1{font-size:28px}
.page-title p,
.hero:not(.customer-hero) p{max-width:650px;color:#52657c}

/* Dashboard */
.stat-grid{gap:12px}
.stat{
    position:relative;
    overflow:hidden;
    border-color:rgba(67,96,135,.07);
    box-shadow:0 10px 28px rgba(46,62,91,.045);
}
.stat::before{
    content:"";
    position:absolute;
    width:78px;height:78px;border-radius:50%;
    right:-18px;top:-22px;opacity:.55;
}
.stat:nth-child(1){background:linear-gradient(145deg,#fff,#f4f9ff)}
.stat:nth-child(1)::before{background:#dcebff}
.stat:nth-child(2){background:linear-gradient(145deg,#fff,#f6f2ff)}
.stat:nth-child(2)::before{background:#e8ddff}
.stat:nth-child(3){background:linear-gradient(145deg,#fff,#effbf6)}
.stat:nth-child(3)::before{background:#d8f5e7}
.stat:nth-child(4){background:linear-gradient(145deg,#fff,#fff8ed)}
.stat:nth-child(4)::before{background:#ffebc7}
.stat-label,.stat-value{position:relative;z-index:1}

.toolbar{
    background:linear-gradient(180deg,#fbfdff,#f8fafc);
    padding:16px;
}
.panel{
    box-shadow:0 12px 34px rgba(46,62,91,.045);
}

/* Admin management cards: colorful but restrained */
.card-grid .card{
    position:relative;
    overflow:hidden;
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.card-grid .card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(46,62,91,.075);
    border-color:rgba(67,96,135,.10);
}
.card-grid .card:nth-child(1) .admin-card-icon{color:#287cff;background:#e5f0ff}
.card-grid .card:nth-child(2) .admin-card-icon{color:#7d52ff;background:#efe8ff}
.card-grid .card:nth-child(3) .admin-card-icon{color:#0bbf74;background:#e3f8ef}
.card-grid .card:nth-child(4) .admin-card-icon{color:#ef4d8e;background:#ffe6f0}
.card-grid .card:nth-child(5) .admin-card-icon{color:#0aaed0;background:#e1f8fc}
.card-grid .card:nth-child(6) .admin-card-icon{color:#f0a000;background:#fff2d7}
.card-grid .card:nth-child(7) .admin-card-icon{color:#6c4eff;background:#eeeaff}
.admin-card-icon{
    width:48px;height:48px;border-radius:16px;
    font-size:19px;
}

/* Form/admin panels inherit the soft customer card language */
.page > .panel,
.section > .panel,
.section > div > .panel{
    border-color:rgba(67,96,135,.075);
}
.report-filters{
    background:linear-gradient(135deg,#ffffff,#fbfdff);
}

/* Login */
.login-page{
    background:
        radial-gradient(circle at 16% 18%,rgba(56,148,255,.14),transparent 28%),
        radial-gradient(circle at 84% 68%,rgba(174,111,255,.13),transparent 30%),
        #f5f5f7;
}

/* ===================== LIGHT TOKEN DESK TV ===================== */
.tv-body{
    background:
        radial-gradient(circle at 82% 10%,rgba(179,115,255,.16),transparent 25%),
        radial-gradient(circle at 15% 70%,rgba(66,176,255,.14),transparent 28%),
        linear-gradient(180deg,#f3f8ff 0%,#f8f9fc 48%,#f5f5f7 100%);
    color:var(--text);
}
.tv-shell{
    width:min(1500px,calc(100% - 48px));
    padding:18px 0 26px;
}
.tv-top{
    min-height:72px;
    margin-bottom:22px;
    padding:12px 16px;
    border:1px solid rgba(67,96,135,.07);
    border-radius:25px;
    background:rgba(255,255,255,.86);
    box-shadow:0 10px 28px rgba(46,62,91,.05);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
.tv-product img{width:50px;height:50px;border-radius:14px;object-fit:contain;box-shadow:0 8px 22px rgba(0,77,190,.16);image-rendering:-webkit-optimize-contrast}
.tv-product h1{font-size:25px;line-height:1.05;color:var(--text)}
.tv-product p{font-size:10px;color:var(--muted)}
.tv-company strong{font-size:17px;color:var(--text)}
.tv-company span{font-size:10px;color:var(--muted)}
.tv-time{font-size:23px;color:var(--text)}
.tv-date{color:var(--muted)}
.tv-heading{
    padding:17px 20px;
    margin:0 0 12px;
    border-radius:24px;
    background:
        radial-gradient(circle at 88% 20%,rgba(183,128,255,.20),transparent 30%),
        linear-gradient(135deg,#eaf4ff,#f4eaff);
    border:1px solid rgba(67,96,135,.06);
}
.tv-heading .eyebrow{color:var(--blue)}
.tv-heading h2{font-size:23px;color:var(--text)}
.tv-serving{gap:12px}
.tv-card{
    min-height:230px;
    border-radius:28px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(67,96,135,.08);
    box-shadow:0 14px 34px rgba(46,62,91,.065);
    color:var(--text);
}
.tv-card:nth-child(3n+1){background:linear-gradient(145deg,#fff,#f0f7ff)}
.tv-card:nth-child(3n+2){background:linear-gradient(145deg,#fff,#f5f0ff)}
.tv-card:nth-child(3n+3){background:linear-gradient(145deg,#fff,#effbf6)}
.tv-card .eyebrow{color:var(--blue)!important}
.tv-token{
    color:#0e5fd8;
    font-size:82px;
    text-shadow:0 5px 18px rgba(0,113,227,.08);
}
.tv-counter{font-size:23px;color:var(--text)}
.tv-service{font-size:12px;color:var(--muted)}
.tv-wait-panel{
    margin-top:14px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(67,96,135,.08);
    box-shadow:0 12px 32px rgba(46,62,91,.05);
}
.tv-wait-head .eyebrow{color:var(--blue)!important}
.tv-wait-head h3{color:var(--text)}
.tv-wait-token{
    background:#eef5ff;
    color:#0e5fd8;
    border:1px solid #dce9fb;
}
.tv-voice{
    background:#fff;
    color:var(--text);
    border-color:rgba(15,23,42,.12);
}
.tv-voice.enabled{background:#e5f8ee;border-color:#c9edd9;color:#12824b}
.tv-empty{
    min-height:230px;
    display:grid;
    place-items:center;
    text-align:center;
    color:var(--muted);
}
.tv-empty strong{display:block;color:var(--text);font-size:24px;margin-bottom:5px}

/* Mobile keeps same visual language */
@media(max-width:700px){
    .page-title,
    .hero:not(.customer-hero){
        padding:18px 16px;
        border-radius:23px;
    }
    .page-title h1,
    .hero:not(.customer-hero) h1{font-size:23px}
    .page-title::after,
    .hero:not(.customer-hero)::after{width:50%;opacity:.45}
    .tv-top{padding:9px 10px;border-radius:21px}
    .tv-product img{width:38px;height:38px}
    .tv-product h1{font-size:18px}
    .tv-heading{padding:14px 15px;border-radius:21px}
    .tv-card{min-height:160px;border-radius:23px}
    .tv-token{font-size:56px}
    .tv-wait-panel{border-radius:23px}
}


/* V6.3 VOICE SETTINGS */
input[type="range"]{
    appearance:none;
    -webkit-appearance:none;
    height:6px;
    min-height:6px;
    border:0;
    padding:0;
    border-radius:99px;
    background:#e4eaf2;
    margin:17px 0 10px;
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:20px;height:20px;border-radius:50%;
    background:var(--blue);
    border:3px solid #fff;
    box-shadow:0 2px 7px rgba(0,0,0,.16);
}
input[type="range"]::-moz-range-thumb{
    width:16px;height:16px;border-radius:50%;
    background:var(--blue);
    border:3px solid #fff;
    box-shadow:0 2px 7px rgba(0,0,0,.16);
}

.tv-product h1 .brand-token{color:#0b2a78}.tv-product h1 .brand-desk{color:#218cff}


/* =========================================================
   V7 WEB BETA — CUSTOMER ALERTS / FEEDBACK / ANALYTICS
   ========================================================= */
.track-panel{max-width:780px}.track-search{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.track-search .field{margin:0}
.mobile-alert-card{margin-top:18px;padding:14px 15px;border:1px solid #dce9fb;border-radius:21px;background:linear-gradient(135deg,#eef7ff,#f5efff);display:flex;align-items:center;justify-content:space-between;gap:14px}.mobile-alert-card strong{font-size:13px}.mobile-alert-card p{margin:3px 0 0;font-size:10px;color:var(--muted)}.alert-hint{font-size:10px;margin-top:8px}
.live-track-result{padding:20px 0 0}.live-track-result h2{font-size:20px;margin:12px 0 8px}.live-track-result>.muted{font-size:11px}.call-now-card{margin:20px auto 4px;max-width:460px;padding:18px;border-radius:23px;background:linear-gradient(135deg,#e6f3ff,#f0eaff);border:1px solid rgba(0,113,227,.1)}.call-now-card span{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--blue)}.call-now-card strong{display:block;font-size:28px;margin-top:5px}.token-next-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.feedback-card{max-width:560px;margin:22px auto 0;padding:20px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(46,62,91,.045);text-align:left}.feedback-card h3{margin:4px 0;font-size:20px}.feedback-card p{margin:0 0 14px;color:var(--muted);font-size:11px}.star-row{display:flex;gap:5px;margin:8px 0 14px}.star-btn{border:0;background:transparent;color:#d7dde6;font-size:32px;line-height:1;cursor:pointer;padding:2px}.star-btn.active{color:#f5a623}.feedback-card textarea{width:100%;min-height:92px;resize:vertical;margin-bottom:12px}.feedback-done{margin-top:20px}
.experience-settings{display:grid;gap:12px}.experience-settings .field{margin:0;max-width:400px}
.analytics-filter{margin-bottom:14px}.analytics-filter form{display:flex;align-items:end;gap:12px}.analytics-filter .form-grid{flex:1}.analytics-stats{grid-template-columns:repeat(5,1fr);margin-bottom:14px}.analytics-stats .stat-value small{font-size:11px;color:var(--muted);font-weight:600}.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.bar-chart{display:grid;gap:10px}.bar-row{display:grid;grid-template-columns:58px 1fr 32px;gap:9px;align-items:center;font-size:10px}.bar-row.wide-label{grid-template-columns:130px 1fr 32px}.bar-row>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#667085}.bar-row>strong{text-align:right;font-size:11px}.bar-track{height:10px;border-radius:99px;background:#edf1f6;overflow:hidden}.bar-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--brand-secondary));min-width:2px}.feedback-list{display:grid;gap:9px}.feedback-item{padding:11px 12px;background:#f8fafc;border-radius:16px}.feedback-item>div{display:flex;justify-content:space-between;gap:10px}.feedback-item strong{color:#f5a623;letter-spacing:1px}.feedback-item span{font-size:9px;color:var(--muted)}.feedback-item p{margin:7px 0 0;font-size:10px;color:#475467}
@media(max-width:1000px){.analytics-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.track-search{grid-template-columns:1fr}.mobile-alert-card{align-items:flex-start;flex-direction:column}.analytics-stats{grid-template-columns:1fr 1fr}.analytics-grid{grid-template-columns:1fr}.analytics-filter form{display:block}.bar-row.wide-label{grid-template-columns:90px 1fr 28px}.call-now-card strong{font-size:23px}.star-btn{font-size:29px}}

/* =========================================================
   V7.1 LIQUID GLASS — FULL INTERFACE SKIN
   Preserves all existing Token Desk functionality.
   ========================================================= */
:root{
    --bg:#eef4fb;
    --surface:rgba(255,255,255,.58);
    --surface-soft:rgba(255,255,255,.40);
    --text:#142033;
    --muted:#66758a;
    --line:rgba(255,255,255,.72);
    --blue:#0a84ff;
    --blue-hover:#0077ed;
    --brand-secondary:#7258ff;
    --green:#18a66a;
    --green-soft:rgba(220,250,235,.72);
    --amber:#a56a00;
    --amber-soft:rgba(255,244,211,.76);
    --red:#b33a4a;
    --red-soft:rgba(255,228,232,.76);
    --glass-border:rgba(255,255,255,.72);
    --glass-border-soft:rgba(255,255,255,.48);
    --glass-shadow:0 20px 55px rgba(63,82,120,.14), inset 0 1px 0 rgba(255,255,255,.82);
    --glass-shadow-soft:0 12px 34px rgba(63,82,120,.10), inset 0 1px 0 rgba(255,255,255,.72);
    --glass-blur:26px;
    --glass-saturate:155%;
    --radius:30px;
}

html{background:#eaf2fb}
body{
    min-height:100vh;
    background:
        radial-gradient(circle at 8% 10%,rgba(44,155,255,.28),transparent 27%),
        radial-gradient(circle at 88% 6%,rgba(164,102,255,.25),transparent 30%),
        radial-gradient(circle at 78% 75%,rgba(45,214,164,.18),transparent 30%),
        radial-gradient(circle at 15% 88%,rgba(255,185,92,.17),transparent 25%),
        linear-gradient(145deg,#edf6ff 0%,#f4f0ff 48%,#edf9f6 100%);
    background-attachment:fixed;
}
body::before,
body::after{
    content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(2px);pointer-events:none;
}
body::before{width:360px;height:360px;left:-130px;top:28%;background:rgba(44,155,255,.12)}
body::after{width:420px;height:420px;right:-170px;bottom:-80px;background:rgba(138,97,255,.12)}

/* Shared frosted materials */
.top-nav,.panel,.card,.stat,.toolbar,.service-card,.feedback-card,.call-now-card,
.mobile-alert-card,.tv-top,.tv-card,.tv-wait-panel,.report-modal-card,.login-card,
.page-title,.hero:not(.customer-hero),.customer-hero,.detail-item,.feedback-item{
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* Header */
.top-nav{
    min-height:74px;
    background:linear-gradient(180deg,rgba(255,255,255,.70),rgba(255,255,255,.44));
    border-bottom:1px solid rgba(255,255,255,.72);
    box-shadow:0 10px 30px rgba(72,89,120,.08),inset 0 1px 0 rgba(255,255,255,.9);
}
.top-nav-inner{min-height:74px}
.product-mark{
    background:rgba(255,255,255,.50);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:0 10px 25px rgba(48,88,148,.14),inset 0 1px 0 rgba(255,255,255,.8);
}

/* Buttons */
.btn{
    background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.48));
    border:1px solid rgba(255,255,255,.78);
    box-shadow:0 7px 18px rgba(72,89,120,.10),inset 0 1px 0 rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
}
.btn:hover{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.95);box-shadow:0 10px 22px rgba(72,89,120,.14),inset 0 1px 0 rgba(255,255,255,.95)}
.btn.primary{
    background:linear-gradient(180deg,rgba(24,145,255,.95),rgba(0,113,227,.88));
    border-color:rgba(255,255,255,.34);color:#fff;
    box-shadow:0 10px 24px rgba(0,113,227,.22),inset 0 1px 0 rgba(255,255,255,.38);
}
.btn.dark{background:linear-gradient(180deg,rgba(35,48,69,.94),rgba(20,32,51,.92));border-color:rgba(255,255,255,.18);box-shadow:0 10px 24px rgba(20,32,51,.18),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.success{background:linear-gradient(180deg,rgba(35,188,125,.95),rgba(22,150,95,.91));border-color:rgba(255,255,255,.28);box-shadow:0 10px 24px rgba(22,150,95,.18),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.warning{background:linear-gradient(180deg,rgba(255,247,221,.88),rgba(255,236,185,.72));border-color:rgba(255,255,255,.65)}
.btn.danger{background:linear-gradient(180deg,rgba(255,239,241,.90),rgba(255,219,225,.72));border-color:rgba(255,255,255,.65)}

/* Hero and page titles */
.customer-hero{
    background:
        radial-gradient(circle at 84% 18%,rgba(164,104,255,.30),transparent 30%),
        radial-gradient(circle at 70% 78%,rgba(55,176,255,.25),transparent 32%),
        linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.34));
    border:1px solid rgba(255,255,255,.72);border-top:0;
    box-shadow:0 20px 55px rgba(73,91,126,.11),inset 0 1px 0 rgba(255,255,255,.78);
}
.hero-doc{background:rgba(255,255,255,.48);border-color:rgba(255,255,255,.76);box-shadow:var(--glass-shadow-soft);backdrop-filter:blur(18px)}
.page-title,.hero:not(.customer-hero){
    background:
        radial-gradient(circle at 90% 15%,rgba(147,101,255,.20),transparent 28%),
        radial-gradient(circle at 72% 82%,rgba(59,171,255,.16),transparent 31%),
        linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,255,255,.40));
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-shadow-soft);
}

/* Cards and panels */
.panel,.card,.stat{
    background:linear-gradient(145deg,rgba(255,255,255,.66),rgba(255,255,255,.42));
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-shadow-soft);
}
.panel{overflow:hidden}
.card:hover{border-color:rgba(255,255,255,.92);box-shadow:0 20px 48px rgba(63,82,120,.15),inset 0 1px 0 rgba(255,255,255,.9)}
.admin-card-icon{background:rgba(255,255,255,.52)!important;border:1px solid rgba(255,255,255,.70);box-shadow:inset 0 1px 0 rgba(255,255,255,.78)}

/* Stats get soft tinted glass rather than opaque fills */
.stat:nth-child(1){background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(221,240,255,.48))}
.stat:nth-child(2){background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(235,224,255,.46))}
.stat:nth-child(3){background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(220,248,237,.46))}
.stat:nth-child(4){background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,239,211,.46))}

/* Inputs */
input,select,textarea{
    background:rgba(255,255,255,.52);
    border:1px solid rgba(255,255,255,.78);
    color:var(--text);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 5px 14px rgba(75,92,121,.06);
    -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
}
input::placeholder,textarea::placeholder{color:#8290a3}
input:focus,select:focus,textarea:focus{
    background:rgba(255,255,255,.68);border-color:rgba(10,132,255,.48);
    box-shadow:0 0 0 4px rgba(10,132,255,.10),inset 0 1px 0 rgba(255,255,255,.9);
}

/* Toolbar */
.toolbar{
    background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(255,255,255,.30));
    border-bottom:1px solid rgba(255,255,255,.58);
}

/* Service selection */
.service-card{
    background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(255,255,255,.43));
    border:1px solid rgba(255,255,255,.74);
    box-shadow:0 12px 28px rgba(63,82,120,.09),inset 0 1px 0 rgba(255,255,255,.84);
}
.service-card:hover{border-color:rgba(255,255,255,.95);box-shadow:0 17px 36px rgba(63,82,120,.13),inset 0 1px 0 rgba(255,255,255,.92)}
.service-card.selected{background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(238,247,255,.58));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent),0 16px 38px rgba(63,82,120,.12),inset 0 1px 0 rgba(255,255,255,.94)}
.service-icon{background:color-mix(in srgb,var(--accent-bg) 72%,rgba(255,255,255,.42));border:1px solid rgba(255,255,255,.70);box-shadow:inset 0 1px 0 rgba(255,255,255,.72)}

/* Status/notice materials */
.notice{background:rgba(238,247,255,.60);border-color:rgba(255,255,255,.74);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.notice.error{background:rgba(255,230,233,.62);border-color:rgba(255,255,255,.72)}
.notice.success{background:rgba(222,249,235,.64);border-color:rgba(255,255,255,.72)}
.status-pill,.priority-pill,.token-pill,.queue-number{box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}

/* Tables */
table{border-collapse:separate!important;border-spacing:0}
thead th{background:rgba(255,255,255,.30);border-bottom:1px solid rgba(255,255,255,.58)}
tbody td{border-bottom:1px solid rgba(255,255,255,.46)}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:rgba(255,255,255,.26)}
.table-wrap{background:rgba(255,255,255,.14)}

/* Token result / tracking */
.token-result{background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(244,240,255,.44))}
.token-big{text-shadow:0 8px 28px rgba(10,132,255,.14)}
.mobile-alert-card,.call-now-card{
    background:linear-gradient(135deg,rgba(233,247,255,.70),rgba(244,235,255,.55));
    border:1px solid rgba(255,255,255,.76);box-shadow:var(--glass-shadow-soft);
}
.feedback-card{background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.43));border-color:rgba(255,255,255,.76);box-shadow:var(--glass-shadow-soft)}
.feedback-item{background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.52)}
.bar-track{background:rgba(255,255,255,.44);box-shadow:inset 0 1px 4px rgba(64,82,112,.08)}

/* Login */
.login-page{
    background:
        radial-gradient(circle at 18% 16%,rgba(56,151,255,.32),transparent 30%),
        radial-gradient(circle at 84% 68%,rgba(168,108,255,.28),transparent 32%),
        radial-gradient(circle at 55% 100%,rgba(52,210,159,.16),transparent 28%),
        linear-gradient(145deg,#edf6ff,#f4efff 56%,#edf9f6);
}
.login-card{background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(255,255,255,.42));border:1px solid rgba(255,255,255,.76);box-shadow:var(--glass-shadow)}

/* Modals */
.report-modal{background:rgba(22,31,47,.25);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.report-modal-card{background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(245,248,255,.60));border:1px solid rgba(255,255,255,.82);box-shadow:0 30px 80px rgba(37,49,72,.22),inset 0 1px 0 rgba(255,255,255,.94)}
.detail-item{background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.55)}

/* TV display */
.tv-body{
    background:
        radial-gradient(circle at 82% 8%,rgba(173,111,255,.25),transparent 27%),
        radial-gradient(circle at 14% 72%,rgba(54,174,255,.23),transparent 30%),
        radial-gradient(circle at 62% 100%,rgba(53,209,157,.14),transparent 25%),
        linear-gradient(145deg,#eef6ff,#f4f1ff 50%,#eef9f6);
}
.tv-top,.tv-card,.tv-wait-panel{
    background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.39));
    border:1px solid rgba(255,255,255,.74);box-shadow:var(--glass-shadow-soft);
}
.tv-card:nth-child(3n+1){background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(226,242,255,.47))}
.tv-card:nth-child(3n+2){background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(237,228,255,.46))}
.tv-card:nth-child(3n+3){background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(223,248,238,.46))}
.tv-heading{background:linear-gradient(135deg,rgba(255,255,255,.54),rgba(238,229,255,.43));border:1px solid rgba(255,255,255,.68);box-shadow:0 12px 32px rgba(63,82,120,.08)}
.tv-wait-token{background:rgba(236,246,255,.54);border:1px solid rgba(255,255,255,.72)}
.tv-voice{background:rgba(255,255,255,.48);border-color:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.tv-voice.enabled{background:rgba(221,248,234,.62);border-color:rgba(255,255,255,.72)}

/* Footer */
.app-footer{color:#708096}

/* Graceful fallback when backdrop-filter is unavailable */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .top-nav,.panel,.card,.stat,.toolbar,.service-card,.feedback-card,.call-now-card,
    .mobile-alert-card,.tv-top,.tv-card,.tv-wait-panel,.report-modal-card,.login-card,
    .page-title,.hero:not(.customer-hero),.customer-hero{background:#f8fbff}
}

@media(max-width:700px){
    body{background-attachment:scroll}
    .top-nav{background:rgba(255,255,255,.72)}
    .customer-hero{border-radius:0 0 25px 25px}
    .panel,.card,.stat,.service-card{box-shadow:0 10px 26px rgba(63,82,120,.10),inset 0 1px 0 rgba(255,255,255,.78)}
    .btn{min-height:40px}
}