/* SIKOD v67.0.4 — exact cascade, public presentation only. */

/* /app-v30.css */
/* ===== styles.css ===== */
:root{
  --sage-950:#26382d;
  --sage-900:#304638;
  --sage-850:#395141;
  --sage-800:#435d4b;
  --sage-700:#58755f;
  --sage-650:#67846e;
  --sage-600:#76927c;
  --sage-500:#91aa94;
  --sage-400:#afc1ae;
  --sage-300:#cbd8c8;
  --sage-250:#d8e2d5;
  --sage-200:#e1e9df;
  --sage-150:#eaf0e7;
  --sage-100:#f0f4ed;
  --sage-50:#f7f9f5;
  --cream:#f4f3eb;
  --paper:#fffefa;
  --white:#fff;
  --ink:#1f2922;
  --ink-soft:#37443a;
  --muted:#6f7b72;
  --muted-2:#8b958d;
  --line:#dfe5dc;
  --line-soft:#e9ede6;
  --amber:#b87b2e;
  --amber-soft:#fbf1df;
  --rose:#ad555a;
  --rose-soft:#fbe9ea;
  --blue:#547f8b;
  --blue-soft:#e8f1f3;
  --purple:#796991;
  --purple-soft:#eeeaf4;
  --shadow-sm:0 2px 8px rgba(42,61,48,.05);
  --shadow-md:0 12px 28px rgba(42,61,48,.08);
  --shadow-lg:0 24px 60px rgba(38,56,45,.18);
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:22px;
  --sidebar:272px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--sage-50);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button{color:inherit}
button,input,select,textarea{outline:none}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:0 0 0 3px rgba(118,146,124,.2);border-color:var(--sage-600)!important}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr)}
.sidebar{height:100vh;position:sticky;top:0;display:flex;flex-direction:column;background:linear-gradient(180deg,#edf3ea 0%,#e5ede2 100%);border-right:1px solid #d6dfd3;padding:20px 16px 16px;z-index:30}
.brand-block{display:flex;align-items:center;gap:12px;padding:0 6px 18px;border-bottom:1px solid rgba(67,93,75,.12)}
.brand-mark{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.78);display:grid;place-items:center;box-shadow:var(--shadow-sm);border:1px solid rgba(255,255,255,.9);overflow:hidden}
.brand-mark img{width:35px;height:43px;object-fit:contain}
.brand-copy{display:flex;flex-direction:column;min-width:0}
.brand-copy strong{font-size:18px;letter-spacing:.08em;color:var(--sage-900)}
.brand-copy span{font-size:12px;color:var(--muted)}
.sidebar-close{display:none;margin-left:auto;width:34px;height:34px;border:0;background:transparent;border-radius:10px;cursor:pointer}
.source-card{margin:16px 4px 10px;padding:12px;border:1px solid rgba(67,93,75,.13);background:rgba(255,255,255,.58);border-radius:14px;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px}
.source-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--sage-800);color:#fff}
.source-icon svg{width:17px;height:17px}
.source-card span,.source-card strong{display:block}
.source-card span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.source-card strong{font-size:12px;margin-top:2px;color:var(--sage-950)}
.online-dot{width:9px;height:9px;border-radius:50%;background:#5fa56d;box-shadow:0 0 0 4px rgba(95,165,109,.12)}
.nav-menu{overflow:auto;padding:0 2px 10px;scrollbar-width:none}
.nav-menu::-webkit-scrollbar{display:none}
.nav-label{margin:18px 10px 7px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#809086}
.nav-item{width:100%;height:44px;border:0;background:transparent;border-radius:12px;display:flex;align-items:center;gap:11px;padding:0 12px;margin:2px 0;color:#516157;cursor:pointer;text-align:left;font-weight:650;transition:.18s ease}
.nav-item svg{width:18px;height:18px;color:#667c6c}
.nav-item:hover{background:rgba(255,255,255,.62);color:var(--sage-900)}
.nav-item.active{background:var(--sage-850);color:#fff;box-shadow:0 8px 18px rgba(48,70,56,.18)}
.nav-item.active svg{color:#fff}
.nav-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-count{margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;font-size:10px;background:#fff;color:var(--sage-850);box-shadow:var(--shadow-sm)}
.nav-count.soft{background:var(--sage-200);color:var(--sage-800)}
.nav-count.amber{background:#f1d79f;color:#745020}
.nav-count.rose{background:#e9b9bc;color:#78383c}
.nav-item.active .nav-count{background:#fff;color:var(--sage-850)}
.sidebar-footer{margin-top:auto;padding:12px 4px 0;border-top:1px solid rgba(67,93,75,.12)}
.user-mini{display:grid;grid-template-columns:38px 1fr 30px;align-items:center;gap:9px;padding:8px;border-radius:13px;background:rgba(255,255,255,.5)}
.avatar{width:38px;height:38px;border-radius:12px;background:var(--sage-800);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:.02em}
.avatar.small{width:30px;height:30px;border-radius:10px;font-size:10px}
.user-mini strong,.user-mini span{display:block}
.user-mini strong{font-size:12px}.user-mini span{font-size:10px;color:var(--muted);margin-top:1px}
.user-mini button{border:0;background:transparent;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.user-mini button:hover{background:#fff}
.user-mini button svg{width:17px;height:17px}
.sidebar-footer>small{display:block;color:#8a968d;font-size:9px;text-align:center;margin-top:10px}
.sidebar-scrim{display:none}
.workspace{min-width:0;min-height:100vh}
.topbar{height:72px;position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:0 26px;border-bottom:1px solid var(--line);background:rgba(247,249,245,.9);backdrop-filter:blur(16px)}
.mobile-menu{display:none;width:40px;height:40px;border:1px solid var(--line);background:var(--paper);border-radius:12px;align-items:center;justify-content:center;cursor:pointer}
.top-title{display:flex;flex-direction:column;line-height:1.15}
.top-title span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.top-title strong{font-size:14px;margin-top:4px;color:var(--sage-950)}
.top-spacer{flex:1}
.global-search{width:min(380px,34vw);height:42px;border:1px solid var(--line);border-radius:13px;background:var(--paper);display:flex;align-items:center;gap:10px;padding:0 11px;color:var(--muted);box-shadow:var(--shadow-sm)}
.global-search svg{width:18px;height:18px}
.global-search input{border:0;background:transparent;min-width:0;flex:1;color:var(--ink)}
.global-search input::placeholder{color:#98a19a}
.global-search kbd{font-family:inherit;font-size:10px;background:var(--sage-100);border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--muted)}
.top-icon{width:42px;height:42px;border:1px solid var(--line);background:var(--paper);border-radius:13px;display:grid;place-items:center;cursor:pointer;position:relative;box-shadow:var(--shadow-sm)}
.top-icon svg{width:18px;height:18px}.top-icon i{position:absolute;right:9px;top:8px;width:7px;height:7px;border-radius:50%;background:#c96b62;border:2px solid var(--paper)}
.profile-chip{height:44px;border:0;background:transparent;display:flex;align-items:center;gap:8px;border-radius:13px;padding:4px 7px;cursor:pointer}
.profile-chip:hover{background:var(--sage-100)}
.profile-chip strong,.profile-chip small{display:block;text-align:left}.profile-chip strong{font-size:11px}.profile-chip small{font-size:9px;color:var(--muted)}
.profile-chip>svg{width:14px;height:14px;transform:rotate(90deg);color:var(--muted)}
.main-content{padding:28px;max-width:1720px;margin:0 auto}
.page-header{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px}
.page-header .eyebrow{display:flex;align-items:center;gap:7px;color:var(--sage-700);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;margin-bottom:6px}
.page-header .eyebrow i{width:7px;height:7px;border-radius:50%;background:#60a46e;box-shadow:0 0 0 4px rgba(96,164,110,.12)}
.page-header h1{font-size:28px;letter-spacing:-.035em;line-height:1.1;margin:0;color:var(--sage-950)}
.page-header p{margin:7px 0 0;color:var(--muted);max-width:670px}
.page-actions{margin-left:auto;display:flex;gap:10px;align-items:center}
.btn{height:42px;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:750;font-size:12px;cursor:pointer;transition:.16s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn svg{width:17px;height:17px}
.btn.primary{background:var(--sage-800);border-color:var(--sage-800);color:#fff;box-shadow:0 8px 18px rgba(67,93,75,.18)}
.btn.primary:hover{background:var(--sage-900)}
.btn.ghost{background:transparent}.btn.danger{background:var(--rose-soft);border-color:#efcacc;color:var(--rose)}
.btn.warning{background:var(--amber-soft);border-color:#edd6ae;color:#916123}
.btn.small{height:34px;border-radius:10px;padding:0 11px;font-size:11px}
.btn.icon-only{width:42px;padding:0}
.sync-ribbon{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:18px;border:1px solid #d5e1d2;background:linear-gradient(90deg,#f0f5ed 0%,#fafbf7 100%);border-radius:16px;box-shadow:var(--shadow-sm)}
.sync-mark{width:36px;height:36px;border-radius:12px;background:var(--sage-800);color:#fff;display:grid;place-items:center}
.sync-mark svg{width:17px;height:17px}
.sync-copy strong,.sync-copy span{display:block}.sync-copy strong{font-size:12px}.sync-copy span{font-size:10px;color:var(--muted);margin-top:2px}
.sync-ribbon .sync-spacer{flex:1}
.sync-meta{display:flex;align-items:center;gap:18px}
.sync-meta div{padding-left:18px;border-left:1px solid var(--line)}
.sync-meta b,.sync-meta span{display:block}.sync-meta b{font-size:14px}.sync-meta span{font-size:9px;color:var(--muted);margin-top:2px}
.status-dot{width:8px;height:8px;border-radius:50%;background:#60a46e;display:inline-block;margin-right:5px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.inbox-layout{display:grid;grid-template-columns:minmax(360px,.78fr) minmax(580px,1.32fr);gap:16px;min-height:720px}
.request-panel{overflow:hidden;display:flex;flex-direction:column;min-width:0}
.panel-top{padding:16px;border-bottom:1px solid var(--line-soft)}
.segmented{display:flex;gap:5px;padding:4px;background:var(--sage-100);border-radius:12px;overflow:auto;scrollbar-width:none}
.segmented::-webkit-scrollbar{display:none}
.segmented button{height:32px;border:0;background:transparent;border-radius:9px;padding:0 12px;font-size:10px;font-weight:750;color:var(--muted);cursor:pointer;white-space:nowrap}
.segmented button.active{background:var(--paper);color:var(--sage-900);box-shadow:var(--shadow-sm)}
.segmented b{font-size:9px;margin-left:4px;opacity:.7}
.request-tools{display:grid;grid-template-columns:minmax(0,1fr) 114px;gap:8px;margin-top:11px}
.field-shell{height:39px;border:1px solid var(--line);background:#fff;border-radius:11px;display:flex;align-items:center;gap:8px;padding:0 11px;color:var(--muted)}
.field-shell svg{width:16px;height:16px;flex:0 0 auto}.field-shell input,.field-shell select{border:0;background:transparent;min-width:0;width:100%;font-size:11px;color:var(--ink)}
.request-list{padding:9px;overflow:auto;max-height:660px;scrollbar-color:var(--sage-300) transparent}
.request-item{width:100%;position:relative;border:1px solid transparent;background:transparent;border-radius:14px;padding:13px 12px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;text-align:left;cursor:pointer;transition:.16s ease;margin-bottom:5px}
.request-item:hover{background:var(--sage-50)}
.request-item.active{background:#f1f5ee;border-color:#b9ccb8;box-shadow:inset 3px 0 0 var(--sage-700)}
.service-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--sage-150);color:var(--sage-700)}
.service-icon svg{width:19px;height:19px}
.service-icon.admin{background:var(--purple-soft);color:var(--purple)}
.service-icon.sik{background:var(--rose-soft);color:var(--rose)}
.service-icon.nonbmn{background:var(--amber-soft);color:var(--amber)}
.service-icon.blue{background:var(--blue-soft);color:var(--blue)}
.service-icon.amber{background:var(--amber-soft);color:var(--amber)}
.service-icon.bmn{background:var(--sage-150);color:var(--sage-800)}
.request-copy{min-width:0}
.request-kicker{font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.065em;color:var(--sage-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.request-title{font-size:12px;font-weight:780;margin-top:4px;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.request-meta{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:7px;color:var(--muted);font-size:9px}
.request-meta span{display:flex;align-items:center;gap:4px}.request-meta svg{width:11px;height:11px}
.request-side{display:flex;flex-direction:column;align-items:flex-end;gap:7px;padding-left:6px}
.age{font-size:9px;color:var(--muted-2)}
.source-id{display:inline-flex;align-items:center;gap:5px;margin-top:8px;color:#728077;font-size:8px;background:rgba(255,255,255,.7);border-radius:6px;padding:3px 6px}
.pill{display:inline-flex;align-items:center;height:25px;padding:0 9px;border-radius:999px;font-size:9px;font-weight:800;white-space:nowrap}
.pill.sage{background:var(--sage-150);color:var(--sage-800)}
.pill.amber{background:var(--amber-soft);color:#956326}
.pill.rose{background:var(--rose-soft);color:var(--rose)}
.pill.blue{background:var(--blue-soft);color:var(--blue)}
.pill.purple{background:var(--purple-soft);color:var(--purple)}
.pill.gray{background:#eef1ed;color:#6e7871}
.detail-panel{overflow:hidden;display:flex;flex-direction:column;min-width:0}
.detail-head{padding:18px 20px 16px;border-bottom:1px solid var(--line-soft);display:flex;align-items:flex-start;gap:14px}
.detail-heading{min-width:0;flex:1}
.detail-heading .overline{font-size:9px;color:var(--sage-700);text-transform:uppercase;letter-spacing:.09em;font-weight:850}
.detail-heading h2{margin:5px 0 0;font-size:19px;letter-spacing:-.02em;line-height:1.25}
.detail-heading .subline{display:flex;flex-wrap:wrap;gap:9px 15px;margin-top:8px;color:var(--muted);font-size:10px}
.detail-heading .subline span{display:flex;align-items:center;gap:5px}.detail-heading .subline svg{width:12px;height:12px}
.detail-head-actions{display:flex;align-items:center;gap:8px}
.more-btn{width:36px;height:36px;border:1px solid var(--line);background:#fff;border-radius:10px;display:grid;place-items:center;cursor:pointer}.more-btn svg{width:17px;height:17px}
.detail-scroll{padding:16px 18px 92px;overflow:auto;max-height:660px;scrollbar-color:var(--sage-300) transparent}
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:13px;align-items:start}
.section-card{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.section-head{min-height:41px;padding:0 13px;display:flex;align-items:center;gap:8px;background:#f8faf6;border-bottom:1px solid var(--line-soft)}
.section-head h3{font-size:10px;text-transform:uppercase;letter-spacing:.07em;margin:0;color:#5e6d62}
.section-head .right{margin-left:auto}
.section-body{padding:13px}
.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 16px}
.info-item span,.info-item b{display:block}.info-item span{font-size:8px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-2);font-weight:800}.info-item b{font-size:10px;margin-top:4px;line-height:1.35}
.description{font-size:11px;color:#4f5d53;line-height:1.65;margin:0}
.detail-stack{display:grid;gap:13px}
.route-card{background:linear-gradient(160deg,#f0f5ed,#fafbf8);border-color:#d2dfcf}
.route-row{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px dashed #d9e2d6;font-size:9px}.route-row:last-child{border:0}.route-row span{color:var(--muted)}.route-row b{text-align:right}
.sla-bar{height:7px;background:#e0e7dd;border-radius:999px;overflow:hidden;margin-top:8px}.sla-bar i{height:100%;width:34%;display:block;border-radius:999px;background:linear-gradient(90deg,var(--sage-600),var(--sage-800))}
.timeline-mini{display:grid;gap:11px}
.timeline-entry{display:grid;grid-template-columns:20px 1fr;gap:8px;position:relative}
.timeline-entry:not(:last-child):after{content:"";position:absolute;left:9px;top:20px;bottom:-12px;width:1px;background:#d8e2d5}
.timeline-dot{width:20px;height:20px;border-radius:50%;background:var(--sage-150);color:var(--sage-700);display:grid;place-items:center;font-size:8px;font-weight:800;position:relative;z-index:1}.timeline-entry.current .timeline-dot{background:var(--sage-800);color:#fff}
.timeline-entry b{font-size:9px;display:block}.timeline-entry small{display:block;font-size:8px;color:var(--muted);line-height:1.35;margin-top:3px}
.item-table{width:100%;border-collapse:collapse}.item-table th,.item-table td{padding:10px 9px;border-bottom:1px solid var(--line-soft);text-align:left;font-size:9px}.item-table th{font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);background:#fafbf8}.item-table tr:last-child td{border-bottom:0}
.item-photo{width:29px;height:29px;border-radius:9px;background:var(--sage-100);display:grid;place-items:center;color:var(--sage-700)}.item-photo svg{width:14px;height:14px}
.attachments{display:flex;flex-wrap:wrap;gap:8px}
.attachment{height:40px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:8px;padding:0 10px;background:#fff;min-width:150px}.attachment svg{width:15px;height:15px;color:var(--sage-700)}.attachment b{font-size:9px}.attachment span{display:block;font-size:8px;color:var(--muted);margin-top:1px}
.system-note{padding:10px 11px;border-radius:11px;background:var(--amber-soft);border:1px solid #edd6ad;color:#755321;font-size:9px;line-height:1.5}
.detail-actionbar{position:absolute;left:0;right:0;bottom:0;min-height:74px;border-top:1px solid var(--line);background:rgba(255,254,250,.96);backdrop-filter:blur(12px);padding:12px 17px;display:flex;align-items:center;gap:9px}
.detail-panel{position:relative}
.action-note{font-size:9px;color:var(--muted);line-height:1.45;max-width:300px;margin-right:auto}
.empty-state{min-height:520px;display:grid;place-items:center;text-align:center;padding:30px}.empty-state .empty-icon{width:66px;height:66px;border-radius:22px;background:var(--sage-100);display:grid;place-items:center;color:var(--sage-700);margin:0 auto 14px}.empty-state .empty-icon svg{width:28px;height:28px}.empty-state h3{margin:0;font-size:18px}.empty-state p{max-width:360px;color:var(--muted);font-size:12px}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.metric-card{padding:16px;border:1px solid var(--line);background:var(--paper);border-radius:16px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.metric-card:after{content:"";position:absolute;width:70px;height:70px;border-radius:50%;right:-24px;top:-28px;background:var(--sage-100)}
.metric-top{display:flex;align-items:center;gap:9px}.metric-icon{width:34px;height:34px;border-radius:11px;background:var(--sage-150);color:var(--sage-700);display:grid;place-items:center}.metric-icon svg{width:16px;height:16px}.metric-card.amber .metric-icon{background:var(--amber-soft);color:var(--amber)}.metric-card.rose .metric-icon{background:var(--rose-soft);color:var(--rose)}.metric-card.blue .metric-icon{background:var(--blue-soft);color:var(--blue)}
.metric-card span{font-size:10px;color:var(--muted)}.metric-card strong{display:block;font-size:25px;letter-spacing:-.04em;margin-top:10px}.metric-foot{display:flex;justify-content:space-between;align-items:center;margin-top:5px;font-size:9px;color:var(--muted)}.metric-foot b{font-size:9px;color:var(--sage-700)}
.hero-dashboard{min-height:205px;border-radius:22px;padding:24px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--sage-900),var(--sage-700));color:#fff;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.7fr);gap:25px;align-items:center;margin-bottom:16px;box-shadow:var(--shadow-md)}
.hero-dashboard:before,.hero-dashboard:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.14)}.hero-dashboard:before{width:270px;height:270px;right:-90px;top:-120px}.hero-dashboard:after{width:190px;height:190px;right:42px;bottom:-130px}
.hero-dashboard .hero-copy{position:relative;z-index:1}.hero-dashboard .hero-copy span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;opacity:.75}.hero-dashboard h2{font-size:28px;line-height:1.15;letter-spacing:-.04em;margin:8px 0}.hero-dashboard p{font-size:12px;max-width:600px;opacity:.8;margin:0;line-height:1.6}.hero-actions{display:flex;gap:9px;margin-top:19px}.hero-actions .btn{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff}.hero-actions .btn.primary-light{background:#fff;color:var(--sage-900);border-color:#fff}
.hero-summary{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px}.hero-mini{padding:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);backdrop-filter:blur(8px);border-radius:15px}.hero-mini strong{display:block;font-size:21px}.hero-mini span{display:block;font-size:9px;opacity:.72;margin-top:3px}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);gap:16px}.content-card{padding:17px}.card-title{display:flex;align-items:center;gap:10px;margin-bottom:14px}.card-title h3{margin:0;font-size:14px}.card-title p{margin:3px 0 0;font-size:10px;color:var(--muted)}.card-title .right{margin-left:auto}
.activity-list{display:grid;gap:3px}.activity-item{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:12px}.activity-item:hover{background:var(--sage-50)}.activity-icon{width:36px;height:36px;border-radius:11px;background:var(--sage-100);color:var(--sage-700);display:grid;place-items:center}.activity-icon svg{width:16px;height:16px}.activity-item b{font-size:11px}.activity-item p{margin:3px 0 0;font-size:9px;color:var(--muted)}.activity-item time{font-size:9px;color:var(--muted-2)}
.service-mix{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:12px}.donut{width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--sage-700) 0 38%,#b6c8b5 38% 62%,#d6b98a 62% 81%,#8aa5ad 81%);position:relative;margin:auto}.donut:after{content:"";position:absolute;inset:24px;border-radius:50%;background:var(--paper)}.donut-label{position:absolute;inset:0;z-index:1;display:grid;place-items:center;text-align:center}.donut-label strong{font-size:20px}.donut-label span{display:block;font-size:8px;color:var(--muted)}
.legend-list{display:grid;gap:9px}.legend-item{display:grid;grid-template-columns:8px 1fr auto;gap:8px;align-items:center;font-size:9px}.legend-item i{width:8px;height:8px;border-radius:3px;background:var(--sage-700)}.legend-item:nth-child(2) i{background:#b6c8b5}.legend-item:nth-child(3) i{background:#d6b98a}.legend-item:nth-child(4) i{background:#8aa5ad}.legend-item span{color:var(--muted)}.legend-item b{font-size:10px}
.ticket-table-wrap{overflow:auto}.data-table{width:100%;border-collapse:separate;border-spacing:0 7px}.data-table th{padding:0 12px 6px;text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-2)}.data-table td{padding:12px;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:10px}.data-table td:first-child{border-left:1px solid var(--line);border-radius:12px 0 0 12px}.data-table td:last-child{border-right:1px solid var(--line);border-radius:0 12px 12px 0}.data-table tr:hover td{background:#f9fbf7}.ticket-name{display:flex;gap:9px;align-items:center;min-width:260px}.ticket-name .service-icon{width:34px;height:34px;border-radius:10px}.ticket-name b,.ticket-name span{display:block}.ticket-name b{font-size:10px}.ticket-name span{font-size:8px;color:var(--muted);margin-top:3px}.clickable-row{cursor:pointer}
.table-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px}.table-toolbar .field-shell{width:300px}.table-toolbar .right{margin-left:auto}
.ticket-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
.ticket-main{display:grid;gap:14px}.ticket-side{display:grid;gap:14px;position:sticky;top:90px}
.ticket-banner{padding:19px 20px;display:flex;align-items:flex-start;gap:13px}.back-btn{width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:11px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}.back-btn svg{width:17px;height:17px}.ticket-banner h1{font-size:20px;margin:4px 0 0}.ticket-banner p{font-size:10px;color:var(--muted);margin:6px 0 0}.ticket-banner .ticket-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.process-card{padding:16px}.process-track{display:grid;grid-template-columns:repeat(7,1fr);gap:0}.process-step{text-align:center;position:relative}.process-step:not(:last-child):after{content:"";height:2px;position:absolute;top:13px;left:calc(50% + 15px);right:calc(-50% + 15px);background:#dfe6dc}.process-step.done:not(:last-child):after{background:var(--sage-500)}.process-dot{width:28px;height:28px;border-radius:50%;background:#e7ece4;color:#879389;display:grid;place-items:center;margin:0 auto 7px;font-size:9px;font-weight:800;position:relative;z-index:1}.process-step.done .process-dot{background:var(--sage-700);color:#fff}.process-step.current .process-dot{background:var(--sage-900);color:#fff;box-shadow:0 0 0 5px rgba(67,93,75,.12)}.process-step b{font-size:8px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px}.process-step small{font-size:7px;color:var(--muted);display:block;margin-top:2px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}.source-link-card{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--sage-50);margin-top:10px}.source-link-card svg{width:17px;height:17px;color:var(--sage-700)}.source-link-card b{font-size:9px}.source-link-card span{font-size:8px;color:var(--muted);display:block;margin-top:2px}.source-link-card em{margin-left:auto;font-style:normal;font-size:9px;color:var(--sage-700);font-weight:800}
.assignee{display:flex;align-items:center;gap:8px}.assignee .avatar{width:29px;height:29px;border-radius:9px;font-size:9px}.assignee b,.assignee span{display:block}.assignee b{font-size:9px}.assignee span{font-size:8px;color:var(--muted)}
.update-panel .section-body{display:grid;gap:10px}.form-field label{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800;margin-bottom:5px}.input{width:100%;height:40px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:0 11px;font-size:11px}.textarea{height:72px;padding:9px 11px;resize:vertical}.upload-box{height:54px;border:1px dashed #b8c9b6;background:var(--sage-50);border-radius:11px;display:flex;align-items:center;gap:9px;padding:0 11px;color:var(--muted);font-size:10px;cursor:pointer}.upload-box svg{width:17px;height:17px;color:var(--sage-700)}
.doc-list{display:grid;gap:7px}.doc-row{display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;padding:7px;border:1px solid var(--line);border-radius:10px}.doc-row .doc-icon{width:32px;height:32px;border-radius:9px;background:var(--sage-100);color:var(--sage-700);display:grid;place-items:center}.doc-row svg{width:15px;height:15px}.doc-row b{font-size:9px}.doc-row span{font-size:8px;color:var(--muted);display:block;margin-top:2px}.doc-row button{border:0;background:transparent;font-size:9px;color:var(--sage-700);font-weight:800;cursor:pointer}
.approval-list{display:grid;gap:10px}.approval-row{display:grid;grid-template-columns:31px 1fr auto;gap:8px;align-items:center}.approval-avatar{width:31px;height:31px;border-radius:9px;background:var(--sage-100);color:var(--sage-700);display:grid;place-items:center;font-size:9px;font-weight:800}.approval-row b{font-size:9px}.approval-row span{display:block;font-size:8px;color:var(--muted);margin-top:2px}.state-ok,.state-wait{font-size:8px;font-weight:800}.state-ok{color:var(--sage-700)}.state-wait{color:var(--amber)}
.kanban-wrap{display:grid;grid-template-columns:repeat(5,minmax(230px,1fr));gap:12px;overflow:auto;padding-bottom:8px}.kanban-col{min-height:570px;background:#edf2ea;border:1px solid #dce5d9;border-radius:16px;padding:10px}.kanban-head{display:flex;align-items:center;gap:8px;padding:4px 3px 10px}.kanban-head i{width:8px;height:8px;border-radius:50%;background:var(--sage-500)}.kanban-head h3{font-size:11px;margin:0}.kanban-head b{margin-left:auto;font-size:9px;background:#fff;border-radius:999px;padding:3px 7px}.kanban-card{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:12px;margin-bottom:8px;cursor:pointer;box-shadow:var(--shadow-sm)}.kanban-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.kanban-card .kicker{font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:var(--sage-700);font-weight:850}.kanban-card h4{font-size:11px;line-height:1.4;margin:5px 0}.kanban-card .meta{display:flex;justify-content:space-between;gap:5px;font-size:8px;color:var(--muted);margin-top:9px}.kanban-card .assignee{margin-top:10px}.kanban-card .avatar{width:25px;height:25px;border-radius:8px;font-size:8px}
.calendar-shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}.calendar-card{padding:16px}.calendar-head{display:flex;align-items:center;margin-bottom:13px}.calendar-head h3{font-size:16px;margin:0}.calendar-head .right{margin-left:auto;display:flex;gap:7px}.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.cal-dayname,.cal-day{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.cal-dayname{height:34px;display:grid;place-items:center;font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);background:var(--sage-50)}.cal-day{height:103px;padding:7px;background:#fff;position:relative}.cal-day.muted{background:#fafbf9;color:#aeb6b0}.cal-day.today{background:#f2f6ef}.cal-number{font-size:9px;font-weight:800}.cal-day.today .cal-number{width:23px;height:23px;border-radius:50%;background:var(--sage-800);color:#fff;display:grid;place-items:center}.cal-event{display:block;margin-top:5px;border-left:3px solid var(--sage-600);background:var(--sage-100);border-radius:5px;padding:4px 5px;font-size:7px;line-height:1.3;color:var(--sage-900)}.cal-event.amber{border-color:var(--amber);background:var(--amber-soft);color:#79531f}.cal-event.blue{border-color:var(--blue);background:var(--blue-soft);color:#3d6671}
.queue-list-small{display:grid;gap:8px}.queue-small{padding:10px;border:1px solid var(--line);border-radius:11px}.queue-small b{display:block;font-size:10px}.queue-small span{display:block;font-size:8px;color:var(--muted);margin-top:4px}.queue-small .pill{margin-top:8px}
.gate-layout{display:grid;grid-template-columns:minmax(360px,.7fr) minmax(0,1.3fr);gap:16px}.scanner-card{padding:20px;text-align:center}.scan-window{width:min(280px,80%);aspect-ratio:1;border:1px solid #cddacb;border-radius:22px;margin:18px auto;background:linear-gradient(135deg,#f5f8f2,#edf3ea);display:grid;place-items:center;position:relative;overflow:hidden}.scan-window:before,.scan-window:after{content:"";position:absolute;inset:18px;border:3px solid var(--sage-700);border-top-color:transparent;border-bottom-color:transparent;border-radius:18px}.scan-window:after{inset:32px;border-color:transparent;border-top:3px solid var(--sage-700);border-bottom:3px solid var(--sage-700)}.scan-window svg{width:95px;height:95px;color:var(--sage-800);stroke-width:1.2}.scanner-card h3{font-size:17px;margin:0}.scanner-card p{font-size:11px;color:var(--muted);max-width:390px;margin:8px auto}.manual-code{display:flex;gap:8px;max-width:380px;margin:0 auto}.manual-code .input{flex:1}.scan-result{padding:18px}.valid-card{padding:16px;border-radius:15px;background:linear-gradient(135deg,#edf5eb,#f9fbf6);border:1px solid #cbdcc7;display:flex;gap:13px;align-items:flex-start}.valid-icon{width:42px;height:42px;border-radius:13px;background:var(--sage-700);color:#fff;display:grid;place-items:center;flex:0 0 auto}.valid-card h3{margin:0;font-size:15px}.valid-card p{margin:5px 0 0;font-size:10px;color:var(--muted)}
.chart-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.bar-chart{height:230px;display:flex;align-items:flex-end;gap:12px;padding:20px 10px 5px;border-bottom:1px solid var(--line)}.bar-group{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:4px;position:relative}.bar{width:18px;border-radius:6px 6px 2px 2px;background:var(--sage-600);min-height:10px}.bar.secondary{background:#c6d5c3}.bar-group label{position:absolute;top:100%;margin-top:7px;font-size:8px;color:var(--muted)}.hbar-list{display:grid;gap:12px}.hbar-row{display:grid;grid-template-columns:110px 1fr 30px;gap:9px;align-items:center;font-size:9px}.hbar-track{height:8px;background:var(--sage-100);border-radius:999px;overflow:hidden}.hbar-track i{height:100%;display:block;background:var(--sage-700);border-radius:999px}
.master-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);padding:0 4px}.master-tabs button{height:42px;border:0;background:transparent;padding:0 13px;font-size:10px;font-weight:750;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer}.master-tabs button.active{color:var(--sage-900);border-bottom-color:var(--sage-800)}
.modal-layer:empty{display:none}.modal-layer{position:fixed;inset:0;background:rgba(27,40,31,.42);z-index:100;display:grid;place-items:center;padding:20px;backdrop-filter:blur(4px)}
.modal{width:min(720px,100%);max-height:92vh;background:var(--paper);border:1px solid rgba(255,255,255,.7);border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden;animation:modalIn .18s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.modal-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px}.modal-head h2{margin:0;font-size:19px}.modal-head p{margin:5px 0 0;color:var(--muted);font-size:10px}.modal-close{margin-left:auto;width:36px;height:36px;border:1px solid var(--line);background:#fff;border-radius:10px;display:grid;place-items:center;cursor:pointer}.modal-close svg{width:17px;height:17px}
.modal-body{padding:18px 20px;overflow:auto;max-height:calc(92vh - 140px)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid .full{grid-column:1/-1}.form-field small{display:block;font-size:8px;color:var(--muted);margin-top:5px}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.check-row{display:flex;align-items:flex-start;gap:8px;padding:9px;border:1px solid var(--line);border-radius:10px;background:#fff}.check-row input{margin-top:2px;accent-color:var(--sage-700)}.check-row b{font-size:9px;display:block}.check-row span{font-size:8px;color:var(--muted);display:block;margin-top:2px}
.modal-foot{padding:13px 20px;border-top:1px solid var(--line);background:#fafbf8;display:flex;align-items:center;gap:9px}.modal-foot .note{margin-right:auto;font-size:9px;color:var(--muted);max-width:360px}
.toast-layer{position:fixed;right:24px;bottom:24px;z-index:150;display:grid;gap:9px}.toast{min-width:290px;max-width:380px;background:var(--sage-950);color:#fff;border-radius:14px;padding:13px 14px;box-shadow:var(--shadow-lg);display:grid;grid-template-columns:30px 1fr auto;gap:9px;align-items:center;animation:toastIn .22s ease}.toast .toast-icon{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.13);display:grid;place-items:center}.toast .toast-icon svg{width:15px;height:15px}.toast b{font-size:10px}.toast p{font-size:9px;opacity:.76;margin:2px 0 0}.toast button{border:0;background:transparent;color:#fff;cursor:pointer;opacity:.7}.toast button svg{width:15px;height:15px}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.skeleton{background:linear-gradient(90deg,#edf1eb 25%,#f8faf6 50%,#edf1eb 75%);background-size:200% 100%;animation:shine 1.3s infinite;border-radius:8px}@keyframes shine{to{background-position:-200% 0}}
@media (max-width:1280px){
  :root{--sidebar:246px}.main-content{padding:22px}.inbox-layout{grid-template-columns:390px minmax(0,1fr)}.detail-grid{grid-template-columns:1fr}.detail-stack{grid-template-columns:1fr 1fr}.ticket-detail-layout{grid-template-columns:minmax(0,1fr) 300px}.global-search{width:310px}.info-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1050px){
  .app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;transform:translateX(-105%);transition:.22s ease;box-shadow:var(--shadow-lg);width:280px}.sidebar.open{transform:none}.sidebar-close{display:grid;place-items:center}.sidebar-scrim{display:block;position:fixed;inset:0;background:rgba(24,36,27,.35);z-index:25;opacity:0;pointer-events:none;transition:.22s}.sidebar-scrim.open{opacity:1;pointer-events:auto}.mobile-menu{display:flex}.profile-chip>span:not(.avatar),.profile-chip>svg{display:none}.global-search{width:min(360px,42vw)}.inbox-layout{grid-template-columns:360px minmax(0,1fr)}.detail-grid{grid-template-columns:1fr}.detail-stack{grid-template-columns:1fr}.dashboard-grid,.chart-grid{grid-template-columns:1fr}.ticket-detail-layout{grid-template-columns:1fr}.ticket-side{position:static;grid-template-columns:1fr 1fr}.calendar-shell,.gate-layout{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:800px){
  .topbar{height:66px;padding:0 14px;gap:9px}.top-title span{display:none}.global-search{display:none}.main-content{padding:16px}.page-header{align-items:flex-start}.page-header h1{font-size:24px}.page-actions{flex-wrap:wrap}.sync-ribbon{align-items:flex-start;flex-wrap:wrap}.sync-meta{width:100%;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px}.sync-meta div:first-child{border-left:0;padding-left:0}.inbox-layout{grid-template-columns:1fr;min-height:0}.request-panel{min-height:560px}.request-list{max-height:520px}.detail-panel{min-height:690px}.detail-scroll{max-height:none}.hero-dashboard{grid-template-columns:1fr}.hero-summary{grid-template-columns:repeat(4,1fr)}.ticket-side{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}.process-track{overflow:auto;padding-bottom:5px;grid-template-columns:repeat(7,110px)}.calendar-card{overflow:auto}.cal-grid{min-width:720px}.gate-layout{grid-template-columns:1fr}.modal{border-radius:18px}.form-grid,.check-grid{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr 1fr}.detail-actionbar{position:sticky;bottom:0;flex-wrap:wrap}.action-note{width:100%;max-width:none}.detail-scroll{padding-bottom:16px}
}
@media (max-width:560px){
  .top-title strong{font-size:12px}.profile-chip{padding:3px}.page-header{display:block}.page-actions{margin:14px 0 0}.page-actions .btn{flex:1}.sync-ribbon{padding:12px}.sync-meta{gap:5px}.sync-meta div{padding-left:10px}.sync-meta b{font-size:12px}.request-tools{grid-template-columns:1fr}.request-item{grid-template-columns:38px minmax(0,1fr)}.request-side{grid-column:2;align-items:flex-start;flex-direction:row}.service-icon{width:38px;height:38px}.detail-head{display:block}.detail-head-actions{margin-top:12px}.detail-head-actions .pill{margin-right:auto}.info-grid{grid-template-columns:1fr 1fr}.detail-stack{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr}.hero-summary{grid-template-columns:1fr 1fr}.hero-dashboard{padding:20px}.hero-dashboard h2{font-size:24px}.hero-actions{flex-wrap:wrap}.service-mix{grid-template-columns:1fr}.ticket-banner{flex-wrap:wrap}.ticket-banner .ticket-actions{width:100%;margin-left:51px}.data-table th:nth-child(3),.data-table td:nth-child(3),.data-table th:nth-child(5),.data-table td:nth-child(5){display:none}.table-toolbar{flex-wrap:wrap}.table-toolbar .field-shell{width:100%}.modal-layer{padding:8px}.modal-head,.modal-body,.modal-foot{padding-left:14px;padding-right:14px}.modal-foot{flex-wrap:wrap}.modal-foot .note{width:100%;max-width:none}.toast-layer{left:12px;right:12px;bottom:12px}.toast{min-width:0;max-width:none}.gate-layout{grid-template-columns:minmax(0,1fr)}
}

/* Apps Script production additions */
[hidden]{display:none!important}
body.is-loading{overflow:hidden}
.loading-screen{position:fixed;inset:0;z-index:300;background:linear-gradient(145deg,#eff4ec,#f9faf6);display:grid;place-items:center;padding:24px}
.loading-card{width:min(460px,100%);padding:30px;border:1px solid #d6e1d2;background:rgba(255,255,255,.9);border-radius:24px;box-shadow:var(--shadow-lg);text-align:center}
.loading-logo{width:82px;height:82px;margin:0 auto 18px;border-radius:22px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}.loading-logo img{width:72px;height:62px;object-fit:contain}
.loading-card h1{margin:0;font-size:24px;color:var(--sage-900)}.loading-card p{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.65}
.loading-spinner{width:34px;height:34px;margin:22px auto 0;border:3px solid var(--sage-200);border-top-color:var(--sage-700);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.access-card{width:min(680px,100%);padding:28px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:var(--shadow-lg)}.access-card .access-icon{width:58px;height:58px;border-radius:17px;background:var(--amber-soft);color:var(--amber);display:grid;place-items:center}.access-card .access-icon svg{width:26px;height:26px}.access-card h2{font-size:23px;margin:18px 0 6px}.access-card p{color:var(--muted);line-height:1.7}.access-steps{display:grid;gap:9px;margin:18px 0}.access-step{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--sage-50)}.access-step b{width:28px;height:28px;border-radius:9px;background:var(--sage-800);color:#fff;display:grid;place-items:center;font-size:10px}.access-step span{font-size:11px;line-height:1.55}
.btn.loading{pointer-events:none;opacity:.7}.btn.loading:before{content:"";width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn.danger{background:var(--rose-soft);border-color:#ecc9cb;color:var(--rose)}.btn.success{background:var(--sage-800);border-color:var(--sage-800);color:#fff}.btn.warn{background:var(--amber-soft);border-color:#efd7b1;color:#8a5d24}
.input:disabled,.field-shell input:disabled,.field-shell select:disabled{background:#f0f2ee;color:#8b958d;cursor:not-allowed}
.input[type=file]{padding:8px}
.form-error{padding:10px 12px;border:1px solid #ecc9cb;background:var(--rose-soft);color:var(--rose);border-radius:11px;font-size:10px;margin-top:10px}
.form-help{font-size:9px;color:var(--muted);margin-top:5px;line-height:1.5}.required:after{content:" *";color:var(--rose)}
.progress-line{height:6px;border-radius:99px;background:var(--sage-150);overflow:hidden}.progress-line i{display:block;height:100%;background:linear-gradient(90deg,var(--sage-600),var(--sage-800));border-radius:inherit}
.notification-drawer{position:fixed;right:18px;top:72px;width:min(390px,calc(100vw - 28px));max-height:calc(100vh - 95px);overflow:auto;z-index:90;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:12px}.notification-head{display:flex;align-items:center;padding:5px 5px 10px}.notification-head h3{margin:0;font-size:14px}.notification-head button{margin-left:auto;border:0;background:transparent;cursor:pointer}.notification-item{display:grid;grid-template-columns:34px 1fr;gap:9px;padding:10px;border-radius:12px;cursor:pointer}.notification-item:hover{background:var(--sage-50)}.notification-item.unread{background:#f0f5ed}.notification-item .ni-icon{width:34px;height:34px;border-radius:10px;background:var(--sage-150);color:var(--sage-700);display:grid;place-items:center}.notification-item b{display:block;font-size:10px}.notification-item p{margin:3px 0 0;font-size:9px;color:var(--muted);line-height:1.45}.notification-item time{display:block;font-size:8px;color:var(--muted-2);margin-top:4px}
.top-icon{position:relative}.top-icon .badge-dot{position:absolute;right:4px;top:4px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--rose);color:#fff;border:2px solid var(--paper);font-size:8px;font-style:normal;display:grid;place-items:center}
.inline-alert{padding:11px 12px;border-radius:12px;font-size:10px;line-height:1.55;border:1px solid var(--line)}.inline-alert.sage{background:var(--sage-100);border-color:var(--sage-250);color:var(--sage-900)}.inline-alert.amber{background:var(--amber-soft);border-color:#efd7b1;color:#7d5725}.inline-alert.rose{background:var(--rose-soft);border-color:#ecc9cb;color:var(--rose)}
.qr-card{display:grid;place-items:center;padding:16px;background:#fff;border:1px solid var(--line);border-radius:16px}.qr-card img{width:190px;height:190px;image-rendering:pixelated}.qr-card code{font-size:9px;margin-top:8px;color:var(--muted);word-break:break-all;text-align:center}
.permission-note{font-size:8px;color:var(--muted);margin-top:4px}
.tab-panels>[data-master-panel]{display:none}.tab-panels>[data-master-panel].active{display:block}
.empty-inline{padding:24px;text-align:center;color:var(--muted);font-size:10px}
.drag-handle{cursor:grab;color:var(--muted-2)}.drag-handle:active{cursor:grabbing}
.kanban-card[draggable=true]{cursor:grab}.kanban-card.dragging{opacity:.45}.kanban-col.drag-over{outline:2px dashed var(--sage-600);outline-offset:-5px}
.status-select{min-width:180px}
.timeline-long{display:grid;gap:0}.timeline-long .timeline-entry{padding-bottom:14px}.timeline-long .timeline-entry:not(:last-child):after{bottom:0}
.file-link{color:var(--sage-800);text-decoration:none}.file-link:hover{text-decoration:underline}
.action-menu{position:absolute;right:0;top:42px;z-index:20;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);padding:6px;min-width:180px}.action-menu button{width:100%;border:0;background:transparent;text-align:left;padding:9px;border-radius:8px;font-size:10px;cursor:pointer}.action-menu button:hover{background:var(--sage-50)}
.profile-chip{cursor:default}.profile-chip .avatar{flex:0 0 auto}
.code-box{padding:9px 10px;border-radius:10px;background:#f2f5ef;border:1px solid var(--line);font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.table-empty td{text-align:center!important;padding:28px!important;color:var(--muted)!important}
@media(max-width:800px){.notification-drawer{right:10px;top:64px}.loading-card{padding:24px}.qr-card img{width:160px;height:160px}}

/* Operational lists that are rendered by Client.html */
.wo-list{display:grid;gap:11px}
.wo-row{display:grid;grid-template-columns:42px minmax(0,1.5fr) minmax(160px,.7fr) minmax(145px,.55fr) auto;gap:13px;align-items:center;padding:14px 16px;transition:.18s ease}
.wo-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.wo-row.dragging{opacity:.45;transform:scale(.99)}
.wo-order{display:grid;place-items:center;gap:4px;width:38px;height:44px;border-radius:12px;background:var(--sage-100);color:var(--sage-800);font-size:12px;font-weight:850}
.wo-order svg{width:13px;height:13px}.wo-main h3{font-size:12px;line-height:1.4;margin:3px 0}.wo-main p,.wo-meta p{font-size:9px;color:var(--muted);margin:2px 0;line-height:1.5}.wo-main .ticket-id{margin-bottom:2px}.wo-meta strong{display:block;font-size:9px}.wo-sla{display:grid;gap:6px}.wo-sla b{font-size:9px}.wo-actions{display:flex;gap:6px;justify-content:flex-end}
.approval-ticket-list{display:grid;gap:11px}
.approval-ticket{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(180px,.6fr) auto;gap:16px;align-items:center;padding:15px 16px}
.approval-ticket-main{display:flex;gap:12px;align-items:flex-start}.approval-ticket-main h3{font-size:12px;line-height:1.45;margin:3px 0}.approval-ticket-main p{font-size:9px;color:var(--muted);margin:0}.approval-ticket-meta{display:grid;gap:7px;font-size:9px;color:var(--muted)}.approval-ticket-meta .pill{width:max-content}.approval-ticket-actions{display:flex;gap:7px;justify-content:flex-end}
.report-filter{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr)) auto;gap:12px;align-items:end}.report-filter .btn{height:39px}
.master-location-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.master-location-grid>section{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--sage-50)}.master-location-grid h4{font-size:11px;margin:0 0 8px;color:var(--sage-900)}
@media(max-width:980px){.wo-row{grid-template-columns:42px minmax(0,1fr) minmax(145px,.55fr) auto}.wo-meta{display:none}.approval-ticket{grid-template-columns:minmax(0,1fr) auto}.approval-ticket-meta{display:none}.report-filter{grid-template-columns:1fr 1fr}.report-filter .btn{grid-column:span 2}.master-location-grid{grid-template-columns:1fr}}
@media(max-width:620px){.wo-row{grid-template-columns:36px minmax(0,1fr);padding:12px}.wo-order{width:34px;height:40px}.wo-sla,.wo-actions{grid-column:2}.wo-actions{justify-content:flex-start}.approval-ticket{grid-template-columns:1fr;padding:13px}.approval-ticket-actions{justify-content:flex-start}.report-filter{grid-template-columns:1fr}.report-filter .btn{grid-column:auto}}


  .service-icon.unclassified {
    color: var(--sage-800);
    background: linear-gradient(145deg, #eef3ed, #dfe9df);
    border: 1px dashed #9aae9c;
  }

  .classification-callout {
    padding: 14px 15px;
    margin-bottom: 14px;
    border: 1px solid #c7d6c9;
    border-left: 4px solid var(--sage-600);
    border-radius: 14px;
    background: linear-gradient(135deg, #f4f7f2, #edf3ec);
  }

  .classification-callout b {
    display: block;
    margin-bottom: 5px;
    color: var(--sage-900);
  }

  .classification-callout p {
    margin: 0;
    color: var(--ink-600);
    line-height: 1.55;
  }

  .action-note strong {
    color: var(--sage-900);
  }


  .source-readonly-banner {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    margin-bottom: 16px;
    border: 1px solid #c9d7ca;
    border-radius: 14px;
    background: #f1f5ef;
    color: var(--sage-900);
  }

  .source-readonly-banner > svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    margin-top: 1px;
  }

  .source-readonly-banner b,
  .source-readonly-banner span {
    display: block;
  }

  .source-readonly-banner span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
  }



/* Authentication and hosted-app refinements */
.auth-card{width:min(470px,calc(100vw - 32px));background:rgba(255,254,250,.97);border:1px solid var(--sage-200);border-radius:26px;padding:34px;box-shadow:0 28px 90px rgba(38,56,45,.18);text-align:center}
.auth-card .auth-logo{display:flex;justify-content:center;margin-bottom:18px}.auth-card .auth-logo img{width:150px;max-height:70px;object-fit:contain}
.auth-card h1{font-size:27px;margin:0;color:var(--sage-950)}.auth-card>p{margin:10px auto 22px;max-width:370px;color:var(--muted);line-height:1.65}
.auth-card .auth-note{margin-top:20px;padding:13px 15px;border-radius:13px;background:var(--sage-100);color:var(--sage-800);font-size:12px;line-height:1.5;text-align:left}
.auth-card .auth-error{margin:15px 0 0;padding:12px 14px;border-radius:12px;background:var(--rose-soft);color:var(--rose);font-size:13px;line-height:1.5}
.auth-card .auth-domain{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;padding:7px 11px;border:1px solid var(--sage-200);border-radius:999px;background:#fff;color:var(--sage-700);font-size:12px;font-weight:700}
.profile-chip{cursor:pointer}.profile-chip:hover{border-color:var(--sage-400);background:var(--sage-50)}
.hosted-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
@media(max-width:600px){.auth-card{padding:27px 22px;border-radius:22px}.auth-card h1{font-size:23px}}
.auth-card .local-login-form{display:grid;gap:14px;text-align:left}
.auth-card .local-login-form .form-field>span{display:block;margin:0 0 7px;color:var(--sage-900);font-size:12px;font-weight:800}
.auth-card .local-login-form .input{width:100%;height:46px}
.auth-card .password-wrap{position:relative}
.auth-card .password-wrap .input{padding-right:92px}
.auth-card .password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:var(--sage-100);color:var(--sage-800);border-radius:9px;padding:7px 10px;font:inherit;font-size:11px;font-weight:800;cursor:pointer}
.auth-card .login-submit{height:47px;margin-top:2px;justify-content:center}
.auth-card .login-submit:disabled{opacity:.68;cursor:wait}

/* Modul Administrasi & BMN */
.module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 16px}
.module-card{appearance:none;text-align:left;border:1px solid var(--line);padding:18px;display:grid;grid-template-columns:46px minmax(0,1fr) auto 18px;align-items:center;gap:13px;cursor:pointer;color:inherit;transition:.18s ease;background:var(--paper)}
.module-card:hover{transform:translateY(-2px);border-color:var(--sage-350);box-shadow:0 14px 32px rgba(47,68,54,.09)}
.module-card>svg{width:18px;height:18px;color:var(--muted)}
.module-card h3{font-size:14px;margin:3px 0 6px;color:var(--sage-950)}
.module-card p{font-size:9px;line-height:1.55;color:var(--muted);margin:0}
.module-kicker{font-size:8px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--sage-650)}
.module-total{text-align:right}.module-total strong,.module-total span{display:block}.module-total strong{font-size:24px;line-height:1;color:var(--sage-900)}.module-total span{font-size:8px;text-transform:uppercase;color:var(--muted);margin-top:4px}
.metric-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.info-item.full{grid-column:1/-1}
.more-btn.danger-icon{color:var(--rose);margin-left:3px}
@media(max-width:1180px){.module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.module-grid{grid-template-columns:1fr}.module-card{grid-template-columns:42px minmax(0,1fr) auto 16px}.metric-grid.compact{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.metric-grid.compact{grid-template-columns:1fr}}

/* Data laporan sumber: label/nilai mengikuti spreadsheet, tanpa JSON mentah */
.source-report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.source-report-item{min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fbfcfa}
.source-report-item.full{grid-column:1/-1}
.source-report-item>span{display:block;margin-bottom:5px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.02em}
.source-report-item>b{display:block;color:var(--sage-950);font-size:11px;line-height:1.55;overflow-wrap:anywhere;white-space:normal}
.source-value-link{display:inline-flex;align-items:center;gap:6px;color:var(--sage-700);text-decoration:none}
.source-value-link:hover{text-decoration:underline}.source-value-link svg{width:13px;height:13px}
.modal-report-section{margin:14px 0 16px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#f7f9f5}
.modal-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 11px}
.modal-section-head>div>b,.modal-section-head>div>span{display:block}.modal-section-head>div>b{font-size:12px;color:var(--sage-950)}.modal-section-head>div>span{margin-top:3px;font-size:9px;color:var(--muted)}
.modal-section-head.operational{margin:18px 0 11px;padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:720px){.source-report-grid{grid-template-columns:1fr}.source-report-item.full{grid-column:auto}.modal-report-section{padding:11px}}

/* v6.1 — cetak ID Card dan surat siap DS */
.row-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end;white-space:nowrap}.header-note{display:inline-flex;align-items:center;max-width:260px;padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:var(--sage-50,#f2f6f0);font-size:12px;line-height:1.3;color:var(--muted)}.template-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}.template-status{display:grid;gap:5px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft,#f7faf5)}.template-status span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}.template-status b{font-size:14px;color:var(--ink)}.checkbox-row{display:flex!important;align-items:flex-start;gap:10px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft,#f7faf5)}.checkbox-row input{margin-top:3px}.checkbox-row span{display:grid;gap:3px}.checkbox-row small{font-weight:400;color:var(--muted);line-height:1.4;text-transform:none;letter-spacing:0}@media(max-width:720px){.template-status-grid{grid-template-columns:1fr}.row-actions{justify-content:flex-start;flex-wrap:wrap}.header-note{max-width:100%}}

/* v6.1 - pilihan template ID Card vertikal tertanam */
.id-template-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.id-template-option{position:relative;display:grid;grid-template-rows:230px auto;gap:12px;padding:12px;border:1px solid var(--line,#d8e1d5);border-radius:16px;background:#fff;cursor:pointer;transition:.18s ease}.id-template-option:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(40,67,49,.12)}.id-template-option.selected{border-color:#436b50;box-shadow:0 0 0 3px rgba(67,107,80,.13)}.id-template-option>input{position:absolute;right:10px;top:10px;width:18px;height:18px;accent-color:#426b50;z-index:5}.id-template-preview{position:relative;justify-self:center;display:block;width:126px;height:200px;overflow:hidden;border-radius:8px;background:#fff;box-shadow:0 8px 20px rgba(34,45,37,.18)}.id-template-preview i{position:absolute;display:block;font-style:normal}.preview-logo{top:14px;left:0;right:0;text-align:center;font-size:13px;font-weight:900;letter-spacing:.16em;color:#e31c24}.preview-photo{top:48px;left:43px;width:40px;height:48px;border-radius:50%;background:linear-gradient(145deg,#d9dedb,#f5f7f5);border:2px solid #d81a20;display:flex!important;align-items:center;justify-content:center}.preview-photo em{font-size:5px;font-style:normal;font-weight:800;color:#8a938d}.preview-name{top:103px;left:8px;right:8px;height:auto;text-align:center;border-radius:5px;background:none;font-size:6px;line-height:1.1;font-weight:900;color:#242a26}.preview-info{top:119px;left:15px;right:15px;height:31px;border-radius:6px;border:1px solid #d8ded9;background:#f8f9f8;padding:10px 2px 0;text-align:center;font-size:4.5px;line-height:1;font-weight:800;color:#5e6961}.preview-footer{left:0;right:0;bottom:0;height:34px;display:flex!important;align-items:flex-end;justify-content:center;padding-bottom:6px;font-size:4.8px;font-weight:900;letter-spacing:.04em;color:#fff}.preview-existing:before{content:"";position:absolute;left:-10px;right:-10px;top:-7px;height:29px;background:#f0181f;border-radius:0 0 60% 30%}.preview-existing .preview-footer{background:linear-gradient(18deg,#34383b 0 35%,#ef1219 36%)}.preview-existing .preview-info{border:0;border-top:2px dashed #555;background:none;padding-top:10px}.preview-modern:before{content:"";position:absolute;right:-18px;top:-12px;width:61px;height:47px;background:#d6141b;border-radius:0 0 0 70%}.preview-modern .preview-photo{border-radius:9px}.preview-modern .preview-info{background:#f4f5f3}.preview-modern .preview-footer{height:25px;background:linear-gradient(12deg,#b6080d,#ed171e);border-radius:70% 0 0 0}.preview-bold:before{content:"";position:absolute;left:-8px;top:-8px;width:29px;height:55px;background:#df1017;border-radius:0 0 10px 0}.preview-bold:after{content:"";position:absolute;right:-10px;top:-10px;width:39px;height:28px;background:#24282b;border-radius:0 0 0 18px}.preview-bold .preview-name{left:14px;right:14px;height:13px;padding-top:3px;background:#24282b;color:#fff;clip-path:polygon(0 0,92% 0,100% 100%,0 100%)}.preview-bold .preview-footer{height:40px;background:linear-gradient(to bottom,#262a2d 0 55%,#e4131a 55%)}.id-template-copy{display:grid;gap:5px}.id-template-copy b{font-size:14px;color:var(--text,#21372a)}.id-template-copy small{font-size:12px;line-height:1.45;color:var(--muted,#718076)}@media(max-width:820px){.id-template-picker{grid-template-columns:1fr}.id-template-option{grid-template-columns:135px 1fr;grid-template-rows:auto;align-items:center}.id-template-preview{width:112px;height:178px}}


/* v6.5 — preview template biru-krem */
.id-template-option.selected{border-color:#456d80;box-shadow:0 0 0 3px rgba(69,109,128,.14)}
.id-template-option>input{accent-color:#456d80}
.preview-logo{color:#d9272e}
.preview-photo{border-color:#4b7184;background:linear-gradient(145deg,#dce8e9,#fffaf0)}
.preview-name{color:#294b5e}
.preview-info{border-color:#b8cbd1;background:#f5eadb;color:#4c6d7c}
.preview-existing{background:linear-gradient(180deg,#fffaf0,#f5eadb)}
.preview-existing:before{left:-10px;right:-10px;top:-7px;height:30px;background:linear-gradient(170deg,#355d72 0 60%,#8fb0be 61%);border-radius:0 0 60% 30%}
.preview-existing .preview-footer{background:linear-gradient(18deg,#294b5e 0 62%,#7fa2b1 63%)}
.preview-existing .preview-info{border:1px solid #c5d4d8;background:rgba(255,250,240,.85);padding-top:10px}
.preview-modern{background:linear-gradient(90deg,#355d72 0 10px,#fffaf0 10px 100%)}
.preview-modern:before{right:-18px;top:-12px;width:61px;height:47px;background:linear-gradient(145deg,#86a9b8,#355d72);border-radius:0 0 0 70%}
.preview-modern .preview-photo{border-radius:9px}
.preview-modern .preview-info{background:#f1e6d7;border-color:#adc4cd}
.preview-modern .preview-footer{height:25px;background:linear-gradient(12deg,#e7d8c2,#355d72);border-radius:70% 0 0 0}
.preview-bold{background:linear-gradient(180deg,#31586c 0 94px,#f6ead9 94px 100%)}
.preview-bold:before{content:"";left:7px;right:7px;top:8px;width:auto;height:23px;background:#fff8eb;border-radius:13px}
.preview-bold:after{display:none}
.preview-bold .preview-logo{z-index:1}
.preview-bold .preview-photo{border-color:#fff4e3;box-shadow:0 0 0 2px #7fa2b1}
.preview-bold .preview-name{left:12px;right:12px;height:15px;padding-top:4px;background:#fff8eb;color:#294b5e;clip-path:none;border-radius:6px}
.preview-bold .preview-info{background:#355d72;color:#fff8eb;border-color:#355d72}
.preview-bold .preview-footer{height:34px;background:#294b5e;color:#fff7e7}


/* v6.7 — preview pilihan template sesuai desain cetak */
.id-template-option{grid-template-rows:250px auto}
.id-template-preview{width:134px;height:214px;border-radius:10px;background:#fffaf1;box-shadow:0 9px 24px rgba(34,45,37,.18);color:#173f6c}
.id-template-preview i{font-style:normal;z-index:2}
.id-template-preview .preview-logo{top:13px;left:0;right:0;font-size:12px;letter-spacing:.15em;color:#e12a2f}
.id-template-preview .preview-title{position:absolute;top:34px;left:10px;right:10px;text-align:center;font-size:5.3px;line-height:1.2;font-weight:900;color:#173f6c}
.id-template-preview .preview-photo{top:54px;left:42px;width:50px;height:62px;border-radius:25px;background:linear-gradient(180deg,#dde8ef,#fff);border:2px solid #2c6395;display:flex!important;align-items:center;justify-content:center}
.id-template-preview .preview-photo em{font-size:5px;color:#657987}
.id-template-preview .preview-name{top:120px;left:9px;right:9px;height:auto;text-align:center;font-size:7px;line-height:1.15;font-weight:900;color:#173f6c}
.id-template-preview .preview-info{top:145px;left:12px;right:12px;height:37px;border-radius:7px;border:1px solid #d5dde4;background:rgba(255,255,255,.82);padding:12px 4px 0;text-align:center;font-size:4px;line-height:1.2;font-weight:800;color:#415f78}
.id-template-preview .preview-footer{left:23px;right:23px;bottom:8px;height:20px;border-radius:12px;display:flex!important;align-items:center;justify-content:center;padding:0;font-size:4.6px;font-weight:900;color:#fff;background:linear-gradient(180deg,#376e9f,#205381)}
.preview-existing:before{content:"";position:absolute;left:-14px;right:-14px;top:-25px;height:56px;background:linear-gradient(180deg,#244f80,#5e91bc);border-radius:0 0 50% 50%}
.preview-existing:after{content:"";position:absolute;left:-14px;right:-14px;bottom:-25px;height:48px;background:linear-gradient(0deg,#244f80,#5e91bc);border-radius:50% 50% 0 0}
.preview-modern:before{content:"";position:absolute;right:-23px;top:-19px;width:78px;height:57px;background:linear-gradient(145deg,#4f83b0,#245781);border-radius:0 0 0 70%}
.preview-modern:after{content:"";position:absolute;left:-17px;right:-17px;bottom:-20px;height:48px;background:linear-gradient(180deg,#5c8db7,#214f7a);border-radius:60% 60% 0 0}
.preview-modern .preview-photo{border-radius:18px;border-color:#b8ccdc}
.preview-modern .preview-name{left:16px;right:16px;padding:5px 3px;border-radius:10px;background:#255f94;color:#fff}
.preview-modern .preview-info{left:0;right:0;top:151px;height:36px;border:0;border-radius:0;background:#255f94;color:#fff}
.preview-modern .preview-footer{background:#f1e2c7;color:#173f6c;border:1px solid #d5b978;z-index:4}
.preview-bold:before{content:"";position:absolute;left:0;right:0;top:0;height:27px;background:linear-gradient(180deg,#214f7e,#173f67);border-bottom:2px solid #d4ae63;border-radius:0 0 18px 18px}
.preview-bold:after{content:"";position:absolute;left:0;right:0;bottom:0;height:28px;background:linear-gradient(180deg,#1c4774,#15395f);border-top:2px solid #d4ae63;border-radius:18px 18px 0 0}
.preview-bold .preview-photo{width:48px;height:48px;top:60px;left:43px;border-radius:50%;border-color:#d6b064}
.preview-bold .preview-name{top:113px;left:15px;right:15px;padding:5px 3px;border-radius:12px;background:#245a8d;color:#fff;border:1px solid #d8b66c}
.preview-bold .preview-info{top:144px;background:rgba(255,255,255,.85);border-color:#e1d1b6}
.preview-bold .preview-footer{background:#fffaf0;color:#173f6c;border:1px solid #d8b66c;z-index:4}
@media(max-width:820px){.id-template-option{grid-template-columns:145px 1fr;grid-template-rows:auto}.id-template-preview{width:126px;height:201px}}
.real-template-preview{background:#f7f4ee!important;display:grid!important;place-items:center!important;padding:0!important;overflow:hidden!important}.real-template-preview img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}


/* v8.5 — mode template resmi ID Card otomatis */
.id-template-picker.auto-template{grid-template-columns:minmax(0,1fr)}
.id-template-picker.auto-template .id-template-option{grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto;align-items:center;max-width:760px;margin:0 auto;width:100%}
.id-template-picker.auto-template .id-template-preview{width:128px;height:203px}
.id-template-picker.auto-template .id-template-copy b{font-size:16px}
.id-template-picker.auto-template .id-template-copy small{font-size:12px}
@media(max-width:640px){.id-template-picker.auto-template .id-template-option{grid-template-columns:1fr}.id-template-picker.auto-template .id-template-preview{width:126px;height:200px}}


/* ===== butter-cute.css ===== */
/*
  BUTTER CUTE REDESIGN · v3.0
  Reference palette: butter yellow #FFF4CA + warm taupe #AD8C79.
  Concept: a soft stationery workspace — airy, playful, and still practical.
*/

:root{
  --butter:#fff4ca;
  --butter-50:#fffdf5;
  --butter-100:#fff9e9;
  --butter-150:#fff6dc;
  --butter-200:#fff4ca;
  --butter-250:#ffefbd;
  --butter-300:#fee8a2;
  --butter-400:#f7d77b;
  --butter-500:#edbd4c;
  --butter-600:#d59b31;
  --milk:#fffefb;
  --vanilla:#fffaf1;
  --cream:#fff8e9;
  --paper:#fffef9;
  --cocoa:#5d3826;
  --cocoa-2:#704a37;
  --cocoa-3:#8c6652;
  --taupe:#ad8c79;
  --taupe-light:#d7bca8;
  --line:#ecd49f;
  --line-soft:#f3e4c7;
  --peach:#ffe0ce;
  --peach-strong:#e69b74;
  --pink:#ffe1e5;
  --pink-strong:#cf8186;
  --mint:#e6f0d6;
  --mint-strong:#7d956f;
  --sky:#e3eff4;
  --sky-strong:#6f8e9a;
  --lilac:#eee5f5;
  --lilac-strong:#88739a;
  --rose:#bd676c;
  --rose-soft:#ffe5e6;
  --amber:#bd8430;
  --amber-soft:#fff1c9;
  --blue:#6b8c98;
  --blue-soft:#e5f1f5;
  --green:#76916d;
  --green-soft:#e8f1df;
  --ink:var(--cocoa);
  --ink-soft:#6d5041;
  --muted:#8c7466;
  --muted-2:#aa9384;
  --shadow-xs:0 3px 10px rgba(115,78,45,.055);
  --shadow-sm:0 8px 24px rgba(115,78,45,.075);
  --shadow-md:0 18px 46px rgba(115,78,45,.11);
  --shadow-lg:0 34px 90px rgba(91,58,34,.18);
  --radius-sm:13px;
  --radius:19px;
  --radius-lg:27px;
  --header-height:76px;
  --nav-height:58px;

  /* Remap the original component tokens. */
  --sage-950:#4b2f21;
  --sage-900:#5d3826;
  --sage-850:#67412e;
  --sage-800:#76503b;
  --sage-700:#8f6b56;
  --sage-650:#9f7d68;
  --sage-600:#ad8c79;
  --sage-500:#c0a18d;
  --sage-400:#d2b9a7;
  --sage-300:#e2cebe;
  --sage-250:#ead9cc;
  --sage-200:#f2e5da;
  --sage-150:#f7eee6;
  --sage-100:#fcf6ef;
  --sage-50:#fffaf3;
  --white:#fff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--butter-50)}
body{
  margin:0;
  min-height:100%;
  color:var(--ink);
  background:
    radial-gradient(circle at 13% 16%,rgba(255,235,164,.38) 0 2px,transparent 3px),
    radial-gradient(circle at 88% 10%,rgba(241,189,76,.14) 0 2px,transparent 3px),
    linear-gradient(180deg,#fffdf8 0%,#fffaf0 100%);
  background-size:42px 42px,54px 54px,auto;
  font-family:ui-rounded,"Avenir Next","Trebuchet MS","Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.48;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 4% 68%,rgba(255,225,229,.32),transparent 18%),
    radial-gradient(circle at 96% 64%,rgba(230,240,214,.3),transparent 20%);
}
button,input,select,textarea{font:inherit}
button{color:inherit}
a{color:inherit}
svg{stroke-width:1.8}
::selection{background:var(--butter-300);color:var(--cocoa)}
:focus-visible{outline:3px solid rgba(237,189,76,.35)!important;outline-offset:2px}
[hidden]{display:none!important}

/* ------------------------------
   Shared components
-------------------------------- */
.card,
.cute-panel{
  border:1.5px solid var(--line);
  background:rgba(255,254,249,.96);
  border-radius:var(--radius);
  box-shadow:var(--shadow-xs);
}
.btn{
  min-height:40px;
  height:auto;
  border:1.5px solid var(--line);
  background:var(--paper);
  color:var(--cocoa);
  border-radius:999px;
  padding:9px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  letter-spacing:.005em;
  cursor:pointer;
  box-shadow:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:#e5bd65}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px}
.btn.primary,
.btn.cute-primary{
  color:var(--cocoa);
  border-color:#e7b54a;
  background:linear-gradient(180deg,#ffe77f,#ffd75e);
  box-shadow:0 8px 20px rgba(220,165,45,.18);
}
.btn.primary:hover,.btn.cute-primary:hover{background:linear-gradient(180deg,#ffdf69,#f8c94b)}
.btn.soft-button,.btn.soft{background:var(--butter-100);border-color:#efd797}
.btn.danger{background:#fff9f9;border-color:#ec9b9f;color:#b45459}
.btn.warning,.btn.warn{background:var(--amber-soft);border-color:#edcb84;color:#8d5d20}
.btn.small{min-height:34px;padding:7px 12px;font-size:11px}
.btn.tiny-button{min-height:28px;padding:5px 11px;font-size:10px}
.btn.btn-full{width:100%}
.btn.loading{pointer-events:none;opacity:.72}

.pill{
  min-height:24px;
  padding:4px 10px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  font-size:9px;
  font-weight:900;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
  font-style:normal;
}
.pill.gray{background:#f7efe8;border-color:#ead8ca;color:#816759}
.pill.amber{background:#fff1c8;border-color:#efd48d;color:#8a5f24}
.pill.rose{background:#ffe3e4;border-color:#eeb8bb;color:#a95358}
.pill.sage{background:#e8f2dc;border-color:#cddfb9;color:#66805e}
.pill.blue{background:#e5eff8;border-color:#c5d9e7;color:#607f95}

.field-shell,
.inbox-search{
  min-height:42px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 13px;
  color:var(--taupe);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field-shell:focus-within,.inbox-search:focus-within{border-color:#e2b75b;box-shadow:0 0 0 4px rgba(242,201,104,.17)}
.field-shell svg,.inbox-search svg{width:17px;height:17px;flex:0 0 auto}
.field-shell input,.field-shell select,.inbox-search input{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--cocoa);
}
.field-shell input::placeholder,.inbox-search input::placeholder,.input::placeholder{color:#b29c8e}
.input{
  width:100%;
  min-height:43px;
  border:1.5px solid var(--line);
  border-radius:13px;
  background:#fffefa;
  color:var(--cocoa);
  padding:10px 12px;
  box-shadow:none;
}
.input:focus{border-color:#e2b75b!important;box-shadow:0 0 0 4px rgba(242,201,104,.16)!important}
.textarea{min-height:108px;resize:vertical}
.form-field>span{display:block;margin-bottom:6px;color:var(--cocoa-2);font-size:11px;font-weight:900}
.form-grid{gap:14px}
.form-help{color:var(--muted);font-size:10px;line-height:1.55}
.required::after{content:" *";color:var(--rose)}
.inline-alert{
  display:flex;
  align-items:flex-start;
  gap:9px;
  border:1.5px solid var(--line);
  border-radius:15px;
  padding:12px 14px;
  font-size:11px;
  line-height:1.55;
  margin:14px 0;
}
.inline-alert svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px}
.inline-alert.sage{background:#f3f8ed;border-color:#d4e2c6;color:#5e7658}
.inline-alert.amber{background:#fff7dd;border-color:#efd99b;color:#7c5828}
.inline-alert.rose{background:#fff0f1;border-color:#efc3c5;color:#9c5155}

/* ------------------------------
   Loading state
-------------------------------- */
body.is-loading{overflow:hidden}
.loading-screen{
  position:fixed;
  inset:0;
  z-index:500;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.8),transparent 32%),
    linear-gradient(140deg,#fff4ca 0%,#fff8de 54%,#fffdf8 100%);
}
.cute-loading-card{
  position:relative;
  width:min(440px,100%);
  padding:42px 34px 34px;
  border:1.5px solid #e7c66f;
  background:rgba(255,254,249,.9);
  border-radius:32px;
  text-align:center;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.cute-loading-card::before,.cute-loading-card::after{content:"✦";position:absolute;color:#efc34f;font-size:18px}
.cute-loading-card::before{left:28px;top:30px}.cute-loading-card::after{right:30px;bottom:30px}
.loading-cloud{position:absolute;right:28px;top:18px;color:#fff;font-size:58px;filter:drop-shadow(0 3px 0 #edce84);opacity:.95}
.loading-brand-mark{width:62px;height:62px;margin:0 auto 14px;border:2px solid #e5b84f;border-radius:19px;background:var(--butter);display:grid;place-items:center;color:#e7a92c;font-size:31px;transform:rotate(-3deg)}
.cute-loading-card h1{margin:0;font-size:23px;color:var(--cocoa);letter-spacing:-.025em}
.cute-loading-card p{margin:8px auto 0;max-width:340px;color:var(--muted);font-size:12px;line-height:1.65}
.loading-dots{display:flex;justify-content:center;gap:7px;margin-top:22px}
.loading-dots i{width:9px;height:9px;border-radius:50%;background:#e4ad35;animation:butterBounce 1.1s infinite ease-in-out}
.loading-dots i:nth-child(2){animation-delay:.14s}.loading-dots i:nth-child(3){animation-delay:.28s}
@keyframes butterBounce{0%,70%,100%{transform:translateY(0);opacity:.45}35%{transform:translateY(-7px);opacity:1}}

/* ------------------------------
   Login / authentication
-------------------------------- */
body.auth-mode{overflow:auto;background:#fffdf8}
.auth-mode .loading-screen{position:min(0);position:fixed;display:block;padding:0;overflow:auto;background:#fffdf8}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(440px,.95fr);background:#fffdf9}
.auth-scene{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  padding:42px clamp(34px,5vw,78px);
  background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.76),transparent 22%),
    linear-gradient(145deg,#fff2b9 0%,#ffe99d 48%,#ffe585 100%);
}
.auth-scene::after{
  content:"";
  position:absolute;
  top:0;right:-30px;bottom:0;width:70px;
  background:radial-gradient(circle at 0 22px,#fffdf9 0 22px,transparent 23px) 0 0/70px 64px repeat-y;
}
.auth-scene-brand,.auth-form-brand{display:flex;align-items:center;gap:11px;position:relative;z-index:2}
.auth-scene-brand strong,.auth-form-brand strong{display:block;font-size:17px;letter-spacing:.06em;color:var(--cocoa)}
.auth-scene-brand small,.auth-form-brand small{display:block;font-size:8px;letter-spacing:.16em;color:#89634d;font-weight:800;margin-top:1px}
.auth-brand-flower{width:45px;height:45px;border:2px solid #e5b84d;background:#fff8d9;border-radius:15px;display:grid;place-items:center;color:#e5aa31;font-size:23px;box-shadow:0 6px 14px rgba(183,122,30,.1)}
.auth-brand-flower.small{width:40px;height:40px;border-radius:13px;font-size:20px}
.auth-cloud{position:absolute;top:20%;left:17%;width:130px;height:50px;border:2px solid #e4bb5d;background:#fffdf4;border-radius:44px;z-index:1;box-shadow:0 7px 0 rgba(218,162,47,.08)}
.auth-cloud span{position:absolute;border:2px solid #e4bb5d;background:#fffdf4;border-bottom:0;border-radius:50% 50% 0 0}
.auth-cloud span:nth-child(1){width:48px;height:42px;left:18px;top:-29px}.auth-cloud span:nth-child(2){width:60px;height:53px;left:50px;top:-39px}.auth-cloud span:nth-child(3){width:40px;height:35px;right:10px;top:-22px}
.auth-cloud i{position:absolute;left:54px;top:15px;font-style:normal;font-size:19px;color:#c98b31}
.auth-floating-heart,.auth-floating-star{position:absolute;z-index:2;color:#df8d60;font-size:31px}.auth-floating-heart{left:17%;top:31%;transform:rotate(-14deg)}.auth-floating-star{right:16%;top:24%;color:#e6af2f}
.folder-scene{position:absolute;left:50%;top:47%;width:390px;height:330px;transform:translate(-50%,-44%);z-index:2}
.folder-shadow{position:absolute;left:45px;right:20px;bottom:18px;height:44px;border-radius:50%;background:rgba(156,102,22,.18);filter:blur(18px)}
.folder-back{position:absolute;left:28px;top:93px;width:315px;height:190px;border:3px solid #d99d2f;border-radius:18px 20px 30px 26px;background:#f5b92d;transform:rotate(-2deg)}
.folder-back::before{content:"";position:absolute;left:12px;top:-36px;width:128px;height:49px;border:3px solid #d99d2f;border-bottom:0;border-radius:18px 18px 0 0;background:#f6c342}
.folder-sheet{position:absolute;width:230px;height:177px;border:2px solid #d8ad64;border-radius:8px;background:#fffdf5;box-shadow:0 7px 16px rgba(118,71,27,.1)}
.folder-sheet.sheet-one{left:70px;top:23px;transform:rotate(-8deg)}
.folder-sheet.sheet-two{left:108px;top:16px;transform:rotate(5deg);padding:22px}
.folder-sheet b{display:block;font-size:13px;color:var(--cocoa);margin-bottom:18px}
.folder-sheet i{display:block;height:2px;background:#ead9ba;margin:13px 0;border-radius:99px}
.folder-front{position:absolute;left:24px;top:123px;width:337px;height:172px;border:3px solid #d99d2f;border-radius:20px 24px 33px 29px;background:linear-gradient(160deg,#ffd35b,#f5b62d);transform:rotate(2deg);box-shadow:0 18px 30px rgba(154,99,22,.18)}
.folder-front::after{content:"";position:absolute;left:15px;right:15px;top:15px;height:2px;background:rgba(255,255,255,.45);border-radius:99px}
.folder-label{position:absolute;left:26px;bottom:25px;padding:8px 14px;border:2px solid #d69b2d;border-radius:10px;background:#fff4c8;color:#6d462d;font-size:12px;font-weight:900;transform:rotate(-3deg)}
.folder-sticky{position:absolute;right:-2px;bottom:4px;width:118px;height:102px;padding:24px 15px 10px;border:2px solid #dfaa42;background:#fff4c4;color:#6e482e;font-family:"Trebuchet MS",sans-serif;font-size:14px;font-weight:800;line-height:1.25;text-align:center;transform:rotate(8deg);box-shadow:0 10px 18px rgba(112,74,30,.13)}
.folder-sticky::before{content:"";position:absolute;left:31px;top:-9px;width:58px;height:17px;background:rgba(255,255,255,.58);transform:rotate(-4deg)}
.folder-sticky span{color:#d78939;font-size:20px}
.folder-flower{position:absolute;right:5px;top:50px;z-index:4;color:#dc7c62;font-size:40px;transform:rotate(8deg)}
.folder-flower i{display:block;width:3px;height:72px;background:#79905e;margin:-8px auto 0;transform:rotate(9deg);transform-origin:top}
.auth-scene-copy{position:absolute;left:clamp(34px,5vw,78px);right:80px;bottom:44px;z-index:3}
.auth-scene-copy>span{font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:#98672f;font-weight:900}
.auth-scene-copy h2{margin:8px 0 5px;font-size:clamp(25px,2.5vw,38px);line-height:1.08;letter-spacing:-.035em;color:var(--cocoa)}
.auth-scene-copy p{margin:0;max-width:590px;color:#7c5d49;font-size:12px;line-height:1.65}
.auth-ground-flowers{position:absolute;right:52px;bottom:25px;display:flex;gap:2px;font-size:26px;z-index:3}
.auth-form-panel{min-height:100vh;display:grid;place-items:center;padding:48px clamp(28px,6vw,90px);background:#fffdf9}
.auth-form-wrap{width:min(440px,100%)}
.auth-form-brand{margin-bottom:50px}
.auth-welcome .auth-kicker{display:inline-flex;padding:5px 10px;border-radius:999px;background:var(--butter-100);color:#a46c2d;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.auth-welcome h1{margin:14px 0 5px;font-size:29px;line-height:1.12;letter-spacing:-.035em;color:var(--cocoa)}
.auth-welcome p{margin:0;color:var(--muted);font-size:12px}
.local-login-form{margin-top:28px;display:grid;gap:16px}
.auth-field>span{font-size:11px;color:#805c47}
.auth-input-wrap{min-height:48px;border:1.5px solid var(--line);border-radius:13px;background:#fffefa;display:flex;align-items:center;gap:10px;padding:0 13px;transition:.18s ease}
.auth-input-wrap:focus-within{border-color:#e2b75b;box-shadow:0 0 0 4px rgba(242,201,104,.16)}
.auth-input-wrap>span{color:#d19b36;font-size:16px}
.auth-input-wrap .input{border:0!important;box-shadow:none!important;background:transparent;padding:0;min-height:44px}
.password-toggle{border:0;background:transparent;color:#946f5b;font-size:10px;font-weight:800;cursor:pointer;padding:6px}
.auth-options{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px}
.auth-options label{display:flex;align-items:center;gap:5px;cursor:pointer}
.auth-options input{accent-color:#e6b43f}
.login-submit{min-height:48px;margin-top:2px;font-size:12px}
.auth-error{padding:11px 13px;border:1.5px solid #edb7ba;border-radius:12px;background:#fff0f1;color:#a95156;font-size:10px;margin-top:13px}
.auth-note{display:grid;grid-template-columns:28px 1fr;gap:9px;margin-top:18px;padding:12px 13px;border:1.5px dashed #e8c77a;border-radius:14px;background:#fff9e9}
.auth-note>span{width:28px;height:28px;border-radius:9px;background:#ffe892;display:grid;place-items:center;color:#bd7c25}
.auth-note b,.auth-note small{display:block}.auth-note b{font-size:10px}.auth-note small{margin-top:2px;color:var(--muted);font-size:9px;line-height:1.45}
.auth-footnote{display:block;margin-top:27px;text-align:center;color:#ad9a8d;font-size:9px}

/* ------------------------------
   Application shell — no sidebar
-------------------------------- */
.app-shell{display:block!important;min-height:100vh!important;background:transparent!important}
.workspace{min-width:0;min-height:calc(100vh - var(--header-height) - var(--nav-height))}
.app-header{height:var(--header-height);position:sticky;top:0;z-index:55;background:rgba(255,253,248,.91);border-bottom:1px solid rgba(229,196,126,.48);backdrop-filter:blur(18px);box-shadow:0 4px 20px rgba(115,78,45,.035)}
.app-header-inner{height:100%;width:min(1600px,100%);margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:22px}
.brand-home{flex:0 0 auto;border:0;background:transparent;padding:0;display:flex;align-items:center;gap:11px;cursor:pointer;text-align:left;position:relative}
.brand-bloom{width:47px;height:47px;border:1.5px solid #e7bd5d;border-radius:15px;background:linear-gradient(145deg,#fff9dd,#ffefb2);display:grid;place-items:center;overflow:hidden;box-shadow:0 5px 14px rgba(181,119,24,.08);transform:rotate(-2deg)}
.brand-bloom img{width:38px;height:42px;object-fit:contain;filter:saturate(.75) sepia(.12)}
.brand-copy strong,.brand-copy small{display:block}.brand-copy strong{font-size:15px;letter-spacing:.08em;color:var(--cocoa)}.brand-copy small{font-size:7px;letter-spacing:.15em;color:#97715d;font-weight:900;margin-top:1px}
.brand-spark{position:absolute;right:-13px;top:-3px;color:#e5aa2e;font-size:13px}
.header-context{display:flex;flex-direction:column;line-height:1.12;padding-left:20px;border-left:1px solid var(--line-soft)}
.header-context span{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.12em;font-weight:900}
.header-context span i{width:6px;height:6px;border-radius:50%;background:#8dad71;box-shadow:0 0 0 3px rgba(141,173,113,.16)}
.header-context strong{font-size:13px;margin-top:5px;color:var(--cocoa)}
.global-search{margin-left:auto;width:min(420px,34vw);height:43px;border:1.5px solid var(--line);border-radius:999px;background:#fffefa;display:flex;align-items:center;gap:9px;padding:0 12px;color:var(--taupe);box-shadow:0 3px 13px rgba(121,80,43,.035)}
.global-search:focus-within{border-color:#e3b955;box-shadow:0 0 0 4px rgba(242,201,104,.16)}
.global-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--cocoa);font-size:11px}
.global-search input::placeholder{color:#a99587}
.global-search svg{width:17px;height:17px}
.global-search kbd{padding:3px 7px;border:1px solid #ead9b5;border-radius:7px;background:#fff8e8;color:#9c816f;font:8px/1.2 inherit}
.header-actions{display:flex;align-items:center;gap:9px}
.connection-pill{height:42px;padding:0 11px;border:1.5px solid #dae6cc;border-radius:999px;background:#f5faef;display:flex;align-items:center;gap:8px}
.connection-pill .online-dot{width:8px;height:8px;border-radius:50%;background:#7fa56f;box-shadow:0 0 0 4px rgba(127,165,111,.13)}
.connection-pill b,.connection-pill small{display:block;line-height:1.05}.connection-pill b{font-size:9px;color:#617b59}.connection-pill small{font-size:7px;color:#8ba080;margin-top:3px}
.top-icon,.menu-launcher{width:42px;height:42px;border:1.5px solid var(--line);border-radius:50%;background:#fffefa;display:grid;place-items:center;color:#7f5a45;cursor:pointer;position:relative;transition:.18s ease}
.top-icon:hover,.menu-launcher:hover{transform:translateY(-2px);background:var(--butter-100);border-color:#e3bd68;box-shadow:var(--shadow-sm)}
.top-icon svg,.menu-launcher svg{width:18px;height:18px}
.top-icon .badge-dot{position:absolute;right:-2px;top:-2px;min-width:17px;height:17px;padding:0 4px;border:2px solid #fffefa;border-radius:99px;background:#db7c77;color:#fff;display:grid;place-items:center;font-size:7px;font-style:normal}
.profile-chip{height:44px;border:0;background:transparent;display:flex;align-items:center;gap:8px;border-radius:999px;padding:3px 7px;cursor:pointer!important;transition:.18s ease}
.profile-chip:hover{background:var(--butter-100)}
.profile-chip strong,.profile-chip small{display:block;text-align:left;line-height:1.08}.profile-chip strong{font-size:10px;color:var(--cocoa)}.profile-chip small{font-size:8px;color:var(--muted);margin-top:3px}
.avatar{border-radius:13px;background:linear-gradient(145deg,#ffe17b,#efb842);color:#70451f;display:grid;place-items:center;font-weight:900;box-shadow:0 5px 12px rgba(196,138,34,.16)}
.avatar.small{width:34px;height:34px;border-radius:12px;font-size:9px}

.workspace-nav{height:var(--nav-height);position:sticky;top:var(--header-height);z-index:48;background:rgba(255,253,248,.94);border-bottom:1px solid rgba(229,196,126,.42);backdrop-filter:blur(16px)}
.workspace-nav-inner{height:100%;width:min(1600px,100%);margin:0 auto;padding:8px 28px;display:flex;align-items:center;gap:5px;overflow-x:auto;scrollbar-width:none}
.workspace-nav-inner::-webkit-scrollbar{display:none}
.workspace-nav .nav-item{width:auto!important;min-width:max-content;height:40px;margin:0;border:1.5px solid transparent;background:transparent;border-radius:999px;padding:0 12px;display:flex;align-items:center;gap:7px;color:#7c6253;font-size:10px;font-weight:850;cursor:pointer;box-shadow:none;transition:.16s ease}
.workspace-nav .nav-item svg{width:16px;height:16px;color:#9a7964}
.workspace-nav .nav-item:hover{background:#fff7df;border-color:#eed59d;color:var(--cocoa)}
.workspace-nav .nav-item.active{background:var(--butter);border-color:#e5bd60;color:var(--cocoa);box-shadow:0 5px 13px rgba(185,126,29,.09)}
.workspace-nav .nav-item.active svg{color:#c78624}
.nav-count{min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:#fffefa;color:#9b6a35;display:grid;place-items:center;font-size:7px;font-weight:900;border:1px solid #ead5a7;margin-left:1px}
.nav-count[data-empty]{opacity:.48}

.main-content{width:min(1600px,100%);margin:0 auto;padding:27px 28px 38px;max-width:none!important}

/* app launcher: a centered tile tray, not a sidebar */
.app-menu{position:fixed;left:50%;top:50%;z-index:130;width:min(980px,calc(100vw - 36px));max-height:min(780px,calc(100vh - 44px));padding:24px;border:1.5px solid #e5c16d;border-radius:29px;background:rgba(255,253,247,.98);box-shadow:var(--shadow-lg);overflow:auto;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-46%) scale(.96);transition:opacity .2s ease,transform .22s ease,visibility .2s ease}
.sidebar-open .app-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.sidebar-scrim{display:block!important;position:fixed;inset:0;z-index:120;background:rgba(74,47,29,.25);backdrop-filter:blur(7px);opacity:0;visibility:hidden;pointer-events:none;transition:.2s ease}
.sidebar-open .sidebar-scrim{opacity:1;visibility:visible;pointer-events:auto}
.sidebar-open{overflow:hidden}
.app-menu-head{display:flex;align-items:flex-start;gap:16px;padding:4px 3px 18px;border-bottom:1px dashed #e9d3a7}
.app-menu-head h2{margin:4px 0 3px;font-size:24px;letter-spacing:-.03em}.app-menu-head p{margin:0;color:var(--muted);font-size:10px}
.mini-overline{font-size:8px;text-transform:uppercase;letter-spacing:.16em;color:#b47a2b;font-weight:900}
.sidebar-close{margin-left:auto;width:39px;height:39px;border:1.5px solid var(--line);border-radius:50%;background:#fffefa;display:grid!important;place-items:center;cursor:pointer;color:#886652}
.sidebar-close:hover{background:var(--pink)}
.sidebar-close svg{width:17px;height:17px}
.app-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:18px 0}
.app-menu-grid .nav-item{width:100%!important;height:auto!important;min-height:78px;margin:0;padding:11px;border:1.5px solid var(--line-soft);border-radius:17px;background:#fffefa;display:grid;grid-template-columns:45px 1fr auto;align-items:center;gap:11px;text-align:left;color:var(--cocoa);cursor:pointer;box-shadow:none;transition:.17s ease}
.app-menu-grid .nav-item:hover,.app-menu-grid .nav-item.active{transform:translateY(-2px);border-color:#e5bd63;background:#fffaf0;box-shadow:var(--shadow-sm);color:var(--cocoa)}
.app-menu-grid .nav-item>span:nth-child(2){min-width:0}
.app-menu-grid .nav-item b,.app-menu-grid .nav-item small{display:block;white-space:normal}.app-menu-grid .nav-item b{font-size:11px}.app-menu-grid .nav-item small{font-size:8px;color:var(--muted);margin-top:3px}
.menu-tile-icon{width:45px;height:45px;border-radius:14px;display:grid;place-items:center}.menu-tile-icon svg{width:20px;height:20px}
.menu-tile-icon.butter{background:#fff0b4;color:#c48628}.menu-tile-icon.peach{background:var(--peach);color:#c77b57}.menu-tile-icon.rose{background:var(--pink);color:#b9666c}.menu-tile-icon.lilac{background:var(--lilac);color:#806b91}.menu-tile-icon.mint{background:var(--mint);color:#6f8a64}.menu-tile-icon.sky{background:var(--sky);color:#658792}
.menu-badge{min-width:23px;height:23px;padding:0 6px;border-radius:99px;background:var(--butter);border:1px solid #e5c670;display:grid;place-items:center;font-size:8px;font-weight:900;font-style:normal;color:#8f6128}
.menu-source-note{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:11px 13px;border:1.5px dashed #dfc47e;border-radius:15px;background:#fff9e5}
.source-note-icon{width:38px;height:38px;border-radius:12px;background:#ffe584;color:#a66e22;display:grid;place-items:center}.source-note-icon svg{width:17px;height:17px}
.menu-source-note b,.menu-source-note small{display:block}.menu-source-note b{font-size:10px}.menu-source-note small{font-size:8px;color:var(--muted);margin-top:2px}
.menu-source-note>.online-dot{width:9px;height:9px;border-radius:50%;background:#82a872;box-shadow:0 0 0 4px rgba(130,168,114,.14)}
.sidebar-footer{margin-top:14px;padding-top:14px;border-top:1px dashed #ead7af;display:flex;align-items:center;gap:12px}
.user-mini{flex:1;display:grid;grid-template-columns:38px 1fr 34px;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--line-soft);border-radius:14px;background:#fffefa}
.user-mini .avatar{width:38px;height:38px;font-size:9px}
.user-mini strong,.user-mini span{display:block}.user-mini strong{font-size:10px}.user-mini span{font-size:8px;color:var(--muted);margin-top:2px}
.user-mini button{width:34px;height:34px;border:0;border-radius:11px;background:#fff7df;display:grid;place-items:center;cursor:pointer;color:#886452}.user-mini button:hover{background:var(--pink)}
.sidebar-footer>small{font-size:8px;color:var(--muted)}
.mobile-dock{display:none}

/* ------------------------------
   Page headings
-------------------------------- */
.cute-page-header{display:flex;align-items:flex-end;gap:18px;margin-bottom:19px}
.page-title-group{min-width:0}
.page-title-group .eyebrow{display:flex;align-items:center;gap:6px;margin-bottom:5px;color:#b0782f;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.15em}
.page-title-group .eyebrow span:first-child{font-size:11px;color:#e3ad2f}
.page-title-group h1{margin:0;color:var(--cocoa);font-size:30px;line-height:1.07;letter-spacing:-.045em}
.page-title-group p{margin:7px 0 0;max-width:720px;color:var(--muted);font-size:11px;line-height:1.55}
.page-actions{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}

/* ------------------------------
   Dashboard — cozy stationery
-------------------------------- */
.cute-dashboard{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;min-height:670px;position:relative}
.cozy-scene{position:relative;min-height:685px;overflow:hidden;border-radius:0 30px 30px 0;margin-left:-28px;background:linear-gradient(180deg,rgba(255,244,202,.2),rgba(255,238,173,.56));border-right:1px solid rgba(232,190,94,.42)}
.cozy-scene::before{content:"";position:absolute;left:-102px;top:50px;width:305px;height:305px;border:2px solid #e4b95c;border-radius:50%;background:rgba(255,254,246,.64)}
.cozy-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:155px;background:linear-gradient(180deg,rgba(255,234,151,.1),rgba(255,225,112,.35));border-top:2px solid rgba(226,174,56,.46)}
.scene-sun{position:absolute;right:28px;top:18px;color:#e5aa2c;font-size:20px}
.scene-window{position:absolute;left:-79px;top:84px;width:258px;height:258px;border:3px solid #e0aa3c;border-radius:50%;z-index:2;overflow:hidden;background:linear-gradient(180deg,#fffefa 0%,#fff8de 75%)}
.scene-window>i{position:absolute;left:50%;top:0;bottom:0;width:3px;background:#e0aa3c}.scene-window>b{position:absolute;left:0;right:0;top:50%;height:3px;background:#e0aa3c}
.window-cloud{position:absolute;width:72px;height:27px;border:2px solid #e3bf76;background:#fff;border-radius:30px;opacity:.9}
.window-cloud::before,.window-cloud::after{content:"";position:absolute;border:2px solid #e3bf76;border-bottom:0;background:#fff;border-radius:50% 50% 0 0}
.window-cloud::before{width:28px;height:22px;left:11px;top:-14px}.window-cloud::after{width:38px;height:29px;right:8px;top:-20px}
.cloud-a{left:126px;top:64px}.cloud-b{left:53px;top:148px;transform:scale(.72)}
.scene-vase{position:absolute;left:19px;bottom:189px;width:85px;height:98px;border:3px solid #deaa42;border-radius:25px 25px 33px 33px;background:linear-gradient(180deg,#fff7d8,#ffe9a9);z-index:5;box-shadow:0 9px 16px rgba(143,88,22,.08)}
.scene-vase::before{content:"";position:absolute;left:10px;right:10px;top:11px;height:5px;border-radius:99px;background:rgba(218,156,39,.28)}
.scene-vase .flower{position:absolute;top:-57px;color:#f0b83c;font-size:33px;z-index:2;text-shadow:0 1px 0 #d59826}
.scene-vase .f1{left:2px;transform:rotate(-13deg)}.scene-vase .f2{left:27px;top:-75px;color:#e8a04c}.scene-vase .f3{right:-2px;top:-54px;color:#e88673;transform:rotate(12deg)}
.scene-vase .stem{position:absolute;top:-44px;width:3px;height:61px;background:#7e986a;transform-origin:bottom}.scene-vase .s1{left:24px;transform:rotate(-15deg)}.scene-vase .s2{left:42px;height:75px;top:-61px}.scene-vase .s3{right:21px;transform:rotate(14deg)}
.scene-desk{position:absolute;left:0;right:0;bottom:143px;height:17px;background:#f5c24d;border:2px solid #dd9f2c;z-index:4;box-shadow:0 6px 0 rgba(210,145,27,.12)}
.scene-books{position:absolute;left:92px;bottom:157px;height:122px;display:flex;align-items:flex-end;gap:4px;z-index:5}
.scene-books i{display:block;width:24px;border:3px solid #dba03b;border-radius:6px 6px 2px 2px;background:#fff5cc;box-shadow:inset 0 0 0 4px rgba(255,224,124,.25)}
.scene-books i:nth-child(1){height:96px}.scene-books i:nth-child(2){height:112px;background:#ffe2b8}.scene-books i:nth-child(3){height:83px;background:#fff}.scene-books i:nth-child(4){height:103px;background:#ffe788}
.scene-books i::after{content:"";display:block;height:2px;margin:13px 4px 0;background:#dda74c}
.scene-mug{position:absolute;left:50px;bottom:155px;width:58px;height:56px;border:3px solid #d99f3a;border-radius:9px 9px 23px 23px;background:#fff7d9;z-index:7;display:grid;place-items:center;color:#9d6a31;font-size:16px;box-shadow:0 8px 13px rgba(135,80,20,.09)}
.scene-mug::after{content:"";position:absolute;right:-22px;top:9px;width:25px;height:28px;border:3px solid #d99f3a;border-left:0;border-radius:0 14px 14px 0}
.scene-storage{position:absolute;left:5px;bottom:9px;width:193px;height:132px;border:3px solid #d99d31;border-radius:18px;background:linear-gradient(145deg,#ffd56a,#f6bd3d);z-index:6;box-shadow:0 14px 23px rgba(143,85,17,.16)}
.scene-storage::before{content:"";position:absolute;left:15px;right:15px;top:16px;height:3px;border-radius:99px;background:rgba(255,255,255,.4)}
.scene-storage>span{position:absolute;left:42px;top:28px;padding:11px 15px;border:2px solid #dfa842;background:#fff4c8;color:#6e4b32;font-size:11px;font-weight:900;line-height:1.25;text-align:center;transform:rotate(-6deg);box-shadow:0 6px 10px rgba(112,72,28,.1)}
.scene-storage>i{position:absolute;right:15px;top:15px;color:#d97863;font-size:25px;font-style:normal}
.scene-heart{position:absolute;color:#dc7d68;font-size:23px;z-index:8}.heart-a{right:7px;bottom:127px;transform:rotate(12deg)}.heart-b{left:20px;top:31px;font-size:14px}
.dashboard-board{min-width:0}
.dashboard-greeting{min-height:75px;display:flex;align-items:flex-start;gap:16px;margin-bottom:13px;padding:0 3px}
.dashboard-greeting .greeting-kicker{display:block;color:#b57a2a;font-size:8px;text-transform:uppercase;letter-spacing:.16em;font-weight:900;margin-bottom:4px}
.dashboard-greeting h1{margin:0;font-size:29px;line-height:1.08;letter-spacing:-.04em;color:var(--cocoa)}
.dashboard-greeting p{margin:5px 0 0;color:var(--muted);font-size:11px}
.dashboard-sync{margin-left:auto}
.dashboard-top-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:17px;align-items:stretch}
.today-summary{position:relative;padding:16px 17px 15px;overflow:hidden}
.today-summary::before{content:"";position:absolute;right:-35px;top:-45px;width:120px;height:120px;border-radius:50%;background:rgba(255,239,181,.55)}
.panel-title{position:relative;z-index:2;margin-bottom:12px}.panel-title>div{display:flex;align-items:center;gap:6px}.panel-title h2{margin:0;font-size:13px;letter-spacing:-.015em}.panel-title>div>span{color:#e1aa2d;font-size:10px}.panel-title small{display:block;margin-top:2px;color:var(--muted);font-size:8px}.panel-title.compact{margin-bottom:9px}
.summary-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;position:relative;z-index:2}
.summary-card{min-width:0;min-height:135px;border:1.5px solid var(--line-soft);border-radius:16px;background:#fffdf8;padding:12px 10px;text-align:left;cursor:pointer;display:flex;flex-direction:column;transition:.18s ease;position:relative;overflow:hidden}
.summary-card:hover{transform:translateY(-3px) rotate(-.4deg);border-color:#e4bd62;box-shadow:var(--shadow-sm)}
.summary-card::after{content:"";position:absolute;right:-20px;bottom:-25px;width:70px;height:70px;border-radius:50%;opacity:.5}
.summary-card.sum-mail::after{background:#fff0b7}.summary-card.sum-process::after{background:#ffe0cf}.summary-card.sum-approval::after{background:#ffe1e5}.summary-card.sum-done::after{background:#e5efd7}
.summary-emoji{width:35px;height:35px;border-radius:11px;background:#fff4c8;display:grid;place-items:center;font-size:19px;margin-bottom:10px;box-shadow:inset 0 0 0 1px rgba(224,178,62,.2)}
.summary-card.sum-process .summary-emoji{background:var(--peach)}.summary-card.sum-approval .summary-emoji{background:var(--pink)}.summary-card.sum-done .summary-emoji{background:var(--mint)}
.summary-card small{font-size:8px;color:#7e6252;font-weight:850;line-height:1.25}.summary-card strong{margin-top:auto;font-size:27px;line-height:1;color:var(--cocoa);letter-spacing:-.05em}.summary-card em{margin-top:6px;color:#9d806e;font-size:8px;font-style:normal}
.summary-heart{position:absolute;right:12px;top:7px;color:#dd7c68;font-size:24px;transform:rotate(12deg)}
.today-note-card{position:relative;border:1.5px solid #e1bb68;border-radius:4px 4px 10px 7px;background:#fffdf7;padding:18px 17px 14px;box-shadow:0 10px 22px rgba(112,73,31,.09);transform:rotate(-.7deg);overflow:hidden}
.note-tape-top{position:absolute;left:50%;top:-8px;width:68px;height:18px;background:rgba(238,207,126,.45);transform:translateX(-50%) rotate(2deg)}
.note-title{display:flex;align-items:center;justify-content:center;gap:6px;padding-bottom:10px;border-bottom:1px solid #eddfc4}.note-title h2{margin:0;font-size:12px}.note-title>span{font-size:9px;color:#dfaa2e}
.note-task-list{display:grid;gap:0;margin-top:4px}
.note-task{min-height:34px;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px;border-bottom:1px solid #f0e4cf}
.note-task b{font-size:9px;font-weight:750}
.note-checkbox{width:16px;height:16px;border:1.5px solid #d7b87b;border-radius:3px;background:#fffefa;display:grid;place-items:center;color:#729066;font-size:9px;font-weight:900}
.note-checkbox.done{background:#e8f2dc;border-color:#a8bf96}
.note-mascot{position:absolute;right:11px;bottom:6px;width:52px;height:42px;border:2px solid #dbad58;border-radius:22px 22px 17px 17px;background:#fff0c5;display:grid;place-items:center;color:#9d6a35;font-size:12px}
.note-mascot .mascot-ear{position:absolute;top:-8px;width:17px;height:17px;border:2px solid #dbad58;background:#fff0c5;transform:rotate(45deg);z-index:-1}.note-mascot .e1{left:7px}.note-mascot .e2{right:7px}
.note-mascot i{font-style:normal}.note-mascot b{position:absolute;right:-9px;top:-7px;color:#dc7b69;font-size:17px}
.dashboard-middle-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:17px;margin-top:16px}
.favorite-services{padding:14px 17px 12px}
.favorite-service-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.favorite-service{min-height:84px;border:0;border-radius:14px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:.18s ease;color:var(--cocoa)}
.favorite-service:hover{transform:translateY(-3px);background:#fff9e8;box-shadow:var(--shadow-xs)}
.favorite-service>span{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;font-size:23px;border:1px solid rgba(183,129,50,.12)}
.favorite-service.service-peach>span{background:var(--peach)}.favorite-service.service-yellow>span{background:#fff0b7}.favorite-service.service-pink>span{background:var(--pink)}.favorite-service.service-gold>span{background:#ffe4a0}.favorite-service.service-mint>span{background:var(--mint)}
.favorite-service b{font-size:8px;text-align:center}.favorite-service small{font-size:7px;color:var(--muted);text-align:center}
.cute-reminder-card{position:relative;border:1.5px solid var(--line);border-radius:17px;background:linear-gradient(145deg,#fffdf7,#fff6d9);padding:15px 85px 14px 16px;min-height:112px;overflow:hidden;box-shadow:var(--shadow-xs)}
.cute-reminder-card>div{display:flex;align-items:center;gap:5px}.cute-reminder-card>div span{color:#dda82f;font-size:9px}.cute-reminder-card h3{margin:0;font-size:11px}.cute-reminder-card>b,.cute-reminder-card>small{display:block}.cute-reminder-card>b{font-size:10px;margin-top:13px}.cute-reminder-card>small{font-size:8px;color:var(--muted);margin-top:3px}
.reminder-calendar{position:absolute;right:17px;top:25px;width:55px;height:55px;border-radius:15px;background:#fff0b9;display:grid;place-items:center;font-size:31px;transform:rotate(4deg);box-shadow:0 6px 12px rgba(171,111,29,.09)}
.recent-requests-panel{margin-top:16px;padding:14px 17px 12px}
.recent-request-heading{display:flex;align-items:center;gap:10px;margin-bottom:7px}.recent-request-heading>div{display:flex;align-items:center;gap:6px}.recent-request-heading>div span{color:#dda82f;font-size:9px}.recent-request-heading h2{margin:0;font-size:12px}.recent-request-heading .btn{margin-left:auto}
.dashboard-request-list{display:grid}
.dashboard-request-row{width:100%;min-height:44px;border:0;border-top:1px solid #f0e4cd;background:transparent;display:grid;grid-template-columns:32px 120px minmax(120px,.8fr) minmax(120px,1fr) 100px 140px;align-items:center;gap:10px;text-align:left;padding:5px 2px;cursor:pointer;color:var(--cocoa);transition:.15s ease}
.dashboard-request-row:first-child{border-top:0}.dashboard-request-row:hover{background:#fff9e9;border-radius:10px;padding-left:7px;padding-right:7px}
.dashboard-request-row b{font-size:8px}.dashboard-request-row>span:not(.pill){font-size:8px;color:#765c4e}.dashboard-request-row time{font-size:7px;color:var(--muted);text-align:right}
.dashboard-request-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#fff0be;color:#c48628}.dashboard-request-icon svg{width:14px;height:14px}.dashboard-request-icon.admin{background:var(--lilac);color:#806d91}.dashboard-request-icon.unclassified{background:var(--mint);color:#6f8964}
.dashboard-no-requests{padding:28px;text-align:center}.dashboard-no-requests span,.dashboard-no-requests b,.dashboard-no-requests small{display:block}.dashboard-no-requests span{font-size:26px}.dashboard-no-requests b{font-size:10px;margin-top:5px}.dashboard-no-requests small{font-size:8px;color:var(--muted)}

/* ------------------------------
   Inbox and request paper
-------------------------------- */
.inbox-page{position:relative}
.inbox-controls{display:grid;grid-template-columns:minmax(300px,1fr) auto auto;gap:10px;align-items:center;margin-bottom:12px}
.inbox-search{max-width:none;height:44px}
.filter-button{background:#fffefa}
.cute-status-tabs{display:flex;align-items:center;gap:7px;overflow-x:auto;padding:1px 1px 11px;scrollbar-width:none}.cute-status-tabs::-webkit-scrollbar{display:none}
.cute-status-tabs button{min-width:max-content;height:31px;border:1.5px solid var(--line-soft);border-radius:999px;background:#fffefa;padding:0 12px;display:flex;align-items:center;gap:7px;color:#806658;font-size:9px;font-weight:850;cursor:pointer;transition:.15s ease}
.cute-status-tabs button b{min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#fff4c9;display:grid;place-items:center;font-size:7px;color:#9b672b}
.cute-status-tabs button:hover,.cute-status-tabs button.active{border-color:#e5bd62;background:var(--butter);color:var(--cocoa);box-shadow:0 4px 12px rgba(183,124,27,.08)}
.cute-inbox-layout{display:grid;grid-template-columns:minmax(330px,390px) minmax(0,1fr);gap:18px;min-height:640px;align-items:stretch}
.cute-request-column{border:1.5px solid var(--line);border-radius:18px;background:rgba(255,253,247,.88);box-shadow:var(--shadow-xs);display:flex;flex-direction:column;min-height:640px;overflow:hidden}
.request-column-heading{min-height:62px;padding:12px 14px;border-bottom:1px dashed #e8d4a8;background:linear-gradient(180deg,#fff9e9,#fffdf7);display:flex;align-items:center;gap:10px}.request-column-heading>div span,.request-column-heading>div b{display:block}.request-column-heading>div span{font-size:8px;text-transform:uppercase;letter-spacing:.14em;color:#b4772a;font-weight:900}.request-column-heading>div b{font-size:11px;margin-top:2px}.request-column-heading>span{margin-left:auto;font-size:25px;transform:rotate(-7deg)}
.cute-request-list{padding:8px;display:grid;gap:7px;overflow:auto;max-height:550px;scrollbar-width:thin;scrollbar-color:#edd29b transparent}
.cute-request-card{width:100%;min-height:92px;border:1.5px solid #f0e2c8;border-radius:13px;background:#fffefa;padding:10px;display:grid;grid-template-columns:24px 38px minmax(0,1fr) auto;align-items:center;gap:8px;text-align:left;cursor:pointer;color:var(--cocoa);position:relative;overflow:hidden;transition:.16s ease}
.cute-request-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent}
.cute-request-card:hover{border-color:#e4bf69;transform:translateY(-1px);box-shadow:var(--shadow-xs)}
.cute-request-card.active{background:linear-gradient(90deg,#fff2ad,#fff9e3 72%);border-color:#e4b956;box-shadow:0 7px 15px rgba(177,116,23,.09)}
.cute-request-card.active::after{background:#e6ae35}
.request-card-number{font-size:8px;color:#b49b88;font-weight:900;align-self:flex-start;margin-top:3px}
.request-card-icon{width:38px;height:38px;border-radius:12px;background:#ffecc0;color:#c47e24;display:grid;place-items:center;align-self:flex-start}.request-card-icon svg{width:17px;height:17px}.request-card-icon.admin{background:var(--lilac);color:#806b91}.request-card-icon.unclassified{background:var(--mint);color:#6c8963}
.request-card-copy{min-width:0}.request-card-id{display:block;font-size:7px;color:#a06f35;font-weight:900;letter-spacing:.03em}.request-card-copy strong{display:block;margin-top:3px;font-size:10px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.request-card-copy small{display:block;margin-top:3px;color:#846c5e;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.request-card-copy time{display:block;margin-top:4px;color:#a89182;font-size:7px}
.cute-request-card>.pill{align-self:flex-start;margin-top:1px}
.cute-pagination{margin-top:auto;padding:10px;border-top:1px dashed #ead9b8;display:flex;align-items:center;justify-content:center;gap:4px;background:#fffaf0}
.cute-pagination button{width:27px;height:27px;border:1px solid transparent;border-radius:8px;background:transparent;font-size:8px;cursor:pointer}.cute-pagination button:hover,.cute-pagination button.active{border-color:#e3bf6e;background:var(--butter)}.cute-pagination span{font-size:8px;color:var(--muted)}
.request-paper{position:relative;min-width:0;min-height:640px;border:1.5px solid #e1b966;border-radius:5px 5px 18px 11px;background:
  repeating-linear-gradient(180deg,transparent 0 31px,rgba(235,216,181,.16) 32px),
  #fffefa;
box-shadow:0 15px 32px rgba(100,63,30,.1);padding:21px 22px 16px;display:flex;flex-direction:column;overflow:hidden}
.request-paper::before{content:"";position:absolute;left:20px;right:20px;top:65px;height:1px;background:#f0e2c9}
.paper-tape{position:absolute;left:50%;top:-7px;width:78px;height:20px;background:rgba(239,207,122,.46);transform:translateX(-50%) rotate(1deg);z-index:3}
.paper-clip{position:absolute;right:17px;top:9px;color:#db805f;font-size:29px;transform:rotate(22deg);z-index:4}
.paper-doodle{position:absolute;right:22px;bottom:52px;color:#de846d;font-size:25px;transform:rotate(12deg)}
.request-paper-head{display:flex;align-items:center;gap:10px;position:relative;z-index:2;padding-bottom:10px}
.request-paper-id{display:flex;align-items:center;gap:8px}.request-paper-id>b{padding:7px 12px;border-radius:999px;background:#fff0b7;border:1.5px solid #e4bd64;font-size:9px;letter-spacing:.025em}
.paper-service-icon{width:34px;height:34px;border-radius:11px;background:#ffeac0;color:#c17d28;display:grid;place-items:center}.paper-service-icon svg{width:16px;height:16px}.paper-service-icon.admin{background:var(--lilac);color:#806d92}.paper-service-icon.unclassified{background:var(--mint);color:#6c8962}
.request-paper-head>.pill{margin-left:auto}
.request-paper>h2{margin:13px 0 6px;font-size:19px;line-height:1.2;letter-spacing:-.025em;color:var(--cocoa);padding-right:32px}
.request-paper-meta{display:flex;align-items:center;gap:13px;color:var(--muted);font-size:8px;margin-bottom:15px}.request-paper-meta span{display:flex;align-items:center;gap:5px}.request-paper-meta svg{width:13px;height:13px}
.request-paper-scroll{flex:1;overflow:auto;padding:1px 5px 10px 1px;scrollbar-width:thin;scrollbar-color:#efd5a1 transparent}
.paper-field-grid,.paper-report-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.paper-report-fields{margin-top:4px;padding-top:4px;border-top:1px dashed #ecd9b4}
.paper-field{min-height:47px;padding:8px 0;border-bottom:1px solid #f1e4cc;display:grid;grid-template-columns:minmax(105px,.65fr) minmax(0,1fr);gap:10px;align-items:start}.paper-field.full{grid-column:1/-1}.paper-field span{color:#c1822a;font-size:8px;font-weight:850}.paper-field b{font-size:9px;color:#5f4334;line-height:1.48;word-break:break-word}.paper-field b a{color:#a26929;text-decoration:none}.paper-field b a:hover{text-decoration:underline}
.paper-subsection{margin-top:14px;padding-top:11px;border-top:1px dashed #e6cf9f}.paper-subsection h4{margin:0 0 7px;color:#bd7e2a;font-size:9px;letter-spacing:.02em}.paper-subsection p{margin:0;color:#685044;font-size:9px;line-height:1.65}
.paper-attachments{display:grid;gap:6px}.paper-attachment{min-height:37px;border:1px solid #edddc2;border-radius:10px;background:#fffaf0;padding:7px 9px;display:grid;grid-template-columns:16px 1fr 15px;align-items:center;gap:7px;color:#6e5141;text-decoration:none;font-size:8px;transition:.15s ease}.paper-attachment:hover{border-color:#dfb85e;background:#fff4d6;transform:translateX(2px)}.paper-attachment svg{width:14px;height:14px}.paper-no-attachment{display:block;color:var(--muted);font-size:8px;padding:7px 0}
.paper-item-list{display:grid;gap:5px}.paper-item-list>div{display:grid;grid-template-columns:28px 1fr;gap:7px;padding:7px;border:1px solid #eee0c7;border-radius:10px;background:#fffaf0}.paper-item-list>div>span{grid-row:1/3;width:28px;height:28px;border-radius:9px;background:#ffe9b5;display:grid;place-items:center;color:#b87b29}.paper-item-list svg{width:14px;height:14px}.paper-item-list b,.paper-item-list small{display:block}.paper-item-list b{font-size:8px}.paper-item-list small{font-size:7px;color:var(--muted);margin-top:2px}
.paper-history{display:grid;gap:0}.paper-history h4{margin-bottom:3px}.paper-history-row{min-height:36px;display:grid;grid-template-columns:15px 1fr;gap:7px;position:relative;padding:5px 0}.paper-history-row::after{content:"";position:absolute;left:5px;top:20px;bottom:-4px;width:1px;background:#e8cf9d}.paper-history-row:last-child::after{display:none}.paper-history-row i{width:11px;height:11px;border-radius:50%;border:2px solid #d8a44c;background:#fffefa;z-index:1;margin-top:3px}.paper-history-row.current i{background:#f0bc47}.paper-history-row b,.paper-history-row span{display:block}.paper-history-row b{font-size:8px}.paper-history-row span{font-size:7px;color:var(--muted);margin-top:2px}
.paper-source-note{display:grid;grid-template-columns:30px 1fr;gap:8px;margin-top:13px;padding:9px 10px;border:1px dashed #ddc17e;border-radius:11px;background:#fff8e3}.paper-source-note>svg{width:30px;height:30px;padding:7px;border-radius:9px;background:#ffe78e;color:#a66e23}.paper-source-note b,.paper-source-note small{display:block}.paper-source-note b{font-size:8px}.paper-source-note small{font-size:7px;color:var(--muted);margin-top:2px;line-height:1.45}
.request-paper-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-top:12px;margin-top:auto;border-top:1px solid #ecd9b4;background:linear-gradient(180deg,rgba(255,254,250,0),#fffefa 30%)}
.request-paper-actions .btn{min-width:108px;min-height:36px;font-size:9px;padding:7px 13px}.request-paper-actions .paper-process{min-width:126px}.paper-revise{background:#fffefa}.paper-reject{background:#fff8f8}
.request-paper-empty{height:100%;display:grid;place-items:center}.request-paper-empty .empty-emoji{font-size:42px}

/* ------------------------------
   Service pages, metrics and tables
-------------------------------- */
.service-spotlight{position:relative;display:grid;grid-template-columns:82px minmax(0,1fr) 180px;align-items:center;gap:18px;margin-bottom:14px;padding:21px 23px;border:1.5px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#fffdf8,#fff3ca);overflow:hidden;box-shadow:var(--shadow-xs)}
.service-spotlight-id{background:linear-gradient(145deg,#fffdf8,#f7edf9)}
.service-spotlight-icon{width:72px;height:72px;border-radius:22px;background:#ffe8a0;color:#b47725;display:grid;place-items:center;transform:rotate(-3deg);box-shadow:0 8px 17px rgba(159,98,20,.11)}.service-spotlight-id .service-spotlight-icon{background:var(--lilac);color:#7e6990}.service-spotlight-icon svg{width:32px;height:32px}
.service-spotlight-copy h2{margin:3px 0 4px;font-size:22px;letter-spacing:-.035em}.service-spotlight-copy p{margin:0;color:var(--muted);font-size:10px;line-height:1.55;max-width:720px}.service-spotlight-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}.service-spotlight-tags span{min-height:26px;padding:5px 9px;border:1px solid #ead6a8;border-radius:999px;background:rgba(255,255,255,.72);display:flex;align-items:center;gap:5px;color:#876552;font-size:8px;font-weight:800}.service-spotlight-tags svg{width:13px;height:13px}
.service-spotlight-note{position:relative;min-height:118px;padding:20px 16px 13px;border:1.5px solid #deb65e;border-radius:3px 3px 12px 8px;background:#fffdf6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(1deg);box-shadow:0 9px 18px rgba(120,76,27,.08)}.service-spotlight-note .note-tape{position:absolute;left:50%;top:-8px;width:58px;height:17px;background:rgba(236,204,121,.48);transform:translateX(-50%) rotate(-2deg)}.service-spotlight-note b{font-size:28px;line-height:1}.service-spotlight-note strong{font-size:9px;margin-top:5px}.service-spotlight-note small{font-size:7px;color:var(--muted);margin-top:3px}
.service-spotlight-flower{position:absolute;right:205px;top:8px;color:#e08368;font-size:25px}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}
.metric-card{position:relative;min-height:136px;border:1.5px solid var(--line);border-radius:17px;background:#fffefa;padding:15px;overflow:hidden;box-shadow:var(--shadow-xs)}
.metric-card::after{content:"";position:absolute;right:-28px;bottom:-28px;width:92px;height:92px;border-radius:50%;background:rgba(255,234,164,.45)}.metric-card.note-blue::after{background:rgba(218,235,244,.65)}.metric-card.note-peach::after{background:rgba(255,221,204,.62)}.metric-card.note-rose::after{background:rgba(255,222,226,.62)}
.metric-top{display:flex;align-items:center;gap:8px;position:relative;z-index:2}.metric-icon{width:34px;height:34px;border-radius:11px;background:#fff0b8;color:#b87927;display:grid;place-items:center}.metric-icon svg{width:16px;height:16px}.metric-top>span{font-size:9px;font-weight:850;color:#806353}
.metric-card>strong{display:block;position:relative;z-index:2;margin-top:15px;font-size:28px;line-height:1;letter-spacing:-.045em}.metric-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;position:relative;z-index:2;margin-top:12px}.metric-foot span,.metric-foot b{font-size:7px}.metric-foot span{color:var(--muted)}.metric-foot b{color:#b0792f;text-transform:uppercase;letter-spacing:.06em}
.table-card,.card:has(>.table-toolbar),.card:has(>.ticket-table-wrap){overflow:hidden}
.table-toolbar{min-height:62px;padding:10px 13px;border-bottom:1px solid #ecdfc7;background:#fffaf0;display:flex;align-items:center;gap:9px}.table-toolbar .field-shell{min-width:210px}.table-toolbar .field-shell:first-child{flex:1;max-width:470px}.table-toolbar .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.ticket-table-wrap{overflow:auto;scrollbar-width:thin;scrollbar-color:#ecd29f transparent}
.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:9px;color:var(--cocoa)}
.data-table thead th{position:sticky;top:0;z-index:2;padding:11px 12px;border-bottom:1px solid #ead8b7;background:#fff8e8;color:#9a745c;font-size:7px;text-transform:uppercase;letter-spacing:.08em;text-align:left;white-space:nowrap}
.data-table tbody td{padding:11px 12px;border-bottom:1px solid #f0e4d0;vertical-align:middle;background:#fffefa}.data-table tbody tr:last-child td{border-bottom:0}.data-table tbody tr:hover td{background:#fffaf0}
.data-table td>b,.data-table td>span{display:block}.data-table td>b{font-size:9px}.data-table td>span{font-size:7px;color:var(--muted);margin-top:2px}
.clickable-row{cursor:pointer}.clickable-row:hover td:first-child{box-shadow:inset 3px 0 0 #e3ad32}
.assignee{display:flex;align-items:center;gap:7px}.assignee .avatar{width:29px;height:29px;border-radius:10px;font-size:7px}.assignee b,.assignee span{display:block}.assignee b{font-size:8px}.assignee span{font-size:7px;color:var(--muted)}
.progress-line{height:6px;border-radius:99px;background:#f3eadb;overflow:hidden}.progress-line i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f4c756,#e4a72f)}
.item-photo{width:34px;height:34px;border-radius:11px;background:#fff0be;color:#b77827;display:grid;place-items:center}.item-photo svg{width:16px;height:16px}
.more-btn{width:32px;height:32px;border:1px solid var(--line);border-radius:10px;background:#fffefa;display:inline-grid;place-items:center;cursor:pointer;color:#8b6853}.more-btn:hover{background:var(--butter-100)}.more-btn svg{width:15px;height:15px}.danger-icon{color:var(--rose)}

/* ------------------------------
   Ticket detail and operational cards
-------------------------------- */
.ticket-banner{position:relative;display:flex;align-items:center;gap:13px;padding:16px;border:1.5px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#fffdf8,#fff5d3);overflow:hidden}.ticket-banner::after{content:"♡";position:absolute;right:18px;top:6px;color:#dc806d;font-size:25px;transform:rotate(10deg)}
.ticket-kicker{font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:#b27b31;font-weight:900}.ticket-banner h2{margin:4px 0 3px;font-size:19px}.ticket-banner p{margin:0;color:var(--muted);font-size:9px}.ticket-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.ticket-actions{margin-left:auto;display:flex;gap:7px;align-items:center;padding-right:32px}
.process-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:5px;margin:14px 0}
.process-step{min-height:64px;border:1.5px solid var(--line-soft);border-radius:13px;background:#fffefa;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}.process-step>span{width:23px;height:23px;border-radius:50%;border:1.5px solid #e2cca1;display:grid;place-items:center;font-size:8px;margin-bottom:4px}.process-step b{font-size:7px}.process-step.done{background:#f3f8ed;color:#647c5e;border-color:#d4e1c7}.process-step.current{background:#fff4cc;color:#956426;border-color:#e4bd63}.process-step svg{width:12px;height:12px}
.ticket-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px}.ticket-side{display:grid;gap:12px;align-content:start;position:sticky;top:calc(var(--header-height) + var(--nav-height) + 16px)}
.content-card{padding:16px}.card-title{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}.card-title h3{margin:0;font-size:12px}.card-title p{margin:3px 0 0;color:var(--muted);font-size:8px}.card-title .right{margin-left:auto}
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.info-item{min-height:58px;padding:9px 10px;border:1px solid #eee1ca;border-radius:12px;background:#fffaf1}.info-item.full{grid-column:1/-1}.info-item span,.info-item b{display:block}.info-item span{font-size:7px;color:#b2782f;text-transform:uppercase;letter-spacing:.05em;font-weight:850}.info-item b{margin-top:5px;font-size:9px;line-height:1.45}
.approval-flow{display:grid;gap:7px}.approval-step{min-height:50px;padding:8px;border:1px solid #eee0c7;border-radius:11px;background:#fffaf0;display:grid;grid-template-columns:27px 1fr auto auto;align-items:center;gap:8px}.approval-index{width:27px;height:27px;border-radius:9px;background:#ffe9a6;color:#9b6729;display:grid;place-items:center;font-size:8px;font-weight:900}.approval-step b,.approval-step span{display:block}.approval-step b{font-size:8px}.approval-step span{font-size:7px;color:var(--muted);margin-top:2px}
.timeline-long,.timeline{display:grid}.timeline-entry{position:relative;display:grid;grid-template-columns:25px 1fr;gap:8px;padding-bottom:13px}.timeline-entry::after{content:"";position:absolute;left:11px;top:24px;bottom:0;width:1px;background:#e8d2a5}.timeline-entry:last-child::after{display:none}.timeline-dot{width:23px;height:23px;border-radius:50%;border:2px solid #d9ad55;background:#fffefa;display:grid;place-items:center;font-size:7px;font-weight:900;z-index:1}.timeline-entry.current .timeline-dot{background:#ffe17c}.timeline-entry b,.timeline-entry small{display:block}.timeline-entry b{font-size:8px}.timeline-entry small{font-size:7px;color:var(--muted);line-height:1.5;margin-top:2px}
.attachment{min-height:46px;padding:8px 10px;border:1px solid #ecdfc8;border-radius:11px;background:#fffaf0;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:8px;text-decoration:none}.attachment>svg{width:28px;height:28px;padding:7px;border-radius:9px;background:#ffeab0;color:#aa7124}.attachment b,.attachment span{display:block}.attachment b{font-size:8px}.attachment span{font-size:7px;color:var(--muted);margin-top:2px}
.source-report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.source-report-item{min-height:56px;padding:9px 10px;border:1px solid #eee0c7;border-radius:11px;background:#fffaf0}.source-report-item.full{grid-column:1/-1}.source-report-item span,.source-report-item b{display:block}.source-report-item span{font-size:7px;color:#b27a31;font-weight:850}.source-report-item b{font-size:8px;line-height:1.5;margin-top:4px}
.source-readonly-banner{display:grid;grid-template-columns:32px 1fr;gap:8px;padding:9px;border:1px dashed #dec17e;border-radius:11px;background:#fff8e3}.source-readonly-banner>svg{width:32px;height:32px;padding:7px;border-radius:9px;background:#ffe68c;color:#a36c22}.source-readonly-banner b,.source-readonly-banner span{display:block}.source-readonly-banner b{font-size:8px}.source-readonly-banner span{font-size:7px;color:var(--muted);line-height:1.45;margin-top:2px}
.route-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #eee1cb}.route-row:last-child{border-bottom:0}.route-row span,.route-row b{font-size:8px}
.wo-list{display:grid;gap:9px}.wo-row{display:grid;grid-template-columns:38px minmax(0,1.4fr) minmax(150px,.65fr) minmax(140px,.55fr) auto;gap:11px;align-items:center;padding:12px 13px;border:1.5px solid var(--line);border-radius:15px;background:#fffefa;box-shadow:var(--shadow-xs);transition:.16s ease}.wo-row:hover{transform:translateY(-2px);border-color:#e3bd63;box-shadow:var(--shadow-sm)}.wo-handle{width:34px;height:34px;border-radius:11px;background:#fff0bd;color:#ac7124;display:grid;place-items:center;cursor:grab}.wo-main b,.wo-main span{display:block}.wo-main b{font-size:9px}.wo-main span{font-size:7px;color:var(--muted);margin-top:2px}.wo-progress{display:grid;gap:4px}.wo-progress span{font-size:7px;color:var(--muted)}.wo-side{text-align:right}.wo-side b,.wo-side span{display:block}.wo-side b{font-size:8px}.wo-side span{font-size:7px;color:var(--muted);margin-top:2px}

/* ------------------------------
   Kanban, calendar, approval, gate, reports, master
-------------------------------- */
.kanban-wrap{display:grid;grid-template-columns:repeat(5,minmax(230px,1fr));gap:10px;overflow:auto;padding-bottom:7px}
.kanban-col{min-height:500px;border:1.5px solid var(--line);border-radius:16px;background:#fffaf0;padding:9px}.kanban-head{display:flex;align-items:center;gap:7px;padding:4px 4px 10px}.kanban-head i{width:8px;height:8px;border-radius:50%;background:#e1aa2f}.kanban-head i.blue{background:#7fa0ad}.kanban-head i.amber{background:#d79c39}.kanban-head i.sage{background:#83a276}.kanban-head i.gray{background:#a98f7e}.kanban-head h3{margin:0;font-size:9px}.kanban-head b{margin-left:auto;min-width:22px;height:22px;border-radius:99px;background:#fff0bd;display:grid;place-items:center;font-size:7px}
.kanban-card{position:relative;margin-top:7px;padding:11px;border:1px solid #ebddc5;border-radius:12px;background:#fffefa;cursor:pointer;box-shadow:var(--shadow-xs);transition:.16s ease}.kanban-card:hover{transform:translateY(-2px);border-color:#e3bd63;box-shadow:var(--shadow-sm)}.kanban-card .kicker{font-size:7px;color:#b3782d;text-transform:uppercase;letter-spacing:.06em}.kanban-card h4{margin:5px 0 8px;font-size:9px;line-height:1.35}.kanban-card .meta{display:flex;justify-content:space-between;gap:8px;margin-top:10px;color:var(--muted);font-size:7px}.kanban-card>.assignee{margin-top:8px}.kanban-card .avatar{width:27px;height:27px;font-size:7px}
.calendar-shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px}.calendar-card{overflow:hidden}.calendar-head{min-height:58px;padding:11px 13px;border-bottom:1px solid #eadbc1;background:#fff9e9;display:flex;align-items:center}.calendar-head h3{margin:0;font-size:12px}.calendar-head .right{margin-left:auto;display:flex;gap:6px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(92px,1fr));min-width:710px}.cal-dayname{padding:9px;border-right:1px solid #eee0c7;border-bottom:1px solid #eee0c7;background:#fffaf0;color:#9a7862;text-align:center;font-size:7px;font-weight:900}.cal-day{min-height:102px;padding:7px;border-right:1px solid #f0e4d0;border-bottom:1px solid #f0e4d0;background:#fffefa}.cal-day.muted{background:#fcf8f2;color:#b6a396}.cal-day.today{box-shadow:inset 0 0 0 2px #e4bb5f;background:#fff8df}.cal-number{display:block;font-size:8px;font-weight:900;margin-bottom:5px}.cal-event{width:100%;border:0;border-radius:6px;background:#fff0b8;color:#805c39;padding:4px 5px;margin-top:3px;text-align:left;font-size:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.cal-event.blue{background:#e4eff5;color:#5f7e8c}.cal-event.amber{background:#ffe0c4;color:#9a623c}.cal-day>small{font-size:6px;color:var(--muted)}
.approval-ticket-list{display:grid;gap:10px}.approval-ticket{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:13px 15px}.approval-ticket-main{display:grid;grid-template-columns:45px 1fr;align-items:center;gap:10px}.approval-ticket-main h3{margin:2px 0;font-size:10px}.approval-ticket-main p{margin:0;color:var(--muted);font-size:7px}.ticket-id{font-size:7px;color:#ae742d;font-weight:900}.approval-ticket-meta{text-align:right}.approval-ticket-meta span{display:block;margin-top:5px;font-size:7px;color:var(--muted)}.approval-ticket-actions{display:flex;gap:7px}
.gate-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:14px}.scanner-card,.scan-result{padding:18px}.scanner-card{text-align:center;background:linear-gradient(145deg,#fffdf8,#fff4ca)}.scan-window{width:150px;height:150px;margin:0 auto 15px;border:2px dashed #d9a942;border-radius:24px;background:#fffefa;display:grid;place-items:center;color:#ae7225;position:relative}.scan-window::before,.scan-window::after{content:"♡";position:absolute;color:#df806e;font-size:18px}.scan-window::before{left:-7px;top:12px}.scan-window::after{right:-8px;bottom:9px}.scan-window svg{width:64px;height:64px}.scanner-card h3{margin:0;font-size:13px}.scanner-card p{margin:6px auto 14px;max-width:290px;color:var(--muted);font-size:8px;line-height:1.55}.manual-code{display:grid;grid-template-columns:1fr auto;gap:8px}.valid-card{display:grid;grid-template-columns:46px 1fr;align-items:center;gap:10px;padding:12px;border:1px solid #d5e3c7;border-radius:14px;background:#f3f8ed}.valid-icon{width:46px;height:46px;border-radius:14px;background:#dfeecf;color:#64805d;display:grid;place-items:center}.valid-icon svg{width:21px;height:21px}.valid-card h3{margin:0;font-size:12px}.valid-card p{margin:3px 0 0;color:var(--muted);font-size:8px}
.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.bar-chart,.hbar-list{padding:15px}.bar-chart{display:flex;align-items:flex-end;gap:10px;min-height:260px}.bar-group{flex:1;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:4px;height:190px;position:relative;padding-bottom:23px}.bar{min-height:3px;border-radius:7px 7px 2px 2px;background:#f3c54e}.bar.secondary{background:#d8e7d0}.bar-group>span{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-size:7px;color:var(--muted)}.hbar-row{display:grid;grid-template-columns:110px 1fr 35px;align-items:center;gap:8px;padding:8px 0}.hbar-row>span,.hbar-row>b{font-size:8px}.hbar-row>b{text-align:right}.hbar-track{height:8px;border-radius:99px;background:#f1e7d7;overflow:hidden}.hbar-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f4cf68,#e7ad31)}
.report-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.report-filter .field-shell{min-width:170px}
.master-tabs{display:flex;gap:6px;overflow:auto;margin-bottom:12px}.master-tabs button{min-width:max-content;height:35px;border:1.5px solid var(--line);border-radius:999px;background:#fffefa;padding:0 13px;font-size:8px;font-weight:850;cursor:pointer}.master-tabs button.active,.master-tabs button:hover{background:var(--butter);border-color:#e4bb5e}.master-location-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.check-row{display:flex;align-items:flex-start;gap:8px;padding:7px;border:1px solid #eee0c7;border-radius:10px;background:#fffaf0;font-size:8px}.check-row input{accent-color:#d9a73a}

/* ------------------------------
   Modals, notifications, toasts
-------------------------------- */
.modal-layer{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:22px;background:rgba(70,43,27,.28);backdrop-filter:blur(8px)}
.modal-layer:empty{display:none}
.modal{width:min(680px,100%);max-height:calc(100vh - 44px);display:flex;flex-direction:column;border:1.5px solid #e2bc67;border-radius:24px;background:#fffdf8;box-shadow:var(--shadow-lg);overflow:hidden}
.modal.wide{width:min(960px,100%)}
.modal-head{padding:18px 20px 13px;border-bottom:1px dashed #e5d1a6;background:linear-gradient(180deg,#fff7df,#fffdf8);display:flex;align-items:flex-start;gap:12px}.modal-head h2{margin:0;font-size:18px}.modal-head p{margin:4px 0 0;color:var(--muted);font-size:9px}.modal-close{margin-left:auto;width:37px;height:37px;border:1.5px solid var(--line);border-radius:50%;background:#fffefa;display:grid;place-items:center;cursor:pointer}.modal-close:hover{background:var(--pink)}
.modal-body{padding:17px 20px;overflow:auto}.modal-foot{padding:12px 20px;border-top:1px dashed #e5d1a6;background:#fffaf0;display:flex;align-items:center;justify-content:flex-end;gap:8px}.modal-foot .note{margin-right:auto;max-width:420px;color:var(--muted);font-size:8px}
.modal-report-section{margin-top:13px;padding:12px;border:1px solid #eadcc2;border-radius:13px;background:#fffaf0}.modal-section-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}.modal-section-head b,.modal-section-head span{display:block}.modal-section-head b{font-size:9px}.modal-section-head span{font-size:7px;color:var(--muted);margin-top:2px}.modal-section-head>.pill{margin-left:auto}
.id-template-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.id-template-option{border:1.5px solid var(--line);border-radius:14px;background:#fffefa;padding:9px;cursor:pointer}.id-template-option:has(input:checked){border-color:#e0ad3b;background:#fff6d5;box-shadow:0 0 0 3px rgba(241,194,83,.15)}.id-template-preview{aspect-ratio:1.58;border-radius:9px;overflow:hidden;background:#f5ede2}.id-template-preview img{width:100%;height:100%;object-fit:cover}.id-template-copy{margin-top:7px}.id-template-copy b,.id-template-copy small{display:block}.id-template-copy b{font-size:8px}.id-template-copy small{font-size:7px;color:var(--muted);margin-top:2px}
.notification-drawer{position:fixed;right:22px;top:70px;z-index:150;width:min(390px,calc(100vw - 28px));max-height:calc(100vh - 92px);overflow:auto;border:1.5px solid #e2bc67;border-radius:19px;background:#fffdf8;box-shadow:var(--shadow-lg);padding:10px}.notification-head{display:flex;align-items:center;padding:6px 5px 10px}.notification-head h3{margin:0;font-size:12px}.notification-head button{margin-left:auto;border:0;background:transparent;cursor:pointer}.notification-item{display:grid;grid-template-columns:35px 1fr;gap:9px;padding:10px;border-radius:12px;cursor:pointer}.notification-item:hover{background:#fff7df}.notification-item.unread{background:#fff2c3}.ni-icon{width:35px;height:35px;border-radius:11px;background:#ffe58a;color:#9f6922;display:grid;place-items:center}.ni-icon svg{width:16px;height:16px}.notification-item b,.notification-item p,.notification-item time{display:block}.notification-item b{font-size:8px}.notification-item p{margin:2px 0 0;color:var(--muted);font-size:7px;line-height:1.45}.notification-item time{margin-top:3px;color:#aa9485;font-size:6px}
.toast-layer{position:fixed;right:18px;bottom:18px;z-index:220;display:grid;gap:8px}.toast{min-width:300px;max-width:420px;border:1.5px solid #e3bd66;border-radius:15px;background:#fffdf8;box-shadow:var(--shadow-md);padding:10px 11px;display:grid;grid-template-columns:34px 1fr 28px;gap:9px;align-items:start}.toast-icon{width:34px;height:34px;border-radius:11px;background:#ffe58b;color:#a56d21;display:grid;place-items:center}.toast-icon svg{width:16px;height:16px}.toast b{font-size:9px}.toast p{margin:2px 0 0;color:var(--muted);font-size:7px;line-height:1.45}.toast button{width:28px;height:28px;border:0;border-radius:9px;background:transparent;display:grid;place-items:center;cursor:pointer}.toast button:hover{background:var(--pink)}
.access-card{width:min(660px,100%);padding:27px;border:1.5px solid #e2bc67;border-radius:25px;background:#fffdf8;box-shadow:var(--shadow-lg)}.access-icon{width:56px;height:56px;border-radius:17px;background:#ffe79a;color:#a66f22;display:grid;place-items:center}.access-icon svg{width:25px;height:25px}.access-card h2{margin:16px 0 5px;font-size:21px}.access-card p{color:var(--muted);font-size:10px;line-height:1.6}.access-steps{display:grid;gap:8px;margin:15px 0}.access-step{display:grid;grid-template-columns:28px 1fr;gap:9px;padding:9px;border:1px solid #eadcc3;border-radius:11px;background:#fffaf0}.access-step>b{width:28px;height:28px;border-radius:9px;background:#ffe68d;color:#885a22;display:grid;place-items:center;font-size:8px}.access-step span{font-size:9px;line-height:1.5}.code-box{padding:9px;border:1px solid #eadcc3;border-radius:10px;background:#fffaf0;color:#7c6254;font:8px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.empty-state{min-height:260px;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted)}.empty-state>div{max-width:310px}.empty-icon{width:54px;height:54px;border-radius:18px;background:#fff0bc;color:#b67828;display:grid;place-items:center;margin:0 auto 10px}.empty-icon svg{width:24px;height:24px}.empty-state h3{margin:0;color:var(--cocoa);font-size:12px}.empty-state p{margin:5px 0 0;font-size:8px;line-height:1.55}.empty-emoji{display:block;font-size:37px;margin-bottom:8px}.empty-inline{padding:24px;text-align:center;color:var(--muted);font-size:8px}
.skeleton{border-radius:12px;background:linear-gradient(90deg,#f7ead1,#fff7e8,#f7ead1);background-size:200% 100%;animation:skeleton 1.25s linear infinite}@keyframes skeleton{to{background-position:-200% 0}}
.text-rose{color:var(--rose)!important}

/* ------------------------------
   Responsive
-------------------------------- */
@media (max-width:1320px){
  .connection-pill{display:none}
  .cute-dashboard{grid-template-columns:185px minmax(0,1fr);gap:18px}
  .cozy-scene{margin-left:-28px}
  .dashboard-request-row{grid-template-columns:30px 105px minmax(100px,.8fr) minmax(105px,1fr) 90px 120px}
  .cute-inbox-layout{grid-template-columns:350px minmax(0,1fr)}
}

@media (max-width:1120px){
  .header-context{display:none}
  .global-search{width:min(430px,42vw)}
  .cute-dashboard{grid-template-columns:1fr}
  .cozy-scene{display:none}
  .dashboard-top-grid,.dashboard-middle-grid{grid-template-columns:minmax(0,1fr) 250px}
  .cute-inbox-layout{grid-template-columns:330px minmax(0,1fr)}
  .paper-field-grid,.paper-report-fields{grid-template-columns:1fr}.paper-field.full{grid-column:auto}
  .service-spotlight{grid-template-columns:70px minmax(0,1fr) 155px}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ticket-detail-layout,.calendar-shell{grid-template-columns:1fr}.ticket-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:860px){
  :root{--header-height:64px;--nav-height:0px}
  body{background-size:48px 48px,60px 60px,auto}
  .app-header{height:var(--header-height)}
  .app-header-inner{padding:0 14px;gap:10px}
  .brand-bloom{width:40px;height:40px;border-radius:13px}.brand-bloom img{width:33px;height:37px}
  .brand-copy strong{font-size:12px}.brand-copy small{font-size:6px}
  .global-search{display:none}
  .profile-chip>span:last-child{display:none}.profile-chip{padding:3px}
  .menu-launcher{display:none}
  .workspace-nav{display:none}
  .main-content{padding:17px 14px 96px}
  .mobile-dock{position:fixed;left:10px;right:10px;bottom:10px;z-index:90;height:67px;border:1.5px solid #e3bc66;border-radius:22px;background:rgba(255,253,247,.96);box-shadow:0 18px 38px rgba(92,55,26,.2);backdrop-filter:blur(16px);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:5px 7px}
  .mobile-dock .nav-item,.mobile-dock .mobile-menu{width:100%!important;height:55px;border:0;background:transparent;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0;color:#9a7c6b;font-size:7px;font-weight:850;cursor:pointer;position:relative}
  .mobile-dock .nav-item svg{width:18px;height:18px}.mobile-dock .nav-item.active{background:#fff5d1;color:#a46d25;box-shadow:none}.mobile-dock .nav-item.active svg{color:#c48728}
  .mobile-dock .mobile-menu{width:58px!important;height:58px;margin:-22px auto 0;border:2px solid #fffefa;background:linear-gradient(145deg,#ffe783,#f4bd3d);border-radius:50%;color:#6f4726;box-shadow:0 8px 19px rgba(181,119,26,.25)}.mobile-dock .mobile-menu svg{width:23px;height:23px}.mobile-dock .mobile-menu span{position:absolute;bottom:-13px;color:#9a7c6b;font-size:7px}
  .mobile-dot{position:absolute;right:18%;top:7px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:#e28478;color:#fff;border:2px solid #fffefa;display:grid;place-items:center;font-size:6px}
  .cute-page-header{align-items:flex-start;margin-bottom:15px}.page-title-group h1{font-size:25px}.page-title-group p{font-size:9px}.page-actions{margin-left:auto}
  .dashboard-greeting{min-height:0;margin-bottom:14px}.dashboard-greeting h1{font-size:26px}.dashboard-greeting p{font-size:9px}.dashboard-sync{min-width:42px;padding:9px}.dashboard-sync{font-size:0}.dashboard-sync svg{margin:0}
  .dashboard-top-grid,.dashboard-middle-grid{grid-template-columns:1fr}
  .summary-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary-card{min-height:118px}.today-note-card{transform:none;min-height:230px}.note-mascot{right:15px;bottom:10px}
  .favorite-service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.cute-reminder-card{min-height:105px}
  .dashboard-request-row{grid-template-columns:30px 1fr auto;min-height:54px}.dashboard-request-row>span:nth-of-type(2),.dashboard-request-row>span:nth-of-type(3),.dashboard-request-row time{display:none}.dashboard-request-row .pill{grid-column:3}.dashboard-request-row b{font-size:8px}
  .inbox-controls{grid-template-columns:1fr auto}.inbox-controls .filter-button{display:none}.inbox-controls .cute-primary{width:42px;padding:9px;font-size:0}.inbox-controls .cute-primary svg{margin:0}
  .cute-inbox-layout{grid-template-columns:1fr}.cute-request-column{min-height:0}.cute-request-list{max-height:430px}.request-paper{min-height:650px}
  .service-spotlight{grid-template-columns:60px 1fr;padding:17px}.service-spotlight-icon{width:58px;height:58px;border-radius:18px}.service-spotlight-note{grid-column:1/-1;min-height:90px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;text-align:left;align-items:center}.service-spotlight-note b{grid-row:1/3;font-size:25px}.service-spotlight-flower{right:20px}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .table-toolbar{flex-wrap:wrap}.table-toolbar .field-shell:first-child{width:100%;max-width:none}.table-toolbar .right{margin-left:0}
  .wo-list{min-width:0;width:100%;overflow:hidden}.wo-row{width:100%;min-width:0;grid-template-columns:38px 42px minmax(0,1fr);gap:9px;padding:12px;box-sizing:border-box}.wo-row>*{min-width:0}.wo-main{grid-column:3}.wo-main h3,.wo-main p,.wo-main .ticket-id{overflow-wrap:anywhere;word-break:break-word}.wo-progress{grid-column:3;display:grid}.wo-side{grid-column:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:5px;text-align:left}.wo-side .pill,.wo-side .btn{width:auto;display:inline-flex;margin:0}
  .ticket-side{grid-template-columns:1fr}.ticket-banner{align-items:flex-start;flex-wrap:wrap}.ticket-actions{width:100%;margin-left:48px;padding-right:0}
  .kanban-wrap{grid-template-columns:repeat(5,250px)}
  .approval-ticket{grid-template-columns:1fr}.approval-ticket-meta{text-align:left}.approval-ticket-actions{justify-content:flex-end}
  .gate-layout{grid-template-columns:1fr}.chart-grid{grid-template-columns:1fr}.master-location-grid{grid-template-columns:1fr}
  .app-menu{padding:17px;border-radius:24px}.app-menu-grid{grid-template-columns:1fr;gap:8px}.app-menu-grid .nav-item{min-height:69px}.app-menu-head h2{font-size:20px}.sidebar-footer{display:block}.sidebar-footer>small{display:block;text-align:center;margin-top:8px}
  .modal-layer{padding:8px}.modal{max-height:calc(100vh - 16px);border-radius:20px}.modal-head,.modal-body,.modal-foot{padding-left:14px;padding-right:14px}.modal-foot{flex-wrap:wrap}.modal-foot .note{width:100%;max-width:none}
  .auth-shell{grid-template-columns:1fr}.auth-scene{display:none}.auth-form-panel{padding:34px 22px;background:linear-gradient(180deg,#fff5ce 0 170px,#fffdf9 170px)}.auth-form-wrap{padding:23px 19px;border:1.5px solid #e3bd68;border-radius:24px;background:#fffdf9;box-shadow:var(--shadow-md)}.auth-form-brand{margin-bottom:34px}.auth-welcome h1{font-size:25px}
}

@media (max-width:560px){
  .app-header-inner{padding:0 10px}.brand-copy{display:none}.header-actions{margin-left:auto}.top-icon{width:39px;height:39px}.profile-chip .avatar.small{width:34px;height:34px}
  .main-content{padding:15px 10px 92px}
  .cute-page-header{display:block}.page-actions{margin:12px 0 0;justify-content:flex-start}.page-actions .btn{flex:1}.page-title-group h1{font-size:23px}
  .summary-card-grid{gap:7px}.summary-card{min-height:110px;padding:10px}.summary-card strong{font-size:24px}.summary-emoji{width:32px;height:32px;font-size:17px}
  .favorite-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recent-requests-panel{padding:12px}.recent-request-heading h2{font-size:11px}
  .cute-status-tabs{padding-bottom:9px}.cute-status-tabs button{height:29px;padding:0 10px;font-size:8px}
  .cute-request-card{grid-template-columns:20px 34px minmax(0,1fr);min-height:88px}.request-card-icon{width:34px;height:34px}.cute-request-card>.pill{grid-column:3;justify-self:start;margin-top:3px}.request-card-copy strong{font-size:9px}
  .request-paper{padding:18px 14px 12px;min-height:620px}.request-paper>h2{font-size:17px}.paper-field{grid-template-columns:95px 1fr;gap:7px}.request-paper-actions{flex-wrap:wrap}.request-paper-actions .btn{flex:1;min-width:0}.request-paper-actions .paper-process{flex-basis:100%;order:-1}
  .metric-grid{grid-template-columns:1fr}.metric-card{min-height:124px}
  .service-spotlight{grid-template-columns:50px 1fr;padding:14px;gap:11px}.service-spotlight-icon{width:49px;height:49px;border-radius:15px}.service-spotlight-icon svg{width:24px;height:24px}.service-spotlight-copy h2{font-size:18px}.service-spotlight-tags{display:none}
  .data-table th:nth-child(4),.data-table td:nth-child(4),.data-table th:nth-child(5),.data-table td:nth-child(5),.data-table th:nth-child(7),.data-table td:nth-child(7){display:none}
  .info-grid,.source-report-grid{grid-template-columns:1fr}
  .process-track{grid-template-columns:repeat(6,100px);overflow:auto;padding-bottom:5px}
  .manual-code{grid-template-columns:1fr}.manual-code .btn{width:100%}
  .id-template-picker{grid-template-columns:1fr}
  .toast-layer{left:10px;right:10px;bottom:86px}.toast{min-width:0;max-width:none}
  .notification-drawer{right:8px;top:61px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* ===== exact-mockup.css ===== */
/* Pixel-focused reconstruction of the approved butter-yellow mockup. */
:root {
  --mock-bg: #fffaf0;
  --mock-paper: #fffdf8;
  --mock-butter: #fff4ca;
  --mock-butter-2: #ffe49a;
  --mock-line: #efc368;
  --mock-line-soft: #f3ddad;
  --mock-ink: #5a2f1c;
  --mock-muted: #8b6d5b;
  --mock-orange: #e79c11;
  --mock-rose: #f5b29e;
  --mock-blue: #dfeaf9;
  --mock-mint: #dce9bf;
  --mock-shadow: 0 10px 28px rgba(157, 112, 61, .08);
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Nunito", "Trebuchet MS", Arial, sans-serif !important;
  color: var(--mock-ink) !important;
  background: #fff !important;
}
body:not(.auth-mode) { overflow: hidden !important; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.app-shell {
  position: fixed !important;
  inset: 8px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(224, 190, 126, .18) !important;
}
.workspace {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  background: #fff !important;
}
.main-content {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: auto !important;
  background: #fff !important;
  outline: none !important;
}
.workspace-nav { display: none !important; }

/* Dashboard-only top controls. The logo itself is part of the reference left illustration. */
.app-header {
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  z-index: 60 !important;
  height: 88px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}
body:not([data-view="dashboard"]) .app-header { display: none !important; }
body[data-view="dashboard"] .app-header { display: block !important; }
.app-header-inner {
  position: relative !important;
  width: 100% !important;
  max-width: 155.71vh !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: block !important;
}
.brand-home, .header-context, .connection-pill, .menu-launcher { display: none !important; }
.app-header .global-search {
  pointer-events: auto;
  position: absolute !important;
  left: 57.15% !important;
  top: 3.45vh !important;
  width: 29.2% !important;
  height: 34px !important;
  min-width: 270px !important;
  padding: 0 13px !important;
  border: 1px solid var(--mock-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 253, 248, .95) !important;
  box-shadow: none !important;
  color: var(--mock-ink) !important;
}
.app-header .global-search svg {
  order: 2;
  width: 17px !important;
  height: 17px !important;
  color: #6d351b !important;
  stroke-width: 2.2 !important;
}
.app-header .global-search input {
  order: 1;
  padding: 0 4px !important;
  font-size: 11px !important;
  color: var(--mock-ink) !important;
}
.app-header .global-search input::placeholder { color: #8f796b !important; opacity: 1; }
.app-header .global-search kbd { display: none !important; }
.header-actions {
  pointer-events: auto;
  position: absolute !important;
  top: 2.7vh !important;
  right: 3.2% !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.app-header .top-icon {
  width: 35px !important;
  height: 35px !important;
  min-width: 35px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #7a401f !important;
  box-shadow: none !important;
}
.app-header .top-icon svg { width: 22px !important; height: 22px !important; }
.app-header .badge-dot {
  top: -1px !important;
  right: -1px !important;
  width: 17px !important;
  height: 17px !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid var(--mock-bg) !important;
  border-radius: 50% !important;
  background: #ef9d71 !important;
  color: #fff !important;
  font-size: 8px !important;
}
.app-header .profile-chip {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f5cf83 !important;
  box-shadow: inset 0 0 0 2px #fff5d2 !important;
  justify-content: center !important;
}
.app-header .profile-chip > span:last-child { display: none !important; }
.app-header .profile-chip .avatar {
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  background: #f5cf83 !important;
  color: #70401e !important;
  font-size: 11px !important;
}

/* Dashboard */
.mock-dashboard {
  position: relative !important;
  width: 100% !important;
  max-width: 155.71vh !important;
  height: 100% !important;
  min-height: 650px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: var(--mock-bg) !important;
  isolation: isolate;
}
.mock-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 48% 31%, rgba(255,255,255,.82), transparent 42%),
    linear-gradient(110deg, #fffaf0, #fffdf8 54%, #fffaf0);
}
.mock-dashboard .cozy-scene {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 24.45% !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 16px 0 0 16px !important;
  background: url('/assets/pastel-workspace-side.svg') center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}
.mock-dashboard .cozy-scene::before,
.mock-dashboard .cozy-scene::after,
.mock-dashboard .cozy-scene-art,
.mock-dashboard .scene-caption { display: none !important; }
.mock-dashboard .dashboard-board {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
.mock-dashboard .dashboard-greeting {
  position: absolute !important;
  top: 8.2% !important;
  left: 27.2% !important;
  width: 37% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.mock-dashboard .dashboard-greeting h1 {
  margin: 0 0 2px !important;
  font-family: "Patrick Hand", "Comic Neue", "Comfortaa", "Trebuchet MS", sans-serif !important;
  font-size: clamp(28px, 3.05vh, 42px) !important;
  line-height: .98 !important;
  font-weight: 400 !important;
  letter-spacing: .1px !important;
  color: #5b301b !important;
}
.mock-dashboard .dashboard-greeting p {
  margin: 7px 0 0 !important;
  font-size: clamp(9px, 1.15vh, 14px) !important;
  line-height: 1.35 !important;
  color: #694a39 !important;
}
.mock-dashboard .greeting-kicker,
.mock-dashboard .dashboard-sync { display: none !important; }
.mock-dashboard .dashboard-top-grid {
  position: absolute !important;
  left: 24.7% !important;
  top: 20.45% !important;
  width: 72.6% !important;
  height: 31.9% !important;
  display: grid !important;
  grid-template-columns: 68.9% 27.4% !important;
  gap: 3.7% !important;
  margin: 0 !important;
}
.mock-dashboard .dashboard-middle-grid {
  position: absolute !important;
  left: 24.7% !important;
  top: 54.2% !important;
  width: 72.6% !important;
  height: 20.2% !important;
  display: grid !important;
  grid-template-columns: 69.7% 26.6% !important;
  gap: 3.7% !important;
  margin: 0 !important;
}
.mock-dashboard .recent-requests-panel {
  position: absolute !important;
  left: 24.7% !important;
  top: 77.2% !important;
  width: 73.2% !important;
  height: 18.5% !important;
  margin: 0 !important;
  padding: 1.45% 2.05% !important;
  box-sizing: border-box !important;
}
.mock-dashboard .cute-panel,
.mock-dashboard .today-note-card,
.mock-dashboard .cute-reminder-card {
  border: 1px solid var(--mock-line-soft) !important;
  border-radius: 13px !important;
  background: rgba(255, 253, 248, .89) !important;
  box-shadow: 0 7px 20px rgba(142, 94, 45, .045) !important;
}
.mock-dashboard .today-summary {
  position: relative !important;
  height: 100% !important;
  padding: 3.2% 3.1% 2.8% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.mock-dashboard .panel-title,
.mock-dashboard .note-title,
.mock-dashboard .recent-request-heading,
.mock-dashboard .cute-reminder-card > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.mock-dashboard .panel-title > div,
.mock-dashboard .note-title,
.mock-dashboard .recent-request-heading > div,
.mock-dashboard .cute-reminder-card > div {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.mock-dashboard .panel-title h2,
.mock-dashboard .note-title h2,
.mock-dashboard .recent-request-heading h2,
.mock-dashboard .cute-reminder-card h3 {
  margin: 0 !important;
  font-family: "Patrick Hand", "Comic Neue", "Comfortaa", "Trebuchet MS", sans-serif !important;
  font-size: clamp(15px, 1.82vh, 22px) !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  color: #63351f !important;
}
.mock-dashboard .panel-title span,
.mock-dashboard .note-title span,
.mock-dashboard .recent-request-heading span,
.mock-dashboard .cute-reminder-card > div > span {
  color: #edac26 !important;
  font-size: .9em !important;
}
.mock-dashboard .panel-title > small { display: none !important; }
.mock-dashboard .summary-card-grid {
  height: calc(100% - 25px) !important;
  margin-top: 14px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 2.3% !important;
}
.mock-dashboard .summary-card {
  position: relative !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 11% 9% 8% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  border: 1px solid #efdfbd !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,247,225,.86)) !important;
  box-shadow: none !important;
  text-align: left !important;
  overflow: hidden !important;
}
.mock-dashboard .summary-card::after {
  content: "";
  position: absolute;
  right: -15px;
  bottom: -17px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 226, 154, .35);
}
.mock-dashboard .summary-card.sum-process::after { background: rgba(247, 195, 167, .28); }
.mock-dashboard .summary-card.sum-approval::after { background: rgba(248, 185, 193, .25); }
.mock-dashboard .summary-card.sum-done::after { background: rgba(190, 211, 160, .28); }
.mock-dashboard .summary-emoji {
  width: clamp(27px, 3.35vh, 39px) !important;
  height: clamp(27px, 3.35vh, 39px) !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 10% !important;
  border: 1px solid #efc36c !important;
  border-radius: 9px !important;
  background: #fff1c7 !important;
  color: #e59415 !important;
  font-size: 0 !important;
}
.mock-dashboard .sum-process .summary-emoji { background: #ffe5cf !important; }
.mock-dashboard .sum-approval .summary-emoji { background: #ffe2dc !important; }
.mock-dashboard .sum-done .summary-emoji { background: #e8e9ba !important; color: #81933f !important; }
.mock-dashboard .summary-emoji svg { width: 60% !important; height: 60% !important; stroke-width: 1.8 !important; }
.mock-dashboard .summary-card small {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 0 5px !important;
  font-size: clamp(7px, .9vh, 11px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: #624431 !important;
  white-space: nowrap !important;
}
.mock-dashboard .summary-card strong {
  position: relative !important;
  z-index: 1 !important;
  font-family: "Patrick Hand", "Comic Neue", "Comfortaa", "Trebuchet MS", sans-serif !important;
  font-size: clamp(24px, 3.35vh, 40px) !important;
  line-height: .95 !important;
  font-weight: 400 !important;
  color: #5b2e19 !important;
}
.mock-dashboard .summary-card em {
  position: relative !important;
  z-index: 1 !important;
  margin-top: auto !important;
  font-size: clamp(7px, .82vh, 10px) !important;
  line-height: 1 !important;
  font-style: normal !important;
  color: #8d6954 !important;
}
.mock-dashboard .summary-heart {
  position: absolute !important;
  right: -7px !important;
  top: -17px !important;
  color: #f2a28d !important;
  font-family: "Patrick Hand", "Comic Neue", "Comfortaa", "Trebuchet MS", sans-serif !important;
  font-size: clamp(25px, 3.2vh, 38px) !important;
  transform: rotate(15deg) !important;
}
.mock-dashboard .today-note-card {
  position: relative !important;
  height: 100% !important;
  padding: 8% 8% 7% !important;
  box-sizing: border-box !important;
  transform: rotate(-1.2deg) !important;
  overflow: visible !important;
}
.mock-dashboard .note-tape-top {
  position: absolute !important;
  top: -7px !important;
  left: 38% !important;
  width: 35% !important;
  height: 14px !important;
  background: rgba(250, 220, 143, .55) !important;
  transform: rotate(1deg) !important;
}
.mock-dashboard .note-task-list { margin-top: 13% !important; }
.mock-dashboard .note-task {
  height: 25% !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  border-bottom: 1px solid #ecdcb9 !important;
}
.mock-dashboard .note-checkbox {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #d5b57b !important;
  border-radius: 2px !important;
  background: #fff !important;
  color: #91a45c !important;
  font-size: 10px !important;
}
.mock-dashboard .note-task b {
  font-size: clamp(8px, .96vh, 12px) !important;
  font-weight: 600 !important;
  color: #5f4333 !important;
}
.mock-dashboard .note-mascot {
  position: absolute !important;
  right: -4px !important;
  bottom: -5px !important;
  width: 42% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 0 0 12px 0 !important;
}
.mock-dashboard .favorite-services {
  height: 100% !important;
  padding: 3.8% 3.1% !important;
  box-sizing: border-box !important;
}
.mock-dashboard .panel-title.compact { margin-bottom: 3.5% !important; }
.mock-dashboard .favorite-service-grid {
  height: calc(100% - 28px) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 2% !important;
}
.mock-dashboard .favorite-service {
  min-width: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mock-dashboard .favorite-service > span {
  width: clamp(30px, 4vh, 48px) !important;
  height: clamp(30px, 4vh, 48px) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  color: #e89913 !important;
}
.mock-dashboard .favorite-service.service-peach > span { background: #fff0d9 !important; }
.mock-dashboard .favorite-service.service-yellow > span { background: #fff2c5 !important; }
.mock-dashboard .favorite-service.service-pink > span { background: #ffe0d8 !important; }
.mock-dashboard .favorite-service.service-gold > span { background: #ffe4a4 !important; }
.mock-dashboard .favorite-service.service-mint > span { background: #eef0d1 !important; }
.mock-dashboard .favorite-service svg { width: 58% !important; height: 58% !important; stroke-width: 1.8 !important; }
.mock-dashboard .favorite-service b {
  font-size: clamp(7px, .92vh, 11px) !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: #5a3b2b !important;
  white-space: nowrap !important;
}
.mock-dashboard .favorite-service small { display: none !important; }
.mock-dashboard .cute-reminder-card {
  align-self: end !important;
  position: relative !important;
  height: 66% !important;
  padding: 8% 8% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.mock-dashboard .cute-reminder-card > b {
  display: block !important;
  margin-top: 10% !important;
  font-size: clamp(8px, .96vh, 12px) !important;
  font-weight: 700 !important;
}
.mock-dashboard .cute-reminder-card > small {
  display: block !important;
  margin-top: 3px !important;
  font-size: clamp(7px, .78vh, 9px) !important;
  color: #927667 !important;
}
.mock-dashboard .reminder-calendar {
  position: absolute !important;
  right: 7% !important;
  bottom: 15% !important;
  width: clamp(38px, 5.1vh, 60px) !important;
  height: clamp(38px, 5.1vh, 60px) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: #fff2c5 !important;
  color: #d98615 !important;
  font-size: 0 !important;
}
.mock-dashboard .reminder-calendar svg { width: 70% !important; height: 70% !important; }
.mock-dashboard .recent-request-heading { height: 24% !important; }
.mock-dashboard .tiny-button {
  min-height: 0 !important;
  height: 24px !important;
  padding: 0 12px !important;
  border: 1px solid var(--mock-line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #a56620 !important;
  font-size: 8px !important;
}
.mock-dashboard .dashboard-request-list {
  height: 76% !important;
  display: flex !important;
  flex-direction: column !important;
}
.mock-dashboard .dashboard-request-row {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  padding: 0 1% !important;
  display: grid !important;
  grid-template-columns: 18% 24% 22% 17% 19% !important;
  align-items: center !important;
  gap: 0 !important;
  border: 0 !important;
  border-top: 1px solid #efe1c5 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  color: #5e4637 !important;
}
.mock-dashboard .dashboard-request-row:first-child { border-top: 0 !important; }
.mock-dashboard .dashboard-request-row b,
.mock-dashboard .dashboard-request-row span,
.mock-dashboard .dashboard-request-row time {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(7px, .77vh, 9px) !important;
}
.mock-dashboard .dashboard-request-row .pill {
  justify-self: start !important;
  min-width: 54px !important;
  padding: 3px 9px !important;
  font-size: clamp(6px, .69vh, 8px) !important;
}
.mock-dashboard .dashboard-request-row time { text-align: right !important; }

/* Shared compact mockup pages */
body[data-view="inbox"] .workspace,
body[data-view="requestDetail"] .workspace { background: #fff !important; }
.mock-inbox-page {
  width: 100% !important;
  max-width: 103.63vh !important;
  height: 100% !important;
  min-height: 650px !important;
  margin: 0 auto !important;
  padding: 5.7% 4.3% 2.3% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #fffaf0, #fffdf9 62%, #fff9ed) !important;
}
.mock-inbox-page .cute-page-header {
  height: 8.2% !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.mock-inbox-page .cute-page-header .eyebrow,
.mock-inbox-page .page-actions { display: none !important; }
.mock-inbox-page .cute-page-header h1 {
  margin: 0 !important;
  font-family: "Patrick Hand", "Comic Neue", "Comfortaa", "Trebuchet MS", sans-serif !important;
  font-size: clamp(27px, 3.25vh, 39px) !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  color: #5b301c !important;
}
.mock-inbox-page .cute-page-header p {
  margin: 6px 0 0 !important;
  font-size: clamp(8px, 1vh, 12px) !important;
  color: #6d5344 !important;
}
.mock-inbox-controls {
  height: 7.2% !important;
  min-height: 44px !important;
  margin: 1.2% 0 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 2.2% !important;
}
.mock-inbox-controls .inbox-search {
  height: 35px !important;
  padding: 0 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid var(--mock-line) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.7) !important;
  box-shadow: none !important;
}
.mock-inbox-controls .inbox-search svg { width: 16px !important; height: 16px !important; }
.mock-inbox-controls .inbox-search input {
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  font-size: 9px !important;
  color: #5c402f !important;
}
.mock-inbox-controls .btn {
  height: 35px !important;
  min-height: 35px !important;
  padding: 0 18px !important;
  border: 1px solid var(--mock-line-soft) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: none !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}
.mock-inbox-controls .cute-primary {
  border-color: #edbd4b !important;
  background: linear-gradient(#ffe699, #ffdb6d) !important;
  color: #5a351f !important;
}
.mock-inbox-controls .cute-primary svg { width: 14px !important; height: 14px !important; }
.mock-status-tabs {
  height: 6.4% !important;
  min-height: 38px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 2.2% !important;
  border: 0 !important;
  overflow: visible !important;
}
.mock-status-tabs button {
  height: 25px !important;
  padding: 0 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  border: 1px solid #f0dfbd !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.58) !important;
  box-shadow: none !important;
  color: #6f503e !important;
  font-size: 8px !important;
  white-space: nowrap !important;
}
.mock-status-tabs button.active {
  border-color: #f0d08b !important;
  background: #fff7dc !important;
  color: #5c361f !important;
}
.mock-status-tabs button b {
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #f6e5c2 !important;
  color: #80552d !important;
  font-size: 8px !important;
}
.mock-inbox-layout {
  height: 72.7% !important;
  min-height: 430px !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 36.7% 60.3% !important;
  gap: 3% !important;
  align-items: stretch !important;
}
.mock-request-column {
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mock-request-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  overflow-y: auto !important;
  padding: 0 5px 0 0 !important;
}
.mock-request-card {
  position: relative !important;
  flex: 1 0 76px !important;
  min-height: 76px !important;
  max-height: 92px !important;
  width: 100% !important;
  padding: 9px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  border: 1px solid #eee0c6 !important;
  border-radius: 5px !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: 0 4px 12px rgba(133,93,54,.03) !important;
  text-align: left !important;
  overflow: hidden !important;
}
.mock-request-card.active {
  border-color: #f0d495 !important;
  background: linear-gradient(90deg, #fff5cf 0%, #fff8df 92%, #ffe7a2 92%) !important;
}
.mock-request-card .mock-request-top {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.mock-request-card .mock-request-top > b { font-size: 8px !important; font-weight: 700 !important; color: #5d3c2b !important; }
.mock-request-card > strong { margin-top: 3px !important; font-size: 9px !important; font-weight: 700 !important; color: #5a3321 !important; }
.mock-request-card > span:not(.mock-request-top),
.mock-request-card > small,
.mock-request-card > time { font-size: 7px !important; line-height: 1.3 !important; color: #705544 !important; }
.mock-request-card .pill {
  min-width: 0 !important;
  height: 17px !important;
  padding: 0 8px !important;
  font-size: 6px !important;
}
.mock-request-card > time { margin-top: 2px !important; }
.mock-request-column .cute-pagination {
  flex: 0 0 36px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 4px !important;
}
.cute-pagination button,
.cute-pagination span {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #795841 !important;
  font-size: 8px !important;
}
.cute-pagination button.active { background: #fff1c5 !important; border: 1px solid #efd18e !important; }
.mock-inbox-layout .request-paper {
  position: relative !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 7.2% 8.2% 8.5% !important;
  box-sizing: border-box !important;
  border: 1px solid #efcc82 !important;
  border-radius: 12px 12px 15px 15px !important;
  background: rgba(255,253,247,.92) !important;
  box-shadow: 0 8px 20px rgba(142,98,48,.045) !important;
  transform: rotate(.15deg) !important;
  overflow: visible !important;
}
.mock-inbox-layout .request-paper::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -7px;
  height: 13px;
  background: radial-gradient(circle at 8px 13px, transparent 8px, #fffdf7 8.5px) 0 0 / 24px 13px repeat-x;
  pointer-events: none;
}
.request-paper .paper-clip {
  position: absolute !important;
  left: 5px !important;
  top: -16px !important;
  color: #bc825b !important;
  font-family: "Patrick Hand", "Comic Neue", "Comfortaa", "Trebuchet MS", sans-serif !important;
  font-size: 34px !important;
  transform: rotate(-25deg) !important;
}
.request-paper .paper-tape {
  position: absolute !important;
  right: -7px !important;
  top: -12px !important;
  width: 19px !important;
  height: 49px !important;
  border: 1px solid #e7a06e !important;
  background: rgba(255,194,154,.68) !important;
  transform: rotate(18deg) !important;
}
.request-paper .paper-doodle {
  position: absolute !important;
  left: 10px !important;
  bottom: 7px !important;
  color: #efb33d !important;
  font-size: 20px !important;
}
.request-paper-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 7% !important;
}
.request-paper-id {
  min-height: 0 !important;
  padding: 7px 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff3c8 !important;
  color: #5e3925 !important;
  font-size: 10px !important;
  box-shadow: none !important;
}
.request-paper-id .paper-service-icon { display: none !important; }
.request-paper-head > .pill {
  height: 18px !important;
  padding: 0 10px !important;
  font-size: 6px !important;
}
.paper-info-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
.paper-field {
  min-height: 28px !important;
  display: grid !important;
  grid-template-columns: 43% 57% !important;
  align-items: center !important;
  border: 0 !important;
  background: transparent !important;
}
.paper-field span,
.paper-description > span {
  color: #df9015 !important;
  font-size: clamp(7px, .86vh, 10px) !important;
  font-weight: 700 !important;
}
.paper-field b {
  font-size: clamp(7px, .88vh, 10px) !important;
  font-weight: 600 !important;
  color: #4f3628 !important;
}
.paper-description { margin-top: 3% !important; }
.paper-description p {
  margin: 5px 0 0 !important;
  font-size: clamp(7px, .83vh, 9px) !important;
  line-height: 1.45 !important;
  color: #594235 !important;
}
.paper-lampiran { margin-top: 5% !important; }
.paper-attachment,
.paper-no-attachment {
  margin-top: 6px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  border: 0 !important;
  background: transparent !important;
  color: #5c6180 !important;
  font-size: 8px !important;
}
.paper-attachment svg,
.paper-no-attachment svg { width: 12px !important; height: 12px !important; }
.request-paper-actions {
  position: absolute !important;
  left: 8.2% !important;
  right: 8.2% !important;
  bottom: 4% !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.request-paper-actions .btn {
  height: 32px !important;
  min-height: 32px !important;
  min-width: 90px !important;
  padding: 0 17px !important;
  border-radius: 10px !important;
  font-size: 8px !important;
  box-shadow: none !important;
}
.request-paper-actions .paper-reject {
  border: 1px solid #ee8f7a !important;
  background: transparent !important;
  color: #e36c57 !important;
}
.request-paper-actions .paper-process {
  border: 1px solid #e8ad2d !important;
  background: linear-gradient(#ffe28b, #ffd45d) !important;
  color: #59351f !important;
}

/* Standalone request detail from the lower-left reference panel. */
.standalone-request-page {
  position: relative !important;
  width: 100% !important;
  max-width: 130.48vh !important;
  height: 100% !important;
  min-height: 650px !important;
  margin: 0 auto !important;
  padding: 3.2% 6% 5% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #fffaf0, #fffdf8) !important;
}
.standalone-request-page > h1 {
  margin: 0 !important;
  font-family: "Patrick Hand", "Comic Neue", "Comfortaa", "Trebuchet MS", sans-serif !important;
  font-size: clamp(25px, 3vh, 38px) !important;
  font-weight: 400 !important;
  color: #5c321e !important;
}
.standalone-breadcrumb {
  margin-bottom: 7px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #b28152 !important;
  font-size: 8px !important;
}
.standalone-breadcrumb button {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #9d7555 !important;
  font-size: inherit !important;
}
.standalone-detail-layout {
  height: 82% !important;
  margin-top: 2.8% !important;
  display: grid !important;
  grid-template-columns: 59% 38% !important;
  gap: 3% !important;
}
.standalone-paper,
.standalone-history {
  position: relative !important;
  height: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid var(--mock-line-soft) !important;
  border-radius: 12px !important;
  background: rgba(255,253,248,.9) !important;
  box-shadow: 0 8px 20px rgba(134,91,50,.045) !important;
}
.standalone-paper { padding: 7% 6% 10% !important; }
.standalone-paper-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 5% !important;
}
.standalone-paper-head .request-paper-id { padding: 7px 13px !important; }
.standalone-fields { display: grid !important; grid-template-columns: 1fr !important; }
.standalone-field {
  min-height: 29px !important;
  display: grid !important;
  grid-template-columns: 44% 56% !important;
  align-items: center !important;
}
.standalone-field span,
.standalone-description span { color: #df8e13 !important; font-size: 8px !important; font-weight: 700 !important; }
.standalone-field b { color: #51392b !important; font-size: 8px !important; font-weight: 600 !important; }
.standalone-description { margin-top: 4% !important; }
.standalone-description p { margin: 5px 0 0 !important; font-size: 8px !important; line-height: 1.45 !important; }
.standalone-actions {
  position: absolute !important;
  left: 6% !important;
  right: 6% !important;
  bottom: 4% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 8px !important;
}
.standalone-actions .btn { height: 34px !important; min-height: 34px !important; border-radius: 10px !important; font-size: 8px !important; box-shadow: none !important; }
.standalone-actions .primary { background: linear-gradient(#ffe38e, #ffd461) !important; border-color: #e9b039 !important; color: #5b3923 !important; }
.standalone-actions .danger { background: transparent !important; border-color: #ee907f !important; color: #e46b58 !important; }
.standalone-history { padding: 8% 10% !important; }
.standalone-history h2 {
  margin: 0 0 11% !important;
  font-family: "Patrick Hand", "Comic Neue", "Comfortaa", "Trebuchet MS", sans-serif !important;
  font-size: clamp(18px, 2.1vh, 25px) !important;
  font-weight: 400 !important;
}
.standalone-history h2 span { color: #efad25 !important; }
.standalone-history-row {
  position: relative !important;
  min-height: 22% !important;
  padding-left: 25px !important;
}
.standalone-history-row::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: -5px;
  width: 1px;
  background: #ddbd88;
}
.standalone-history-row:last-child::before { display: none; }
.standalone-history-row > i {
  position: absolute !important;
  left: 1px !important;
  top: 4px !important;
  width: 10px !important;
  height: 10px !important;
  border: 2px solid #75411e !important;
  border-radius: 50% !important;
  background: #fff9e9 !important;
}
.standalone-history-row.current > i { border-color: #d2931c !important; box-shadow: inset 0 0 0 2px #fff9e9 !important; background: #f4bd43 !important; }
.standalone-history-row time { display: block !important; margin-bottom: 5px !important; font-size: 7px !important; color: #765b4a !important; }
.standalone-history-row b { display: block !important; font-size: 8px !important; color: #50382a !important; }
.standalone-history-row span { display: block !important; margin-top: 2px !important; font-size: 7px !important; color: #756052 !important; }
.detail-flower { position: absolute !important; left: -42px !important; bottom: -10px !important; font-size: 55px !important; }
.detail-clip { position: absolute !important; right: 8px !important; top: -21px !important; color: #efad4b !important; font-size: 35px !important; transform: rotate(20deg) !important; }

/* Login, matching the lower-middle reference panel. */
body.auth-mode {
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  background: #fff !important;
}
.auth-mode .loading-screen {
  position: fixed !important;
  inset: 8px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #fff !important;
}
.exact-auth-shell {
  width: 100% !important;
  max-width: 132.41vh !important;
  height: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-columns: 46% 54% !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: var(--mock-bg) !important;
  box-shadow: none !important;
}
.exact-auth-scene {
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  background: url('/assets/pastel-login-scene.svg') center / 100% 100% no-repeat !important;
  overflow: hidden !important;
}
.exact-auth-panel {
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(125deg, #fffdf8, #fffaf0) !important;
}
.exact-auth-wrap {
  width: 67% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.exact-auth-brand {
  margin: 0 0 15% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.exact-auth-brand .auth-brand-flower {
  width: 43px !important;
  height: 43px !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid #f0ad1d !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #f0ad1d !important;
  font-size: 26px !important;
}
.exact-auth-brand strong {
  display: block !important;
  font-size: clamp(15px, 1.8vh, 22px) !important;
  line-height: 1 !important;
  letter-spacing: .5px !important;
  color: #5b321d !important;
}
.exact-auth-brand small {
  display: block !important;
  margin-top: 4px !important;
  font-size: clamp(7px, .8vh, 10px) !important;
  letter-spacing: .6px !important;
  color: #765641 !important;
}
.exact-auth-welcome { margin-bottom: 7% !important; }
.exact-auth-welcome h1 {
  margin: 0 !important;
  font-family: "Patrick Hand", "Comic Neue", "Comfortaa", "Trebuchet MS", sans-serif !important;
  font-size: clamp(24px, 3vh, 38px) !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  color: #5b301d !important;
}
.exact-auth-welcome p {
  margin: 7px 0 0 !important;
  font-size: clamp(8px, 1vh, 12px) !important;
  color: #775b49 !important;
}
.exact-login-form { display: block !important; }
.exact-login-form .auth-field { margin-top: 4% !important; }
.exact-login-form .auth-field > span {
  display: block !important;
  margin-bottom: 7px !important;
  color: #d88c16 !important;
  font-size: clamp(8px, .9vh, 11px) !important;
  font-weight: 700 !important;
}
.exact-login-form .auth-input-wrap {
  height: 42px !important;
  padding: 0 !important;
  border: 1px solid #efe0c5 !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.75) !important;
  box-shadow: none !important;
}
.exact-login-form .auth-input-wrap > span { display: none !important; }
.exact-login-form .input {
  width: 100% !important;
  height: 100% !important;
  padding: 0 13px !important;
  border: 0 !important;
  background: transparent !important;
  color: #5c4435 !important;
  font-size: 9px !important;
  box-shadow: none !important;
}
.exact-login-form .password-toggle {
  width: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #8d705e !important;
  font-size: 13px !important;
}
.exact-login-form .auth-options {
  margin: 5% 0 7% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 8px !important;
  color: #6d5140 !important;
}
.exact-login-form .auth-options label { display: flex !important; align-items: center !important; gap: 6px !important; }
.exact-login-form .auth-options input { accent-color: #efb135; }
.exact-login-form .auth-options button {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #6d5140 !important;
  font-size: 8px !important;
}
.exact-login-form .login-submit {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  border: 1px solid #e9ad2d !important;
  border-radius: 9px !important;
  background: linear-gradient(#ffe38e, #ffd35b) !important;
  box-shadow: none !important;
  color: #58341e !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}
.exact-auth-wrap .auth-footnote {
  display: block !important;
  margin-top: 13% !important;
  text-align: center !important;
  color: #7a6557 !important;
  font-size: 7px !important;
}
.exact-auth-wrap .auth-error { margin-top: 10px !important; font-size: 9px !important; }

/* Global components on the remaining screens retain the same visual system. */
body:not([data-view="dashboard"]):not([data-view="inbox"]):not([data-view="requestDetail"]) .main-content {
  padding: 36px !important;
  box-sizing: border-box !important;
  background: var(--mock-bg) !important;
}
body:not([data-view="dashboard"]):not([data-view="inbox"]):not([data-view="requestDetail"]) .card,
body:not([data-view="dashboard"]):not([data-view="inbox"]):not([data-view="requestDetail"]) .content-card,
.modal {
  border: 1px solid var(--mock-line-soft) !important;
  border-radius: 14px !important;
  background: rgba(255,253,248,.92) !important;
  box-shadow: var(--mock-shadow) !important;
}
.cute-page-header h1,
.card-title h3,
.modal h2 { font-family: "Patrick Hand", "Comic Neue", "Comfortaa", "Trebuchet MS", sans-serif !important; color: var(--mock-ink) !important; }
.btn.primary { background: linear-gradient(#ffe38e, #ffd35b) !important; border-color: #e9ad2d !important; color: #58341e !important; }
.pill { border-radius: 999px !important; }

/* Desktop launcher. It is not a sidebar: it opens as a centered app palette. */
.app-menu {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(760px, calc(100vw - 48px)) !important;
  max-height: min(680px, calc(100vh - 48px)) !important;
  padding: 26px !important;
  border: 1px solid var(--mock-line-soft) !important;
  border-radius: 22px !important;
  background: rgba(255, 252, 242, .98) !important;
  box-shadow: 0 30px 90px rgba(95, 57, 28, .22) !important;
  transform: translate(-50%, -46%) scale(.96) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: auto !important;
  z-index: 1000 !important;
}
body.sidebar-open .app-menu {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.sidebar-scrim {
  position: fixed !important;
  inset: 0 !important;
  z-index: 990 !important;
  background: rgba(83, 49, 27, .18) !important;
  backdrop-filter: blur(3px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
body.sidebar-open .sidebar-scrim { opacity: 1 !important; visibility: visible !important; }
.app-menu-grid { grid-template-columns: repeat(3, 1fr) !important; }
.mobile-service-screen { display: none !important; }
.mobile-dock { display: none !important; }

@media (max-width: 900px) {
  .app-shell { inset: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  body:not(.auth-mode) { overflow: hidden !important; }
  .app-header, .workspace-nav { display: none !important; }
  .main-content { padding-bottom: 72px !important; box-sizing: border-box !important; }
  .mock-dashboard {
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    height: auto !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
    background: linear-gradient(#fffaf0, #fffdf9) !important;
  }
  .mock-dashboard .cozy-scene { display: none !important; }
  .mock-dashboard .dashboard-board {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: calc(100vh - 72px) !important;
    padding: 48px 16px 28px !important;
    box-sizing: border-box !important;
  }
  .mock-dashboard .dashboard-greeting {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    padding-right: 50px !important;
    box-sizing: border-box !important;
  }
  .mock-dashboard .dashboard-greeting::after {
    content: "☺";
    position: absolute;
    right: 2px;
    top: -4px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f3cb7c;
    color: #653b20;
    font-size: 18px;
  }
  .mock-dashboard .dashboard-greeting::before {
    content: "9:41";
    position: fixed;
    top: 10px;
    left: 17px;
    z-index: 20;
    color: #5b3d2b;
    font-size: 10px;
    font-weight: 800;
  }
  .mock-dashboard .dashboard-greeting h1 { font-size: 27px !important; }
  .mock-dashboard .dashboard-greeting p { margin-top: 3px !important; font-size: 9px !important; }
  .mock-dashboard .dashboard-top-grid,
  .mock-dashboard .dashboard-middle-grid,
  .mock-dashboard .recent-requests-panel {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 20px !important;
    display: block !important;
  }
  .mock-dashboard .today-summary {
    height: auto !important;
    padding: 13px !important;
    border-radius: 13px !important;
  }
  .mock-dashboard .panel-title h2 { font-size: 17px !important; }
  .mock-dashboard .summary-card-grid {
    height: auto !important;
    margin-top: 12px !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .mock-dashboard .summary-card {
    min-height: 78px !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: 34px 1fr auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 7px !important;
    align-items: center !important;
  }
  .mock-dashboard .summary-emoji {
    grid-row: 1 / 3 !important;
    width: 31px !important;
    height: 31px !important;
    margin: 0 !important;
  }
  .mock-dashboard .summary-card small { grid-column: 2 !important; margin: 0 !important; font-size: 7px !important; }
  .mock-dashboard .summary-card strong { grid-column: 3 !important; grid-row: 1 / 3 !important; font-size: 27px !important; }
  .mock-dashboard .summary-card em { grid-column: 2 !important; margin: 0 !important; font-size: 7px !important; }
  .mock-dashboard .today-note-card,
  .mock-dashboard .dashboard-middle-grid { display: none !important; }
  .mock-dashboard .recent-requests-panel {
    padding: 13px !important;
    border-radius: 13px !important;
  }
  .mock-dashboard .recent-request-heading { height: auto !important; margin-bottom: 9px !important; }
  .mock-dashboard .recent-request-heading h2 { font-size: 17px !important; }
  .mock-dashboard .dashboard-request-list { height: auto !important; gap: 7px !important; }
  .mock-dashboard .dashboard-request-row {
    min-height: 58px !important;
    padding: 8px !important;
    grid-template-columns: 28px 1fr auto !important;
    grid-template-rows: auto auto !important;
    border: 1px solid #efdfbd !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.72) !important;
  }
  .mock-dashboard .dashboard-request-row::before {
    content: "▤";
    grid-row: 1 / 3;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #fff0c5;
    color: #e49915;
    font-size: 13px;
  }
  .mock-dashboard .dashboard-request-row b { grid-column: 2 !important; font-size: 8px !important; }
  .mock-dashboard .dashboard-request-row > span:not(.pill) { grid-column: 2 !important; font-size: 8px !important; }
  .mock-dashboard .dashboard-request-row > span:nth-of-type(2) { display: none !important; }
  .mock-dashboard .dashboard-request-row .pill { grid-column: 3 !important; grid-row: 1 / 3 !important; min-width: 48px !important; }
  .mock-dashboard .dashboard-request-row time { display: none !important; }

  .mobile-dock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 700 !important;
    height: 64px !important;
    padding: 5px 12px 6px !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: end !important;
    border-top: 1px solid #f1d99e !important;
    background: rgba(255,253,247,.97) !important;
    box-shadow: 0 -5px 20px rgba(102,68,38,.07) !important;
  }
  .mobile-dock .nav-item {
    position: relative !important;
    height: 48px !important;
    padding: 3px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    border: 0 !important;
    background: transparent !important;
    color: #81634f !important;
    font-size: 7px !important;
  }
  .mobile-dock .nav-item svg { width: 17px !important; height: 17px !important; }
  .mobile-dock .nav-item.active { color: #d88712 !important; }
  .mobile-dock .mobile-menu {
    align-self: start !important;
    justify-self: center !important;
    width: 48px !important;
    height: 48px !important;
    margin-top: -16px !important;
    display: grid !important;
    place-items: center !important;
    border: 3px solid #fffdf7 !important;
    border-radius: 50% !important;
    background: linear-gradient(#ffe586, #ffc94c) !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(209,143,23,.24) !important;
  }
  .mobile-dock .mobile-menu svg { width: 22px !important; height: 22px !important; }
  .mobile-dock .mobile-menu span { display: none !important; }
  .mobile-dot { position: absolute !important; top: 0 !important; right: 22% !important; width: 13px !important; height: 13px !important; display: grid !important; place-items: center !important; border-radius: 50% !important; background: #ef9f72 !important; color: #fff !important; font-size: 6px !important; }

  /* Mobile service screen: exact two-column menu with the mascot at the bottom. */
  .app-menu {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fffaf0 !important;
    transform: translateY(100%) !important;
    opacity: 1 !important;
    visibility: hidden !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  body.sidebar-open .app-menu { transform: translateY(0) !important; visibility: visible !important; }
  .app-menu > .app-menu-head,
  .app-menu > .app-menu-grid,
  .app-menu > .menu-source-note,
  .app-menu > .sidebar-footer { display: none !important; }
  .mobile-service-screen {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    padding: 8px 16px 64px !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: hidden !important;
    background: linear-gradient(#fffaf0, #fffdf8) !important;
  }
  .mobile-service-status { display: flex !important; justify-content: space-between !important; color: #5e4534 !important; font-size: 9px !important; font-weight: 800 !important; }
  .mobile-service-head { margin-top: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  .mobile-service-head h1 { margin: 0 !important; font-family: "Patrick Hand", "Comic Neue", "Comfortaa", "Trebuchet MS", sans-serif !important; font-size: 26px !important; font-weight: 400 !important; }
  .mobile-service-avatar { position: absolute !important; right: 16px !important; top: 29px !important; width: 30px !important; height: 30px !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 50% !important; background: #f3cd7e !important; color: #70411f !important; }
  .mobile-service-grid {
    margin-top: 27px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .mobile-service-card {
    aspect-ratio: 1.03 !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border: 1px solid #efddbb !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.68) !important;
    box-shadow: 0 6px 15px rgba(130,89,47,.035) !important;
  }
  .mobile-service-card > span { width: 42px !important; height: 42px !important; display: grid !important; place-items: center !important; border-radius: 11px !important; color: #e39213 !important; }
  .mobile-service-card > span.rose { background: #ffe1d7 !important; }
  .mobile-service-card > span.yellow { background: #fff0bd !important; }
  .mobile-service-card > span.peach { background: #ffe6d2 !important; }
  .mobile-service-card > span.gold { background: #ffe29a !important; }
  .mobile-service-card > span.mint { background: #eef0cc !important; }
  .mobile-service-card svg { width: 25px !important; height: 25px !important; }
  .mobile-service-card b { font-size: 9px !important; font-weight: 700 !important; }
  .mobile-service-art {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 63px !important;
    height: 142px !important;
    background: url('/assets/pastel-mobile-garden.svg') center bottom / 100% 100% no-repeat !important;
  }
  .sidebar-scrim { display: none !important; }

  .mock-inbox-page,
  .standalone-request-page {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 64px) !important;
    height: auto !important;
    padding: 46px 14px 22px !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
  }
  .mock-inbox-page .cute-page-header { height: auto !important; min-height: 0 !important; }
  .mock-inbox-controls { height: auto !important; grid-template-columns: 1fr auto !important; margin-top: 18px !important; }
  .mock-inbox-controls .cute-primary { display: none !important; }
  .mock-status-tabs { height: auto !important; margin: 12px 0 !important; overflow-x: auto !important; justify-content: flex-start !important; }
  .mock-inbox-layout { height: auto !important; min-height: 0 !important; display: block !important; }
  .mock-request-list { max-height: none !important; overflow: visible !important; }
  .mock-request-card { flex: 0 0 82px !important; max-height: none !important; }
  .mock-request-column .cute-pagination { margin: 10px 0 !important; }
  .mock-inbox-layout .request-paper { display: none !important; }
  .standalone-detail-layout { height: auto !important; display: block !important; }
  .standalone-paper { min-height: 520px !important; }
  .standalone-history { min-height: 350px !important; margin-top: 14px !important; }

  .exact-auth-shell {
    max-width: none !important;
    grid-template-columns: 1fr !important;
  }
  .exact-auth-scene { display: none !important; }
  .exact-auth-panel { padding: 24px !important; box-sizing: border-box !important; }
  .exact-auth-wrap { width: min(100%, 360px) !important; }
}

@media (max-width: 430px) {
  .mock-dashboard .dashboard-board { padding-left: 14px !important; padding-right: 14px !important; }
  .mock-dashboard .summary-card { min-height: 74px !important; }
  .mobile-service-grid { margin-left: 4px !important; margin-right: 4px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Final alignment pass against the approved reference. */
.app-header {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}
.app-header::before,
.app-header::after { display: none !important; }
.app-header-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.app-header .global-search { top: 4.55vh !important; }
.header-actions { top: 3.85vh !important; }
.mock-dashboard .dashboard-greeting { top: 9.1% !important; z-index: 70 !important; }
.mock-dashboard .note-mascot { right: -3px !important; bottom: -3px !important; width: 39% !important; }
.mock-inbox-layout { grid-template-columns: 40.1% 56.4% !important; gap: 3.5% !important; }
.detail-flower {
  left: -54px !important;
  bottom: -12px !important;
  width: 70px !important;
  height: 132px !important;
  font-size: 0 !important;
  background: url('/assets/pastel-tulip.svg') center / contain no-repeat !important;
}
@media (max-width: 900px) {
  body[data-view="dashboard"] .app-header { display: none !important; }
  .mobile-service-art {
    height: 106px !important;
    background-image: url('/assets/pastel-mobile-garden.svg') !important;
  }
}
@media (max-width: 900px) {
  .mock-dashboard .dashboard-greeting {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
  }
  .mock-dashboard .dashboard-top-grid { margin-top: 18px !important; }
  .mock-dashboard .dashboard-request-row .pill { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
}
@media (min-width: 901px) {
  .mock-dashboard .dashboard-greeting { left: 28.22% !important; top: 9.34% !important; }
  .mock-dashboard .dashboard-top-grid {
    left: 25.56% !important;
    top: 21.28% !important;
    width: 71.67% !important;
    height: 31.66% !important;
    grid-template-columns: 69.15% 27.13% !important;
    gap: 3.72% !important;
  }
  .mock-dashboard .today-note-card {
    top: -3.3% !important;
    height: 110% !important;
  }
  .mock-dashboard .dashboard-middle-grid {
    left: 25.56% !important;
    top: 55.36% !important;
    width: 71.67% !important;
    height: 20.42% !important;
    grid-template-columns: 69.92% 27.13% !important;
    gap: 2.95% !important;
  }
  .mock-dashboard .cute-reminder-card {
    align-self: start !important;
    margin-top: 21% !important;
    height: 65% !important;
  }
  .mock-dashboard .recent-requests-panel {
    left: 25.56% !important;
    top: 78.2% !important;
    width: 73% !important;
    height: 18% !important;
  }
}
@media (max-width: 900px) {
  .mock-dashboard .dashboard-greeting::after {
    content: "" !important;
    background: url('/assets/pastel-brand-flower.svg') center / cover no-repeat !important;
    box-shadow: 0 3px 8px rgba(109,73,41,.08) !important;
  }
}
@media (max-width: 900px) {
  .mobile-service-avatar {
    font-size: 0 !important;
    background: url('/assets/pastel-brand-flower.svg') center / cover no-repeat !important;
  }
}

/* Functional navigation: every screen exposes the same app launcher without
   bringing back the old permanent sidebar. */
.floating-app-launcher {
  position: fixed !important;
  left: 22px !important;
  top: 22px !important;
  z-index: 850 !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid #efc368 !important;
  border-radius: 13px !important;
  background: rgba(255,253,248,.96) !important;
  color: #d98912 !important;
  box-shadow: 0 8px 24px rgba(116,73,35,.10) !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.floating-app-launcher svg { width: 19px !important; height: 19px !important; }
.floating-app-launcher span {
  position: absolute !important;
  left: calc(100% + 8px) !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(-4px) !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: #5a2f1c !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease !important;
}
.floating-app-launcher:hover,
.floating-app-launcher:focus-visible { transform: translateY(-2px) !important; box-shadow: 0 12px 28px rgba(116,73,35,.16) !important; }
.floating-app-launcher:hover span,
.floating-app-launcher:focus-visible span { opacity: 1 !important; transform: translateY(-50%) translateX(0) !important; }
body[data-view="dashboard"] .floating-app-launcher,
body.auth-mode .floating-app-launcher,
body.is-loading .floating-app-launcher { display: none !important; }
body:not([data-view="dashboard"]):not([data-view="inbox"]):not([data-view="requestDetail"]) .cute-page-header { padding-left: 48px !important; }

/* App palette is a real navigation surface. */
.app-menu-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 20px !important; }
.app-menu-head h2 { margin: 2px 0 4px !important; font-family: "Patrick Hand", "Comic Neue", cursive !important; font-size: 31px !important; font-weight: 400 !important; }
.app-menu-head p { margin: 0 !important; color: #8b6d5b !important; font-size: 12px !important; }
.app-menu-grid { display: grid !important; gap: 11px !important; margin-top: 20px !important; }
.app-menu-grid .nav-item {
  position: relative !important;
  min-height: 92px !important;
  padding: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1px solid #efdfbd !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.70) !important;
  text-align: left !important;
  cursor: pointer !important;
}
.app-menu-grid .nav-item:hover,
.app-menu-grid .nav-item:focus-visible { border-color: #e7b758 !important; background: #fff8de !important; transform: translateY(-2px) !important; }
.app-menu-grid .nav-item > span:nth-child(2) { display: grid !important; gap: 3px !important; }
.app-menu-grid .nav-item b { font-size: 12px !important; }
.app-menu-grid .nav-item small { color: #8b6d5b !important; font-size: 9px !important; line-height: 1.35 !important; }
.app-menu-grid .menu-badge { position: absolute !important; right: 10px !important; top: 9px !important; min-width: 20px !important; height: 20px !important; padding: 0 6px !important; display: grid !important; place-items: center !important; border-radius: 999px !important; background: #fff0bf !important; color: #8a571f !important; font-size: 8px !important; font-style: normal !important; }
.sidebar-close { cursor: pointer !important; }

/* Fully functional ID Card production and print queue. */
.idcard-production-hero {
  position: relative !important;
  min-height: 175px !important;
  padding: 30px 220px 28px 118px !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid #efc368 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: linear-gradient(120deg, #fffdf8, #fff6cf 58%, #ffe6a0) !important;
  box-shadow: var(--mock-shadow) !important;
}
.idcard-production-hero::before {
  content: "" !important;
  position: absolute !important;
  left: -42px !important;
  bottom: -58px !important;
  width: 170px !important;
  height: 170px !important;
  border: 1px solid rgba(231,156,17,.28) !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 20px rgba(255,255,255,.26) !important;
}
.idcard-production-hero-icon {
  position: absolute !important;
  left: 35px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(-3deg) !important;
  width: 66px !important;
  height: 66px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #efc368 !important;
  border-radius: 18px !important;
  background: #fff8dd !important;
  color: #e79c11 !important;
  box-shadow: 0 10px 24px rgba(128,83,37,.08) !important;
}
.idcard-production-hero-icon svg { width: 36px !important; height: 36px !important; }
.idcard-production-hero h2 { margin: 3px 0 6px !important; font-family: "Patrick Hand", "Comic Neue", cursive !important; font-size: 34px !important; font-weight: 400 !important; color: #5a2f1c !important; }
.idcard-production-hero p { max-width: 720px !important; margin: 0 !important; color: #745542 !important; font-size: 12px !important; line-height: 1.55 !important; }
.idcard-production-note {
  position: absolute !important;
  right: 34px !important;
  top: 29px !important;
  width: 142px !important;
  min-height: 116px !important;
  padding: 18px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  border: 1px solid #efc368 !important;
  border-radius: 16px 16px 25px 16px !important;
  background: rgba(255,253,248,.90) !important;
  transform: rotate(1.5deg) !important;
  box-shadow: 0 8px 18px rgba(115,71,32,.07) !important;
}
.idcard-production-note::before { content: "" !important; position: absolute !important; left: 42px !important; top: -8px !important; width: 58px !important; height: 15px !important; background: rgba(255,225,139,.72) !important; transform: rotate(-3deg) !important; }
.idcard-production-note b { font: 400 40px/1 "Patrick Hand", cursive !important; color: #6b3a21 !important; }
.idcard-production-note strong { font-size: 11px !important; }
.idcard-production-note small { margin-top: 5px !important; color: #8b6d5b !important; font-size: 8px !important; }
.idcard-hero-doodle { position: absolute !important; right: 192px !important; top: 12px !important; color: #ef9c82 !important; font-size: 28px !important; transform: rotate(12deg) !important; }
.idcard-stat-grid { margin: 16px 0 !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; }
.idcard-stat-grid > * {
  min-height: 78px !important;
  padding: 12px 14px !important;
  display: grid !important;
  grid-template-columns: 38px 1fr auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 2px 10px !important;
  border: 1px solid #efdfbd !important;
  border-radius: 14px !important;
  background: rgba(255,253,248,.88) !important;
  color: #5a2f1c !important;
  text-align: left !important;
}
.idcard-stat-grid button { cursor: pointer !important; }
.idcard-stat-grid > * > span { grid-row: 1 / 3 !important; width: 36px !important; height: 36px !important; display: grid !important; place-items: center !important; border-radius: 11px !important; background: #fff0bd !important; color: #e29112 !important; }
.idcard-stat-grid svg { width: 20px !important; height: 20px !important; }
.idcard-stat-grid small { font-size: 9px !important; color: #7b5d4a !important; }
.idcard-stat-grid b { grid-column: 3 !important; grid-row: 1 / 3 !important; font: 400 30px/1 "Patrick Hand", cursive !important; }
.idcard-queue-card { overflow: hidden !important; }
.idcard-queue-head { padding: 18px 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; }
.idcard-queue-head p { margin-top: 3px !important; }
.idcard-search { min-width: 310px !important; }
.idcard-queue-table th { white-space: nowrap !important; }
.idcard-ticket-icon { width: 36px !important; height: 36px !important; display: grid !important; place-items: center !important; border-radius: 11px !important; background: #fff0bd !important; color: #e29112 !important; }
.idcard-ticket-icon svg { width: 20px !important; height: 20px !important; }
.idcard-progress { min-width: 92px !important; display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important; gap: 7px !important; }
.idcard-progress > span { height: 7px !important; overflow: hidden !important; border-radius: 999px !important; background: #f3e7cd !important; }
.idcard-progress i { height: 100% !important; display: block !important; border-radius: inherit !important; background: linear-gradient(90deg, #ffd568, #e9a51e) !important; }
.idcard-progress b { font-size: 9px !important; }
.idcard-row-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 7px !important; white-space: nowrap !important; }
.print-card-button { box-shadow: 0 5px 12px rgba(216,144,21,.12) !important; }
.idcard-empty { min-height: 150px !important; display: grid !important; place-items: center !important; align-content: center !important; gap: 4px !important; color: #8b6d5b !important; }
.idcard-empty span { font-size: 28px !important; color: #eca46d !important; }
.idcard-empty b { color: #5a2f1c !important; }
.idcard-empty small { font-size: 10px !important; }

@media (max-width: 1100px) and (min-width: 901px) {
  .idcard-production-hero { padding-right: 180px !important; }
  .idcard-production-note { right: 22px !important; width: 120px !important; }
  .idcard-search { min-width: 230px !important; }
}

@media (max-width: 900px) {
  .floating-app-launcher { display: none !important; }
  body:not([data-view="dashboard"]):not([data-view="inbox"]):not([data-view="requestDetail"]) .cute-page-header { padding-left: 0 !important; }
  .idcard-production-hero { min-height: 0 !important; padding: 22px 18px 22px 82px !important; border-radius: 16px !important; }
  .idcard-production-hero-icon { left: 18px !important; width: 50px !important; height: 50px !important; }
  .idcard-production-hero-icon svg { width: 27px !important; height: 27px !important; }
  .idcard-production-hero h2 { font-size: 25px !important; }
  .idcard-production-hero p { font-size: 10px !important; }
  .idcard-production-note, .idcard-hero-doodle { display: none !important; }
  .idcard-production-hero .service-spotlight-tags { display: none !important; }
  .idcard-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .idcard-stat-grid > * { min-height: 68px !important; }
  .idcard-queue-head { display: grid !important; }
  .idcard-search { min-width: 0 !important; width: 100% !important; }
  .idcard-queue-table { min-width: 840px !important; }
  .idcard-row-actions { justify-content: flex-start !important; }
}


/* ===== pastel-polish.css ===== */
/* v10 — high-resolution vector artwork, improved typography, and colorful pastel icon system. */
:root {
  --font-body: "Nunito", "Inter", ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Patrick Hand", "Comic Neue", "Segoe Print", "Bradley Hand", cursive;
  --pastel-butter: #ffe58d;
  --pastel-butter-soft: #fff4c8;
  --pastel-peach: #ffc8b8;
  --pastel-peach-soft: #fff0e8;
  --pastel-rose: #f4b7c5;
  --pastel-rose-soft: #fff0f3;
  --pastel-lilac: #cdbcf1;
  --pastel-lilac-soft: #f4efff;
  --pastel-sky: #b9daf2;
  --pastel-sky-soft: #eef8ff;
  --pastel-mint: #bfdcae;
  --pastel-mint-soft: #f0f8e9;
  --pastel-coral: #ef937e;
  --pastel-purple: #8d73c8;
  --pastel-blue: #5e9fc8;
  --pastel-green: #6f9f58;
  --pastel-ink: #59341f;
}

html { text-rendering: optimizeLegibility; }
body,
button,
input,
select,
textarea {
  font-family: var(--font-body) !important;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
svg {
  shape-rendering: geometricPrecision;
  stroke-width: 2;
}

/* Friendly display face only for expressive headings; operational copy stays crisp. */
.dashboard-greeting h1,
.panel-title h2,
.note-title h2,
.recent-request-heading h2,
.cute-reminder-card h3,
.cute-page-header h1,
.standalone-request-page > h1,
.standalone-history h2,
.exact-auth-welcome h1,
.mobile-service-head h1,
.page-header h1,
.card-title h3,
.service-spotlight h2,
.idcard-production-hero h2 {
  font-family: var(--font-display) !important;
  letter-spacing: .01em !important;
}

/* High-resolution scalable dashboard illustration. */
.mock-dashboard .cozy-scene {
  background-image: url('/assets/pastel-workspace-side.svg') !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  image-rendering: auto !important;
}
.mock-dashboard .cozy-scene::before,
.mock-dashboard .cozy-scene::after { display: none !important; }
.scene-brand {
  position: absolute;
  z-index: 4;
  left: 10.5%;
  top: 5.4%;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--pastel-ink);
  filter: drop-shadow(0 2px 2px rgba(142, 92, 39, .06));
}
.scene-brand img {
  width: clamp(40px, 4.8vh, 58px);
  height: clamp(40px, 4.8vh, 58px);
  flex: 0 0 auto;
}
.scene-brand strong {
  display: block;
  font-size: clamp(13px, 1.55vh, 19px);
  line-height: 1;
  font-weight: 850;
  letter-spacing: .055em;
}
.scene-brand small {
  display: block;
  margin-top: 5px;
  font-size: clamp(6px, .78vh, 9px);
  line-height: 1;
  font-weight: 750;
  letter-spacing: .075em;
}
.mock-dashboard .note-mascot {
  right: -5% !important;
  bottom: -10% !important;
  width: 46% !important;
  max-height: 58% !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 5px 8px rgba(156, 100, 48, .13));
}
.exact-auth-scene {
  background-image: url('/assets/pastel-login-scene.svg') !important;
  background-position: center !important;
  background-size: cover !important;
  image-rendering: auto !important;
}
.auth-brand-flower img,
.loading-brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.exact-auth-brand .auth-brand-flower {
  overflow: hidden;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: 0 7px 18px rgba(183, 120, 55, .10) !important;
}
.detail-flower {
  width: 74px !important;
  height: 148px !important;
  background: url('/assets/pastel-tulip.svg') center / contain no-repeat !important;
  filter: drop-shadow(0 5px 7px rgba(156, 104, 52, .11));
}

/* Colorful but still soft dashboard icon system. */
.mock-dashboard .summary-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.mock-dashboard .summary-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 25px rgba(122, 77, 35, .08) !important;
}
.mock-dashboard .summary-emoji,
.mock-dashboard .favorite-service > span,
.reminder-calendar,
.metric-icon,
.idcard-production-hero-icon,
.idcard-stat-grid > * > span,
.menu-tile-icon,
.mobile-service-card > span,
.paper-service-icon,
.service-spotlight-icon,
.idcard-ticket-icon {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 5px 12px rgba(132,82,39,.06) !important;
}
.mock-dashboard .summary-emoji::after,
.mock-dashboard .favorite-service > span::after,
.menu-tile-icon::after,
.mobile-service-card > span::after,
.idcard-stat-grid > * > span::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 5px;
  top: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.78);
}
.mock-dashboard .summary-emoji svg,
.mock-dashboard .favorite-service svg,
.reminder-calendar svg,
.metric-icon svg,
.idcard-production-hero-icon svg,
.idcard-stat-grid svg,
.menu-tile-icon svg,
.mobile-service-card svg,
.paper-service-icon svg,
.service-spotlight-icon svg,
.idcard-ticket-icon svg {
  stroke-width: 2.05 !important;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.55));
}

.mock-dashboard .sum-mail {
  background: linear-gradient(145deg, #fffdf8, #fff2e8) !important;
  border-color: #f2c5b6 !important;
}
.mock-dashboard .sum-mail .summary-emoji {
  color: #dc7d68 !important;
  border-color: #f1b7a8 !important;
  background: linear-gradient(145deg, #ffe6dd, #ffcdbc) !important;
}
.mock-dashboard .sum-process {
  background: linear-gradient(145deg, #fffdf8, #f5f0ff) !important;
  border-color: #d8caf0 !important;
}
.mock-dashboard .sum-process .summary-emoji {
  color: #8066bd !important;
  border-color: #c5b2ea !important;
  background: linear-gradient(145deg, #eee6ff, #d7c7f4) !important;
}
.mock-dashboard .sum-approval {
  background: linear-gradient(145deg, #fffdf8, #eef8ff) !important;
  border-color: #c8e0ef !important;
}
.mock-dashboard .sum-approval .summary-emoji {
  color: #4f94bd !important;
  border-color: #acd3eb !important;
  background: linear-gradient(145deg, #e2f4ff, #badcf2) !important;
}
.mock-dashboard .sum-done {
  background: linear-gradient(145deg, #fffdf8, #f0f8e9) !important;
  border-color: #c9ddba !important;
}
.mock-dashboard .sum-done .summary-emoji {
  color: #6f9b51 !important;
  border-color: #b7d29f !important;
  background: linear-gradient(145deg, #eaf6dd, #c8e0ae) !important;
}
.mock-dashboard .summary-card::after { opacity: .5; }
.mock-dashboard .summary-card small {
  font-size: clamp(8.5px, .98vh, 12px) !important;
  font-weight: 800 !important;
}
.mock-dashboard .summary-card em {
  font-size: clamp(7.5px, .86vh, 10px) !important;
  font-weight: 650 !important;
}

.mock-dashboard .favorite-service > span {
  border: 1px solid transparent !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.mock-dashboard .favorite-service:hover > span {
  transform: translateY(-3px) rotate(-2deg);
  box-shadow: 0 9px 16px rgba(115,72,34,.11) !important;
}
.mock-dashboard .favorite-service.service-peach > span {
  color: #dc7c67 !important;
  border-color: #f3b9a9 !important;
  background: linear-gradient(145deg, #ffe9e1, #ffcabc) !important;
}
.mock-dashboard .favorite-service.service-yellow > span {
  color: #8166bd !important;
  border-color: #cbb9ef !important;
  background: linear-gradient(145deg, #f1eaff, #d6c5f3) !important;
}
.mock-dashboard .favorite-service.service-pink > span {
  color: #d1708b !important;
  border-color: #efb8c7 !important;
  background: linear-gradient(145deg, #ffe9ef, #f6c5d2) !important;
}
.mock-dashboard .favorite-service.service-gold > span {
  color: #4f93bd !important;
  border-color: #acd3e9 !important;
  background: linear-gradient(145deg, #eaf7ff, #bdddf1) !important;
}
.mock-dashboard .favorite-service.service-mint > span {
  color: #689a55 !important;
  border-color: #b9d7a6 !important;
  background: linear-gradient(145deg, #eef9e8, #cce3b9) !important;
}
.mock-dashboard .favorite-service b {
  font-size: clamp(8px, .98vh, 11px) !important;
  font-weight: 800 !important;
}
.reminder-calendar {
  color: #d67c66 !important;
  border: 1px solid #f2b8a8;
  background: linear-gradient(145deg, #fff0e8, #ffcfc0) !important;
}

/* More polished cards and colored accent strokes. */
.mock-dashboard .cute-panel,
.mock-dashboard .today-note-card,
.mock-dashboard .cute-reminder-card,
.mock-inbox-page .request-paper,
.standalone-paper,
.standalone-history,
body:not([data-view="dashboard"]):not([data-view="inbox"]):not([data-view="requestDetail"]) .card {
  box-shadow: 0 12px 30px rgba(130, 81, 37, .055) !important;
}
.mock-dashboard .today-summary::before,
.mock-dashboard .favorite-services::before,
.mock-dashboard .recent-requests-panel::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffc0b1, #ffe17f, #cbbcf0, #b8dcef, #bfdda9);
  opacity: .75;
}
.mock-dashboard .today-summary,
.mock-dashboard .favorite-services,
.mock-dashboard .recent-requests-panel { position: relative !important; }

/* Pills/statuses gain distinct, readable pastel colors. */
.pill,
.status-chip {
  font-family: var(--font-body) !important;
  font-weight: 750 !important;
  letter-spacing: .005em;
}
.pill.sage,
.pill.green {
  color: #5c8247 !important;
  background: #eaf5df !important;
  border-color: #c5dcae !important;
}
.pill.blue {
  color: #4f84ac !important;
  background: #eaf5fd !important;
  border-color: #c5ddef !important;
}
.pill.rose {
  color: #b75e74 !important;
  background: #ffedf2 !important;
  border-color: #efc4d0 !important;
}
.pill.amber,
.pill.yellow {
  color: #a46d18 !important;
  background: #fff4cf !important;
  border-color: #ebd18b !important;
}
.pill.gray {
  color: #756574 !important;
  background: #f4eff6 !important;
  border-color: #ddd1e3 !important;
}

/* Buttons remain butter-led, with colorful secondary accents. */
.btn.primary,
.cute-primary,
.login-submit {
  border-color: #e7ab2e !important;
  background: linear-gradient(135deg, #ffe99c, #ffd55e) !important;
  color: #58331e !important;
  box-shadow: 0 7px 16px rgba(213, 144, 29, .12) !important;
}
.btn.primary:hover,
.cute-primary:hover,
.login-submit:hover {
  background: linear-gradient(135deg, #ffeb9e, #ffc95c) !important;
  transform: translateY(-1px);
}
.btn.danger {
  border-color: #efaa9d !important;
  color: #c35e52 !important;
  background: #fff3f0 !important;
}
.btn:not(.primary):not(.danger):hover {
  border-color: #cbbcf0 !important;
  background: #f8f4ff !important;
}

/* Global icon accents for service, ID-card, metric, and launcher screens. */
.menu-tile-icon.butter { color: #c07b17 !important; background: linear-gradient(145deg,#fff6d5,#ffe599) !important; }
.menu-tile-icon.peach { color: #d27662 !important; background: linear-gradient(145deg,#ffefe8,#ffcdbf) !important; }
.menu-tile-icon.rose { color: #c2607a !important; background: linear-gradient(145deg,#fff0f4,#f5c3d0) !important; }
.menu-tile-icon.lilac { color: #7960b5 !important; background: linear-gradient(145deg,#f5efff,#d4c2f1) !important; }
.menu-tile-icon.mint { color: #65944f !important; background: linear-gradient(145deg,#f0f9ea,#c8e0b5) !important; }
.menu-tile-icon.sky { color: #4f8fb8 !important; background: linear-gradient(145deg,#eef8ff,#bdddf1) !important; }

.idcard-stat-grid > *:nth-child(1) > span,
.metric-grid > *:nth-child(1) .metric-icon { color: #d37764 !important; background: linear-gradient(145deg,#ffede6,#ffcbbc) !important; }
.idcard-stat-grid > *:nth-child(2) > span,
.metric-grid > *:nth-child(2) .metric-icon { color: #7860b4 !important; background: linear-gradient(145deg,#f4efff,#d4c2f1) !important; }
.idcard-stat-grid > *:nth-child(3) > span,
.metric-grid > *:nth-child(3) .metric-icon { color: #66954f !important; background: linear-gradient(145deg,#f0f9e9,#c8e0b3) !important; }
.idcard-stat-grid > *:nth-child(4) > span,
.metric-grid > *:nth-child(4) .metric-icon { color: #4e90b9 !important; background: linear-gradient(145deg,#eff9ff,#beddf1) !important; }

.idcard-production-hero-icon,
.service-spotlight-icon {
  color: #8066bd !important;
  border-color: #d2c2ee !important;
  background: linear-gradient(145deg, #f4efff, #d5c4f2) !important;
}
.idcard-ticket-icon { color: #8066bd !important; background: #f1eaff !important; }
.paper-service-icon.admin { color: #8066bd !important; background: #f1eaff !important; }
.paper-service-icon.sik { color: #d47763 !important; background: #ffe9e1 !important; }
.paper-service-icon.unclassified,
.paper-service-icon.bmn { color: #4f91ba !important; background: #eaf7ff !important; }

/* Mobile: all art and avatars remain vector-sharp. */
@media (max-width: 900px) {
  .scene-brand { display: none; }
  .mock-dashboard .dashboard-greeting::after,
  .mobile-service-avatar {
    background: url('/assets/pastel-brand-flower.svg') center / cover no-repeat !important;
    border: 0 !important;
    box-shadow: 0 5px 13px rgba(131, 82, 37, .10) !important;
  }
  .mobile-service-art {
    height: 138px !important;
    background-image: url('/assets/pastel-mobile-garden.svg') !important;
    background-position: center bottom !important;
    background-size: 100% auto !important;
  }
  .mobile-service-card > span.rose {
    color: #d47561 !important;
    background: linear-gradient(145deg,#ffede6,#ffcabc) !important;
  }
  .mobile-service-card > span.yellow {
    color: #795fb4 !important;
    background: linear-gradient(145deg,#f4efff,#d4c2f1) !important;
  }
  .mobile-service-card > span.peach {
    color: #c15f79 !important;
    background: linear-gradient(145deg,#fff0f4,#f5c2cf) !important;
  }
  .mobile-service-card > span.gold {
    color: #4f90b8 !important;
    background: linear-gradient(145deg,#eef8ff,#bcdcf0) !important;
  }
  .mobile-service-card > span.mint {
    color: #64944f !important;
    background: linear-gradient(145deg,#f0f9e9,#c8e0b4) !important;
  }
  .mobile-dock .nav-item:nth-child(1) { color: #d37662 !important; }
  .mobile-dock .nav-item:nth-child(2) { color: #7a62b5 !important; }
  .mobile-dock .nav-item:nth-child(4) { color: #4f91b9 !important; }
  .mobile-dock .nav-item:nth-child(5) { color: #65934f !important; }
  .mobile-dock .nav-item.active { color: #d88712 !important; }
  .mobile-dock .mobile-menu {
    background: linear-gradient(145deg, #ffe98e, #ffca59) !important;
    box-shadow: 0 8px 18px rgba(201, 130, 23, .24) !important;
  }
  .mobile-service-head h1 { font-family: var(--font-display) !important; }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .mock-dashboard .summary-card,
  .mock-dashboard .favorite-service > span,
  .btn { transition: none !important; }
}

/* Remove the legacy raster-frame styling from the new transparent SVG mascot. */
.mock-dashboard img.note-mascot {
  height: auto !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
}


/* ===== horizontal-full.css ===== */
/* v12 — full-width horizontal navigation, functional pastel dashboard */
:root {
  --v12-bg: #fffdf8;
  --v12-bg-warm: #fff8e8;
  --v12-paper: rgba(255, 255, 255, .91);
  --v12-line: #f0d59d;
  --v12-line-soft: #f5e6c5;
  --v12-ink: #4b2b21;
  --v12-muted: #806d65;
  --v12-yellow: #f7b62d;
  --v12-yellow-soft: #fff4cf;
  --v12-coral: #f08d72;
  --v12-coral-soft: #fff0ea;
  --v12-lilac: #8d76d5;
  --v12-lilac-soft: #f2edff;
  --v12-sky: #63a8d8;
  --v12-sky-soft: #eaf6ff;
  --v12-mint: #69a762;
  --v12-mint-soft: #edf8e8;
  --v12-rose: #e7788e;
  --v12-rose-soft: #fff0f3;
  --v12-shadow: 0 12px 30px rgba(112, 76, 39, .075);
  --v12-shadow-soft: 0 6px 18px rgba(112, 76, 39, .055);
}

html { min-height: 100%; background: var(--v12-bg); }
body:not(.auth-mode) {
  min-height: 100%;
  overflow: auto !important;
  background:
    radial-gradient(circle at 50% 5%, rgba(255, 228, 157, .28), transparent 33%),
    linear-gradient(180deg, #fff9ea 0, #fffdf8 22%, #fffdf8 100%) !important;
  color: var(--v12-ink) !important;
  font-family: "NanumSquareRound", "Comfortaa", "Inter", "Lato", sans-serif !important;
}
body:not(.auth-mode) button,
body:not(.auth-mode) input,
body:not(.auth-mode) select,
body:not(.auth-mode) textarea { font-family: inherit !important; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Shell */
body:not(.auth-mode) .app-shell {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body:not(.auth-mode) .workspace {
  width: 100% !important;
  height: auto !important;
  min-height: calc(100vh - 86px) !important;
  overflow: visible !important;
  background: transparent !important;
}
body:not(.auth-mode) .main-content {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: calc(100vh - 86px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  outline: none !important;
}

/* Horizontal header */
body:not(.auth-mode) .app-header,
body:not(.auth-mode)[data-view="dashboard"] .app-header,
body:not(.auth-mode):not([data-view="dashboard"]) .app-header {
  display: block !important;
  position: sticky !important;
  inset: auto !important;
  top: 0 !important;
  z-index: 110 !important;
  width: 100% !important;
  height: 86px !important;
  pointer-events: auto !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(232, 191, 106, .36) !important;
  border-radius: 0 0 20px 20px !important;
  background: rgba(255, 254, 250, .96) !important;
  box-shadow: 0 8px 24px rgba(117, 76, 37, .055) !important;
  backdrop-filter: blur(20px) !important;
}
body:not(.auth-mode) .app-header::before,
body:not(.auth-mode) .app-header::after { display: none !important; }
body:not(.auth-mode) .app-header-inner {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 clamp(18px, 1.7vw, 30px) !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(12px, 1.3vw, 24px) !important;
  box-sizing: border-box !important;
}
body:not(.auth-mode) .brand-home {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  height: 62px !important;
  padding: 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--v12-ink) !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
body:not(.auth-mode) .brand-bloom {
  width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 19px !important;
  background: #fff9e7 !important;
  box-shadow: inset 0 0 0 1px #f3ca76 !important;
}
body:not(.auth-mode) .brand-bloom img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
body:not(.auth-mode) .brand-copy {
  display: grid !important;
  gap: 2px !important;
  text-align: left !important;
  white-space: nowrap !important;
}
body:not(.auth-mode) .brand-copy strong {
  color: #3f251d !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
}
body:not(.auth-mode) .brand-copy small {
  color: #765b4d !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .035em !important;
}

.top-primary-nav {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(1px, .25vw, 5px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}
.top-primary-nav::-webkit-scrollbar { display: none !important; }
.top-primary-nav .nav-item,
.top-primary-nav .nav-service-toggle {
  position: relative !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 0 clamp(10px, .7vw, 15px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: #4c3027 !important;
  box-shadow: none !important;
  font-size: clamp(14px, .93vw, 16px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
}
.top-primary-nav .nav-item:hover,
.top-primary-nav .nav-service-toggle:hover {
  background: #fff9e9 !important;
  border-color: #f1d49a !important;
  transform: translateY(-1px) !important;
}
.top-primary-nav .nav-item.active {
  background: linear-gradient(180deg, #fff7dd, #fff3c9) !important;
  border-color: #f0d08d !important;
  box-shadow: 0 7px 16px rgba(186, 128, 36, .09) !important;
}
.top-primary-nav .top-nav-icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
  background: transparent !important;
}
.top-primary-nav .top-nav-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.top-primary-nav .nav-yellow { color: #e7a31d !important; }
.top-primary-nav .nav-coral { color: #e47a61 !important; }
.top-primary-nav .nav-lilac { color: #7f69bd !important; }
.top-primary-nav .nav-peach { color: #e58e56 !important; }
.top-primary-nav .nav-sky { color: #4c96c7 !important; }
.top-primary-nav .nav-mint { color: #609252 !important; }
.top-primary-nav .nav-rose { color: #d66e83 !important; }
.top-primary-nav .nav-chevron { width: 13px !important; height: 13px !important; transform: rotate(90deg) !important; opacity: .6 !important; }
.top-primary-nav .nav-count {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid #fffdf7 !important;
  border-radius: 999px !important;
  background: #ef8b73 !important;
  color: #fff !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.top-primary-nav .nav-count[data-empty="true"] { display: none !important; }

body:not(.auth-mode) .header-actions {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  pointer-events: auto !important;
}
body:not(.auth-mode) .global-search {
  position: static !important;
  order: initial !important;
  width: clamp(210px, 16.2vw, 285px) !important;
  min-width: 180px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid #efce8a !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: none !important;
  color: #6c4c3b !important;
}
body:not(.auth-mode) .global-search:focus-within {
  border-color: #eab94e !important;
  box-shadow: 0 0 0 4px rgba(244, 194, 74, .14) !important;
}
body:not(.auth-mode) .global-search > svg {
  order: 1 !important;
  width: 19px !important;
  height: 19px !important;
  flex: 0 0 19px !important;
  color: #88502c !important;
}
body:not(.auth-mode) .global-search input {
  order: 2 !important;
  min-width: 0 !important;
  flex: 1 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--v12-ink) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}
body:not(.auth-mode) .global-search input::placeholder { color: #9b877a !important; opacity: 1 !important; }
body:not(.auth-mode) .global-search kbd { display: none !important; }
body:not(.auth-mode) .top-icon {
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #6d3b29 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
body:not(.auth-mode) .top-icon:hover { background: #fff5d8 !important; }
body:not(.auth-mode) .top-icon svg { width: 24px !important; height: 24px !important; }
body:not(.auth-mode) .badge-dot {
  top: 0 !important;
  right: 0 !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid #fffdf8 !important;
  border-radius: 999px !important;
  background: #ef765f !important;
  color: white !important;
  font-size: 8px !important;
  font-weight: 900 !important;
}
body:not(.auth-mode) .compact-profile {
  width: 43px !important;
  min-width: 43px !important;
  height: 43px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #efca79 !important;
  border-radius: 50% !important;
  background: #fff4cf !important;
  box-shadow: inset 0 0 0 3px #fffdf8 !important;
  cursor: pointer !important;
}
body:not(.auth-mode) .compact-profile .avatar {
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  background: linear-gradient(145deg, #ffd47c, #f2a95a) !important;
  color: #5e341f !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

/* Full-size dashboard */
.v12-dashboard {
  position: relative !important;
  width: 100% !important;
  min-height: calc(100vh - 86px) !important;
  padding: 12px clamp(24px, 5.35vw, 92px) 16px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 47% 3%, rgba(255, 229, 158, .35), transparent 29%),
    linear-gradient(180deg, #fff8e7 0, #fffdf8 17%, #fffdf8 100%) !important;
}
.v12-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 9% 14%, rgba(255,255,255,.65), transparent 20%),
    radial-gradient(circle at 92% 11%, rgba(255,255,255,.55), transparent 18%);
}
.v12-dashboard > *:not(.v12-decor) { position: relative; z-index: 2; }
.v12-decor {
  position: absolute !important;
  z-index: 4 !important;
  display: block !important;
  pointer-events: none !important;
  object-fit: contain !important;
  user-select: none !important;
}
.v12-left-decor { left: 0 !important; bottom: 38px !important; width: clamp(95px, 8.2vw, 138px) !important; }
.v12-right-decor { right: 0 !important; bottom: 46px !important; width: clamp(210px, 16.5vw, 285px) !important; }
.v12-dashboard-hero {
  width: 100% !important;
  height: clamp(100px, 7.3vw, 122px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 0 !important;
}
.v12-greeting-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  min-width: 0 !important;
}
.v12-greeting-bear {
  width: clamp(82px, 6.4vw, 106px) !important;
  height: clamp(82px, 6.4vw, 106px) !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  box-shadow: 0 7px 18px rgba(180, 119, 34, .08) !important;
}
.v12-greeting-wrap h1 {
  margin: 0 !important;
  color: #4a2c23 !important;
  font-size: clamp(28px, 2.2vw, 38px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}
.v12-greeting-wrap h1 span { display: inline-block; transform: rotate(-6deg); }
.v12-greeting-wrap p {
  margin: 7px 0 0 !important;
  color: #6f584d !important;
  font-size: clamp(11px, .8vw, 14px) !important;
  font-weight: 650 !important;
}
.v12-hero-decor {
  width: clamp(360px, 33vw, 550px) !important;
  height: auto !important;
  max-height: 122px !important;
  object-fit: cover !important;
  object-position: center !important;
  mix-blend-mode: multiply !important;
}
.v12-dashboard-layout {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 2.18fr) minmax(390px, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.v12-main-column {
  min-width: 0 !important;
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
}
.v12-top-grid {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 2.25fr) minmax(250px, .82fr) !important;
  gap: 10px !important;
}
.v12-middle-grid {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.75fr) minmax(250px, .85fr) !important;
  gap: 10px !important;
}
.v12-panel {
  position: relative !important;
  min-width: 0 !important;
  border: 1px solid var(--v12-line) !important;
  border-radius: 16px !important;
  background: var(--v12-paper) !important;
  box-shadow: var(--v12-shadow-soft) !important;
  overflow: hidden !important;
}
.v12-panel-title {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.v12-panel-title > span {
  color: #f1b21d !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
.v12-panel-title > i {
  color: #f4c35c !important;
  font-size: 12px !important;
  font-style: normal !important;
}
.v12-panel-title h2 {
  margin: 0 !important;
  color: #4a2d24 !important;
  font-size: clamp(15px, 1.03vw, 18px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}
.v12-panel-head-row {
  min-width: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.v12-link-button {
  flex: 0 0 auto !important;
  min-width: 76px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid #efd28e !important;
  border-radius: 999px !important;
  background: #fffaf0 !important;
  color: #5d402f !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}
.v12-link-button:hover { background: #fff2c9 !important; border-color: #e9bd58 !important; }

.v12-summary-panel { min-height: 244px !important; padding: 20px 16px 14px !important; }
.v12-summary-grid {
  margin-top: 16px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.v12-stat-card {
  min-width: 0 !important;
  min-height: 168px !important;
  padding: 15px 13px 12px !important;
  display: grid !important;
  grid-template-rows: 52px auto auto 1fr !important;
  align-items: start !important;
  border: 1px solid #f0ddb7 !important;
  border-radius: 16px !important;
  background: #fffdf8 !important;
  color: var(--v12-ink) !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform .16s ease, box-shadow .16s ease !important;
}
.v12-stat-card:hover { transform: translateY(-3px) !important; box-shadow: var(--v12-shadow-soft) !important; }
.v12-stat-card.stat-butter { background: linear-gradient(145deg, #fffdf8, #fff9ea) !important; }
.v12-stat-card.stat-peach { background: linear-gradient(145deg, #fffdfa, #fff6ef) !important; }
.v12-stat-card.stat-lilac { background: linear-gradient(145deg, #fffdfc, #f7f2ff) !important; }
.v12-stat-card.stat-mint { background: linear-gradient(145deg, #fffdfb, #f2faef) !important; }
.v12-stat-icon {
  width: 50px !important;
  height: 50px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 13px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 6px 14px rgba(80,50,25,.07) !important;
}
.stat-butter .v12-stat-icon { background: linear-gradient(145deg, #ffe7a2, #f7b52e) !important; color: #fff !important; }
.stat-peach .v12-stat-icon { background: linear-gradient(145deg, #ffd6b6, #ef8b60) !important; color: #fff !important; }
.stat-lilac .v12-stat-icon { background: linear-gradient(145deg, #ded5ff, #8e78d8) !important; color: #fff !important; }
.stat-mint .v12-stat-icon { background: linear-gradient(145deg, #d8efc8, #74ae5e) !important; color: #fff !important; }
.v12-stat-icon svg { width: 27px !important; height: 27px !important; stroke-width: 1.8 !important; }
.v12-stat-card > b {
  margin-top: 8px !important;
  min-height: 34px !important;
  color: #4b3026 !important;
  font-size: clamp(10px, .72vw, 13px) !important;
  font-weight: 850 !important;
  line-height: 1.28 !important;
}
.v12-stat-card > strong {
  color: #47291f !important;
  font-size: clamp(27px, 2vw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.v12-stat-card > small {
  align-self: end !important;
  color: #80695e !important;
  font-size: 9px !important;
  font-weight: 650 !important;
}

.v12-note-panel { min-height: 244px !important; padding: 20px 17px !important; }
.v12-task-list { margin-top: 14px !important; display: grid !important; gap: 0 !important; }
.v12-task {
  position: relative !important;
  min-height: 43px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  border-bottom: 1px solid #f1e5cd !important;
  color: #5e4539 !important;
  cursor: pointer !important;
}
.v12-task:last-child { border-bottom: 0 !important; }
.v12-task input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
.v12-checkbox {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  display: grid !important;
  place-items: center !important;
  border: 1.5px solid #d5b995 !important;
  border-radius: 4px !important;
  background: #fff !important;
}
.v12-task input:checked + .v12-checkbox::after {
  content: "✓";
  color: #618fd2 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  transform: translateY(-2px) rotate(-7deg) !important;
}
.v12-task b { font-size: 11px !important; font-weight: 700 !important; }
.v12-note-bear {
  position: absolute !important;
  right: 8px !important;
  bottom: -2px !important;
  width: 86px !important;
  height: auto !important;
  object-fit: cover !important;
  pointer-events: none !important;
}

.v12-services-panel { min-height: 136px !important; padding: 17px 15px 13px !important; }
.v12-service-list {
  margin-top: 10px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.v12-service-card {
  min-width: 0 !important;
  height: 82px !important;
  padding: 8px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 7px !important;
  border: 1px solid #f0dfbb !important;
  border-radius: 14px !important;
  background: #fffdf9 !important;
  color: #4e3328 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform .16s ease, background .16s ease !important;
}
.v12-service-card:hover { transform: translateY(-3px) !important; background: #fff8ea !important; }
.v12-service-card > span {
  width: 43px !important;
  height: 43px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  box-shadow: 0 5px 12px rgba(95,55,28,.06) !important;
}
.v12-service-card svg { width: 26px !important; height: 26px !important; stroke-width: 1.8 !important; }
.v12-service-card b { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 9px !important; font-weight: 800 !important; }
.service-coral > span { color: #e3745e !important; background: #fff0e9 !important; }
.service-mint > span { color: #58a16a !important; background: #eaf8ed !important; }
.service-rose > span { color: #df7487 !important; background: #fff0f3 !important; }
.service-yellow > span { color: #dd9a1f !important; background: #fff4d0 !important; }
.service-lilac > span { color: #7f6fcb !important; background: #f0edff !important; }

.v12-reminder-panel { min-height: 136px !important; padding: 17px !important; }
.v12-reminder-copy { margin-top: 27px !important; display: grid !important; gap: 5px !important; }
.v12-reminder-copy b { color: #4c3329 !important; font-size: 11px !important; font-weight: 850 !important; }
.v12-reminder-copy span { color: #7b675d !important; font-size: 9px !important; font-weight: 650 !important; }
.v12-reminder-panel > img {
  position: absolute !important;
  right: 5px !important;
  bottom: 1px !important;
  width: 118px !important;
  height: auto !important;
  object-fit: cover !important;
  pointer-events: none !important;
}

.v12-recent-panel { min-height: 216px !important; padding: 15px 14px 11px !important; }
.v12-table-head,
.v12-table-row {
  display: grid !important;
  grid-template-columns: 38px 1.22fr 1.18fr 1.15fr 1.6fr .9fr 1.32fr !important;
  align-items: center !important;
  gap: 8px !important;
}
.v12-table-head {
  min-height: 34px !important;
  margin-top: 9px !important;
  padding: 0 9px !important;
  border: 1px solid #f2e4c8 !important;
  border-radius: 10px 10px 0 0 !important;
  background: #fffaf0 !important;
  color: #6a5247 !important;
  font-size: 8px !important;
  font-weight: 850 !important;
}
.v12-table-body {
  border: 1px solid #f2e4c8 !important;
  border-top: 0 !important;
  border-radius: 0 0 10px 10px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.55) !important;
}
.v12-table-row {
  width: 100% !important;
  min-height: 31px !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-bottom: 1px solid #f2e8d4 !important;
  background: transparent !important;
  color: #4f3b32 !important;
  text-align: left !important;
  cursor: pointer !important;
}
.v12-table-row:last-child { border-bottom: 0 !important; }
.v12-table-row:hover { background: #fff8e7 !important; }
.v12-table-row > * { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.v12-table-row b,
.v12-table-row span,
.v12-table-row time { font-size: 8px !important; font-weight: 650 !important; }
.v12-table-row b { color: #493028 !important; font-weight: 800 !important; }
.v12-row-number { text-align: center !important; }
.v12-table-row .pill {
  display: inline-flex !important;
  max-width: 100% !important;
  min-height: 18px !important;
  padding: 2px 8px !important;
  font-size: 7px !important;
  font-style: normal !important;
}
.v12-dashboard-empty { min-height: 90px !important; display: grid !important; place-items: center !important; align-content: center !important; gap: 4px !important; color: #947665 !important; }
.v12-dashboard-empty span { font-size: 28px !important; color: #ebb259 !important; }
.v12-dashboard-empty b { font-size: 10px !important; }
.v12-dashboard-empty.compact { min-height: 240px !important; }

.v12-inbox-panel {
  min-height: 610px !important;
  padding: 18px 13px 13px !important;
  display: flex !important;
  flex-direction: column !important;
}
.v12-inbox-panel .v12-panel-head-row > div > p {
  margin: 7px 0 0 !important;
  color: #79675e !important;
  font-size: 9px !important;
  font-weight: 650 !important;
}
.v12-inbox-tabs {
  margin-top: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.v12-inbox-tabs::-webkit-scrollbar { display: none !important; }
.v12-inbox-tabs button {
  flex: 0 0 auto !important;
  height: 30px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid #f0dfbd !important;
  border-radius: 10px !important;
  background: #fffdf8 !important;
  color: #624a3d !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}
.v12-inbox-tabs button:first-child { background: #fff2c9 !important; border-color: #efc663 !important; }
.v12-inbox-tabs b {
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #fff5dc !important;
  color: #815921 !important;
  font-size: 7px !important;
}
.v12-inbox-list {
  min-height: 0 !important;
  flex: 1 !important;
  margin-top: 10px !important;
  border: 1px solid #f1e2c5 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.62) !important;
}
.v12-inbox-row {
  position: relative !important;
  width: 100% !important;
  min-height: 86px !important;
  padding: 12px 10px 11px 23px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: start !important;
  gap: 8px !important;
  border: 0 !important;
  border-bottom: 1px solid #f0e4cf !important;
  background: transparent !important;
  color: #4a3329 !important;
  text-align: left !important;
  cursor: pointer !important;
}
.v12-inbox-row:last-child { border-bottom: 0 !important; }
.v12-inbox-row:hover { background: #fff8e9 !important; }
.v12-inbox-dot {
  position: absolute !important;
  left: 10px !important;
  top: 15px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
}
.dot-orange { background: #f3a51b !important; }
.dot-blue { background: #6e9def !important; }
.dot-amber { background: #ef9b2c !important; }
.dot-green { background: #77b960 !important; }
.dot-mint { background: #6db77e !important; }
.v12-inbox-copy { min-width: 0 !important; display: grid !important; gap: 3px !important; }
.v12-inbox-copy b { color: #412b23 !important; font-size: 10px !important; font-weight: 900 !important; }
.v12-inbox-copy strong { color: #5f473b !important; font-size: 9px !important; font-weight: 700 !important; }
.v12-inbox-copy > span { color: #68534a !important; font-size: 8px !important; font-weight: 650 !important; }
.v12-inbox-copy time { color: #8a786e !important; font-size: 7px !important; }
.v12-inbox-row > .pill {
  align-self: start !important;
  min-height: 19px !important;
  padding: 3px 8px !important;
  font-size: 7px !important;
  font-style: normal !important;
  white-space: nowrap !important;
}
.v12-pagination {
  min-height: 42px !important;
  padding-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.v12-pagination button {
  width: 27px !important;
  height: 27px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #694e40 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}
.v12-pagination button:hover,
.v12-pagination button.active { background: #fff1c3 !important; box-shadow: inset 0 0 0 1px #efc665 !important; }

.v12-dashboard-footer {
  width: calc(100% - clamp(100px, 11vw, 184px)) !important;
  min-height: 55px !important;
  margin: 12px auto 0 !important;
  padding: 0 16px !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 26px !important;
  border: 1px solid #f0dba9 !important;
  border-radius: 17px !important;
  background: rgba(255,250,237,.86) !important;
  color: #725949 !important;
  box-shadow: 0 5px 16px rgba(112,70,34,.04) !important;
}
.v12-dashboard-footer > div { display: flex !important; align-items: center !important; gap: 8px !important; }
.v12-dashboard-footer img { width: 31px !important; height: 31px !important; border-radius: 9px !important; object-fit: cover !important; }
.v12-dashboard-footer b { color: #49342b !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .01em !important; }
.v12-dashboard-footer > span { padding-left: 22px !important; border-left: 1px solid #efd7a1 !important; font-size: 8px !important; font-weight: 650 !important; }
.v12-dashboard-footer small { font-size: 8px !important; font-weight: 650 !important; }

/* Generic pages keep the same horizontal shell and use the full viewport width. */
body:not(.auth-mode):not([data-view="dashboard"]) .main-content {
  width: 100% !important;
  max-width: none !important;
  padding: clamp(22px, 2vw, 34px) clamp(20px, 4vw, 66px) 52px !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at 85% 0, rgba(255,231,169,.28), transparent 30%),
    linear-gradient(180deg, #fff9ea 0, #fffdf8 180px) !important;
}
body:not(.auth-mode):not([data-view="dashboard"]) .cute-page-header,
body:not(.auth-mode):not([data-view="dashboard"]) .page-header {
  max-width: none !important;
  margin: 0 0 22px !important;
  padding: 22px 24px !important;
  border: 1px solid var(--v12-line) !important;
  border-radius: 19px !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow: var(--v12-shadow-soft) !important;
}
body:not(.auth-mode):not([data-view="dashboard"]) .page-header h1,
body:not(.auth-mode):not([data-view="dashboard"]) .cute-page-header h1 {
  font-family: "NanumSquareRound", "Comfortaa", "Inter", sans-serif !important;
  font-size: clamp(26px, 2.15vw, 38px) !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}
body:not(.auth-mode):not([data-view="dashboard"]) .page-header p { font-size: 12px !important; }
body:not(.auth-mode) .card,
body:not(.auth-mode) .section-card,
body:not(.auth-mode) .table-card,
body:not(.auth-mode) .ticket-banner,
body:not(.auth-mode) .process-card {
  border-color: var(--v12-line) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: var(--v12-shadow-soft) !important;
}
body:not(.auth-mode) .btn {
  min-height: 40px !important;
  padding: 0 15px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}
body:not(.auth-mode) .btn.primary {
  border-color: #e9b93f !important;
  background: linear-gradient(180deg, #ffd96f, #f4bd3d) !important;
  color: #583818 !important;
}
body:not(.auth-mode) .input,
body:not(.auth-mode) .field-shell,
body:not(.auth-mode) .inbox-search {
  border-color: #ead6ac !important;
  border-radius: 12px !important;
  background: #fffefa !important;
}

/* Centered mega menu — never a side drawer. */
body:not(.auth-mode) .v12-mega-menu,
body:not(.auth-mode) .app-menu {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: 96px !important;
  bottom: auto !important;
  z-index: 145 !important;
  width: min(1040px, calc(100vw - 40px)) !important;
  max-height: calc(100vh - 120px) !important;
  padding: 24px !important;
  overflow: auto !important;
  border: 1px solid #edc979 !important;
  border-radius: 24px !important;
  background: rgba(255, 254, 249, .985) !important;
  box-shadow: 0 26px 70px rgba(85, 51, 26, .22) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(-50%, -12px) scale(.98) !important;
  transition: opacity .18s ease, transform .2s ease, visibility .18s ease !important;
}
body:not(.auth-mode).sidebar-open .v12-mega-menu,
body:not(.auth-mode).sidebar-open .app-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) scale(1) !important;
}
body:not(.auth-mode) .app-menu-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 0 0 17px !important;
  border-bottom: 1px dashed #ebd5a7 !important;
}
body:not(.auth-mode) .app-menu-head h2 {
  margin: 4px 0 !important;
  font-family: "NanumSquareRound", "Comfortaa", "Inter", sans-serif !important;
  font-size: 25px !important;
  font-weight: 900 !important;
}
body:not(.auth-mode) .app-menu-head p { margin: 0 !important; color: #81695b !important; font-size: 11px !important; }
body:not(.auth-mode) .sidebar-close {
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #efd699 !important;
  border-radius: 12px !important;
  background: #fff9e8 !important;
  cursor: pointer !important;
}
body:not(.auth-mode) .sidebar-close svg { width: 20px !important; height: 20px !important; }
body:not(.auth-mode) .v12-service-grid,
body:not(.auth-mode) .app-menu-grid {
  margin: 0 !important;
  padding: 18px 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
body:not(.auth-mode) .app-menu-grid .nav-item {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 124px !important;
  padding: 14px 10px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr !important;
  place-items: center !important;
  align-content: start !important;
  gap: 10px !important;
  border: 1px solid #f0dfbd !important;
  border-radius: 17px !important;
  background: #fffdf8 !important;
  color: var(--v12-ink) !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
body:not(.auth-mode) .app-menu-grid .nav-item:hover,
body:not(.auth-mode) .app-menu-grid .nav-item.active {
  transform: translateY(-3px) !important;
  border-color: #e8bd58 !important;
  background: #fff8e6 !important;
  box-shadow: var(--v12-shadow-soft) !important;
}
body:not(.auth-mode) .app-menu-grid .menu-tile-icon {
  width: 52px !important;
  height: 52px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 15px !important;
}
body:not(.auth-mode) .app-menu-grid .menu-tile-icon svg { width: 28px !important; height: 28px !important; }
body:not(.auth-mode) .app-menu-grid .nav-item > span:nth-child(2) { min-width: 0 !important; display: grid !important; gap: 4px !important; }
body:not(.auth-mode) .app-menu-grid .nav-item b { font-size: 12px !important; font-weight: 900 !important; }
body:not(.auth-mode) .app-menu-grid .nav-item small { color: #826b5e !important; font-size: 9px !important; line-height: 1.35 !important; }
body:not(.auth-mode) .app-menu-grid .menu-badge {
  position: absolute !important;
  right: 9px !important;
  top: 9px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #fff0be !important;
  color: #79501f !important;
  font-size: 8px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}
body:not(.auth-mode) .v12-menu-footer {
  padding-top: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  border-top: 1px dashed #ebd5a7 !important;
}
body:not(.auth-mode) .v12-menu-footer .user-mini { display: flex !important; align-items: center !important; gap: 10px !important; }
body:not(.auth-mode) .v12-menu-footer .user-mini > div:last-child { display: grid !important; gap: 2px !important; }
body:not(.auth-mode) .v12-menu-footer .user-mini strong { font-size: 12px !important; }
body:not(.auth-mode) .v12-menu-footer .user-mini span { color: #816b60 !important; font-size: 9px !important; }
body:not(.auth-mode) .sidebar-scrim {
  position: fixed !important;
  inset: 0 !important;
  z-index: 140 !important;
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: rgba(73, 49, 31, .26) !important;
  backdrop-filter: blur(3px) !important;
  transition: opacity .18s ease, visibility .18s ease !important;
}
body:not(.auth-mode).sidebar-open .sidebar-scrim {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body:not(.auth-mode) .mobile-dock { display: none !important; }

/* Notification panel */
body:not(.auth-mode) .notification-drawer {
  position: fixed !important;
  top: 78px !important;
  right: 24px !important;
  z-index: 150 !important;
  width: min(390px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 100px) !important;
  border: 1px solid #eccb86 !important;
  border-radius: 18px !important;
  background: #fffefa !important;
  box-shadow: 0 22px 60px rgba(75, 45, 23, .18) !important;
}

@media (max-width: 1480px) {
  body:not(.auth-mode) .app-header-inner { gap: 10px !important; padding: 0 16px !important; }
  body:not(.auth-mode) .brand-home { gap: 7px !important; }
  body:not(.auth-mode) .brand-bloom { width: 50px !important; height: 50px !important; }
  body:not(.auth-mode) .brand-copy strong { font-size: 14px !important; }
  body:not(.auth-mode) .brand-copy small { font-size: 8px !important; }
  .top-primary-nav .nav-item,
  .top-primary-nav .nav-service-toggle { height: 54px !important; padding: 0 9px !important; gap: 7px !important; font-size: 13px !important; }
  .top-primary-nav .top-nav-icon { width: 25px !important; height: 25px !important; flex-basis: 25px !important; }
  .top-primary-nav .top-nav-icon svg { width: 21px !important; height: 21px !important; }
  body:not(.auth-mode) .global-search { width: 215px !important; min-width: 170px !important; }
  .v12-dashboard { padding-left: 48px !important; padding-right: 48px !important; }
  .v12-dashboard-layout { grid-template-columns: minmax(0, 2fr) minmax(350px, .95fr) !important; }
  .v12-summary-grid { gap: 9px !important; }
  .v12-stat-card { padding-left: 10px !important; padding-right: 10px !important; }
}

@media (max-width: 1180px) {
  body:not(.auth-mode) .brand-copy { display: none !important; }
  .top-primary-nav .nav-item,
  .top-primary-nav .nav-service-toggle { font-size: 12px !important; padding: 0 8px !important; }
  body:not(.auth-mode) .global-search { width: 190px !important; }
  .v12-dashboard { padding-left: 24px !important; padding-right: 24px !important; }
  .v12-dashboard-layout { grid-template-columns: minmax(0, 1fr) 340px !important; }
  .v12-top-grid { grid-template-columns: 1fr !important; }
  .v12-note-panel { min-height: 196px !important; }
  .v12-task-list { grid-template-columns: 1fr 1fr !important; gap: 0 12px !important; }
  .v12-note-bear { width: 72px !important; }
  .v12-middle-grid { grid-template-columns: 1.55fr .8fr !important; }
  .v12-table-head,
  .v12-table-row { grid-template-columns: 35px 1.2fr 1.1fr 1.1fr 1.25fr .85fr 1.1fr !important; }
  body:not(.auth-mode) .app-menu-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}

@media (max-width: 900px) {
  body:not(.auth-mode) .app-header,
  body:not(.auth-mode)[data-view="dashboard"] .app-header,
  body:not(.auth-mode):not([data-view="dashboard"]) .app-header {
    height: 68px !important;
    border-radius: 0 0 16px 16px !important;
  }
  body:not(.auth-mode) .workspace,
  body:not(.auth-mode) .main-content { min-height: calc(100vh - 68px) !important; }
  body:not(.auth-mode) .app-header-inner { padding: 0 13px !important; }
  body:not(.auth-mode) .brand-home { height: 54px !important; }
  body:not(.auth-mode) .brand-bloom { width: 46px !important; height: 46px !important; border-radius: 15px !important; }
  body:not(.auth-mode) .brand-copy { display: grid !important; }
  body:not(.auth-mode) .brand-copy strong { font-size: 13px !important; }
  body:not(.auth-mode) .brand-copy small { font-size: 7px !important; }
  .top-primary-nav { display: none !important; }
  body:not(.auth-mode) .header-actions { margin-left: auto !important; }
  body:not(.auth-mode) .global-search { display: none !important; }
  body:not(.auth-mode) .top-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; }
  body:not(.auth-mode) .compact-profile { width: 40px !important; min-width: 40px !important; height: 40px !important; }
  .v12-dashboard {
    min-height: calc(100vh - 68px) !important;
    padding: 13px 12px 96px !important;
    overflow: visible !important;
  }
  .v12-left-decor,
  .v12-right-decor,
  .v12-hero-decor { display: none !important; }
  .v12-dashboard-hero { height: 92px !important; }
  .v12-greeting-bear { width: 70px !important; height: 70px !important; }
  .v12-greeting-wrap { gap: 10px !important; }
  .v12-greeting-wrap h1 { font-size: 25px !important; }
  .v12-greeting-wrap p { font-size: 9px !important; }
  .v12-dashboard-layout { grid-template-columns: 1fr !important; }
  .v12-top-grid,
  .v12-middle-grid { grid-template-columns: 1fr !important; }
  .v12-summary-panel { min-height: 0 !important; padding: 16px 12px !important; }
  .v12-summary-grid { grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
  .v12-stat-card {
    min-height: 102px !important;
    padding: 10px !important;
    grid-template-columns: 42px minmax(0,1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 9px !important;
  }
  .v12-stat-icon { grid-row: 1 / 3 !important; width: 42px !important; height: 42px !important; }
  .v12-stat-icon svg { width: 23px !important; height: 23px !important; }
  .v12-stat-card > b { margin: 0 !important; min-height: 0 !important; font-size: 10px !important; }
  .v12-stat-card > strong { grid-column: 3 !important; grid-row: 1 / 3 !important; align-self: center !important; font-size: 26px !important; }
  .v12-stat-card > small { grid-column: 2 !important; font-size: 8px !important; }
  .v12-note-panel { min-height: 210px !important; }
  .v12-task-list { grid-template-columns: 1fr !important; }
  .v12-services-panel { min-height: 0 !important; }
  .v12-service-list { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .v12-service-card { height: 90px !important; }
  .v12-reminder-panel { min-height: 130px !important; }
  .v12-recent-panel { overflow-x: auto !important; }
  .v12-table-head,
  .v12-table-row { min-width: 780px !important; }
  .v12-inbox-panel { min-height: 580px !important; }
  .v12-dashboard-footer { width: 100% !important; grid-template-columns: 1fr !important; gap: 4px !important; padding: 11px 13px !important; text-align: center !important; }
  .v12-dashboard-footer > div { justify-content: center !important; }
  .v12-dashboard-footer > span { padding: 0 !important; border: 0 !important; }

  body:not(.auth-mode):not([data-view="dashboard"]) .main-content { padding: 16px 11px 96px !important; }
  body:not(.auth-mode) .mobile-dock {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    z-index: 120 !important;
    height: 68px !important;
    padding: 5px 7px !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: center !important;
    border: 1px solid #e7bb5b !important;
    border-radius: 22px !important;
    background: rgba(255,254,248,.97) !important;
    box-shadow: 0 18px 45px rgba(92,55,26,.19) !important;
    backdrop-filter: blur(16px) !important;
  }
  body:not(.auth-mode) .mobile-dock .nav-item,
  body:not(.auth-mode) .mobile-dock .mobile-menu {
    position: relative !important;
    width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: transparent !important;
    color: #927669 !important;
    font-size: 7px !important;
    font-weight: 850 !important;
  }
  body:not(.auth-mode) .mobile-dock .nav-item svg { width: 19px !important; height: 19px !important; }
  body:not(.auth-mode) .mobile-dock .nav-item.active { background: #fff4cf !important; color: #c8871a !important; }
  body:not(.auth-mode) .mobile-dock .mobile-menu {
    width: 58px !important;
    height: 58px !important;
    margin: -22px auto 0 !important;
    border: 2px solid #fffefa !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg,#ffe47d,#f4b934) !important;
    color: #65401e !important;
    box-shadow: 0 8px 20px rgba(178,114,20,.25) !important;
  }
  body:not(.auth-mode) .mobile-dock .mobile-menu svg { width: 24px !important; height: 24px !important; }
  body:not(.auth-mode) .mobile-dot { position: absolute !important; top: 4px !important; right: 12px !important; min-width: 16px !important; height: 16px !important; display: grid !important; place-items: center !important; border-radius: 999px !important; background: #ef8068 !important; color: white !important; font-size: 7px !important; }

  body:not(.auth-mode) .v12-mega-menu,
  body:not(.auth-mode) .app-menu {
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 87px !important;
    width: auto !important;
    max-height: calc(100vh - 110px) !important;
    padding: 18px 14px !important;
    border-radius: 24px !important;
    transform: translateY(18px) scale(.98) !important;
  }
  body:not(.auth-mode).sidebar-open .v12-mega-menu,
  body:not(.auth-mode).sidebar-open .app-menu { transform: translateY(0) scale(1) !important; }
  body:not(.auth-mode) .app-menu-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  body:not(.auth-mode) .app-menu-grid .nav-item { min-height: 112px !important; }
  body:not(.auth-mode) .v12-menu-footer { position: sticky !important; bottom: -18px !important; margin: 0 -14px -18px !important; padding: 12px 14px !important; background: #fffefa !important; }
}

@media (max-width: 520px) {
  body:not(.auth-mode) .brand-copy small { display: none !important; }
  body:not(.auth-mode) .header-actions { gap: 3px !important; }
  body:not(.auth-mode) .top-icon { width: 37px !important; min-width: 37px !important; }
  body:not(.auth-mode) .compact-profile { width: 37px !important; min-width: 37px !important; height: 37px !important; }
  .v12-greeting-bear { width: 62px !important; height: 62px !important; }
  .v12-greeting-wrap h1 { font-size: 22px !important; }
  .v12-summary-grid { gap: 7px !important; }
  .v12-stat-card { min-height: 92px !important; grid-template-columns: 38px 1fr auto !important; padding: 9px 8px !important; }
  .v12-stat-icon { width: 38px !important; height: 38px !important; }
  .v12-stat-card > strong { font-size: 23px !important; }
  .v12-service-list { grid-template-columns: 1fr 1fr !important; }
  .v12-inbox-tabs button { padding: 0 8px !important; }
  body:not(.auth-mode) .app-menu-grid { grid-template-columns: 1fr 1fr !important; }
  body:not(.auth-mode) .app-menu-grid .nav-item { min-height: 105px !important; }
}

/* Final header-fit and avatar refinements */
@media (min-width: 901px) {
  body:not(.auth-mode) .app-header-inner { gap: 14px !important; }
  .top-primary-nav .nav-item,
  .top-primary-nav .nav-service-toggle { padding-left: 9px !important; padding-right: 9px !important; gap: 7px !important; }
  body:not(.auth-mode) .global-search { width: clamp(205px, 14.7vw, 250px) !important; }
}
body:not(.auth-mode) .compact-profile .avatar {
  display: grid !important;
  place-items: center !important;
  color: transparent !important;
  background: #fff4cf url('/assets/v12-brand-bear.png') center / cover no-repeat !important;
}

/* Unified rounded sans typography across functional modules. */
body:not(.auth-mode) h1,
body:not(.auth-mode) h2,
body:not(.auth-mode) h3,
body:not(.auth-mode) h4,
body:not(.auth-mode) .idcard-production-hero h2,
body:not(.auth-mode) .service-spotlight h2,
body:not(.auth-mode) .ticket-banner h2,
body:not(.auth-mode) .app-menu h2,
body:not(.auth-mode) .standalone-request-page > h1 {
  font-family: "NanumSquareRound", "Comfortaa", "Inter", "Lato", sans-serif !important;
}
body:not(.auth-mode) .idcard-production-hero h2,
body:not(.auth-mode) .service-spotlight h2 {
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}
body:not(.auth-mode):not(.sidebar-open) .app-menu {
  transition-duration: .12s !important;
}


/* Self-contained rounded typography: no network font dependency. */
body.auth-mode, body.auth-mode button, body.auth-mode input, body.auth-mode select, body.auth-mode textarea {
  font-family: "NanumSquareRound", "Comfortaa", "Inter", "Lato", sans-serif !important;
}
body.auth-mode h1, body.auth-mode h2, body.auth-mode h3, body.auth-mode .exact-auth-brand strong {
  font-family: "NanumSquareRound", "Comfortaa", "Inter", sans-serif !important;
}


/* ===== cute-large-v13.css ===== */
/* v13 — larger typography + illustrated pastel icon system
   Loaded after horizontal-full.css so every existing route stays functional. */

:root {
  --v13-ink: #4c2d25;
  --v13-muted: #80665a;
  --v13-line: #efd19a;
  --v13-paper: rgba(255, 255, 255, .94);
  --v13-yellow: #f7bb38;
  --v13-yellow-soft: #fff1bd;
  --v13-coral: #f38d72;
  --v13-coral-soft: #ffe9df;
  --v13-peach: #f5a15d;
  --v13-peach-soft: #fff0df;
  --v13-lilac: #9b88e7;
  --v13-lilac-soft: #efeaff;
  --v13-sky: #76b6e4;
  --v13-sky-soft: #e6f5ff;
  --v13-mint: #82c77a;
  --v13-mint-soft: #eaf7e6;
  --v13-rose: #ed8499;
  --v13-rose-soft: #ffe9ef;
  --v13-icon-stroke: #704536;
}

/* Typography — large enough to read, still rounded and cheerful. */
body:not(.auth-mode),
body:not(.auth-mode) button,
body:not(.auth-mode) input,
body:not(.auth-mode) select,
body:not(.auth-mode) textarea {
  font-family: "Nunito", "Lato", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  text-rendering: optimizeLegibility;
}
body:not(.auth-mode) h1,
body:not(.auth-mode) h2,
body:not(.auth-mode) h3,
body:not(.auth-mode) h4,
body:not(.auth-mode) .brand-copy,
body:not(.auth-mode) .top-primary-nav,
body:not(.auth-mode) .v12-panel-title,
body:not(.auth-mode) .app-menu-head,
body:not(.auth-mode) .app-menu-grid .nav-item b {
  font-family: "Baloo 2", "Comfortaa", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif !important;
}

/* Every sprite icon is a tiny illustrated object rather than a thin line glyph. */
body:not(.auth-mode) svg:not(.svg-sprite) {
  overflow: visible;
}
body:not(.auth-mode) svg use {
  pointer-events: none;
}

/* Header: bigger labels, larger illustrated badges. */
body:not(.auth-mode) .app-header,
body:not(.auth-mode)[data-view="dashboard"] .app-header,
body:not(.auth-mode):not([data-view="dashboard"]) .app-header {
  height: 96px !important;
  border-radius: 0 0 24px 24px !important;
}
body:not(.auth-mode) .workspace,
body:not(.auth-mode) .main-content {
  min-height: calc(100vh - 96px) !important;
}
body:not(.auth-mode) .app-header-inner {
  padding: 0 clamp(20px, 2vw, 36px) !important;
  gap: clamp(10px, 1.1vw, 20px) !important;
}
body:not(.auth-mode) .brand-home {
  height: 72px !important;
  gap: 12px !important;
}
body:not(.auth-mode) .brand-bloom {
  width: 64px !important;
  height: 64px !important;
  border-radius: 21px !important;
  box-shadow: inset 0 0 0 1.5px #efbf5e, 0 8px 18px rgba(190, 128, 39, .09) !important;
}
body:not(.auth-mode) .brand-copy strong {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: .015em !important;
}
body:not(.auth-mode) .brand-copy small {
  margin-top: 2px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
}
.top-primary-nav {
  gap: clamp(2px, .35vw, 7px) !important;
}
.top-primary-nav .nav-item,
.top-primary-nav .nav-service-toggle {
  height: 66px !important;
  padding: 0 clamp(10px, .78vw, 16px) !important;
  gap: 10px !important;
  border-radius: 20px !important;
  font-size: clamp(16px, 1.02vw, 18px) !important;
  font-weight: 800 !important;
  letter-spacing: -.015em !important;
}
.top-primary-nav .nav-item.active {
  background: linear-gradient(180deg, #fff8e0, #ffefb9) !important;
  border-color: #edc468 !important;
  box-shadow: 0 8px 20px rgba(187, 125, 30, .12) !important;
}
.top-primary-nav .top-nav-icon {
  width: 39px !important;
  height: 39px !important;
  flex: 0 0 39px !important;
  border: 1px solid rgba(111, 69, 54, .08) !important;
  border-radius: 13px !important;
  background: var(--icon-bg, #fff2c9) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 13px rgba(116,76,47,.08) !important;
  transform: rotate(-1.5deg);
}
.top-primary-nav .nav-item:nth-child(even) .top-nav-icon,
.top-primary-nav .nav-service-toggle .top-nav-icon { transform: rotate(1.5deg); }
.top-primary-nav .top-nav-icon svg {
  width: 32px !important;
  height: 32px !important;
  filter: drop-shadow(0 2px 1px rgba(106,64,43,.08));
}
.top-primary-nav .nav-yellow { --icon-bg:#fff3c6; --icon-fill:#f6ba38; --icon-accent:#ff9b76; --icon-mint:#8bcf87; --icon-lilac:#a896ed; --icon-stroke:#734733; }
.top-primary-nav .nav-coral  { --icon-bg:#ffe9df; --icon-fill:#f28b70; --icon-accent:#f7ba39; --icon-mint:#8bcf87; --icon-lilac:#a896ed; --icon-stroke:#734733; }
.top-primary-nav .nav-lilac { --icon-bg:#eee9ff; --icon-fill:#a18ee8; --icon-accent:#ff9679; --icon-mint:#8bcf87; --icon-lilac:#a18ee8; --icon-stroke:#654438; }
.top-primary-nav .nav-peach  { --icon-bg:#fff0dd; --icon-fill:#f4a15c; --icon-accent:#ef8093; --icon-mint:#88c985; --icon-lilac:#9a8ae4; --icon-stroke:#734733; }
.top-primary-nav .nav-sky    { --icon-bg:#e7f5ff; --icon-fill:#79b7e5; --icon-accent:#f28c72; --icon-mint:#8acb84; --icon-lilac:#a08de8; --icon-stroke:#62463c; }
.top-primary-nav .nav-mint   { --icon-bg:#eaf7e6; --icon-fill:#83c779; --icon-accent:#f39a78; --icon-mint:#83c779; --icon-lilac:#a08de8; --icon-stroke:#65483c; }
.top-primary-nav .nav-rose   { --icon-bg:#ffeaf0; --icon-fill:#ed8399; --icon-accent:#f8b73b; --icon-mint:#86c982; --icon-lilac:#a08de8; --icon-stroke:#6d4437; }
.top-primary-nav .nav-count {
  top: 4px !important;
  right: 4px !important;
  min-width: 21px !important;
  height: 21px !important;
  padding: 0 5px !important;
  font-size: 10px !important;
}
body:not(.auth-mode) .global-search {
  width: clamp(235px, 17vw, 310px) !important;
  height: 50px !important;
  padding: 0 15px !important;
  gap: 10px !important;
}
body:not(.auth-mode) .global-search > svg {
  width: 24px !important;
  height: 24px !important;
  flex-basis: 24px !important;
  --icon-bg: transparent;
  --icon-accent: #ed8a73;
  --icon-stroke: #724736;
}
body:not(.auth-mode) .global-search input {
  font-size: 13px !important;
  font-weight: 700 !important;
}
body:not(.auth-mode) .top-icon,
body:not(.auth-mode) .compact-profile {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
}
body:not(.auth-mode) .top-icon {
  border: 1px solid #f0d69f !important;
  background: #fffaf0 !important;
  --icon-bg: transparent;
  --icon-fill: #f7ba3b;
  --icon-accent: #f18476;
  --icon-stroke: #704536;
}
body:not(.auth-mode) .top-icon svg { width: 31px !important; height: 31px !important; }
body:not(.auth-mode) .compact-profile .avatar { width: 42px !important; height: 42px !important; }

/* Dashboard: larger content instead of compressing everything into tiny type. */
.v12-dashboard {
  min-height: calc(100vh - 96px) !important;
  padding: 18px clamp(28px, 5.4vw, 96px) 28px !important;
}
.v12-dashboard-hero {
  height: clamp(122px, 8.4vw, 148px) !important;
}
.v12-greeting-bear {
  width: clamp(94px, 6.7vw, 118px) !important;
  height: clamp(94px, 6.7vw, 118px) !important;
}
.v12-greeting-wrap h1 {
  font-size: clamp(36px, 2.65vw, 48px) !important;
  font-weight: 800 !important;
}
.v12-greeting-wrap p {
  margin-top: 8px !important;
  font-size: clamp(14px, .92vw, 16px) !important;
  font-weight: 700 !important;
}
.v12-hero-decor {
  width: clamp(410px, 34vw, 590px) !important;
  max-height: 146px !important;
}
.v12-dashboard-layout {
  grid-template-columns: minmax(0, 2.14fr) minmax(420px, 1fr) !important;
  gap: 16px !important;
}
.v12-main-column { gap: 14px !important; }
.v12-top-grid,
.v12-middle-grid { gap: 14px !important; }
.v12-panel {
  border-radius: 20px !important;
  border-width: 1.25px !important;
  box-shadow: 0 10px 24px rgba(112,76,39,.065) !important;
}
.v12-panel-title { gap: 9px !important; }
.v12-panel-title > span {
  font-size: 23px !important;
  filter: drop-shadow(0 2px 1px rgba(224,155,30,.16));
}
.v12-panel-title > i { font-size: 15px !important; }
.v12-panel-title h2 {
  font-size: clamp(19px, 1.26vw, 22px) !important;
  font-weight: 800 !important;
}
.v12-link-button {
  min-width: 96px !important;
  height: 36px !important;
  padding: 0 15px !important;
  font-size: 12px !important;
}

.v12-summary-panel {
  min-height: 306px !important;
  padding: 24px 20px 18px !important;
}
.v12-summary-grid {
  margin-top: 18px !important;
  gap: 15px !important;
}
.v12-stat-card {
  min-height: 214px !important;
  padding: 18px 16px 15px !important;
  grid-template-rows: 66px auto auto 1fr !important;
  border-radius: 19px !important;
}
.v12-stat-icon {
  width: 62px !important;
  height: 62px !important;
  border: 1px solid rgba(107,70,54,.09) !important;
  border-radius: 18px !important;
  background: var(--icon-bg, #fff1c7) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 16px rgba(94,55,29,.08) !important;
  transform: rotate(-2deg);
}
.v12-stat-card:nth-child(even) .v12-stat-icon { transform: rotate(2deg); }
.v12-stat-icon svg {
  width: 50px !important;
  height: 50px !important;
  filter: drop-shadow(0 2px 1px rgba(102,63,40,.08));
}
.stat-butter .v12-stat-icon { --icon-bg:#fff1bf; --icon-fill:#f6b934; --icon-accent:#ff9473; --icon-mint:#8acc84; --icon-lilac:#9f8ce8; --icon-stroke:#704536; }
.stat-peach  .v12-stat-icon { --icon-bg:#ffe6d9; --icon-fill:#ef8b70; --icon-accent:#f7ba36; --icon-mint:#8aca83; --icon-lilac:#9c8be7; --icon-stroke:#704536; }
.stat-lilac .v12-stat-icon { --icon-bg:#eee9ff; --icon-fill:#9c88e7; --icon-accent:#ef8795; --icon-mint:#88ca83; --icon-lilac:#9c88e7; --icon-stroke:#684639; }
.stat-mint   .v12-stat-icon { --icon-bg:#e7f6e3; --icon-fill:#80c476; --icon-accent:#f2a072; --icon-mint:#80c476; --icon-lilac:#9c8ae7; --icon-stroke:#66483b; }
.v12-stat-card > b {
  margin-top: 10px !important;
  min-height: 42px !important;
  font-size: clamp(14px, .9vw, 16px) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}
.v12-stat-card > strong {
  font-size: clamp(35px, 2.25vw, 42px) !important;
}
.v12-stat-card > small {
  font-size: 12px !important;
  font-weight: 700 !important;
}

.v12-note-panel {
  min-height: 306px !important;
  padding: 24px 21px !important;
}
.v12-task-list { margin-top: 17px !important; }
.v12-task {
  min-height: 54px !important;
  gap: 13px !important;
}
.v12-checkbox {
  width: 23px !important;
  height: 23px !important;
  flex-basis: 23px !important;
  border-radius: 7px !important;
}
.v12-task input:checked + .v12-checkbox::after { font-size: 22px !important; }
.v12-task b { font-size: 14px !important; font-weight: 750 !important; }
.v12-note-bear { width: 104px !important; }

.v12-services-panel {
  min-height: 168px !important;
  padding: 21px 19px 16px !important;
}
.v12-service-list {
  margin-top: 13px !important;
  gap: 13px !important;
}
.v12-service-card {
  height: 106px !important;
  padding: 10px !important;
  gap: 8px !important;
  border-radius: 17px !important;
}
.v12-service-card > span {
  width: 58px !important;
  height: 58px !important;
  border: 1px solid rgba(107,70,54,.08) !important;
  border-radius: 17px !important;
  background: var(--icon-bg, #fff1c7) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 7px 14px rgba(94,55,29,.07) !important;
}
.v12-service-card svg { width: 47px !important; height: 47px !important; }
.v12-service-card b {
  font-size: 12.5px !important;
  font-weight: 800 !important;
}
.service-coral { --icon-bg:#ffe9df; --icon-fill:#ef896f; --icon-accent:#f7b83a; --icon-mint:#8acb84; --icon-lilac:#a08de8; --icon-stroke:#704536; }
.service-mint  { --icon-bg:#e7f6e3; --icon-fill:#7fc277; --icon-accent:#f29a75; --icon-mint:#7fc277; --icon-lilac:#9c8ae7; --icon-stroke:#67483b; }
.service-rose  { --icon-bg:#ffe9ef; --icon-fill:#ec8197; --icon-accent:#f7b63a; --icon-mint:#88c983; --icon-lilac:#a08ce8; --icon-stroke:#704536; }
.service-yellow{ --icon-bg:#fff1bd; --icon-fill:#f5b733; --icon-accent:#ef8f75; --icon-mint:#8acb84; --icon-lilac:#a08de8; --icon-stroke:#704536; }
.service-lilac { --icon-bg:#eee9ff; --icon-fill:#9b88e6; --icon-accent:#ed8497; --icon-mint:#87c981; --icon-lilac:#9b88e6; --icon-stroke:#694639; }

.v12-reminder-panel {
  min-height: 168px !important;
  padding: 21px !important;
}
.v12-reminder-copy { margin-top: 33px !important; gap: 7px !important; }
.v12-reminder-copy b { font-size: 14px !important; }
.v12-reminder-copy span { font-size: 12px !important; }
.v12-reminder-panel > img { width: 145px !important; }

.v12-recent-panel {
  min-height: 286px !important;
  padding: 20px 18px 15px !important;
}
.v12-table-head,
.v12-table-row {
  grid-template-columns: 42px 1.22fr 1.18fr 1.15fr 1.6fr .9fr 1.32fr !important;
  gap: 10px !important;
}
.v12-table-head {
  min-height: 43px !important;
  margin-top: 13px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
}
.v12-table-row {
  min-height: 42px !important;
  padding: 0 12px !important;
}
.v12-table-row b,
.v12-table-row span,
.v12-table-row time {
  font-size: 11.5px !important;
  font-weight: 700 !important;
}
.v12-table-row .pill {
  min-height: 24px !important;
  padding: 3px 9px !important;
  font-size: 10px !important;
}

.v12-inbox-panel {
  min-height: 788px !important;
  padding: 23px 18px 17px !important;
}
.v12-inbox-panel .v12-panel-head-row > div > p {
  margin-top: 8px !important;
  font-size: 12px !important;
}
.v12-inbox-tabs {
  margin-top: 17px !important;
  gap: 8px !important;
}
.v12-inbox-tabs button {
  height: 38px !important;
  padding: 0 13px !important;
  gap: 8px !important;
  border-radius: 12px !important;
  font-size: 10.5px !important;
}
.v12-inbox-tabs b {
  min-width: 21px !important;
  height: 21px !important;
  font-size: 9px !important;
}
.v12-inbox-list {
  margin-top: 13px !important;
  border-radius: 17px !important;
}
.v12-inbox-row {
  min-height: 108px !important;
  padding: 15px 13px 13px 29px !important;
  gap: 10px !important;
}
.v12-inbox-dot {
  left: 12px !important;
  top: 18px !important;
  width: 10px !important;
  height: 10px !important;
}
.v12-inbox-copy b { font-size: 13px !important; }
.v12-inbox-copy strong { margin-top: 3px !important; font-size: 12px !important; }
.v12-inbox-copy span { margin-top: 4px !important; font-size: 11px !important; }
.v12-inbox-copy time { margin-top: 3px !important; font-size: 10px !important; }
.v12-inbox-row > .pill { min-height: 25px !important; padding: 4px 9px !important; font-size: 9.5px !important; }
.v12-pagination { min-height: 54px !important; gap: 8px !important; }
.v12-pagination button { width: 32px !important; height: 32px !important; font-size: 11px !important; }
.v12-dashboard-footer {
  width: calc(100% - clamp(150px, 18vw, 300px)) !important;
  min-height: 54px !important;
  margin-top: 18px !important;
  padding: 10px 18px !important;
  border-radius: 18px !important;
}
.v12-dashboard-footer img { width: 29px !important; height: 29px !important; }
.v12-dashboard-footer b { font-size: 11px !important; }
.v12-dashboard-footer span,
.v12-dashboard-footer small { font-size: 10.5px !important; }

/* Functional pages: no more 8–10 px UI text. */
body:not(.auth-mode):not([data-view="dashboard"]) .main-content {
  padding: 28px clamp(24px, 4.7vw, 82px) 46px !important;
}
body:not(.auth-mode) .page-header h1 { font-size: 34px !important; font-weight: 800 !important; }
body:not(.auth-mode) .page-header p { font-size: 14px !important; line-height: 1.65 !important; }
body:not(.auth-mode) .page-header .eyebrow { font-size: 11.5px !important; }
body:not(.auth-mode) .btn {
  min-height: 46px !important;
  padding: 0 17px !important;
  border-radius: 14px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  --icon-bg: transparent;
  --icon-fill: #f4b83a;
  --icon-accent: #ef8976;
  --icon-mint: #84c77e;
  --icon-lilac: #9c8ae6;
  --icon-stroke: currentColor;
}
body:not(.auth-mode) .btn.small { min-height: 39px !important; height: 39px !important; font-size: 12.5px !important; }
body:not(.auth-mode) .btn svg { width: 23px !important; height: 23px !important; }
body:not(.auth-mode) .field-shell input,
body:not(.auth-mode) .field-shell select,
body:not(.auth-mode) .input,
body:not(.auth-mode) textarea.input {
  font-size: 13.5px !important;
}
body:not(.auth-mode) .input { min-height: 45px !important; }
body:not(.auth-mode) .data-table th {
  padding: 0 14px 8px !important;
  font-size: 11px !important;
}
body:not(.auth-mode) .data-table td {
  padding: 15px 14px !important;
  font-size: 12.5px !important;
}
body:not(.auth-mode) .data-table td b { font-size: 12.5px !important; }
body:not(.auth-mode) .data-table td span,
body:not(.auth-mode) .data-table td small { font-size: 11px !important; }
body:not(.auth-mode) .pill {
  min-height: 25px !important;
  padding: 4px 10px !important;
  font-size: 10.5px !important;
}
body:not(.auth-mode) .metric-card { min-height: 150px !important; padding: 18px !important; }
body:not(.auth-mode) .metric-top > span { font-size: 12.5px !important; }
body:not(.auth-mode) .metric-card > strong { font-size: 34px !important; }
body:not(.auth-mode) .metric-foot { font-size: 10.5px !important; }
body:not(.auth-mode) .metric-icon,
body:not(.auth-mode) .service-icon,
body:not(.auth-mode) .activity-icon,
body:not(.auth-mode) .item-photo,
body:not(.auth-mode) .doc-icon {
  --icon-bg: #fff1c7;
  --icon-fill: #f5b83a;
  --icon-accent: #ef8a75;
  --icon-mint: #84c77e;
  --icon-lilac: #9c8ae6;
  --icon-stroke: #704536;
}
body:not(.auth-mode) .metric-icon { width: 45px !important; height: 45px !important; border-radius: 14px !important; }
body:not(.auth-mode) .metric-icon svg { width: 35px !important; height: 35px !important; }
body:not(.auth-mode) .service-icon { width: 48px !important; height: 48px !important; border-radius: 15px !important; }
body:not(.auth-mode) .service-icon svg { width: 38px !important; height: 38px !important; }
body:not(.auth-mode) .service-spotlight {
  grid-template-columns: 100px minmax(0,1fr) 205px !important;
  gap: 22px !important;
  padding: 26px 28px !important;
}
body:not(.auth-mode) .service-spotlight-icon {
  width: 86px !important;
  height: 86px !important;
  --icon-bg:#fff0c1;
  --icon-fill:#f5b735;
  --icon-accent:#ef8b75;
  --icon-mint:#83c77d;
  --icon-lilac:#9c89e6;
  --icon-stroke:#704536;
}
body:not(.auth-mode) .service-spotlight-icon svg { width: 68px !important; height: 68px !important; }
body:not(.auth-mode) .service-spotlight-copy h2 { font-size: 30px !important; }
body:not(.auth-mode) .service-spotlight-copy p { font-size: 14px !important; }
body:not(.auth-mode) .service-spotlight-tags span { min-height: 31px !important; font-size: 11px !important; }
body:not(.auth-mode) .service-spotlight-tags svg { width: 20px !important; height: 20px !important; }
body:not(.auth-mode) .service-spotlight-note strong { font-size: 12px !important; }
body:not(.auth-mode) .service-spotlight-note small { font-size: 10px !important; }
body:not(.auth-mode) .ticket-name b { font-size: 12px !important; }
body:not(.auth-mode) .ticket-name span { font-size: 10.5px !important; }
body:not(.auth-mode) .ticket-banner h1,
body:not(.auth-mode) .ticket-banner h2 { font-size: 27px !important; }
body:not(.auth-mode) .ticket-banner p { font-size: 13px !important; }
body:not(.auth-mode) .section-head h3,
body:not(.auth-mode) .card-title h3 { font-size: 17px !important; }
body:not(.auth-mode) .section-head p,
body:not(.auth-mode) .card-title p { font-size: 12px !important; }
body:not(.auth-mode) .info-item span,
body:not(.auth-mode) .route-row span,
body:not(.auth-mode) .form-field > span,
body:not(.auth-mode) .form-field label { font-size: 11px !important; }
body:not(.auth-mode) .info-item b,
body:not(.auth-mode) .route-row b { font-size: 13px !important; }

/* Standalone request detail. */
body:not(.auth-mode) .standalone-request-page > h1 { font-size: 34px !important; }
body:not(.auth-mode) .standalone-breadcrumb { font-size: 12px !important; }
body:not(.auth-mode) .standalone-paper,
body:not(.auth-mode) .standalone-history { font-size: 13px !important; }
body:not(.auth-mode) .standalone-fields span,
body:not(.auth-mode) .standalone-description > span { font-size: 11.5px !important; }
body:not(.auth-mode) .standalone-fields b,
body:not(.auth-mode) .standalone-description p { font-size: 13px !important; }
body:not(.auth-mode) .standalone-history h2 { font-size: 21px !important; }

/* Mega menu: larger, playful service tiles. */
body:not(.auth-mode) .v12-mega-menu,
body:not(.auth-mode) .app-menu {
  width: min(1120px, calc(100vw - 42px)) !important;
  padding: 28px !important;
  border-radius: 30px !important;
}
body:not(.auth-mode) .app-menu-head h2 { font-size: 34px !important; font-weight: 800 !important; }
body:not(.auth-mode) .app-menu-head p { font-size: 14px !important; }
body:not(.auth-mode) .app-menu-grid { gap: 14px !important; }
body:not(.auth-mode) .app-menu-grid .nav-item {
  min-height: 112px !important;
  padding: 16px !important;
  grid-template-columns: 62px 1fr auto !important;
  gap: 14px !important;
  border-radius: 21px !important;
}
body:not(.auth-mode) .app-menu-grid .menu-tile-icon {
  width: 62px !important;
  height: 62px !important;
  border: 1px solid rgba(109,69,53,.08) !important;
  border-radius: 19px !important;
  background: var(--icon-bg, #fff1c5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 16px rgba(98,58,32,.07) !important;
}
body:not(.auth-mode) .app-menu-grid .menu-tile-icon svg { width: 50px !important; height: 50px !important; }
body:not(.auth-mode) .app-menu-grid .menu-tile-icon.butter { --icon-bg:#fff1bc; --icon-fill:#f5b633; --icon-accent:#ef8b74; --icon-mint:#85c880; --icon-lilac:#9c8ae6; --icon-stroke:#704536; }
body:not(.auth-mode) .app-menu-grid .menu-tile-icon.peach  { --icon-bg:#ffebdc; --icon-fill:#f09a5b; --icon-accent:#eb8496; --icon-mint:#85c880; --icon-lilac:#9c8ae6; --icon-stroke:#704536; }
body:not(.auth-mode) .app-menu-grid .menu-tile-icon.rose   { --icon-bg:#ffe9ef; --icon-fill:#eb8096; --icon-accent:#f6b738; --icon-mint:#85c880; --icon-lilac:#9c8ae6; --icon-stroke:#704536; }
body:not(.auth-mode) .app-menu-grid .menu-tile-icon.lilac { --icon-bg:#eee9ff; --icon-fill:#9b88e5; --icon-accent:#ec8495; --icon-mint:#85c880; --icon-lilac:#9b88e5; --icon-stroke:#67463a; }
body:not(.auth-mode) .app-menu-grid .menu-tile-icon.mint   { --icon-bg:#e7f6e3; --icon-fill:#7fc276; --icon-accent:#ef9674; --icon-mint:#7fc276; --icon-lilac:#9c8ae6; --icon-stroke:#67483b; }
body:not(.auth-mode) .app-menu-grid .menu-tile-icon.sky    { --icon-bg:#e7f5ff; --icon-fill:#76b5e2; --icon-accent:#ed8975; --icon-mint:#85c880; --icon-lilac:#9c8ae6; --icon-stroke:#62473e; }
body:not(.auth-mode) .app-menu-grid .nav-item b { font-size: 16px !important; font-weight: 800 !important; }
body:not(.auth-mode) .app-menu-grid .nav-item small { font-size: 12px !important; line-height: 1.4 !important; }
body:not(.auth-mode) .app-menu-grid .menu-badge { min-width: 25px !important; height: 25px !important; font-size: 10px !important; }
body:not(.auth-mode) .sidebar-close { width: 46px !important; height: 46px !important; --icon-bg:#fff1c6; --icon-accent:#ef846f; --icon-stroke:#704536; }
body:not(.auth-mode) .sidebar-close svg { width: 31px !important; height: 31px !important; }

/* Mobile: larger labels and cute filled icons, while keeping every route clickable. */
@media (max-width: 1480px) and (min-width: 901px) {
  body:not(.auth-mode) .app-header-inner { padding: 0 14px !important; gap: 8px !important; }
  body:not(.auth-mode) .brand-bloom { width: 54px !important; height: 54px !important; }
  body:not(.auth-mode) .brand-copy strong { font-size: 15.5px !important; }
  body:not(.auth-mode) .brand-copy small { font-size: 8.5px !important; }
  .top-primary-nav .nav-item,
  .top-primary-nav .nav-service-toggle {
    height: 60px !important;
    padding: 0 8px !important;
    gap: 7px !important;
    font-size: 14.5px !important;
  }
  .top-primary-nav .top-nav-icon { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
  .top-primary-nav .top-nav-icon svg { width: 28px !important; height: 28px !important; }
  body:not(.auth-mode) .global-search { width: 205px !important; min-width: 165px !important; }
  .v12-dashboard { padding-left: 42px !important; padding-right: 42px !important; }
  .v12-dashboard-layout { grid-template-columns: minmax(0, 2fr) minmax(380px, .96fr) !important; }
}

@media (max-width: 1180px) and (min-width: 901px) {
  body:not(.auth-mode) .brand-copy { display: none !important; }
  .top-primary-nav .nav-item,
  .top-primary-nav .nav-service-toggle { font-size: 13.5px !important; }
  .v12-dashboard-layout { grid-template-columns: minmax(0, 1fr) 370px !important; }
  .v12-top-grid { grid-template-columns: 1fr !important; }
  .v12-note-panel { min-height: 250px !important; }
  .v12-middle-grid { grid-template-columns: 1.5fr .9fr !important; }
  .v12-inbox-panel { min-height: 900px !important; }
}

@media (max-width: 900px) {
  body:not(.auth-mode) .app-header,
  body:not(.auth-mode)[data-view="dashboard"] .app-header,
  body:not(.auth-mode):not([data-view="dashboard"]) .app-header { height: 76px !important; }
  body:not(.auth-mode) .workspace,
  body:not(.auth-mode) .main-content { min-height: calc(100vh - 76px) !important; }
  body:not(.auth-mode) .brand-bloom { width: 52px !important; height: 52px !important; }
  body:not(.auth-mode) .brand-copy strong { font-size: 15px !important; }
  body:not(.auth-mode) .brand-copy small { font-size: 8px !important; }
  body:not(.auth-mode) .top-icon,
  body:not(.auth-mode) .compact-profile { width: 44px !important; min-width: 44px !important; height: 44px !important; }
  body:not(.auth-mode) .top-icon svg { width: 29px !important; height: 29px !important; }
  .v12-dashboard { min-height: calc(100vh - 76px) !important; padding: 16px 13px 106px !important; }
  .v12-dashboard-hero { height: 108px !important; }
  .v12-greeting-bear { width: 76px !important; height: 76px !important; }
  .v12-greeting-wrap h1 { font-size: 29px !important; }
  .v12-greeting-wrap p { font-size: 12px !important; }
  .v12-panel-title h2 { font-size: 19px !important; }
  .v12-summary-panel { padding: 18px 14px !important; }
  .v12-stat-card {
    min-height: 128px !important;
    grid-template-columns: 52px minmax(0,1fr) auto !important;
    grid-template-rows: auto auto !important;
    padding: 13px 11px !important;
    column-gap: 11px !important;
  }
  .v12-stat-icon { grid-row: 1 / 3 !important; width: 52px !important; height: 52px !important; }
  .v12-stat-icon svg { width: 43px !important; height: 43px !important; }
  .v12-stat-card > b { margin: 0 !important; min-height: 0 !important; font-size: 13px !important; }
  .v12-stat-card > strong { grid-column: 3 !important; grid-row: 1 / 3 !important; align-self: center !important; font-size: 31px !important; }
  .v12-stat-card > small { grid-column: 2 !important; font-size: 10.5px !important; }
  .v12-task b { font-size: 13px !important; }
  .v12-service-card { height: 105px !important; }
  .v12-service-card b { font-size: 12px !important; }
  .v12-table-head,
  .v12-table-row { min-width: 900px !important; }
  .v12-inbox-panel { min-height: 690px !important; }
  body:not(.auth-mode):not([data-view="dashboard"]) .main-content { padding: 20px 12px 108px !important; }

  body:not(.auth-mode) .mobile-dock {
    height: 76px !important;
    border-radius: 24px !important;
  }
  body:not(.auth-mode) .mobile-dock .nav-item,
  body:not(.auth-mode) .mobile-dock .mobile-menu {
    height: 64px !important;
    gap: 4px !important;
    font-size: 10.5px !important;
    font-family: "Baloo 2", "Comfortaa", ui-rounded, sans-serif !important;
    --icon-bg: #fff1c6;
    --icon-fill: #f5b735;
    --icon-accent: #ef8a75;
    --icon-mint: #83c77e;
    --icon-lilac: #9c8ae6;
    --icon-stroke: #704536;
  }
  body:not(.auth-mode) .mobile-dock .nav-item svg { width: 32px !important; height: 32px !important; }
  body:not(.auth-mode) .mobile-dock .nav-item.active { background: #fff0bd !important; color: #6d422d !important; }
  body:not(.auth-mode) .mobile-dock .mobile-menu {
    width: 66px !important;
    height: 66px !important;
    margin-top: -26px !important;
  }
  body:not(.auth-mode) .mobile-dock .mobile-menu svg { width: 39px !important; height: 39px !important; }

  body:not(.auth-mode) .v12-mega-menu,
  body:not(.auth-mode) .app-menu { padding: 20px 15px !important; }
  body:not(.auth-mode) .app-menu-head h2 { font-size: 28px !important; }
  body:not(.auth-mode) .app-menu-head p { font-size: 12px !important; }
  body:not(.auth-mode) .app-menu-grid .nav-item {
    min-height: 125px !important;
    grid-template-columns: 56px minmax(0,1fr) !important;
    align-content: center !important;
  }
  body:not(.auth-mode) .app-menu-grid .menu-tile-icon { width: 56px !important; height: 56px !important; }
  body:not(.auth-mode) .app-menu-grid .menu-tile-icon svg { width: 46px !important; height: 46px !important; }
  body:not(.auth-mode) .app-menu-grid .nav-item b { font-size: 14px !important; }
  body:not(.auth-mode) .app-menu-grid .nav-item small { font-size: 10.5px !important; }

  body:not(.auth-mode) .service-spotlight {
    grid-template-columns: 74px 1fr !important;
    padding: 20px !important;
  }
  body:not(.auth-mode) .service-spotlight-icon { width: 68px !important; height: 68px !important; }
  body:not(.auth-mode) .service-spotlight-icon svg { width: 55px !important; height: 55px !important; }
  body:not(.auth-mode) .service-spotlight-copy h2 { font-size: 25px !important; }
  body:not(.auth-mode) .service-spotlight-copy p { font-size: 12px !important; }
  body:not(.auth-mode) .service-spotlight-note { grid-column: 1 / -1 !important; }
}

@media (max-width: 520px) {
  .v12-greeting-wrap h1 { font-size: 26px !important; }
  .v12-greeting-wrap p { font-size: 11px !important; }
  .v12-summary-grid { gap: 9px !important; }
  .v12-stat-card { min-height: 118px !important; grid-template-columns: 46px 1fr auto !important; }
  .v12-stat-icon { width: 46px !important; height: 46px !important; }
  .v12-stat-icon svg { width: 38px !important; height: 38px !important; }
  .v12-stat-card > b { font-size: 11.5px !important; }
  .v12-stat-card > strong { font-size: 28px !important; }
  .v12-service-list { grid-template-columns: 1fr 1fr !important; }
  .v12-service-card { height: 112px !important; }
  body:not(.auth-mode) .app-menu-grid .nav-item { min-height: 116px !important; padding: 12px !important; gap: 9px !important; }
  body:not(.auth-mode) .app-menu-grid .menu-tile-icon { width: 50px !important; height: 50px !important; }
  body:not(.auth-mode) .app-menu-grid .menu-tile-icon svg { width: 41px !important; height: 41px !important; }
  body:not(.auth-mode) .app-menu-grid .nav-item b { font-size: 12.5px !important; }
  body:not(.auth-mode) .app-menu-grid .nav-item small { font-size: 9.5px !important; }
}

/* Auth typography remains functional but is easier to read. */
body.auth-mode,
body.auth-mode button,
body.auth-mode input,
body.auth-mode select,
body.auth-mode textarea {
  font-family: "Nunito", "Lato", ui-rounded, system-ui, sans-serif !important;
}
body.auth-mode h1,
body.auth-mode h2,
body.auth-mode h3,
body.auth-mode .exact-auth-brand strong {
  font-family: "Baloo 2", "Comfortaa", ui-rounded, system-ui, sans-serif !important;
}
body.auth-mode .exact-auth-card h1 { font-size: 34px !important; }
body.auth-mode .exact-auth-card p { font-size: 14px !important; }
body.auth-mode .exact-auth-card label { font-size: 12px !important; }
body.auth-mode .exact-auth-card input { min-height: 48px !important; font-size: 14px !important; }
body.auth-mode .exact-auth-card button { min-height: 48px !important; font-size: 14px !important; }

/* Fit the complete horizontal menu on common 1440–1680 px screens without returning to tiny text. */
@media (max-width: 1700px) and (min-width: 901px) {
  body:not(.auth-mode) .app-header-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 8px !important;
  }
  body:not(.auth-mode) .brand-home { gap: 8px !important; }
  body:not(.auth-mode) .brand-bloom { width: 56px !important; height: 56px !important; }
  body:not(.auth-mode) .brand-copy strong { font-size: 15.5px !important; }
  body:not(.auth-mode) .brand-copy small { font-size: 8.5px !important; }
  .top-primary-nav { gap: 1px !important; }
  .top-primary-nav .nav-item,
  .top-primary-nav .nav-service-toggle {
    height: 60px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    gap: 6px !important;
    font-size: 15px !important;
  }
  .top-primary-nav .top-nav-icon {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    border-radius: 11px !important;
  }
  .top-primary-nav .top-nav-icon svg { width: 28px !important; height: 28px !important; }
  body:not(.auth-mode) .global-search { width: 205px !important; min-width: 170px !important; }
  body:not(.auth-mode) .global-search input { font-size: 11.5px !important; }
  body:not(.auth-mode) .top-icon,
  body:not(.auth-mode) .compact-profile { width: 44px !important; min-width: 44px !important; height: 44px !important; }
}

/* Bigger tab labels should wrap gracefully instead of getting clipped. */
.v12-inbox-tabs {
  flex-wrap: wrap !important;
  overflow: visible !important;
}
.v12-table-head,
.v12-table-row {
  grid-template-columns: 42px 1.18fr 1.08fr 1.08fr 1.45fr 1.15fr 1.25fr !important;
}
.v12-table-row .pill { font-size: 9.5px !important; }

@media (max-width: 900px) {
  /* Reassert the single-column dashboard after the larger desktop grid rules. */
  .v12-dashboard-layout,
  .v12-top-grid,
  .v12-middle-grid {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .v12-main-column,
  .v12-inbox-panel,
  .v12-panel { min-width: 0 !important; width: 100% !important; }
  .v12-inbox-panel { min-height: 690px !important; }
  .v12-dashboard-footer {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    text-align: center !important;
  }
  .v12-dashboard-footer > div { justify-content: center !important; }
  .v12-dashboard-footer > span { padding: 0 !important; border: 0 !important; }

  /* Service sheet tiles are stacked vertically inside each cell, so labels stay readable. */
  body:not(.auth-mode) .app-menu-grid .nav-item {
    position: relative !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-content: center !important;
    text-align: center !important;
    gap: 8px !important;
  }
  body:not(.auth-mode) .app-menu-grid .nav-item > span:nth-child(2) {
    justify-items: center !important;
    text-align: center !important;
  }
  body:not(.auth-mode) .app-menu-grid .nav-item b,
  body:not(.auth-mode) .app-menu-grid .nav-item small {
    text-align: center !important;
  }
  body:not(.auth-mode) .app-menu-grid .menu-badge {
    position: absolute !important;
    top: 9px !important;
    right: 9px !important;
  }
}

/* ID Card / print module typography and icons follow the same larger visual language. */
body:not(.auth-mode) .idcard-production-hero p { font-size: 14px !important; line-height: 1.65 !important; }
body:not(.auth-mode) .idcard-production-note strong { font-size: 13px !important; }
body:not(.auth-mode) .idcard-production-note small { font-size: 10.5px !important; }
body:not(.auth-mode) .idcard-stat-grid > * {
  min-height: 92px !important;
  grid-template-columns: 48px 1fr auto !important;
  gap: 4px 12px !important;
  padding: 14px 16px !important;
}
body:not(.auth-mode) .idcard-stat-grid > * > span {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  --icon-bg:#fff0c1;
  --icon-fill:#f5b735;
  --icon-accent:#ef8975;
  --icon-mint:#83c77e;
  --icon-lilac:#9c8ae6;
  --icon-stroke:#704536;
}
body:not(.auth-mode) .idcard-stat-grid svg { width: 37px !important; height: 37px !important; }
body:not(.auth-mode) .idcard-stat-grid small { font-size: 11.5px !important; font-weight: 750 !important; }
body:not(.auth-mode) .idcard-stat-grid b { font-size: 34px !important; }
body:not(.auth-mode) .idcard-queue-head h3 { font-size: 21px !important; }
body:not(.auth-mode) .idcard-queue-head p { font-size: 13px !important; }
body:not(.auth-mode) .idcard-queue-table th { font-size: 11.5px !important; }
body:not(.auth-mode) .idcard-queue-table td { font-size: 13px !important; }
body:not(.auth-mode) .idcard-ticket-icon {
  width: 45px !important;
  height: 45px !important;
  border-radius: 14px !important;
  --icon-bg:#eee9ff;
  --icon-fill:#9c88e6;
  --icon-accent:#ed8496;
  --icon-mint:#83c77e;
  --icon-lilac:#9c88e6;
  --icon-stroke:#69463a;
}
body:not(.auth-mode) .idcard-ticket-icon svg { width: 37px !important; height: 37px !important; }
body:not(.auth-mode) .idcard-progress b { font-size: 11.5px !important; }


/* ===== process-flow-v14.css ===== */
/* Process journey redesign v14 — isolated from legacy stepper styles. */
.process-card--journey{
  position:relative;
  overflow:hidden;
  padding:20px 22px 18px;
  border:1px solid #efd08b;
  background:
    radial-gradient(circle at 92% 15%,rgba(255,213,119,.18) 0 46px,transparent 47px),
    radial-gradient(circle at 8% 95%,rgba(187,220,177,.14) 0 54px,transparent 55px),
    linear-gradient(135deg,#fffefb 0%,#fffaf1 52%,#fffdf8 100%);
  box-shadow:0 10px 30px rgba(120,76,34,.055);
}
.process-card--journey::before,
.process-card--journey::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:999px;
}
.process-card--journey::before{
  width:8px;height:8px;right:34px;top:26px;
  background:#ff9a7d;
  box-shadow:17px 10px 0 -2px #f5c450,33px -3px 0 -3px #a8dca9;
  opacity:.65;
}
.process-card--journey::after{
  width:70px;height:1px;right:21px;bottom:18px;
  background:linear-gradient(90deg,transparent,#e8bf72,transparent);
  opacity:.55;
}
.process-flow-head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}
.process-flow-title{display:flex;align-items:center;gap:12px;min-width:0}
.process-flow-symbol{
  width:46px;height:46px;flex:0 0 46px;
  display:grid;place-items:center;
  border-radius:16px;
  background:linear-gradient(145deg,#fff0c6,#ffe1a5);
  border:1px solid #f2c66f;
  box-shadow:0 7px 16px rgba(220,151,43,.14),inset 0 1px 0 rgba(255,255,255,.9);
  --icon-bg:#fff8e7;--icon-fill:#f6bd3d;--icon-accent:#ff9377;--icon-mint:#8dcc9a;--icon-lilac:#a99aee;
}
.process-flow-symbol svg{width:27px;height:27px}
.process-flow-kicker{
  display:block;
  margin-bottom:1px;
  color:#bd7718;
  font:900 10px/1.2 "Nunito",sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.process-flow-title h3{
  margin:0;
  color:#542f20;
  font:800 19px/1.15 "Baloo 2","Nunito",sans-serif;
  letter-spacing:-.015em;
}
.process-flow-title p{
  margin:2px 0 0;
  color:#947869;
  font:700 10.5px/1.35 "Nunito",sans-serif;
}
.process-flow-title p b{color:#74513d;font-weight:900}
.process-flow-chip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid #edca82;
  background:#fff4d4;
  color:#9a6316;
  font:900 10.5px/1 "Nunito",sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.process-viewport{
  position:relative;
  z-index:1;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 2px 8px;
  scrollbar-width:thin;
  scrollbar-color:#e5bd70 transparent;
  scroll-snap-type:x proximity;
}
.process-viewport::-webkit-scrollbar{height:6px}
.process-viewport::-webkit-scrollbar-track{background:transparent}
.process-viewport::-webkit-scrollbar-thumb{background:#edcf94;border-radius:999px}
.process-track.journey-track{
  --process-steps:7;
  --process-ratio:0;
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--process-steps),minmax(128px,1fr));
  gap:14px;
  min-width:calc(var(--process-steps) * 128px);
  padding:7px 0 0;
  isolation:isolate;
  overflow:visible;
}
.process-track.journey-track::before,
.process-track.journey-track::after{
  content:"";
  position:absolute;
  z-index:0;
  top:34px;
  left:calc(50% / var(--process-steps));
  right:calc(50% / var(--process-steps));
  height:7px;
  border-radius:999px;
  pointer-events:none;
}
.process-track.journey-track::before{
  background:#f0e5d6;
  box-shadow:inset 0 1px 2px rgba(117,83,56,.13),0 1px 0 rgba(255,255,255,.9);
}
.process-track.journey-track::after{
  background:linear-gradient(90deg,#7fca91 0%,#a8d99a 55%,#ffd15f 100%);
  box-shadow:0 1px 5px rgba(113,181,123,.25);
  transform:scaleX(var(--process-ratio));
  transform-origin:left center;
  transition:transform .35s ease;
}
body .process-track.journey-track .process-step{
  position:relative;
  z-index:1;
  min-width:0;
  min-height:0;
  padding:0 4px 2px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#725443;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  scroll-snap-align:center;
}
body .process-track.journey-track .process-step:not(:last-child)::after{content:none!important}
.process-node{
  position:relative;
  z-index:2;
  width:56px;height:56px;
  display:grid;place-items:center;
  margin:0 auto;
  border-radius:19px;
  border:2px solid #ead7b4;
  background:linear-gradient(145deg,#fffefb,#fff7e9);
  box-shadow:0 7px 18px rgba(116,78,45,.10),inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  --icon-bg:transparent;
  --icon-fill:#f4b93d;
  --icon-accent:#ff9477;
  --icon-mint:#8acb94;
  --icon-lilac:#a89bef;
  --icon-stroke:#684635;
}
.process-stage-icon{display:grid;place-items:center}
.process-node svg{width:31px!important;height:31px!important;margin:0!important;display:block}
.process-index{
  position:absolute;
  right:-7px;top:-7px;
  min-width:22px;height:22px;
  padding:0 5px;
  display:grid;place-items:center;
  border-radius:999px;
  border:2px solid #fffdf8;
  background:#eadfce;
  color:#806d60;
  font:900 9px/1 "Nunito",sans-serif;
  box-shadow:0 3px 8px rgba(98,67,41,.14);
}
.process-copy{width:100%;margin-top:11px;padding:0 3px}
body .process-track.journey-track .process-copy b{
  display:block;
  padding:0;
  color:#644435;
  font:900 11.5px/1.25 "Nunito",sans-serif;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  letter-spacing:-.005em;
}
body .process-track.journey-track .process-copy small{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  margin-top:5px;
  padding:0 8px;
  border-radius:999px;
  color:#a18b7c;
  background:#f7f0e8;
  font:800 8.7px/1 "Nunito",sans-serif;
  white-space:nowrap;
}
.process-step.done .process-node{
  border-color:#a9d5a7;
  background:linear-gradient(145deg,#eff9e9,#dff3d8);
  box-shadow:0 8px 18px rgba(88,151,93,.15),inset 0 1px 0 rgba(255,255,255,.9);
  --icon-bg:#eef9e9;--icon-fill:#79c688;--icon-accent:#ff9a7c;--icon-mint:#72c486;--icon-lilac:#9d93e8;
}
.process-step.done .process-index{background:#75c487;color:white}
.process-step.done .process-copy b{color:#547158}
body .process-track.journey-track .process-step.done .process-copy small{background:#eaf6e5;color:#5d8a64}
.process-step.current .process-node{
  transform:translateY(-3px) scale(1.045);
  border-color:#e9b344;
  background:linear-gradient(145deg,#fff6c9,#ffd976);
  box-shadow:0 0 0 7px rgba(255,220,132,.26),0 11px 22px rgba(221,151,31,.19),inset 0 1px 0 rgba(255,255,255,.9);
  --icon-bg:#fff4ca;--icon-fill:#f2af2e;--icon-accent:#ff876d;--icon-mint:#7cc88c;--icon-lilac:#9d8dec;
}
.process-step.current .process-node::after{
  content:"";
  position:absolute;
  width:8px;height:8px;
  left:-4px;top:7px;
  border-radius:50%;
  background:#ff8e72;
  border:2px solid #fff8e9;
  box-shadow:0 0 0 3px rgba(255,142,114,.14);
}
.process-step.current .process-index{background:#f4b63d;color:#fff}
.process-step.current .process-copy b{color:#855214}
body .process-track.journey-track .process-step.current .process-copy small{background:#fff0bd;color:#9b6519}
.process-step.upcoming .process-node{opacity:.84}
.process-step.upcoming .process-copy b{color:#8b776a}
.process-step:nth-child(2n) .process-node{--icon-lilac:#a79aed;--icon-accent:#ff9b82}
.process-step:nth-child(3n) .process-node{--icon-mint:#83cc99;--icon-fill:#f6bd45}
.process-step:nth-child(4n) .process-node{--icon-bg:#f4efff;--icon-lilac:#9e8fe8}
.process-step:nth-child(5n) .process-node{--icon-bg:#edf8ff;--icon-fill:#f0b640;--icon-mint:#77c6b5}
.process-step:nth-child(6n) .process-node{--icon-bg:#fff0ec;--icon-accent:#ff8e78}
.process-step:nth-child(7n) .process-node{--icon-bg:#eef8e9;--icon-mint:#7ac88c}
@media (max-width:900px){
  .process-card--journey{padding:17px 15px 14px}
  .process-flow-head{align-items:flex-start;gap:10px}
  .process-flow-symbol{width:42px;height:42px;flex-basis:42px;border-radius:14px}
  .process-flow-title h3{font-size:17px}
  .process-flow-title p{font-size:9.5px}
  .process-flow-chip{min-height:30px;padding:0 10px;font-size:9px}
  .process-track.journey-track{grid-template-columns:repeat(var(--process-steps),128px);gap:10px;min-width:calc(var(--process-steps) * 138px)}
}
@media (max-width:560px){
  .process-flow-head{display:grid;grid-template-columns:1fr auto}
  .process-flow-symbol{display:none}
  .process-flow-chip{align-self:start}
  .process-flow-title h3{font-size:16px}
  .process-flow-title p{max-width:205px}
  .process-track.journey-track{padding-top:5px}
}
@media (prefers-reduced-motion:reduce){.process-track.journey-track::after,.process-node{transition:none}}


/* ===== inbox-clarity-v15.css ===== */
/* v15 inbox clarity and size patch */
html, body, input, button, select, textarea {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* make inbox page larger and easier to read */
.mock-inbox-page,
.inbox-page {
  width: 100%;
}

.mock-inbox-controls,
.inbox-controls {
  grid-template-columns: minmax(420px, 1fr) auto auto !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}

body:not(.auth-mode) .inbox-search,
.inbox-search {
  height: 54px !important;
  border-radius: 18px !important;
  padding: 0 18px !important;
}
.inbox-search input {
  font-size: 15px !important;
  font-weight: 700 !important;
}
.inbox-search svg { width: 20px !important; height: 20px !important; }

.mock-inbox-layout,
.cute-inbox-layout {
  grid-template-columns: minmax(380px, 470px) minmax(0, 1fr) !important;
  gap: 22px !important;
  min-height: 760px !important;
}

.cute-request-column {
  min-height: 760px !important;
}

.v12-inbox-panel {
  min-height: 760px !important;
  padding: 22px 18px 18px !important;
}
.v12-inbox-panel .v12-panel-head-row > div > p {
  font-size: 14px !important;
  line-height: 1.45 !important;
}
.v12-panel-title h2 { font-size: 34px !important; }
.v12-link-button { font-size: 14px !important; }

.v12-inbox-tabs {
  gap: 10px !important;
  margin-top: 16px !important;
  padding-bottom: 2px !important;
}
.v12-inbox-tabs button {
  height: 42px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}
.v12-inbox-tabs b {
  min-width: 24px !important;
  height: 24px !important;
  font-size: 12px !important;
}

.v12-inbox-list {
  margin-top: 14px !important;
  border-radius: 18px !important;
  background: #fffdfa !important;
}

.v12-inbox-row {
  min-height: 120px !important;
  padding: 16px 14px 16px 30px !important;
  gap: 12px !important;
}
.v12-inbox-dot {
  left: 14px !important;
  top: 20px !important;
  width: 10px !important;
  height: 10px !important;
}
.v12-inbox-copy { gap: 5px !important; }
.v12-inbox-copy b {
  font-size: 14px !important;
  line-height: 1.35 !important;
}
.v12-inbox-copy strong {
  font-size: 18px !important;
  line-height: 1.35 !important;
}
.v12-inbox-copy > span {
  font-size: 13px !important;
  line-height: 1.35 !important;
}
.v12-inbox-copy time {
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.v12-inbox-row > .pill {
  min-height: 28px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.v12-pagination { min-height: 54px !important; gap: 10px !important; }
.v12-pagination button {
  width: 34px !important;
  height: 34px !important;
  font-size: 14px !important;
}

/* detail paper on inbox */
.request-paper,
.mock-inbox-page .request-paper,
.standalone-paper {
  min-height: 760px !important;
  padding: 24px 22px 18px !important;
  border-radius: 24px 24px 24px 18px !important;
  background: #fffdfa !important;
}
.request-paper::before { top: 78px !important; }
.request-paper-head {
  gap: 12px !important;
  padding-bottom: 14px !important;
}
.request-paper-id {
  gap: 10px !important;
}
.request-paper-id > b,
.standalone-paper .request-paper-id > b {
  padding: 10px 16px !important;
  font-size: 14px !important;
}
.paper-service-icon {
  width: 42px !important;
  height: 42px !important;
}
.request-paper > h2 {
  font-size: 28px !important;
  line-height: 1.2 !important;
  margin: 14px 0 10px !important;
}
.request-paper-meta {
  gap: 16px !important;
  font-size: 13px !important;
  margin-bottom: 18px !important;
}
.request-paper-meta svg { width: 16px !important; height: 16px !important; }
.request-paper-scroll {
  padding-right: 4px !important;
}
.paper-field-grid,
.paper-report-fields,
.paper-info-grid {
  gap: 0 24px !important;
}
.paper-field {
  min-height: 58px !important;
  padding: 12px 0 !important;
  grid-template-columns: minmax(148px, .8fr) minmax(0, 1fr) !important;
  gap: 12px !important;
}
.paper-field span,
.paper-description > span {
  font-size: 13px !important;
  font-weight: 850 !important;
}
.paper-field b {
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
}
.paper-description {
  margin-top: 16px !important;
}
.paper-description p,
.paper-lampiran,
.paper-attachment,
.paper-no-attachment {
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.request-paper-actions {
  gap: 12px !important;
  padding-top: 16px !important;
}
.request-paper-actions .btn {
  min-width: 130px !important;
  min-height: 44px !important;
  font-size: 14px !important;
  border-radius: 14px !important;
}
.request-paper-actions .paper-process {
  min-width: 150px !important;
}

/* make buttons and pills easier to read */
.page-header .btn,
.inbox-controls .btn,
.inbox-controls .btn svg {
  font-size: 14px !important;
}
.inbox-controls .btn {
  min-height: 54px !important;
  padding: 0 18px !important;
  border-radius: 18px !important;
}

/* responsive */
@media (max-width: 1180px) {
  .mock-inbox-layout,
  .cute-inbox-layout {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .cute-request-column,
  .v12-inbox-panel,
  .request-paper {
    min-height: 0 !important;
  }
}

@media (max-width: 720px) {
  .mock-inbox-controls,
  .inbox-controls {
    grid-template-columns: 1fr !important;
  }
  .v12-inbox-tabs button {
    font-size: 13px !important;
    height: 38px !important;
  }
  .v12-inbox-copy strong { font-size: 16px !important; }
  .request-paper > h2 { font-size: 22px !important; }
  .paper-field {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}


/* ===== mobile-polish-v16.css ===== */
/* Mobile layout polish v16
   Fixes: dashboard metric overflow, roomy page intros, mobile inbox processing,
   and a compact ID Card information block. */

.mobile-request-actions { display: none; }

@media (max-width: 900px) {
  /* Roomier page introductions on every functional menu. */
  body:not(.auth-mode):not([data-view="dashboard"]) .page-header,
  body:not(.auth-mode):not([data-view="dashboard"]) .cute-page-header,
  body:not(.auth-mode):not([data-view="dashboard"]):not([data-view="inbox"]):not([data-view="requestDetail"]) .cute-page-header {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 22px !important;
    padding: 24px 21px !important;
    border-radius: 24px !important;
    background: rgba(255, 254, 249, .96) !important;
    box-shadow: 0 12px 30px rgba(104, 65, 36, .07) !important;
  }
  body:not(.auth-mode) .page-title-group { width: 100% !important; min-width: 0 !important; }
  body:not(.auth-mode) .page-title-group .eyebrow {
    margin-bottom: 9px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .13em !important;
  }
  body:not(.auth-mode) .page-title-group h1,
  body:not(.auth-mode) .page-header h1,
  body:not(.auth-mode) .cute-page-header h1 {
    margin: 0 !important;
    font-size: clamp(30px, 8.2vw, 38px) !important;
    line-height: 1.13 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: anywhere !important;
  }
  body:not(.auth-mode) .page-title-group p,
  body:not(.auth-mode) .page-header p,
  body:not(.auth-mode) .cute-page-header p {
    max-width: none !important;
    margin: 11px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #725e53 !important;
  }
  body:not(.auth-mode) .page-actions {
    width: 100% !important;
    margin: 20px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px !important;
  }
  body:not(.auth-mode) .page-actions:empty { display: none !important; }
  body:not(.auth-mode) .page-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 0 13px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }
  body:not(.auth-mode) .page-actions .btn.primary { grid-column: 1 / -1 !important; }

  /* Dashboard summary: number stays inside every card, even at 320px. */
  .v12-greeting-wrap { min-width: 0 !important; }
  .v12-greeting-wrap > div { min-width: 0 !important; }
  .v12-greeting-wrap h1 {
    max-width: 100% !important;
    font-size: clamp(24px, 7.2vw, 30px) !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
  }
  .v12-greeting-wrap p { font-size: 12px !important; line-height: 1.45 !important; }
  .v12-summary-panel { padding: 19px 15px !important; }
  .v12-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 11px !important; }
  .v12-stat-card {
    min-width: 0 !important;
    min-height: 142px !important;
    padding: 14px 12px !important;
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    align-items: center !important;
    column-gap: 11px !important;
    row-gap: 4px !important;
    overflow: hidden !important;
  }
  .v12-stat-icon {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    align-self: center !important;
    width: 50px !important;
    height: 50px !important;
  }
  .v12-stat-icon svg { width: 41px !important; height: 41px !important; }
  .v12-stat-card > b {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
    overflow-wrap: anywhere !important;
  }
  .v12-stat-card > strong {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    max-width: 100% !important;
    font-size: 36px !important;
    line-height: .95 !important;
    white-space: nowrap !important;
  }
  .v12-stat-card > small {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: start !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  /* Mobile inbox: larger cards plus real Detail / Process controls. */
  .mock-inbox-page { padding-top: 26px !important; }
  .mock-inbox-controls,
  .inbox-controls {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 0 !important;
  }
  .mock-inbox-controls .filter-button { display: none !important; }
  .mock-inbox-controls .cute-primary { display: none !important; }
  .mock-status-tabs,
  .cute-status-tabs {
    margin: 13px 0 16px !important;
    padding-bottom: 3px !important;
    gap: 9px !important;
  }
  .mock-status-tabs button,
  .cute-status-tabs button {
    min-height: 40px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }
  .mock-status-tabs button b,
  .cute-status-tabs button b {
    min-width: 23px !important;
    height: 23px !important;
    font-size: 11px !important;
  }
  .mock-request-list {
    gap: 12px !important;
    padding: 0 !important;
  }
  .mock-request-card {
    flex: none !important;
    min-height: 174px !important;
    max-height: none !important;
    padding: 15px 16px 14px !important;
    justify-content: flex-start !important;
    border-radius: 18px !important;
    background: rgba(255, 254, 250, .96) !important;
    overflow: visible !important;
  }
  .mock-request-card.active {
    background: linear-gradient(135deg, #fff8dc, #fff0b9) !important;
    border-color: #e9c56b !important;
  }
  .mock-request-card .mock-request-top > b {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .mock-request-card > strong {
    margin-top: 7px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
  .mock-request-card > span:not(.mock-request-top),
  .mock-request-card > small,
  .mock-request-card > time {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  .mock-request-card > time { margin-top: 3px !important; }
  .mock-request-card .pill {
    height: 29px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
  }
  .mobile-request-actions {
    width: 100% !important;
    margin-top: 12px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  .mobile-request-actions > button {
    min-width: 0 !important;
    min-height: 43px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid #ead1a0 !important;
    border-radius: 13px !important;
    background: #fffdfa !important;
    color: #624334 !important;
    font: 800 13px/1.2 "Nunito", system-ui, sans-serif !important;
    cursor: pointer !important;
  }
  .mobile-request-actions > button:only-child { grid-column: 1 / -1 !important; }
  .mobile-request-actions svg { width: 22px !important; height: 22px !important; }
  .mobile-request-actions .mobile-request-process {
    border-color: #e1ad2e !important;
    background: linear-gradient(180deg, #ffdc72, #f4bd3e) !important;
    color: #583719 !important;
    box-shadow: 0 6px 14px rgba(193, 125, 25, .14) !important;
  }
  .mock-request-column .cute-pagination { display: none !important; }

  /* Standalone detail keeps its action buttons visible above the bottom dock. */
  .standalone-request-page {
    padding: 24px 14px 112px !important;
    overflow: visible !important;
  }
  .standalone-paper {
    min-height: 0 !important;
    padding: 22px 18px 96px !important;
  }
  .standalone-actions {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .standalone-actions .btn {
    min-width: 0 !important;
    min-height: 46px !important;
    height: auto !important;
    font-size: 13px !important;
  }

  /* Connected-service blocks on other menus get readable copy. */
  body:not(.auth-mode) .service-spotlight {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 22px 20px !important;
    border-radius: 22px !important;
  }
  body:not(.auth-mode) .service-spotlight-icon {
    width: 58px !important;
    height: 58px !important;
  }
  body:not(.auth-mode) .service-spotlight-icon svg { width: 47px !important; height: 47px !important; }
  body:not(.auth-mode) .service-spotlight-copy h2 { font-size: 27px !important; line-height: 1.18 !important; }
  body:not(.auth-mode) .service-spotlight-copy p { font-size: 14px !important; line-height: 1.6 !important; }
  body:not(.auth-mode) .service-spotlight-note { grid-column: 1 / -1 !important; min-height: 94px !important; }

  /* Compact, balanced ID Card information block. */
  body:not(.auth-mode) .idcard-production-hero {
    min-height: 0 !important;
    padding: 21px 19px !important;
    display: block !important;
    border-radius: 22px !important;
  }
  body:not(.auth-mode) .idcard-production-hero-icon {
    left: auto !important;
    right: 18px !important;
    top: 18px !important;
    transform: rotate(3deg) !important;
    width: 54px !important;
    height: 54px !important;
  }
  body:not(.auth-mode) .idcard-production-hero-icon svg { width: 44px !important; height: 44px !important; }
  body:not(.auth-mode) .idcard-production-hero > div {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 66px !important;
  }
  body:not(.auth-mode) .idcard-production-hero .mini-overline,
  body:not(.auth-mode) .idcard-production-hero h2 { grid-column: 1 !important; }
  body:not(.auth-mode) .idcard-production-hero h2 {
    margin: 5px 0 11px !important;
    font-size: 29px !important;
    line-height: 1.15 !important;
  }
  body:not(.auth-mode) .idcard-production-hero p {
    grid-column: 1 / -1 !important;
    max-width: none !important;
    font-size: 14px !important;
    line-height: 1.58 !important;
  }
  body:not(.auth-mode) .idcard-production-hero .service-spotlight-tags { display: none !important; }
  body:not(.auth-mode) .idcard-production-note,
  body:not(.auth-mode) .idcard-hero-doodle { display: none !important; }
  body:not(.auth-mode) .idcard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px !important;
  }
  body:not(.auth-mode) .idcard-stat-grid > * {
    min-width: 0 !important;
    min-height: 104px !important;
    padding: 13px 12px !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
  }
  body:not(.auth-mode) .idcard-stat-grid > * > span {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 46px !important;
    height: 46px !important;
  }
  body:not(.auth-mode) .idcard-stat-grid small {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }
  body:not(.auth-mode) .idcard-stat-grid b {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    font-size: 31px !important;
    line-height: 1 !important;
  }
  body:not(.auth-mode) .idcard-queue-head {
    padding: 19px 17px !important;
  }
  body:not(.auth-mode) .idcard-queue-head h3 { font-size: 22px !important; line-height: 1.2 !important; }
  body:not(.auth-mode) .idcard-queue-head p { font-size: 13px !important; line-height: 1.55 !important; }
}

@media (max-width: 380px) {
  .v12-stat-card {
    min-height: 136px !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    padding: 12px 10px !important;
    column-gap: 9px !important;
  }
  .v12-stat-icon { width: 44px !important; height: 44px !important; }
  .v12-stat-icon svg { width: 36px !important; height: 36px !important; }
  .v12-stat-card > b { font-size: 12px !important; }
  .v12-stat-card > strong { font-size: 32px !important; }
  .v12-stat-card > small { font-size: 9.5px !important; }
  body:not(.auth-mode) .page-title-group h1,
  body:not(.auth-mode) .page-header h1,
  body:not(.auth-mode) .cute-page-header h1 { font-size: 29px !important; }
  body:not(.auth-mode) .page-title-group p,
  body:not(.auth-mode) .page-header p { font-size: 14px !important; }
  .standalone-actions { grid-template-columns: 1fr !important; }
  .standalone-paper { padding-bottom: 188px !important; }
}


/* ===== mobile-responsive-v17.css ===== */
/* Mobile responsive refinements v17 */
@media (max-width: 900px) {
  /* Keep four ID Card actions in a compact 2 x 2 grid instead of three tall rows. */
  body:not(.auth-mode) .page-actions .btn.primary {
    grid-column: auto !important;
  }
  body:not(.auth-mode) .page-actions > .btn:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  /* The note card was inheriting the content-grid display and overlapping the hero. */
  body:not(.auth-mode) .idcard-production-hero > div:not(.idcard-production-note) {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 66px !important;
  }
  body:not(.auth-mode) .idcard-production-hero > .idcard-production-note {
    display: none !important;
  }

  /* Make the ID Card hero compact and balanced without squeezing its explanation. */
  body:not(.auth-mode) .idcard-production-hero {
    padding: 19px 18px !important;
  }
  body:not(.auth-mode) .idcard-production-hero h2 {
    max-width: 230px !important;
  }
  body:not(.auth-mode) .idcard-production-hero p {
    padding-right: 0 !important;
  }

  /* A whole request card is now a useful tap target, not only its two buttons. */
  .mock-request-card {
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  .mobile-request-actions > button {
    touch-action: manipulation !important;
  }

  /* Reserve enough space below long mobile pages for the floating dock. */
  body:not(.auth-mode) .idcard-queue-card,
  body:not(.auth-mode) .standalone-history,
  body:not(.auth-mode) .mock-request-list {
    margin-bottom: 22px !important;
  }
}

@media (max-width: 420px) {
  body:not(.auth-mode) .page-actions .btn {
    min-height: 56px !important;
    padding: 8px 9px !important;
    font-size: 12.5px !important;
  }
  body:not(.auth-mode) .idcard-production-hero > div:not(.idcard-production-note) {
    grid-template-columns: minmax(0, 1fr) 58px !important;
  }
  body:not(.auth-mode) .idcard-production-hero h2 {
    max-width: 215px !important;
    font-size: 28px !important;
  }
}


/* ===== inbox-wide-mobile-space-v18.css ===== */
/* v18 — full-width inbox and safe mobile bottom spacing */

html, body, input, button, select, textarea {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   Desktop inbox: remove the old viewport-height based width cap.
   -------------------------------------------------------------------------- */
@media (min-width: 1181px) {
  body:not(.auth-mode)[data-view="inbox"] .main-content {
    padding: 24px clamp(24px, 2.5vw, 44px) 54px !important;
  }

  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-page {
    width: 100% !important;
    max-width: 1600px !important;
    height: auto !important;
    min-height: calc(100vh - 146px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-page .cute-page-header {
    width: 100% !important;
    height: auto !important;
    min-height: 112px !important;
    margin: 0 0 20px !important;
    padding: 24px 28px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #efcd84 !important;
    border-radius: 22px !important;
    background: rgba(255, 254, 250, .96) !important;
    box-shadow: 0 12px 32px rgba(111, 70, 35, .065) !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-page .cute-page-header h1 {
    margin: 0 !important;
    font-family: "Baloo 2", "Nunito", ui-rounded, system-ui, sans-serif !important;
    font-size: clamp(36px, 2.6vw, 46px) !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
    color: #4d2f26 !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-page .cute-page-header p {
    margin: 8px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    font-weight: 650 !important;
    color: #796258 !important;
  }

  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-controls {
    width: 100% !important;
    height: auto !important;
    min-height: 58px !important;
    margin: 0 0 14px !important;
    display: grid !important;
    grid-template-columns: minmax(440px, 1fr) auto auto !important;
    align-items: center !important;
    gap: 12px !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-controls .inbox-search {
    width: 100% !important;
    height: 56px !important;
    padding: 0 18px !important;
    border: 1px solid #e8c36c !important;
    border-radius: 18px !important;
    background: #fffefa !important;
    box-shadow: 0 8px 20px rgba(112, 72, 37, .04) !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-controls .inbox-search svg {
    width: 21px !important;
    height: 21px !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-controls .inbox-search input {
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-controls .btn {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 21px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  body:not(.auth-mode)[data-view="inbox"] .mock-status-tabs {
    width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    margin: 0 0 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow-x: auto !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-status-tabs button {
    height: 42px !important;
    padding: 0 16px !important;
    gap: 8px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-status-tabs button b {
    min-width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }

  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-layout {
    width: 100% !important;
    height: auto !important;
    min-height: 720px !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(440px, .86fr) minmax(570px, 1.24fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
  }

  body:not(.auth-mode)[data-view="inbox"] .mock-request-column {
    height: 720px !important;
    min-height: 720px !important;
    padding: 0 !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-request-list {
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 7px 0 0 !important;
    gap: 10px !important;
    overflow-y: auto !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-request-card {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 102px !important;
    max-height: none !important;
    padding: 13px 16px !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: rgba(255, 254, 250, .98) !important;
    overflow: hidden !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-request-card.active {
    background: linear-gradient(90deg, #fff6d5 0%, #fff9e8 88%, #ffe9a8 88%) !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-request-card .mock-request-top > b {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-request-card > strong {
    margin-top: 5px !important;
    font-size: 16px !important;
    line-height: 1.32 !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-request-card > span:not(.mock-request-top),
  body:not(.auth-mode)[data-view="inbox"] .mock-request-card > small,
  body:not(.auth-mode)[data-view="inbox"] .mock-request-card > time {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-request-card .pill {
    height: 27px !important;
    padding: 0 11px !important;
    font-size: 11px !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-request-column .cute-pagination {
    flex: 0 0 48px !important;
    align-items: center !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .cute-pagination button,
  body:not(.auth-mode)[data-view="inbox"] .cute-pagination span {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 13px !important;
  }

  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-layout .request-paper {
    width: 100% !important;
    height: 720px !important;
    min-height: 720px !important;
    padding: 36px 44px 86px !important;
    border-radius: 22px !important;
    transform: none !important;
    overflow-y: auto !important;
    background: rgba(255, 254, 250, .98) !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .request-paper-head {
    margin-bottom: 28px !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .request-paper-id {
    padding: 10px 17px !important;
    font-size: 15px !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .request-paper-head > .pill {
    height: 28px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .paper-info-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .paper-field {
    min-height: 62px !important;
    padding: 10px 0 !important;
    display: grid !important;
    grid-template-columns: minmax(170px, 32%) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    border-bottom: 1px solid #f1e3ca !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .paper-field span,
  body:not(.auth-mode)[data-view="inbox"] .paper-description > span {
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 850 !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .paper-field b {
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .paper-description {
    margin-top: 20px !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .paper-description p,
  body:not(.auth-mode)[data-view="inbox"] .paper-attachment,
  body:not(.auth-mode)[data-view="inbox"] .paper-no-attachment {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .request-paper-actions {
    left: 44px !important;
    right: 44px !important;
    bottom: 24px !important;
    gap: 12px !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .request-paper-actions .btn {
    height: 46px !important;
    min-height: 46px !important;
    min-width: 132px !important;
    padding: 0 20px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }
}

@media (min-width: 1181px) and (max-width: 1360px) {
  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-layout {
    grid-template-columns: minmax(390px, .82fr) minmax(0, 1.18fr) !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-layout .request-paper {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .request-paper-actions {
    left: 32px !important;
    right: 32px !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile: leave a real scrollable buffer above the fixed bottom navigation.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body:not(.auth-mode) {
    scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.auth-mode) .main-content {
    padding-bottom: calc(190px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.auth-mode) .main-content::after {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: calc(70px + env(safe-area-inset-bottom)) !important;
    pointer-events: none !important;
  }

  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-page,
  body:not(.auth-mode)[data-view="requestDetail"] .standalone-request-page {
    padding-bottom: calc(190px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-request-list {
    padding-bottom: 34px !important;
    margin-bottom: 0 !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-request-card:last-child {
    margin-bottom: 16px !important;
  }

  body:not(.auth-mode)[data-view="idCards"] .idcard-queue-card {
    margin-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.auth-mode)[data-view="idCards"] .idcard-queue-card .ticket-table-wrap {
    padding-bottom: 30px !important;
  }
  body:not(.auth-mode)[data-view="idCards"] .idcard-queue-table tbody tr:last-child td {
    padding-bottom: 24px !important;
  }

  body:not(.auth-mode) .standalone-history,
  body:not(.auth-mode) .ticket-detail-layout,
  body:not(.auth-mode) .wo-list,
  body:not(.auth-mode) .kanban-wrap,
  body:not(.auth-mode) .calendar-shell {
    margin-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 430px) {
  body:not(.auth-mode) .main-content {
    padding-bottom: calc(205px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-page,
  body:not(.auth-mode)[data-view="requestDetail"] .standalone-request-page {
    padding-bottom: calc(205px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.auth-mode)[data-view="idCards"] .idcard-queue-card {
    margin-bottom: calc(165px + env(safe-area-inset-bottom)) !important;
  }
}

/* Final mobile specificity guard: older theme rules use longer selectors. */
@media (max-width: 900px) {
  body:not(.auth-mode)[data-view] .main-content,
  body:not(.auth-mode)[data-view]:not([data-view="dashboard"]) .main-content {
    padding-bottom: calc(190px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.auth-mode)[data-view] .main-content::after {
    height: calc(80px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.auth-mode)[data-view="dashboard"] .v12-dashboard {
    padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.auth-mode)[data-view="idCards"] .idcard-queue-card {
    margin-bottom: calc(165px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 430px) {
  body:not(.auth-mode)[data-view] .main-content,
  body:not(.auth-mode)[data-view]:not([data-view="dashboard"]) .main-content {
    padding-bottom: calc(205px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.auth-mode)[data-view] .main-content::after {
    height: calc(90px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.auth-mode)[data-view="idCards"] .idcard-queue-card {
    margin-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
  }
}


/* ===== menu-spacing-v19.css ===== */
/* v19 — centered workspace launcher and proportional mobile bottom clearance */
body:not(.auth-mode) .v12-mega-menu,
body:not(.auth-mode) .app-menu {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: min(1120px, calc(100vw - 48px)) !important;
  max-height: min(760px, calc(100dvh - 48px)) !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  transform: translate(-50%, -50%) scale(.97) !important;
  transform-origin: center !important;
}
body:not(.auth-mode).sidebar-open .v12-mega-menu,
body:not(.auth-mode).sidebar-open .app-menu {
  transform: translate(-50%, -50%) scale(1) !important;
}
body:not(.auth-mode) .app-menu-head {
  flex: 0 0 auto !important;
  min-height: 80px !important;
  padding: 0 0 18px !important;
}
body:not(.auth-mode) .app-menu-head > div { min-width: 0 !important; }
body:not(.auth-mode) .app-menu-head h2 {
  margin: 3px 0 5px !important;
  font-size: 34px !important;
  line-height: 1.08 !important;
}
body:not(.auth-mode) .app-menu-head p {
  max-width: 680px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
body:not(.auth-mode) .v12-service-grid,
body:not(.auth-mode) .app-menu-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px 2px !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: #e4c679 transparent !important;
}
body:not(.auth-mode) .app-menu-grid::-webkit-scrollbar { width: 7px !important; }
body:not(.auth-mode) .app-menu-grid::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: #e4c679 !important;
}
body:not(.auth-mode) .app-menu-grid .nav-item {
  min-width: 0 !important;
  min-height: 154px !important;
  padding: 16px 12px 14px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 64px auto !important;
  place-items: center !important;
  align-content: start !important;
  gap: 10px !important;
  border-radius: 22px !important;
  text-align: center !important;
}
body:not(.auth-mode) .app-menu-grid .menu-tile-icon {
  width: 62px !important;
  height: 62px !important;
  border-radius: 19px !important;
}
body:not(.auth-mode) .app-menu-grid .menu-tile-icon svg {
  width: 50px !important;
  height: 50px !important;
}
body:not(.auth-mode) .app-menu-grid .nav-item > span:nth-child(2) {
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 4px !important;
  text-align: center !important;
}
body:not(.auth-mode) .app-menu-grid .nav-item b {
  display: block !important;
  min-height: 0 !important;
  font-size: 15px !important;
  line-height: 1.28 !important;
  font-weight: 800 !important;
  text-wrap: balance !important;
}
body:not(.auth-mode) .app-menu-grid .nav-item small {
  display: block !important;
  max-width: 170px !important;
  margin: 0 auto !important;
  font-size: 11px !important;
  line-height: 1.38 !important;
  text-wrap: balance !important;
}
body:not(.auth-mode) .app-menu-grid .menu-badge {
  right: 10px !important;
  top: 10px !important;
  min-width: 26px !important;
  height: 26px !important;
  font-size: 10px !important;
}
body:not(.auth-mode) .v12-menu-footer {
  position: static !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 15px 0 0 !important;
  background: transparent !important;
}
body:not(.auth-mode) .v12-menu-footer .user-mini { min-width: 280px !important; }
@media (max-width: 1180px) and (min-width: 901px) {
  body:not(.auth-mode) .v12-service-grid,
  body:not(.auth-mode) .app-menu-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 900px) {
  body:not(.auth-mode) .v12-mega-menu,
  body:not(.auth-mode) .app-menu {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 28px) !important;
    padding: 18px 16px !important;
    border-radius: 26px !important;
    transform: translate(-50%, -50%) scale(.97) !important;
  }
  body:not(.auth-mode).sidebar-open .v12-mega-menu,
  body:not(.auth-mode).sidebar-open .app-menu {
    transform: translate(-50%, -50%) scale(1) !important;
  }
  body:not(.auth-mode) .app-menu-head {
    min-height: 94px !important;
    gap: 12px !important;
    padding-bottom: 15px !important;
  }
  body:not(.auth-mode) .app-menu-head h2 { font-size: 30px !important; }
  body:not(.auth-mode) .app-menu-head p {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  body:not(.auth-mode) .sidebar-close {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
  }
  body:not(.auth-mode) .v12-service-grid,
  body:not(.auth-mode) .app-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px 1px !important;
  }
  body:not(.auth-mode) .app-menu-grid .nav-item {
    min-height: 106px !important;
    padding: 10px 8px !important;
    grid-template-rows: 50px auto !important;
    gap: 7px !important;
    border-radius: 19px !important;
  }
  body:not(.auth-mode) .app-menu-grid .menu-tile-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
  }
  body:not(.auth-mode) .app-menu-grid .menu-tile-icon svg {
    width: 40px !important;
    height: 40px !important;
  }
  body:not(.auth-mode) .app-menu-grid .nav-item b {
    font-size: 14px !important;
    line-height: 1.24 !important;
  }
  body:not(.auth-mode) .app-menu-grid .nav-item small {
    max-width: 150px !important;
    font-size: 10.5px !important;
    line-height: 1.32 !important;
  }
  body:not(.auth-mode) .v12-menu-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 12px !important;
  }
  body:not(.auth-mode) .v12-menu-footer .user-mini { min-width: 0 !important; }
  body:not(.auth-mode) .v12-menu-footer .btn { min-width: 92px !important; }
}
@media (max-width: 430px) {
  body:not(.auth-mode) .v12-mega-menu,
  body:not(.auth-mode) .app-menu {
    width: calc(100vw - 18px) !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 16px 13px !important;
  }
  body:not(.auth-mode) .app-menu-head h2 { font-size: 27px !important; }
  body:not(.auth-mode) .app-menu-head p { font-size: 12px !important; }
  body:not(.auth-mode) .app-menu-grid .nav-item { min-height: 101px !important; }
  body:not(.auth-mode) .app-menu-grid .nav-item b { font-size: 13px !important; }
  body:not(.auth-mode) .app-menu-grid .nav-item small { font-size: 9.5px !important; }
}
@media (max-width: 900px) {
  body:not(.auth-mode) { scroll-padding-bottom: calc(102px + env(safe-area-inset-bottom)) !important; }
  body:not(.auth-mode)[data-view] .main-content,
  body:not(.auth-mode)[data-view]:not([data-view="dashboard"]) .main-content {
    padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.auth-mode)[data-view] .main-content::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
  }
  body:not(.auth-mode)[data-view="dashboard"] .v12-dashboard {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-page,
  body:not(.auth-mode)[data-view="requestDetail"] .standalone-request-page {
    padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-request-list { padding-bottom: 14px !important; }
  body:not(.auth-mode)[data-view="inbox"] .mock-request-card:last-child { margin-bottom: 8px !important; }
  body:not(.auth-mode)[data-view="idCards"] .idcard-queue-card { margin-bottom: 18px !important; }
  body:not(.auth-mode)[data-view="idCards"] .idcard-queue-card .ticket-table-wrap { padding-bottom: 14px !important; }
  body:not(.auth-mode)[data-view="idCards"] .idcard-queue-table tbody tr:last-child td { padding-bottom: 16px !important; }
  body:not(.auth-mode) .standalone-history,
  body:not(.auth-mode) .ticket-detail-layout,
  body:not(.auth-mode) .wo-list,
  body:not(.auth-mode) .kanban-wrap,
  body:not(.auth-mode) .calendar-shell { margin-bottom: 18px !important; }
}
@media (max-width: 430px) {
  body:not(.auth-mode)[data-view] .main-content,
  body:not(.auth-mode)[data-view]:not([data-view="dashboard"]) .main-content {
    padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.auth-mode)[data-view="dashboard"] .v12-dashboard {
    padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-page,
  body:not(.auth-mode)[data-view="requestDetail"] .standalone-request-page {
    padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
  }
}


/* ===== menu-center-compact-v20.css ===== */
/* v20 — final centered workspace menu + compact mobile dock clearance */

/* Keep the launcher centered on every screen, regardless of old drawer rules. */
body:not(.auth-mode) .app-menu.v12-mega-menu,
body:not(.auth-mode) .v12-mega-menu,
body:not(.auth-mode) .app-menu {
  inset: auto !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transform-origin: center !important;
  transform: translate(-50%, -50%) scale(.975) !important;
}
body:not(.auth-mode).sidebar-open .app-menu.v12-mega-menu,
body:not(.auth-mode).sidebar-open .v12-mega-menu,
body:not(.auth-mode).sidebar-open .app-menu {
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Desktop: two tidy, balanced rows. */
@media (min-width: 1181px) {
  body:not(.auth-mode) .app-menu.v12-mega-menu,
  body:not(.auth-mode) .v12-mega-menu,
  body:not(.auth-mode) .app-menu {
    width: min(1180px, calc(100vw - 64px)) !important;
    max-height: min(790px, calc(100dvh - 64px)) !important;
    padding: 26px 28px 22px !important;
  }
  body:not(.auth-mode) .app-menu-grid.v12-service-grid,
  body:not(.auth-mode) .v12-service-grid,
  body:not(.auth-mode) .app-menu-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  body:not(.auth-mode) .app-menu-grid .nav-item {
    min-height: 164px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 64px auto !important;
    justify-items: center !important;
    text-align: center !important;
  }
}

/* Medium desktop: four columns, with the final two tiles centered. */
@media (min-width: 901px) and (max-width: 1180px) {
  body:not(.auth-mode) .app-menu.v12-mega-menu,
  body:not(.auth-mode) .v12-mega-menu,
  body:not(.auth-mode) .app-menu {
    width: min(1040px, calc(100vw - 44px)) !important;
    max-height: calc(100dvh - 44px) !important;
  }
  body:not(.auth-mode) .app-menu-grid.v12-service-grid,
  body:not(.auth-mode) .v12-service-grid,
  body:not(.auth-mode) .app-menu-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 13px !important;
  }
  body:not(.auth-mode) .app-menu-grid .nav-item:nth-child(9) {
    grid-column: 2 !important;
  }
}

/* Mobile: explicitly centered, never a side drawer. */
@media (max-width: 900px) {
  body:not(.auth-mode) .app-menu.v12-mega-menu,
  body:not(.auth-mode) .v12-mega-menu,
  body:not(.auth-mode) .app-menu {
    width: min(560px, calc(100vw - 22px)) !important;
    max-height: calc(100dvh - 22px) !important;
    padding: 17px 15px 15px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border-radius: 26px !important;
  }
  body:not(.auth-mode) .app-menu-grid.v12-service-grid,
  body:not(.auth-mode) .v12-service-grid,
  body:not(.auth-mode) .app-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body:not(.auth-mode) .app-menu-grid .nav-item,
  body:not(.auth-mode) .app-menu-grid .nav-item:nth-child(9) {
    grid-column: auto !important;
  }

  /* One clearance only: dock 76px + 10px offset + ~18px visible gap. */
  body:not(.auth-mode) {
    --mobile-dock-clearance-v20: calc(104px + env(safe-area-inset-bottom));
    scroll-padding-bottom: var(--mobile-dock-clearance-v20) !important;
  }

  body:not(.auth-mode)[data-view]:not([data-view="dashboard"]) .main-content,
  body:not(.auth-mode)[data-view]:not([data-view="dashboard"]) .workspace > .main-content {
    padding-bottom: var(--mobile-dock-clearance-v20) !important;
  }
  body:not(.auth-mode)[data-view="dashboard"] .main-content {
    padding-bottom: 0 !important;
  }
  body:not(.auth-mode)[data-view="dashboard"] .v12-dashboard {
    padding-bottom: var(--mobile-dock-clearance-v20) !important;
  }

  /* Remove every older stacked spacer. */
  body:not(.auth-mode)[data-view] .main-content::after,
  body:not(.auth-mode)[data-view]:not([data-view="dashboard"]) .main-content::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-inbox-page,
  body:not(.auth-mode)[data-view="requestDetail"] .standalone-request-page {
    padding-bottom: 0 !important;
    scroll-padding-bottom: var(--mobile-dock-clearance-v20) !important;
  }

  /* The inbox list scrolls internally, so only it needs its own dock-sized tail. */
  body:not(.auth-mode)[data-view="inbox"] .mock-request-list {
    padding-bottom: calc(94px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }
  body:not(.auth-mode)[data-view="inbox"] .mock-request-card:last-child {
    margin-bottom: 6px !important;
  }

  /* Other long pages only need a small normal margin; main-content owns clearance. */
  body:not(.auth-mode)[data-view="idCards"] .idcard-queue-card {
    margin-bottom: 14px !important;
  }
  body:not(.auth-mode)[data-view="idCards"] .idcard-queue-card .ticket-table-wrap {
    padding-bottom: 10px !important;
  }
  body:not(.auth-mode)[data-view="idCards"] .idcard-queue-table tbody tr:last-child td {
    padding-bottom: 14px !important;
  }
  body:not(.auth-mode) .standalone-history,
  body:not(.auth-mode) .ticket-detail-layout,
  body:not(.auth-mode) .wo-list,
  body:not(.auth-mode) .kanban-wrap,
  body:not(.auth-mode) .calendar-shell {
    margin-bottom: 14px !important;
  }
}

@media (max-width: 430px) {
  body:not(.auth-mode) {
    --mobile-dock-clearance-v20: calc(108px + env(safe-area-inset-bottom));
  }
  body:not(.auth-mode) .app-menu.v12-mega-menu,
  body:not(.auth-mode) .v12-mega-menu,
  body:not(.auth-mode) .app-menu {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 15px 12px 13px !important;
  }
}


/* ===== mobile-performance-actions-v21.css ===== */
/* v21 — faster boot feedback, readable mobile progress, and functional mobile document actions */

.fast-boot-card .fast-boot-note {
  display: block;
  max-width: 360px;
  margin: 14px auto 0;
  color: #8d7364;
  font-size: 12px;
  line-height: 1.5;
}

.mobile-functional-list,
.mobile-document-action-card {
  display: none;
}

@keyframes v21-spin {
  to { transform: rotate(360deg); }
}

.toast-refresh .toast-icon svg {
  animation: v21-spin .9s linear infinite;
  transform-origin: center;
}

@media (max-width: 900px) {
  /* Busy / loading notifications must be readable above the floating dock. */
  body:not(.auth-mode) .toast-layer {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
    z-index: 520 !important;
  }
  body:not(.auth-mode) .toast {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 84px !important;
    padding: 14px 13px !important;
    grid-template-columns: 48px minmax(0, 1fr) 38px !important;
    gap: 12px !important;
    align-items: center !important;
    border: 1.5px solid #e7bd60 !important;
    border-radius: 20px !important;
    background: rgba(255, 253, 248, .98) !important;
    color: #4f2d21 !important;
    box-shadow: 0 16px 42px rgba(91, 52, 28, .18) !important;
    backdrop-filter: blur(12px) !important;
  }
  body:not(.auth-mode) .toast-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: #fff0b4 !important;
    color: #99621e !important;
  }
  body:not(.auth-mode) .toast-icon svg {
    width: 27px !important;
    height: 27px !important;
  }
  body:not(.auth-mode) .toast-copy {
    min-width: 0 !important;
  }
  body:not(.auth-mode) .toast b {
    display: block !important;
    color: #4b2c21 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
  }
  body:not(.auth-mode) .toast p {
    margin: 4px 0 0 !important;
    color: #735c50 !important;
    font-size: 14.5px !important;
    font-weight: 650 !important;
    line-height: 1.5 !important;
  }
  body:not(.auth-mode) .toast > button {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    color: #775b4c !important;
  }
  body:not(.auth-mode) .toast > button svg {
    width: 19px !important;
    height: 19px !important;
  }
  body:not(.auth-mode) .toast-error {
    border-color: #efaaa1 !important;
    background: #fff8f6 !important;
  }

  /* Mobile-only service cards expose the actual print / create-document actions. */
  .mobile-functional-list {
    display: grid !important;
    gap: 13px !important;
    width: 100% !important;
    margin: 16px 0 18px !important;
  }
  .mobile-functional-card {
    min-width: 0 !important;
    padding: 16px !important;
    border: 1.5px solid #ead3a1 !important;
    border-radius: 21px !important;
    background: rgba(255, 254, 250, .98) !important;
    box-shadow: 0 9px 24px rgba(96, 62, 33, .07) !important;
  }
  .mobile-functional-head {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 11px !important;
  }
  .mobile-functional-icon {
    width: 52px !important;
    height: 52px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 17px !important;
    border: 1px solid rgba(122, 79, 52, .08) !important;
  }
  .mobile-functional-icon svg {
    width: 42px !important;
    height: 42px !important;
  }
  .mobile-functional-icon.rose { background: #ffe6e9 !important; }
  .mobile-functional-icon.lilac { background: #eee8ff !important; }
  .mobile-functional-head > div {
    min-width: 0 !important;
  }
  .mobile-functional-head small {
    display: block !important;
    color: #a67843 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.3 !important;
  }
  .mobile-functional-head h3 {
    margin: 3px 0 3px !important;
    color: #4b2b20 !important;
    font-size: 17px !important;
    line-height: 1.28 !important;
    overflow-wrap: anywhere !important;
  }
  .mobile-functional-head p {
    margin: 0 !important;
    color: #775e51 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
  }
  .mobile-functional-head > .pill {
    min-height: 28px !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  .mobile-functional-meta {
    margin-top: 13px !important;
    padding: 11px 12px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    border-radius: 14px !important;
    background: #fffaf0 !important;
  }
  .mobile-functional-meta span {
    min-width: 0 !important;
    color: #684d40 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }
  .mobile-functional-meta b {
    display: block !important;
    margin-bottom: 2px !important;
    color: #b07225 !important;
    font-size: 10px !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }
  .mobile-functional-progress {
    height: 8px !important;
    margin: 12px 0 0 !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #f5e8ce !important;
  }
  .mobile-functional-progress i {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #f5bb3b, #f48d79) !important;
  }
  .mobile-functional-actions {
    margin-top: 13px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  .mobile-functional-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
  .mobile-functional-actions .btn svg {
    width: 22px !important;
    height: 22px !important;
  }
  .mobile-functional-actions .btn:only-child {
    grid-column: 1 / -1 !important;
  }
  .mobile-action-note {
    grid-column: 1 / -1 !important;
    padding: 10px 12px !important;
    border-radius: 13px !important;
    background: #fff6db !important;
    color: #866938 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }
  .mobile-functional-empty {
    padding: 20px !important;
    border: 1px dashed #e4c984 !important;
    border-radius: 18px !important;
    background: #fffdf8 !important;
    color: #80695c !important;
    font-size: 14px !important;
    text-align: center !important;
  }

  /* Replace horizontally scrolling action tables with touch-friendly cards. */
  body:not(.auth-mode)[data-view="workPermits"] .table-card {
    display: none !important;
  }
  body:not(.auth-mode)[data-view="idCards"] .idcard-queue-card > .ticket-table-wrap {
    display: none !important;
  }
  body:not(.auth-mode)[data-view="idCards"] .mobile-idcard-list {
    margin: 4px 15px 18px !important;
  }
  body:not(.auth-mode)[data-view="workPermits"] .mobile-workpermit-list {
    margin-top: 18px !important;
  }

  /* Document actions are repeated near the top of ticket detail on mobile. */
  .mobile-document-action-card {
    display: grid !important;
    gap: 13px !important;
    margin: 14px 0 !important;
    padding: 15px !important;
    border: 1.5px solid #e7bd61 !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #fff9e6, #fff1bd) !important;
    box-shadow: 0 8px 22px rgba(108, 71, 35, .08) !important;
  }
  .mobile-document-action-card > div:first-child {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 11px !important;
  }
  .mobile-document-action-card > div:first-child > span {
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    background: #fff !important;
  }
  .mobile-document-action-card > div:first-child > span svg {
    width: 36px !important;
    height: 36px !important;
  }
  .mobile-document-action-card b {
    display: block !important;
    color: #4c2b20 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
  .mobile-document-action-card small {
    display: block !important;
    margin-top: 3px !important;
    color: #795f50 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  .mobile-document-action-card.muted {
    border-color: #e4d8bf !important;
    background: #fffdf8 !important;
  }
  .mobile-document-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  .mobile-document-buttons .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    white-space: normal !important;
  }
  .mobile-document-buttons .btn:only-child {
    grid-column: 1 / -1 !important;
  }

  /* Mobile dock now contains a direct Surat shortcut; keep labels legible. */
  body:not(.auth-mode) .mobile-dock .nav-item span {
    font-size: 10.5px !important;
    line-height: 1.15 !important;
  }

  .fast-boot-card {
    width: min(360px, calc(100vw - 34px)) !important;
    padding: 25px 22px !important;
  }
  .fast-boot-card h1 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  .fast-boot-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .fast-boot-card .fast-boot-note {
    font-size: 11.5px !important;
  }
}

@media (max-width: 380px) {
  .mobile-functional-head {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }
  .mobile-functional-head > .pill {
    grid-column: 2 !important;
    justify-self: start !important;
  }
  .mobile-functional-icon {
    width: 48px !important;
    height: 48px !important;
  }
  .mobile-functional-icon svg {
    width: 39px !important;
    height: 39px !important;
  }
  .mobile-functional-actions,
  .mobile-document-buttons {
    grid-template-columns: 1fr !important;
  }
  .mobile-functional-actions .btn,
  .mobile-document-buttons .btn {
    grid-column: 1 !important;
  }
}


/* ===== v22 real pagination + PWA install ===== */
.cute-pagination button{touch-action:manipulation;user-select:none}
.cute-pagination button:not(:disabled){cursor:pointer!important}
.cute-pagination button:disabled{opacity:.35!important;cursor:not-allowed!important;filter:grayscale(.35)}
.cute-pagination button:focus-visible{outline:3px solid rgba(245,184,63,.35)!important;outline-offset:2px!important}
.cute-pagination .pagination-ellipsis{pointer-events:none}
.pwa-install-button{width:calc(100% - 32px);min-height:48px;margin:0 16px 12px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid #e6bd55;border-radius:16px;background:linear-gradient(180deg,#ffe58a,#f7c94e);color:#543527;font-family:inherit;font-size:14px;font-weight:900;box-shadow:0 8px 18px rgba(181,125,32,.15);cursor:pointer}
.pwa-install-button svg{width:22px;height:22px}.pwa-install-button[hidden]{display:none!important}.pwa-install-button:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(181,125,32,.2)}.pwa-install-button:active{transform:translateY(0)}
.pwa-message{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:500;width:min(430px,calc(100vw - 28px));padding:14px 16px;border:1px solid #e8c874;border-radius:16px;background:#fffdf6;color:#54382c;box-shadow:0 16px 42px rgba(75,49,31,.2);font-size:13px;font-weight:750;line-height:1.5;text-align:center;transform:translate(-50%,18px);opacity:0;pointer-events:none;transition:.2s ease}.pwa-message.show{transform:translate(-50%,0);opacity:1}body.pwa-standalone .pwa-install-button{display:none!important}
@media(max-width:720px){.pwa-install-button{width:calc(100% - 28px);margin:0 14px 12px;min-height:52px;font-size:15px}}

/* v22 final: pagination remains reachable on phones and install controls fit the menu. */
.pwa-install-inline{
  width:100%!important;min-height:46px!important;margin-top:12px!important;border:1px solid #dca52e!important;border-radius:14px!important;background:linear-gradient(180deg,#ffdf7d,#f5bd3e)!important;color:#56361f!important;font:900 13px/1.2 "Nunito",system-ui,sans-serif!important;box-shadow:0 7px 18px rgba(190,121,18,.14)!important;cursor:pointer!important
}
.pwa-install-inline[hidden],.pwa-install-button[hidden],.pwa-standalone [data-pwa-install]{display:none!important}
.v12-menu-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:9px!important}
.v12-menu-actions .pwa-install-button{width:auto!important;min-width:110px!important;margin:0!important;padding-inline:14px!important}
.request-pagination-shell{display:grid!important;justify-items:center!important;gap:5px!important;padding-bottom:4px!important}
.request-page-meta{color:#8a7060!important;font-size:11px!important;font-weight:750!important}
@media(max-width:900px){
  body:not(.auth-mode)[data-view="inbox"] .mock-request-column .cute-pagination,
  body:not(.auth-mode)[data-view="inbox"] .request-pagination-shell .cute-pagination{
    display:flex!important;flex:0 0 auto!important;min-height:52px!important;margin:8px 0 0!important;padding:8px!important;gap:6px!important;justify-content:center!important;overflow-x:auto!important;scrollbar-width:none!important
  }
  body:not(.auth-mode)[data-view="inbox"] .request-pagination-shell .cute-pagination::-webkit-scrollbar{display:none!important}
  body:not(.auth-mode)[data-view="inbox"] .request-pagination-shell .cute-pagination button,
  body:not(.auth-mode)[data-view="inbox"] .request-pagination-shell .cute-pagination span{
    flex:0 0 38px!important;width:38px!important;min-width:38px!important;height:38px!important;font-size:14px!important
  }
  body:not(.auth-mode) .v12-menu-actions{display:grid!important;grid-template-columns:repeat(2,auto)!important;gap:7px!important}
  body:not(.auth-mode) .v12-menu-actions .btn{min-width:84px!important;padding-inline:10px!important}
}
@media(max-width:430px){
  body:not(.auth-mode) .v12-menu-footer{grid-template-columns:1fr!important}
  body:not(.auth-mode) .v12-menu-actions{width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body:not(.auth-mode) .v12-menu-actions .btn{width:100%!important}
}

/* v22 pagination hit-area and PWA footer finalization */
.request-pagination-shell,.request-pagination-shell .cute-pagination{position:relative!important;z-index:12!important;pointer-events:auto!important}
.request-pagination-shell .cute-pagination button{pointer-events:auto!important;touch-action:manipulation!important}
.request-pagination-shell .cute-pagination button:disabled{pointer-events:none!important}
.menu-footer-actions{display:flex;align-items:center;gap:10px}.menu-footer-actions .pwa-install-inline{flex:1;margin:0!important}.menu-footer-actions #sidebarLogout{flex:0 0 auto}
@media(max-width:430px){.menu-footer-actions{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;width:100%!important}}

/* v23 — resilient boot and connection recovery */
.connection-recovery-banner {
  width: min(1560px, 100%);
  margin: 0 auto 18px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1.5px solid #efc86d;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff8dc, #fffdf7 58%, #f4f8e9);
  box-shadow: 0 12px 30px rgba(121, 83, 34, .08);
  color: #54362b;
}
.connection-recovery-banner.stale {
  border-color: #d8c785;
  background: linear-gradient(135deg, #fff9df, #fffdf9);
}
.connection-recovery-banner.degraded {
  border-color: #edb879;
  background: linear-gradient(135deg, #fff3d6, #fffaf2 58%, #fff0ea);
}
.connection-recovery-banner.connecting,
.connection-recovery-banner.refreshing {
  border-color: #c9dcae;
  background: linear-gradient(135deg, #f6f9e9, #fffdf7);
}
.connection-recovery-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff0bd;
  color: #a46a22;
}
.connection-recovery-icon svg { width: 24px; height: 24px; }
.connection-recovery-banner.connecting .connection-recovery-icon svg,
.connection-recovery-banner.refreshing .connection-recovery-icon svg {
  animation: v23Spin 1.15s linear infinite;
}
.connection-recovery-banner b {
  display: block;
  margin-bottom: 3px;
  font-family: var(--display-font, 'Baloo 2', 'Nunito', sans-serif);
  font-size: 16px;
  line-height: 1.2;
}
.connection-recovery-banner p {
  margin: 0;
  color: #765f52;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 650;
}
.connection-recovery-banner .btn { min-width: 150px; }
.fatal-actions { margin-top: 16px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
@keyframes v23Spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .connection-recovery-banner {
    margin-bottom: 14px;
    padding: 13px;
    grid-template-columns: 40px minmax(0, 1fr);
    border-radius: 16px;
  }
  .connection-recovery-icon { width: 40px; height: 40px; border-radius: 13px; }
  .connection-recovery-banner b { font-size: 15px; }
  .connection-recovery-banner p { font-size: 12px; }
  .connection-recovery-banner .btn {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 42px;
  }
}

/* ===== resilient-data-boot-v24 ===== */
.boot-waiting-card,
.boot-error-card {
  width: min(560px, calc(100vw - 28px));
  padding: 28px 26px 24px;
  border: 1.5px solid #e9bc59;
  border-radius: 24px;
  background: rgba(255, 254, 249, .97);
  box-shadow: 0 22px 70px rgba(92, 59, 31, .16);
  color: #513329;
  text-align: left;
}
.boot-waiting-card .loading-brand-mark,
.boot-error-card .loading-brand-mark {
  width: 58px;
  height: 58px;
  margin: 0 0 14px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff0b6, #fff8dc);
}
.boot-waiting-card .loading-brand-mark img,
.boot-error-card .loading-brand-mark img { width: 38px; height: 38px; }
.boot-waiting-card h1,
.boot-error-card h1 {
  margin: 0;
  font-family: var(--display-font, 'Baloo 2', 'Nunito', sans-serif);
  font-size: 30px;
  line-height: 1.12;
}
.boot-waiting-card > p,
.boot-error-card > p {
  margin: 9px 0 0;
  color: #786157;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 650;
}
.boot-progress-track {
  height: 10px;
  margin: 20px 0 12px;
  overflow: hidden;
  border: 1px solid #eedcae;
  border-radius: 999px;
  background: #fff8df;
}
.boot-progress-track > i {
  display: block;
  width: 36%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f3b532, #ffcf62, #f4a889);
  animation: v24BootProgress 1.25s ease-in-out infinite alternate;
}
.boot-waiting-status {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 28px;
  color: #745c50;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 750;
}
.boot-waiting-status::before {
  content: '';
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 3px solid #efd38d;
  border-top-color: #c98228;
  border-radius: 50%;
  animation: v23Spin .85s linear infinite;
}
.boot-waiting-note {
  display: block;
  margin-top: 12px;
  color: #9a8174;
  font-size: 11.5px;
  line-height: 1.45;
}
.boot-error-box {
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid #efc18d;
  border-radius: 14px;
  background: #fff6e7;
  color: #7b5236;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
}
.boot-error-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 18px;
}
.boot-error-actions .btn { min-height: 46px; font-size: 13px; }
@keyframes v24BootProgress {
  from { transform: translateX(-10%); }
  to { transform: translateX(190%); }
}
@media (max-width: 560px) {
  .boot-waiting-card,
  .boot-error-card { padding: 23px 19px 20px; border-radius: 20px; }
  .boot-waiting-card h1,
  .boot-error-card h1 { font-size: 25px; }
  .boot-error-actions { grid-template-columns: 1fr; }
}

/* ========================================================================== */
/* v26 — Functional dashboard pagination + service separation                */
/* ========================================================================== */

/* Full Permintaan Masuk: separate requests by service type. */
.request-service-tabs {
  width: 100% !important;
  margin: 0 0 12px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.request-service-tab {
  position: relative !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 9px 38px 9px 10px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  border: 1.5px solid #ecd9b0 !important;
  border-radius: 17px !important;
  background: #fffdfa !important;
  color: #573629 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(116, 78, 39, .055) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
.request-service-tab:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 9px 22px rgba(116, 78, 39, .09) !important;
}
.request-service-tab:focus-visible {
  outline: 3px solid rgba(242, 183, 62, .28) !important;
  outline-offset: 2px !important;
}
.request-service-tab > span:not(.request-service-tab-icon) {
  min-width: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}
.request-service-tab-icon {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 11px !important;
  background: #fff2cc !important;
}
.request-service-tab-icon svg {
  width: 27px !important;
  height: 27px !important;
}
.request-service-tab > b {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 6px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #fff4d9 !important;
  color: #744d25 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}
.request-service-tab.transport .request-service-tab-icon { background: #ffe7d8 !important; }
.request-service-tab.permit .request-service-tab-icon { background: #ffe5ec !important; }
.request-service-tab.idcard .request-service-tab-icon { background: #e5f4e2 !important; }
.request-service-tab.transport.active { background: #fff5ed !important; border-color: #f2b68d !important; }
.request-service-tab.permit.active { background: #fff2f5 !important; border-color: #e9a6b6 !important; }
.request-service-tab.idcard.active { background: #f1faef !important; border-color: #9dce95 !important; }
.request-service-tab.all.active { background: #fff5cd !important; border-color: #e8bd4f !important; }
.request-service-tab.active {
  box-shadow: 0 0 0 3px rgba(240, 190, 76, .13), 0 8px 22px rgba(116, 78, 39, .08) !important;
}

/* Dashboard: service filters are independent from status filters. */
.v26-dashboard-service-tabs {
  width: 100% !important;
  margin-top: 12px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}
.v26-dashboard-service-tab {
  position: relative !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 31px 0 8px !important;
  display: grid !important;
  grid-template-columns: 27px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid #edddbd !important;
  border-radius: 13px !important;
  background: #fffdf9 !important;
  color: #5c4034 !important;
  cursor: pointer !important;
  text-align: left !important;
  pointer-events: auto !important;
  transition: transform .14s ease, border-color .14s ease, background .14s ease !important;
}
.v26-dashboard-service-tab:hover { transform: translateY(-1px) !important; }
.v26-dashboard-service-tab:focus-visible {
  outline: 3px solid rgba(242, 183, 62, .25) !important;
  outline-offset: 1px !important;
}
.v26-dashboard-service-tab > span {
  width: 27px !important;
  height: 27px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
  background: #fff1c7 !important;
}
.v26-dashboard-service-tab.transport > span { background: #ffe6d6 !important; }
.v26-dashboard-service-tab.permit > span { background: #ffe4eb !important; }
.v26-dashboard-service-tab.idcard > span { background: #e5f3e1 !important; }
.v26-dashboard-service-tab svg { width: 22px !important; height: 22px !important; }
.v26-dashboard-service-tab > em {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}
.v26-dashboard-service-tab > b {
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 4px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #fff3d4 !important;
  color: #774f27 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
}
.v26-dashboard-service-tab.all.active { background: #fff3c4 !important; border-color: #eabf50 !important; }
.v26-dashboard-service-tab.transport.active { background: #fff2e9 !important; border-color: #efae83 !important; }
.v26-dashboard-service-tab.permit.active { background: #fff0f4 !important; border-color: #e8a3b4 !important; }
.v26-dashboard-service-tab.idcard.active { background: #eff9ec !important; border-color: #98ca8f !important; }
.v26-dashboard-service-tab.active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.8) !important; }

/* Override the old rule that always highlighted the first status tab. */
.v26-dashboard-status-tabs button,
.v26-dashboard-status-tabs button:first-child {
  background: #fffdf8 !important;
  border-color: #efdfc0 !important;
}
.v26-dashboard-status-tabs button.active,
.v26-dashboard-status-tabs button:first-child.active {
  background: #fff1c4 !important;
  border-color: #e8bb4d !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75) !important;
}
.v26-dashboard-status-tabs {
  margin-top: 9px !important;
}

/* Real, clickable dashboard pagination. */
.v12-pagination {
  position: relative !important;
  z-index: 8 !important;
  pointer-events: auto !important;
}
.v12-pagination button[data-dashboard-request-page] {
  position: relative !important;
  z-index: 9 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
.v12-pagination button[data-dashboard-request-page]:disabled {
  opacity: .38 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.v12-pagination .pagination-ellipsis {
  min-width: 20px !important;
  display: grid !important;
  place-items: center !important;
  color: #8b7468 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

/* Keep the five dashboard rows readable after adding the service filters. */
.v12-inbox-panel .v12-inbox-row {
  min-height: 96px !important;
}
.v12-inbox-panel .v12-inbox-list {
  margin-top: 10px !important;
}

@media (max-width: 1180px) {
  .request-service-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .request-service-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .request-service-tab {
    min-height: 62px !important;
    padding-right: 34px !important;
  }
  .request-service-tab > span:not(.request-service-tab-icon) {
    font-size: 12px !important;
  }
  .v26-dashboard-service-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .v26-dashboard-service-tab {
    height: 45px !important;
  }
  .v26-dashboard-service-tab > em {
    font-size: 11px !important;
  }
  .v12-inbox-panel .v12-inbox-row {
    min-height: 104px !important;
  }
}

@media (max-width: 430px) {
  .request-service-tab {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding-left: 8px !important;
  }
  .request-service-tab-icon {
    width: 30px !important;
    height: 30px !important;
  }
  .request-service-tab-icon svg {
    width: 24px !important;
    height: 24px !important;
  }
  .request-service-tab > span:not(.request-service-tab-icon) {
    font-size: 11px !important;
  }
  .v26-dashboard-service-tab > em {
    font-size: 10px !important;
  }
}


/* /idcard-app-v38.css */
/* Single approved ID template in the existing template dialog. */
.idcard-approved-preview-v38{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:660px;margin:0 auto 20px}.idcard-approved-preview-v38 figure{margin:0;min-width:0;text-align:center}.idcard-approved-preview-v38 img{display:block;width:100%;height:auto;aspect-ratio:53.98/85.6;border-radius:12px;border:1px solid #c7dff4}.idcard-approved-preview-v38 figcaption{font:700 14px/1.4 Arial,sans-serif;margin:10px 0}.idcard-approved-preview-v38+.inline-alert{font-size:15px;line-height:1.5}
@media(max-width:520px){.idcard-approved-preview-v38{gap:12px}.idcard-approved-preview-v38 figcaption{font-size:12px}}


/* /ticket-delete-v46.css */
/* Scoped to ticket deletion; ID card and letter layouts are unchanged. */
.btn.delete-ticket-button{color:#a63135;border-color:#e6b8bd;background:#fff7f7}.btn.delete-ticket-button:hover{background:#ffe8e8}.delete-ticket-modal{width:min(610px,calc(100vw - 28px));max-height:calc(100dvh - 30px);overflow:auto}.delete-ticket-modal .modal-body{padding:20px 24px;display:grid;gap:16px}.delete-ticket-summary{display:grid;gap:5px;padding:14px 16px;border:1px solid #ecd8ac;border-radius:12px;background:#fff9e9;overflow-wrap:anywhere}.delete-ticket-summary b{font-size:18px}.delete-ticket-summary span{font-size:15px}.delete-ticket-summary small{font-size:13px;color:#786756}.delete-ticket-info,.delete-ticket-warning{font:14px/1.6 Arial,sans-serif}.delete-ticket-warning{padding:12px;border:1px solid #e6b8bd;background:#fff2f2;border-radius:10px;color:#933333}.delete-ticket-field{display:block;font:700 14px/1.5 Arial,sans-serif;color:#604532}.delete-ticket-field input,.delete-ticket-field textarea{display:block;width:100%;margin-top:6px;border:1px solid #dec797;border-radius:10px;padding:11px 12px;background:#fff;font:400 16px/1.5 Arial,sans-serif;color:#433a34}.delete-ticket-ack{display:flex;align-items:flex-start;gap:10px;font:14px/1.5 Arial,sans-serif}.delete-ticket-ack input{width:19px;height:19px;flex:0 0 19px;margin:2px 0}.delete-ticket-modal .btn.delete-ticket-confirm{background:#a8373d;border-color:#a8373d;color:white}.delete-ticket-modal button:disabled{opacity:.45;cursor:not-allowed}.delete-ticket-modal .modal-foot{position:sticky;bottom:0;background:#fffaf0}.delete-ticket-modal .form-error{font-size:14px;line-height:1.5}.delete-ticket-modal .note{font-size:12px;line-height:1.4}.delete-ticket-modal .modal-head p{font-size:13px}
@media(max-width:600px){.delete-ticket-modal .modal-body{padding:16px}.delete-ticket-modal .modal-foot{display:flex;gap:10px;flex-wrap:wrap;padding:14px 16px}.delete-ticket-modal .modal-foot .note{flex-basis:100%}.delete-ticket-modal .modal-foot .btn{flex:1;min-height:46px}.delete-ticket-modal .modal-head{padding:16px}.delete-ticket-modal .modal-head h2{font-size:21px}}

.delete-ticket-modal .modal-foot button.btn.delete-ticket-confirm{background:#a8373d!important;background-image:none!important;border-color:#a8373d!important;color:#fff!important;box-shadow:none!important}.page-actions .btn.delete-ticket-button{background:#fff4f4!important;background-image:none!important;color:#a63135!important;border-color:#dba6aa!important}
/* R3: long ID-card/source text must not stretch the mobile detail behind a dialog. */
@media screen and (max-width:700px){
  .ticket-detail-layout{grid-template-columns:minmax(0,1fr)}
  .ticket-detail-layout>.detail-stack,.ticket-detail-layout>.ticket-side,
  .ticket-detail-layout>.detail-stack>.card,.ticket-detail-layout>.ticket-side>.card{min-width:0;max-width:100%}
  .ticket-detail-layout .route-row{min-width:0;overflow-wrap:anywhere}
}


/* /login-v48.css */
/* v48 — live login UI using the approved stationery artwork, not a screenshot form.
   Every rule is scoped to the login so dashboard, ticket, letter and card styles stay intact. */
body.auth-mode{margin:0!important;display:block!important;overflow:hidden!important;background:#fff8df!important}
body.auth-mode #loadingScreen.loading-screen{position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;display:block!important;padding:0!important;border:0!important;border-radius:0!important;overflow:auto!important;background:#fffae9!important;box-shadow:none!important}
#loadingScreen .login-v48-shell{--login-u:calc(100vw / 1624);position:relative;isolation:isolate;width:100%;min-height:max(100dvh,calc(928 * var(--login-u)));display:grid;grid-template-columns:61.7% 38.3%;background:radial-gradient(ellipse at 86% 12%,#fffaf0 0,transparent 43%),linear-gradient(140deg,#fffdf6 0%,#fff9e5 60%,#fff1c7 100%);font-family:Arial,Helvetica,sans-serif;color:#352226;line-height:1.35;text-align:left}
#loadingScreen .login-v48-shell *{box-sizing:border-box}
#loadingScreen .login-v48-shell [hidden]{display:none!important}
#loadingScreen .login-v48-shell button,#loadingScreen .login-v48-shell input{font-family:inherit;letter-spacing:normal}
#loadingScreen .login-v48-art{position:absolute;z-index:-1;top:0;left:0;width:61.7%;height:100%;overflow:hidden;pointer-events:none}
#loadingScreen .login-v48-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:right top}
#loadingScreen .login-v48-shell:after{content:"";position:absolute;z-index:-2;pointer-events:none;width:36%;height:51%;right:-0;bottom:0;background:linear-gradient(155deg,transparent 5%,#fffdf5 6% 46%,#fff4d6 47% 70%,#fff9e9 71%);border-radius:75% 0 0 0}
#loadingScreen .login-v48-story{min-width:0;position:relative;padding:calc(52 * var(--login-u)) 0 0 calc(126 * var(--login-u));}
#loadingScreen .login-v48-story-content{position:relative;z-index:1;}
#loadingScreen .login-v48-brand{display:flex;align-items:center;color:#382127;font-family:Arial,Helvetica,sans-serif}
#loadingScreen .login-v48-brand img{display:block;object-fit:contain;flex-shrink:0}
#loadingScreen .login-v48-brand strong{display:block;font-family:Arial,Helvetica,sans-serif;line-height:1.05;font-weight:800;letter-spacing:calc(1.1 * var(--login-u));color:#382127}
#loadingScreen .login-v48-brand span{display:block;font-size:calc(13 * var(--login-u));font-weight:700;line-height:1.4;letter-spacing:calc(2.4 * var(--login-u));margin-top:calc(3 * var(--login-u))}
#loadingScreen .login-v48-brand-horizontal{gap:calc(20 * var(--login-u));height:calc(81 * var(--login-u))}
#loadingScreen .login-v48-brand-horizontal img{width:calc(83 * var(--login-u));height:calc(81 * var(--login-u));margin-left:calc(-4 * var(--login-u))}
#loadingScreen .login-v48-brand-horizontal strong{font-size:calc(30 * var(--login-u))}
#loadingScreen #loginStoryTitle{font-family:Arial,Helvetica,sans-serif;font-size:calc(52 * var(--login-u));font-weight:800;line-height:1.06;letter-spacing:calc(-1.6 * var(--login-u));margin:calc(24 * var(--login-u)) 0 0 calc(8 * var(--login-u));color:#3a2225}
#loadingScreen #loginStoryTitle strong{font-size:calc(48 * var(--login-u));font-weight:800;letter-spacing:calc(-1.3 * var(--login-u));color:#b76805;line-height:1.16}
#loadingScreen .login-v48-lead{font-size:calc(23 * var(--login-u));line-height:1.18;color:#737590;margin:calc(13 * var(--login-u)) 0 0 calc(8 * var(--login-u));max-width:calc(590 * var(--login-u));font-weight:400}
#loadingScreen .login-v48-benefits{display:grid;gap:calc(14 * var(--login-u));margin:calc(18 * var(--login-u)) 0 0 calc(8 * var(--login-u))}
#loadingScreen .login-v48-benefit{display:flex;align-items:center;gap:calc(26 * var(--login-u))}
#loadingScreen .login-v48-benefit-mark{display:flex;align-items:center;justify-content:center;width:calc(66 * var(--login-u));height:calc(66 * var(--login-u));flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,#fff0b9,#ffedb2);color:#c67b02}
#loadingScreen .login-v48-icon{display:block;width:24px;height:24px;flex:none;overflow:visible}
#loadingScreen .login-v48-benefit-mark .login-v48-icon{width:calc(34 * var(--login-u));height:calc(34 * var(--login-u));}
#loadingScreen .login-v48-benefit p{margin:0;line-height:1.28}
#loadingScreen .login-v48-benefit b{font-size:calc(19 * var(--login-u));font-weight:700;color:#39272c;display:block}
#loadingScreen .login-v48-benefit p>span{font-size:calc(16 * var(--login-u));color:#747592;display:block;margin-top:calc(3 * var(--login-u))}
#loadingScreen .login-v48-panel{position:relative;min-width:0;padding:calc(112 * var(--login-u)) calc(98 * var(--login-u)) calc(32 * var(--login-u)) 0;}
#loadingScreen .login-v48-handwritten{display:block;position:absolute;top:calc(10 * var(--login-u));right:calc(51 * var(--login-u));width:calc(281 * var(--login-u));height:auto;mix-blend-mode:multiply}
#loadingScreen .login-v48-card{width:100%;position:relative;border-radius:calc(29 * var(--login-u));padding:calc(36 * var(--login-u)) calc(60 * var(--login-u)) calc(30 * var(--login-u));background:rgba(255,255,255,.96);box-shadow:0 calc(22 * var(--login-u)) calc(65 * var(--login-u)) rgba(151,107,36,.065);border:1px solid rgba(255,255,255,.86)}
#loadingScreen .login-v48-brand-vertical{flex-direction:column;gap:calc(6 * var(--login-u));text-align:center}
#loadingScreen .login-v48-brand-vertical img{width:calc(70 * var(--login-u));height:calc(68 * var(--login-u))}
#loadingScreen .login-v48-brand-vertical strong{font-size:calc(24 * var(--login-u))}
#loadingScreen .login-v48-brand-vertical span{font-size:calc(11 * var(--login-u));letter-spacing:calc(2 * var(--login-u));margin-top:calc(2 * var(--login-u))}
#loadingScreen .login-v48-welcome{text-align:center;margin-top:calc(28 * var(--login-u))}
#loadingScreen .login-v48-welcome h2{font-family:Arial,Helvetica,sans-serif;font-size:calc(30 * var(--login-u));line-height:1.2;letter-spacing:calc(-.8 * var(--login-u));font-weight:700;margin:0 calc(-12 * var(--login-u));color:#39272c;white-space:nowrap}
#loadingScreen .login-v48-smile{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;letter-spacing:normal}
#loadingScreen .login-v48-welcome p{font-size:max(14px,calc(17 * var(--login-u)));line-height:1.3;color:#777a96;margin:calc(5 * var(--login-u)) calc(-8 * var(--login-u)) 0;font-weight:400}
#loadingScreen .login-v48-form{display:grid;gap:calc(14 * var(--login-u));margin:calc(26 * var(--login-u)) 0 0;width:100%;}
#loadingScreen .login-v48-field{display:grid;gap:calc(8 * var(--login-u));min-width:0;}
#loadingScreen .login-v48-field>label{font-size:max(13px,calc(14 * var(--login-u)));line-height:1.3;font-weight:500;color:#23263a;cursor:text}
#loadingScreen .login-v48-input{display:flex;align-items:center;gap:calc(15 * var(--login-u));height:max(48px,calc(54 * var(--login-u)));width:100%;border:1px solid #d9d9da;border-radius:calc(10 * var(--login-u));background:linear-gradient(100deg,#f0f5fd,#eaf1fe);padding:0 calc(15 * var(--login-u));color:#758198;transition:background .16s ease,box-shadow .16s ease,border-color .16s ease;}
#loadingScreen .login-v48-input:focus-within{border-color:#eca916;box-shadow:0 0 0 3px rgba(255,194,66,.15);background:#fff;}
#loadingScreen .login-v48-input>.login-v48-icon{width:calc(25 * var(--login-u));height:calc(25 * var(--login-u));min-width:20px;min-height:20px;}
#loadingScreen .login-v48-input input{display:block;flex:1;min-width:0;width:100%;height:100%;border:0!important;background:transparent!important;outline:none!important;padding:0!important;margin:0!important;box-shadow:none!important;color:#1a2336!important;font-size:max(16px,calc(16 * var(--login-u)))!important;border-radius:0;line-height:normal;}
#loadingScreen .login-v48-input input::placeholder{color:#8e96a6;opacity:1;font-size:max(14px,calc(15 * var(--login-u)))}
#loadingScreen .login-v48-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #ebf2fe inset!important;-webkit-text-fill-color:#1a2336!important;caret-color:#1a2336;border-radius:5px;}
#loadingScreen .login-v48-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:max(32px,calc(30 * var(--login-u)));height:44px;border:0;padding:0;background:none;color:#637089;cursor:pointer;}
#loadingScreen .login-v48-toggle .login-v48-icon{width:calc(24 * var(--login-u));height:calc(24 * var(--login-u));min-width:20px;min-height:20px}
#loadingScreen .login-v48-options{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:calc(26 * var(--login-u));font-size:max(13px,calc(15 * var(--login-u)));line-height:1.3;color:#7a7d96;margin:calc(1 * var(--login-u)) 0 calc(6 * var(--login-u));}
#loadingScreen .login-v48-remember{position:relative;display:flex;align-items:center;gap:calc(13 * var(--login-u));cursor:pointer;min-height:32px;white-space:nowrap;}
#loadingScreen .login-v48-remember input{position:absolute;left:0;top:50%;transform:translateY(-50%);width:24px;height:24px;opacity:0;margin:0;cursor:pointer;}
#loadingScreen .login-v48-checkbox{display:grid;place-items:center;width:calc(25 * var(--login-u));height:calc(25 * var(--login-u));min-width:20px;min-height:20px;flex-shrink:0;border:1.5px solid #e5bf68;border-radius:4px;background:#fff;}
#loadingScreen .login-v48-checkbox .login-v48-icon{width:20px;height:20px;stroke-width:2.5;color:#fff;opacity:0}
#loadingScreen .login-v48-remember input:checked+.login-v48-checkbox{background:linear-gradient(130deg,#ffe274,#ffb91d);border-color:#ffc130}
#loadingScreen .login-v48-remember input:checked+.login-v48-checkbox .login-v48-icon{opacity:1}
#loadingScreen .login-v48-remember input:focus-visible+.login-v48-checkbox{outline:3px solid #d28708;outline-offset:4px}
#loadingScreen .login-v48-forgot{color:#af6000;background:none;border:0;padding:6px 0;cursor:pointer;white-space:nowrap;font-weight:500}
#loadingScreen .login-v48-forgot:hover{text-decoration:underline;text-underline-offset:3px}
#loadingScreen .login-v48-submit{display:flex;align-items:center;justify-content:center;gap:calc(23 * var(--login-u));width:100%;height:max(50px,calc(54 * var(--login-u)));padding:0 10px;border:1px solid #ffb000;border-radius:calc(12 * var(--login-u));background:linear-gradient(150deg,#ffe996,#ffda59);color:#372914;font-weight:700;font-size:max(17px,calc(20 * var(--login-u)));box-shadow:0 7px 16px rgba(226,169,55,.1);cursor:pointer;transition:box-shadow .15s ease,filter .15s ease;}
#loadingScreen .login-v48-submit>.login-v48-icon{width:calc(27 * var(--login-u));height:calc(27 * var(--login-u));color:#89540a}
#loadingScreen .login-v48-submit:hover:not(:disabled){filter:saturate(1.12);box-shadow:0 7px 22px rgba(210,143,14,.18)}
#loadingScreen .login-v48-submit:disabled{opacity:.72;cursor:wait}
#loadingScreen .login-v48-or{display:flex;align-items:center;gap:calc(17 * var(--login-u));margin:calc(16 * var(--login-u)) 0 calc(14 * var(--login-u));font-size:max(14px,calc(16 * var(--login-u)));line-height:1.2;color:#81849b}
#loadingScreen .login-v48-or span{flex:1;height:1px;background:#dedede}
#loadingScreen .login-v48-or em{font-style:normal}
#loadingScreen .login-v48-install{display:flex;align-items:center;justify-content:center;gap:calc(13 * var(--login-u));width:100%;height:max(48px,calc(50 * var(--login-u)));padding:8px;border:1.5px solid #f6ad18;border-radius:calc(12 * var(--login-u));color:#a85b00;background:rgba(255,255,255,.65);font-size:max(14px,calc(16 * var(--login-u)));font-weight:600;cursor:pointer;}
#loadingScreen .login-v48-install:hover{background:#fffae9}
#loadingScreen .login-v48-install>.login-v48-icon{width:calc(27 * var(--login-u));height:calc(27 * var(--login-u));min-width:22px;min-height:22px}
#loadingScreen .login-v48-foot{font-size:max(11px,calc(12 * var(--login-u)));line-height:1.5;text-align:center;color:#858aa2;margin-top:calc(28 * var(--login-u));}
#loadingScreen .login-v48-error{border:1px solid #eacbb7;border-radius:10px;padding:12px 14px;background:#fff3e8;color:#823b21;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
#loadingScreen .login-v48-spinner{width:20px;height:20px;border:2px solid rgba(120,73,2,.2);border-top-color:#784902;border-radius:50%;animation:login-v48-spin .8s linear infinite}
@keyframes login-v48-spin{to{transform:rotate(360deg)}}
#loadingScreen .login-v48-shell button:focus-visible{outline:3px solid #bc7900;outline-offset:4px}
#loadingScreen .login-v48-help{position:fixed;inset:0;margin:auto;border:1px solid #f0dfbb;border-radius:24px;padding:32px;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);background:#fffdf8;color:#382b22;box-shadow:0 24px 70px rgba(64,47,15,.25);overflow:auto;}
#loadingScreen .login-v48-help::backdrop{background:rgba(45,35,25,.32);backdrop-filter:blur(3px)}
#loadingScreen .login-v48-help h2{font:700 26px/1.2 Arial,sans-serif;margin:18px 0 12px}
#loadingScreen .login-v48-help p{font:400 15px/1.6 Arial,sans-serif;margin:0 0 16px;color:#6b6258}
#loadingScreen .login-v48-help .login-v48-help-note{font-size:13px;color:#868077;background:#fff4d8;padding:12px;border-radius:10px}
#loadingScreen .login-v48-help-close{position:absolute;right:15px;top:15px;border:0;border-radius:50%;width:36px;height:36px;background:#fff1ca;color:#885400;display:grid;place-items:center;cursor:pointer}
#loadingScreen .login-v48-help-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#ffebae;color:#ae6900}
#loadingScreen .login-v48-help-back{width:100%;border:1px solid #e8b345;border-radius:10px;background:#ffdf77;padding:13px;font-weight:700;cursor:pointer;color:#654200}
/* Compact landscape/tablet: the form does not shrink into an unreadable miniature. */
@media(max-width:1100px){
 #loadingScreen .login-v48-shell{--login-u:1px;display:block;min-height:100dvh;background:radial-gradient(ellipse at 100% 0,#ffeab2,transparent 65%),#fff9e9;padding:30px 22px 36px}
 #loadingScreen .login-v48-art{width:100%;height:295px;opacity:.55;}
 #loadingScreen .login-v48-art img{object-fit:cover;object-position:center 58%;}
 #loadingScreen .login-v48-story{padding:0;max-width:560px;margin:0 auto 24px;}
 #loadingScreen .login-v48-brand-horizontal{height:62px;gap:14px}
 #loadingScreen .login-v48-brand-horizontal img{width:62px;height:62px;margin:0}
 #loadingScreen .login-v48-brand-horizontal strong{font-size:25px}
 #loadingScreen .login-v48-brand-horizontal span{font-size:10px;letter-spacing:2px}
 #loadingScreen #loginStoryTitle{font-size:34px;margin:17px 0 0;letter-spacing:-1px;line-height:1.08}
 #loadingScreen #loginStoryTitle strong{font-size:29px;letter-spacing:-.8px}
 #loadingScreen .login-v48-lead,#loadingScreen .login-v48-benefits{display:none}
 #loadingScreen .login-v48-panel{padding:0;max-width:560px;margin:0 auto}
 #loadingScreen .login-v48-handwritten{display:none}
 #loadingScreen .login-v48-card{padding:30px 38px 28px;border-radius:28px;background:rgba(255,255,255,.96)}
 #loadingScreen .login-v48-brand-vertical{gap:3px}
 #loadingScreen .login-v48-brand-vertical img{width:65px;height:63px}
 #loadingScreen .login-v48-brand-vertical strong{font-size:23px}
 #loadingScreen .login-v48-brand-vertical span{font-size:10px}
 #loadingScreen .login-v48-welcome{margin-top:24px}
 #loadingScreen .login-v48-welcome h2{font-size:28px;margin:0;white-space:normal;letter-spacing:-.7px}
 #loadingScreen .login-v48-welcome p{font-size:16px;margin:8px 0 0;line-height:1.4}
 #loadingScreen .login-v48-form{margin-top:25px;gap:17px}
 #loadingScreen .login-v48-field>label{font-size:14px}
 #loadingScreen .login-v48-input{height:54px;border-radius:11px;gap:12px;padding:0 14px}
 #loadingScreen .login-v48-options{font-size:14px;margin:0}
 #loadingScreen .login-v48-submit{height:54px;border-radius:12px;font-size:18px}
 #loadingScreen .login-v48-install{height:auto;min-height:50px;border-radius:12px;font-size:15px}
 #loadingScreen .login-v48-foot{font-size:12px;margin-top:26px}
}
@media(max-width:600px){
 #loadingScreen .login-v48-shell{padding:19px 14px max(26px,env(safe-area-inset-bottom))}
 #loadingScreen .login-v48-art{height:240px;background:url('/assets/login-mobile-art-v48.webp') right 63%/230px auto no-repeat;opacity:.4}
 #loadingScreen .login-v48-art img{display:none}
 #loadingScreen .login-v48-story{margin:0 auto 18px;padding:0 8px;}
 #loadingScreen .login-v48-brand-horizontal{height:52px;gap:10px}
 #loadingScreen .login-v48-brand-horizontal img{width:51px;height:50px}
 #loadingScreen .login-v48-brand-horizontal strong{font-size:21px;letter-spacing:.8px}
 #loadingScreen .login-v48-brand-horizontal span{font-size:8px;letter-spacing:1.75px}
 #loadingScreen #loginStoryTitle{margin-top:14px;font-size:27px;line-height:1.12;letter-spacing:-.9px}
 #loadingScreen #loginStoryTitle strong{font-size:24px;letter-spacing:-.65px}
 #loadingScreen .login-v48-card{padding:23px 22px 24px;border-radius:23px;box-shadow:0 18px 44px rgba(156,113,36,.07)}
 #loadingScreen .login-v48-brand-vertical{display:none}
 #loadingScreen .login-v48-welcome{margin-top:0}
 #loadingScreen .login-v48-welcome h2{font-size:24px;letter-spacing:-.7px;line-height:1.2;margin:0 -9px}
 #loadingScreen .login-v48-welcome p{font-size:14px;line-height:1.45;margin:8px -5px 0}
 #loadingScreen .login-v48-form{margin-top:24px;gap:16px}
 #loadingScreen .login-v48-options{font-size:13px;gap:6px}
 #loadingScreen .login-v48-remember{gap:9px}
 #loadingScreen .login-v48-checkbox{width:22px;height:22px}
 #loadingScreen .login-v48-install{gap:9px;font-size:14px;min-height:50px;padding:9px}
 #loadingScreen .login-v48-foot{font-size:10.5px;line-height:1.6;margin-top:23px}
}
@media(prefers-reduced-motion:reduce){#loadingScreen .login-v48-shell *{transition:none!important}#loadingScreen .login-v48-spinner{animation-duration:2s}}

/* Override legacy global display-font rules only inside this login. */
#loadingScreen .login-v48-shell :is(h1,h2,h3,strong,b,button,input,label){font-family:Arial,Helvetica,sans-serif!important}
#loadingScreen .login-v48-smile{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important}
#loadingScreen .login-v48-submit{font-size:max(17px,calc(20 * var(--login-u)))!important;font-weight:700!important}
#loadingScreen .login-v48-install{font-size:max(14px,calc(16 * var(--login-u)))!important;font-weight:600!important}
@media(min-width:1101px){#loadingScreen .login-v48-remember{min-height:26px}}
@media(max-width:600px){#loadingScreen .login-v48-submit{font-size:18px!important}#loadingScreen .login-v48-install{font-size:14px!important}}


/* /themes-v49.css */
/* v49. Theme 1 keeps its original rules. Everything below is isolated to the
   appearance picker or [data-app-theme=theme2]; login and printed documents are excluded. */
.theme-shortcut49{flex:0 0 auto!important}
.menu-theme-entry49{display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;max-width:none!important;min-height:62px!important;text-align:left!important;border:1px solid #eddbb6!important;border-radius:16px!important;background:#fffaf0!important;padding:12px 18px!important;margin:14px 0!important;cursor:pointer}
.menu-theme-entry49>span{width:36px;height:36px;flex-shrink:0}.menu-theme-entry49 svg{width:26px!important;height:26px!important;fill:none}.menu-theme-entry49 div{display:grid;gap:3px;flex:1}.menu-theme-entry49 b{font-size:16px!important}.menu-theme-entry49 small{font-size:13px!important;font-weight:500!important;color:#776f77}
/* Theme settings are available to all signed-in roles, with no fake account tabs. */
.appearance49{width:100%;max-width:1520px;margin:0 auto;padding:16px 10px 32px;color:#392831;font-family:Nunito,Arial,sans-serif}
.appearance49-heading{position:relative;min-height:145px;display:flex;align-items:center;gap:20px;margin-bottom:22px;isolation:isolate;overflow:hidden;border-radius:24px;background:linear-gradient(110deg,#fffef8 20%,#fff6dc 100%);padding:22px}
.appearance49-back{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;border:1px solid #f2dcad;background:#fff;color:#b56e26;cursor:pointer;flex-shrink:0}.appearance49-back svg{width:24px;height:24px;fill:none}
.appearance49-overline{font-size:11px;letter-spacing:2px;font-weight:800;color:#956b40}.appearance49-heading h1{font:800 clamp(26px,2.3vw,38px)/1.2 Nunito,Arial,sans-serif!important;margin:7px 0!important;letter-spacing:-.6px!important}.appearance49-heading p{font-size:16px!important;margin:6px 0!important;color:#736a76}
.appearance49-art{position:absolute;right:0;top:0;bottom:0;width:44%;z-index:-1;background:url('/assets/theme-v49/hero-desk.webp') center/cover no-repeat;mask-image:linear-gradient(90deg,transparent,#000 45%);opacity:.8;pointer-events:none}
.appearance49-panel{padding:26px;border-radius:24px;border:1px solid #f0dfc8;background:#ffffffee;box-shadow:0 12px 38px #74513208}
.appearance49-intro{display:flex;align-items:center;gap:15px;margin-bottom:24px}.appearance49-palette{width:52px;height:52px;border-radius:17px;background:#fff2ca;display:grid;place-items:center;flex-shrink:0}.appearance49-palette svg{width:34px;height:34px;fill:none}.appearance49-intro h2{font:800 29px/1.2 Nunito,Arial,sans-serif!important;margin:0 0 7px!important;color:#392831!important}.appearance49-intro p{font-size:15px!important;margin:0!important;color:#7c6d7b}.appearance49-device{margin-left:auto;font-size:12px;background:#fff6de;border-radius:30px;padding:8px 14px;color:#8b6d40;white-space:nowrap}
.appearance49-options{margin:0;padding:0;border:0;display:grid;grid-template-columns:1fr 1fr;gap:22px;min-width:0}.appearance49-option{display:block!important;position:relative;min-width:0;margin:0!important;border:2px solid #efdfcb;border-radius:19px;padding:12px;cursor:pointer;background:linear-gradient(#fff,#fffdfa);transition:border-color .15s,box-shadow .15s}.appearance49-option[data-theme-option=theme2]{border-color:#f0d8e8;background:linear-gradient(#fff,#fff6fc)}.appearance49-option:hover{box-shadow:0 8px 24px #86436715}.appearance49-option.selected{border-color:#ecb93f;box-shadow:0 0 0 3px #fff4d8}.appearance49-option[data-theme-option=theme2].selected{border-color:#f099bb;box-shadow:0 0 0 3px #fff0f6}.appearance49-option:focus-within{outline:3px solid #735eb5;outline-offset:3px}
.appearance49-option>img{display:block;width:100%;height:auto;aspect-ratio:880/496;object-fit:contain;background:#fffaf5;border-radius:12px;border:1px solid #f7eadf}.appearance49-option-copy{padding:15px 8px 8px}.appearance49-option-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.appearance49-option-title input{appearance:auto!important;position:static!important;opacity:1!important;display:block!important;width:21px!important;height:21px!important;margin:0!important;accent-color:#df9b2a!important;flex-shrink:0}.appearance49-option-title b{font-size:22px}.appearance49-option-title em{font-style:normal;font-size:12px;margin-left:auto;background:#fff0c7;color:#906429;border-radius:20px;padding:5px 10px}.appearance49-option[data-theme-option=theme2] em{color:#ad446f;background:#ffe4ef}.appearance49-active{font-size:11px!important;border-radius:14px;background:#eff8ec;border:1px solid #d2e5c7;padding:3px 9px;color:#54834b}.appearance49-active[hidden]{display:none!important}.appearance49-option-copy p{font-size:14px!important;line-height:1.65;margin:12px 0 0 32px!important;font-weight:500!important;color:#786d7c}
.appearance49-storage-note{font:400 13px/1.6 Nunito,Arial,sans-serif!important;color:#7a7380;margin:20px 0!important}.appearance49-footer{display:flex;gap:20px;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px solid #f1e7df}.appearance49-footer>span{font-size:13px;color:#756979}.appearance49-footer>div{display:flex;gap:12px}.appearance49-footer .btn{font-size:15px!important;min-height:46px!important;padding:0 24px!important}
/* Pastel Colorful application shell. */
html[data-app-theme=theme2] body:not(.auth-mode){--ink:#35273e;--muted:#80788a;--line:#efdae5;--line-soft:#f5eaf0;--paper:#fffefe;--cream:#fff6f4;background:radial-gradient(ellipse at 0 0,#fce4ed 0,transparent 42%),radial-gradient(ellipse at 100% 20%,#e9effe 0,transparent 48%),linear-gradient(145deg,#fff6e1,#fff9f3 44%,#ffedf2 100%)!important;color:#36273c!important;font-family:Nunito,Arial,sans-serif!important}
html[data-app-theme=theme2] body:not(.auth-mode)::before,html[data-app-theme=theme2] body:not(.auth-mode)::after{content:none!important;display:none!important}
html[data-app-theme=theme2] #appShell{background:transparent!important;width:100%!important;max-width:none!important}
html[data-app-theme=theme2] body:not(.auth-mode) .app-header{position:sticky!important;top:0!important;left:auto!important;right:auto!important;width:calc(100% - 40px)!important;max-width:1740px!important;margin:14px auto 0!important;min-height:74px!important;height:auto!important;padding:0!important;background:#ffffffed!important;border:1px solid #fff!important;border-radius:24px!important;box-shadow:0 8px 30px #d690b715!important;backdrop-filter:blur(12px);z-index:80!important}
html[data-app-theme=theme2] body:not(.auth-mode) .app-header-inner{width:100%!important;max-width:none!important;min-height:74px!important;height:auto!important;display:flex!important;gap:18px!important;padding:10px 20px!important;align-items:center!important;overflow:visible!important}
html[data-app-theme=theme2] .brand-home{flex:0 0 auto!important;gap:12px!important;max-width:none!important;width:auto!important;padding:0!important}.brand-home [data-theme-logo]{transition:none}
html[data-app-theme=theme2] .brand-bloom{width:53px!important;height:54px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
html[data-app-theme=theme2] .brand-bloom:before,html[data-app-theme=theme2] .brand-bloom:after{display:none!important}
html[data-app-theme=theme2] .brand-bloom img{width:47px!important;height:53px!important;object-fit:contain!important;max-width:none!important;filter:none!important}
html[data-app-theme=theme2] .brand-copy strong{font:900 15px/1.15 Nunito,Arial,sans-serif!important;letter-spacing:.3px!important;color:#362738!important}html[data-app-theme=theme2] .brand-copy small{font:800 9px/1.4 Nunito,Arial,sans-serif!important;letter-spacing:.35px!important;color:#6c536b!important}
html[data-app-theme=theme2] .top-primary-nav{display:flex!important;flex:1!important;gap:6px!important;overflow:visible!important;min-width:0!important}.top-primary-nav button{cursor:pointer}
html[data-app-theme=theme2] .top-primary-nav>button{display:flex!important;align-items:center!important;gap:7px!important;min-height:45px!important;padding:7px 10px!important;flex:0 0 auto!important;border-radius:15px!important;border:1px solid transparent!important;font:800 13px/1.2 Nunito,Arial,sans-serif!important;color:#44324c!important;white-space:nowrap!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;position:relative!important}
html[data-app-theme=theme2] .top-primary-nav>button[hidden]{display:none!important}html[data-app-theme=theme2] .top-primary-nav>button[data-view=reports]{display:none!important}
html[data-app-theme=theme2] .top-primary-nav>button.active{background:linear-gradient(140deg,#fff6d4,#ffeac0)!important;border-color:#f7d58c!important}html[data-app-theme=theme2] .top-primary-nav>button:hover{background:#fff0f5!important}
html[data-app-theme=theme2] .top-nav-icon{width:31px!important;height:32px!important;border-radius:10px!important;border:0!important;padding:6px!important;box-shadow:none!important;flex-shrink:0!important;filter:none!important}
html[data-app-theme=theme2] .top-nav-icon svg{width:21px!important;height:21px!important;background:none!important;filter:none!important;fill:none!important;stroke:none!important}
html[data-app-theme=theme2] .top-nav-icon::after,html[data-app-theme=theme2] .top-nav-icon::before{display:none!important}
html[data-app-theme=theme2] .nav-yellow,html[data-app-theme=theme2] .nav-peach{background:#fff0c8!important}html[data-app-theme=theme2] .nav-coral,html[data-app-theme=theme2] .nav-rose{background:#ffe8ef!important}html[data-app-theme=theme2] .nav-lilac{background:#f1e9ff!important}html[data-app-theme=theme2] .nav-sky{background:#e9efff!important}html[data-app-theme=theme2] .nav-mint{background:#e1f9ed!important}
html[data-app-theme=theme2] .header-actions{display:flex!important;gap:8px!important;flex-shrink:0!important;margin-left:auto!important}.header-actions .theme-shortcut49 svg{width:24px!important;height:24px!important}
html[data-app-theme=theme2] .global-search{width:clamp(180px,14.5vw,270px)!important;min-width:0!important;height:44px!important;padding:0 13px!important;background:#fff!important;border:1px solid #f1d9e7!important;border-radius:30px!important}html[data-app-theme=theme2] .global-search kbd{display:none!important}
html[data-app-theme=theme2] .global-search input{font:600 12px/1.4 Nunito,Arial,sans-serif!important;min-width:0!important}.global-search svg{flex-shrink:0}
html[data-app-theme=theme2] .top-icon{width:39px!important;height:39px!important;padding:9px!important;min-width:0!important;border:1px solid #f6dfde!important;background:#fffafa!important;box-shadow:none!important;border-radius:50%!important}
html[data-app-theme=theme2] .profile-chip.compact-profile{width:40px!important;min-width:40px!important;height:40px!important;padding:0!important;border:0!important;background:none!important}
html[data-app-theme=theme2] .compact-profile .avatar{background:linear-gradient(150deg,#ffe8c1,#f5c3db)!important;color:#974665!important;width:38px!important;height:38px!important;font-size:13px!important;border:2px solid white!important}
html[data-app-theme=theme2] .compact-profile .avatar::before,html[data-app-theme=theme2] .compact-profile .avatar::after{display:none!important}
html[data-app-theme=theme2] .nav-count{font-size:10px!important;top:0!important;right:0!important;background:#fa8793!important;border:2px solid white!important}
html[data-app-theme=theme2] body:not(.auth-mode) .workspace{max-width:none!important;width:100%!important;margin:0!important;padding:0!important;background:transparent!important}
html[data-app-theme=theme2] body:not(.auth-mode)[data-view] .main-content{width:100%!important;max-width:1740px!important;margin:0 auto!important;min-width:0!important;padding:24px 26px 24px!important;background:transparent!important}
html[data-app-theme=theme2] body:not(.auth-mode)[data-view=dashboard] .main-content{padding-top:0!important}
html[data-app-theme=theme2] body:not(.auth-mode)[data-view] .main-content::after{display:none!important}
html[data-app-theme=theme2] .btn.primary{background:linear-gradient(130deg,#ffe69b,#ffd362)!important;color:#684014!important;border-color:#eab448!important;box-shadow:0 5px 15px #e9b8721a!important}
html[data-app-theme=theme2] .btn{color:#584366;border-color:#e7d9e8;border-radius:13px}
html[data-app-theme=theme2] body:not(.auth-mode) :is(.panel,.page-header,.mock-request-detail,.request-card,.ticket-card,.table-wrap,.service-module-hero,.stat-card,.module-stat){border-color:#f0dfe9!important;background-color:#fffdfef7!important;box-shadow:0 6px 22px #8c52690a!important}
html[data-app-theme=theme2] body:not(.auth-mode) .page-header{background:linear-gradient(120deg,#fff8ed,#fff0f7 58%,#f4efff)!important}
html[data-app-theme=theme2] .page-header h1{font-family:Nunito,Arial,sans-serif!important;color:#573547!important}
html[data-app-theme=theme2] body:not(.auth-mode) :is(input,textarea,select):focus-visible{outline:2px solid #b28bd8!important;outline-offset:2px}
html[data-app-theme=theme2] body:not(.auth-mode) :is(button,a):focus-visible{outline:3px solid #9566b4!important;outline-offset:3px}
html[data-app-theme=theme2] .pill{font-family:Nunito,Arial,sans-serif!important;border:0!important;font-weight:800!important;border-radius:10px!important}.t49-dashboard .pill{display:inline-flex!important;align-items:center;justify-content:center;white-space:normal!important;font-style:normal;padding:5px 9px!important;font-size:11px!important;line-height:1.2!important}
html[data-app-theme=theme2] .pill.amber{background:#fff1bf!important;color:#a36410!important}html[data-app-theme=theme2] .pill.sage{background:#dcf5e8!important;color:#298e62!important}html[data-app-theme=theme2] .pill.rose{background:#ffe3ec!important;color:#ba4868!important}html[data-app-theme=theme2] .pill.blue{background:#e3ecff!important;color:#4a70b7!important}html[data-app-theme=theme2] .pill.purple{background:#eee2ff!important;color:#7f55b3!important}html[data-app-theme=theme2] .pill.gray{background:#f3edf4!important;color:#74627d!important}
html[data-app-theme=theme2] #sidebar{background:linear-gradient(150deg,#fffdf8,#fff8fc 60%,#f7f1ff)!important;border-color:#efd9e3!important;box-shadow:0 20px 80px #57375030!important}
html[data-app-theme=theme2] #sidebar .menu-tile-icon{background:#fff2f6!important;box-shadow:0 6px 14px #c0799514!important}html[data-app-theme=theme2] #sidebar .menu-tile-icon svg{fill:none!important;stroke:none!important}
html[data-app-theme=theme2] .mobile-dock{background:#ffffffed!important;border-color:#edd3e1!important;box-shadow:0 8px 32px #ab698226!important;backdrop-filter:blur(10px)}html[data-app-theme=theme2] .mobile-dock .nav-item.active{background:#fff0cc!important}html[data-app-theme=theme2] .mobile-dock .mobile-menu{background:linear-gradient(145deg,#ffe8a6,#ffc960)!important}
/* Fully live dashboard; scoped class names avoid the old fixed-coordinate styles. */
.t49-dashboard{width:100%;min-width:0;font:500 14px/1.45 Nunito,Arial,sans-serif;color:#392639;position:relative;isolation:isolate}
.t49-dashboard button{font-family:Nunito,Arial,sans-serif;cursor:pointer}.t49-dashboard svg{width:24px;height:24px;fill:none;stroke:none;flex-shrink:0}.t49-dashboard h1,.t49-dashboard h2,.t49-dashboard p{margin:0}
.t49-hero{position:relative;min-height:230px;display:flex;align-items:center;overflow:hidden;margin:0 -26px;isolation:isolate;background:radial-gradient(ellipse at 40% 50%,#fffdf8,transparent 70%)}
.t49-hero-copy{width:49%;padding:28px 0 26px 7.2%;z-index:1}.t49-kicker{font-size:10px;font-weight:900;letter-spacing:2.2px;color:#b38c5a;display:block;margin-bottom:7px}.t49-hero h1{font:700 italic clamp(29px,2.9vw,49px)/1.12 Georgia,'Times New Roman',serif!important;letter-spacing:-1px;color:#472330!important;margin-bottom:12px}.t49-hero h1 em{color:#db5581;font-style:italic}.t49-hero h1>span{font-style:normal;display:inline-block;font-size:.83em;transform:rotate(-10deg);vertical-align:middle}.t49-hero p{font:600 15px/1.55 Nunito,Arial,sans-serif!important;color:#896b82!important;max-width:490px}.t49-hero-art{position:absolute;inset:0 0 0 auto;width:64%;background:url('/assets/theme-v49/hero-desk.webp') right center/cover no-repeat;z-index:0;mask-image:linear-gradient(90deg,transparent,#000 21%);pointer-events:none}
.t49-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 16px}.t49-stat{min-width:0;display:flex;align-items:center;gap:17px;padding:20px 17px!important;border:1px solid #fff5e4;border-radius:20px;background:linear-gradient(145deg,#fff,#fffaf0);box-shadow:0 7px 25px #c6945512;text-align:left;color:#372636;position:relative;overflow:hidden;min-height:121px}
.t49-stat.t49-color-1{background:linear-gradient(140deg,#fff,#fff2f7);border-color:#ffe0e9}.t49-stat.t49-color-2{background:linear-gradient(140deg,#fff,#f6f1ff);border-color:#ece1fc}.t49-stat.t49-color-3{background:linear-gradient(140deg,#fff,#f2fbf3);border-color:#dff2e3}
.t49-stat>div{min-width:0;flex:1;position:relative;z-index:1}.t49-stat b{font-size:14px;line-height:1.25;display:block;margin-bottom:4px}.t49-stat strong{font-size:34px;line-height:1.12;display:block;font-weight:900;letter-spacing:-.7px}.t49-stat small{font-size:11px;line-height:1.4;display:block;margin-top:4px;color:#817287;font-weight:600}
.t49-stat-icon{width:70px;height:76px;background:linear-gradient(145deg,#fff4d6,#ffeab0);border-radius:19px;display:grid;place-items:center;flex-shrink:0}.t49-color-1 .t49-stat-icon{background:linear-gradient(145deg,#ffeef4,#ffd6e5)}.t49-color-2 .t49-stat-icon{background:linear-gradient(145deg,#f3eeff,#e3d7fc)}.t49-color-3 .t49-stat-icon{background:linear-gradient(145deg,#e6fff0,#c3f2d9)}.t49-stat-icon svg{width:43px;height:43px;filter:drop-shadow(0 4px 3px #603a751f)}
.t49-stat-arrow{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#fff2d2;display:grid;place-items:center}.t49-stat-arrow svg{width:17px;height:17px}.t49-color-1 .t49-stat-arrow{background:#ffe7ef}.t49-color-2 .t49-stat-arrow{background:#eee5ff}.t49-color-3 .t49-stat-arrow{background:#e0f9e9}.t49-stat:hover{transform:translateY(-2px);box-shadow:0 10px 25px #b976981f}
.t49-grid{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(0,1fr) minmax(0,1.06fr);gap:15px;align-items:stretch}.t49-panel{min-width:0;padding:20px;border-radius:20px;border:1px solid #f5e2da;background:#fffffff7;box-shadow:0 6px 24px #9c55630b}.t49-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.t49-title-wrap{display:flex;align-items:center;gap:10px;min-width:0}.t49-title-wrap>div{min-width:0}.t49-title-wrap h2{font:700 23px/1.2 Georgia,'Times New Roman',serif!important;color:#462738!important;letter-spacing:-.5px!important}.t49-title-wrap p{font:500 11px/1.45 Nunito,Arial,sans-serif!important;color:#8b7d96!important;margin-top:4px!important}.t49-heading-icon{display:grid;place-items:center;width:32px;flex-shrink:0}.t49-heading-icon svg{width:31px;height:31px}.t49-text-button{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:#c84c76;font-size:11px;font-weight:800;padding:3px 0;white-space:nowrap}.t49-text-button svg{width:17px;height:17px}
.t49-services-filter{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}.t49-services-filter button{display:flex;align-items:center;gap:5px;border:1px solid #f2e7ed;background:#fffafb;border-radius:9px;font-size:11px;min-height:31px;padding:5px 8px;color:#7b6384;font-weight:700}.t49-services-filter svg{width:16px;height:16px}.t49-services-filter b{font-size:10px;background:#f9eafa;border-radius:7px;padding:1px 4px;color:#9c607d}.t49-services-filter button.active{background:#fff0d2;border-color:#efce85;color:#9b6619}
.t49-status-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:13px}.t49-status-filter button{font-size:10.5px;padding:4px 7px;background:transparent;color:#846982;border:1px solid #eedee9;border-radius:9px;font-weight:700}.t49-status-filter b{padding:1px 5px;background:#faf0f4;border-radius:8px;font-weight:800}.t49-status-filter button.active{background:#fff0f7;color:#b84770;border-color:#f1aac8}
.t49-request-list{border:1px solid #f6e5ec;border-radius:12px;overflow:hidden;background:#fff}.t49-request-head,.t49-request{display:grid;grid-template-columns:21px 60px minmax(108px,1.35fr) minmax(70px,.8fr) minmax(65px,.7fr) 87px 23px;gap:9px;align-items:center;padding:10px 12px;width:100%;text-align:left}.t49-request-head{font-size:10px;background:linear-gradient(90deg,#fff0f4,#fff6ec);color:#81627b;font-weight:800;padding-top:9px;padding-bottom:9px}.t49-request{color:#615270;background:#fff;border:0;border-top:1px solid #f5e9ed;font-size:12px;min-height:65px}.t49-request:hover,.t49-request:focus-visible{background:#fff8ef}.t49-request>*{min-width:0;overflow-wrap:anywhere}.t49-request time{font-size:11px;color:#95849d}.t49-row-service{font-size:12px;font-weight:800;line-height:1.3}.t49-row-service small{font-size:8px;font-weight:600;color:#a491a6;display:block;margin-top:3px}.t49-row-person,.t49-row-unit{font-size:11px;line-height:1.35}.t49-row-number{font-size:11px;color:#9c869b}.t49-row-action{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;border:1px solid #f5dbdf}.t49-row-action svg{width:14px;height:14px}
.t49-pagination{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:14px;color:#9b8899;font-size:10px}.t49-pagination nav{display:flex;gap:4px;align-items:center}.t49-pagination button{display:grid;place-items:center;min-width:28px;height:28px;border:1px solid transparent;border-radius:8px;background:#fff;color:#896976;font:800 11px Nunito,Arial,sans-serif}.t49-pagination button.active{background:#ffe9f2;border-color:#f1bbd1;color:#b44470}.t49-pagination button:disabled{opacity:.3;cursor:default}.t49-pagination button:hover:not(:disabled){background:#fff0ce}
.t49-notes{display:flex;flex-direction:column;background:linear-gradient(#fff 75%,#fffafc)}.t49-notes h2{color:#735091!important}.t49-notes .t49-text-button{color:#9962c0}.t49-note-list{display:grid;gap:0}.t49-note{display:flex!important;align-items:center;gap:10px;min-height:43px;border-bottom:1px solid #f4e9f0;padding:8px 0;cursor:pointer}.t49-note input{appearance:auto!important;display:block!important;position:static!important;opacity:1!important;width:17px!important;height:17px!important;margin:0!important;accent-color:#f1b943;flex-shrink:0}.t49-note span{font:600 13px/1.4 Nunito,Arial,sans-serif;color:#6c5373;overflow-wrap:anywhere}.t49-note:has(input:checked) span{color:#967f9e}.t49-note-quote{position:relative;background:linear-gradient(125deg,#fffcf2,#f4e8ff);border:1px solid white;border-radius:18px 3px 18px 3px;padding:18px 20px;color:#a174a7;font:italic 16px/1.5 Georgia,serif;margin-top:auto;transform:rotate(-2deg);margin-bottom:2px}.t49-note-quote>span{position:absolute;right:14px;top:11px;color:#eac177;font-size:27px}
.t49-reminders{display:flex;flex-direction:column}.t49-reminder-list{display:grid;gap:10px}.t49-reminder{background:#fffcfd;border:1px solid #f5e5ed;border-radius:13px;display:flex;gap:10px;align-items:center;text-align:left;min-height:66px;padding:11px;width:100%;min-width:0}.t49-reminder>span:nth-child(2){min-width:0;flex:1}.t49-reminder b{display:block;font-size:12px;line-height:1.35;color:#5d455e;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.t49-reminder small{display:block;font-size:10px;color:#a18b9f;margin-top:3px}.t49-reminder .pill{max-width:73px;flex-shrink:0;font-size:9px!important;padding:5px!important;line-height:1.25!important}.t49-small-icon{width:34px;height:35px;background:#fff0f4;border-radius:10px;display:grid;place-items:center;flex-shrink:0}.t49-small-icon svg{width:23px;height:23px}.t49-reminder-quote{font:italic 16px/1.6 Georgia,serif!important;color:#ad7e95!important;text-align:center;margin:auto 0 6px!important;padding-top:18px}
.t49-favorites{grid-column:1/3}.t49-favorites-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.t49-service{border:1px solid #f7e4dc;background:#fffdfa;border-radius:14px;min-height:84px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;padding:8px;text-align:center;color:#664b61;min-width:0}.t49-service b{font-size:11px;line-height:1.25}.t49-service>span{width:42px;height:40px;border-radius:13px;background:#ffe9ee;display:grid;place-items:center}.t49-service svg{width:27px;height:27px}.t49-service.color-1>span{background:#e2f8e8}.t49-service.color-2>span{background:#f1e5ff}.t49-service.color-3>span{background:#fff0cc}.t49-service.color-4>span{background:#e3edff}.t49-service.color-5>span{background:#ffeddf}.t49-service:hover{background:#fff2f6;border-color:#f1b7cd}
.t49-footer-art{grid-column:3;min-height:174px;align-self:stretch;background:url('/assets/theme-v49/footer-books.webp') center bottom/contain no-repeat;mask-image:linear-gradient(0deg,#000 84%,transparent);pointer-events:none}.t49-footer{display:flex;justify-content:space-between;align-items:center;margin:20px 2px 0;font-size:11px;color:#aa8a9c}.t49-footer button{display:flex;align-items:center;gap:7px;font-size:11px;color:#a87499;background:transparent;border:0}.t49-footer svg{width:19px;height:19px}.t49-empty{min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px;text-align:center;color:#b19bab}.t49-empty>svg{width:42px;height:42px}.t49-empty b{font-size:14px;color:#917888}.t49-empty span{font-size:12px}.t49-empty.small{min-height:190px}
@media(min-width:1700px){.t49-title-wrap h2{font-size:25px!important}.t49-request-head,.t49-request{grid-template-columns:23px 67px minmax(115px,1.4fr) minmax(85px,1fr) minmax(82px,.9fr) 94px 25px}.t49-request{min-height:70px}.t49-request time,.t49-row-person,.t49-row-unit{font-size:12px}.t49-hero{min-height:256px}.t49-hero-copy{padding-left:7%}}
@media(max-width:1540px){html[data-app-theme=theme2] .global-search{display:none!important}html[data-app-theme=theme2] .top-primary-nav{justify-content:center!important}.t49-stat{gap:12px;padding:18px 13px!important}.t49-stat-arrow{display:none}.t49-stat-icon{width:58px;height:65px}.t49-stat strong{font-size:31px}.t49-stat b{font-size:13px}.t49-panel{padding:16px}.t49-title-wrap h2{font-size:21px!important}.t49-grid{grid-template-columns:minmax(0,2.3fr) minmax(0,1fr) minmax(0,1.04fr)}.t49-request-head,.t49-request{grid-template-columns:19px 48px minmax(80px,1.3fr) minmax(60px,.9fr) minmax(58px,.8fr) 67px 20px;gap:6px;padding:9px}.t49-request .pill{font-size:10px!important}.t49-reminder{padding:9px;gap:6px}.t49-reminder .pill{display:none!important}.t49-hero-copy{padding-left:5%}.t49-hero p{font-size:14px!important}}
@media(max-width:1240px){html[data-app-theme=theme2] body:not(.auth-mode) .app-header-inner{gap:10px!important;padding:8px 14px!important}html[data-app-theme=theme2] .brand-copy strong{font-size:13px!important}html[data-app-theme=theme2] .brand-copy small{font-size:8px!important}html[data-app-theme=theme2] .brand-bloom{width:39px!important;height:43px!important}html[data-app-theme=theme2] .brand-bloom img{width:37px!important;height:43px!important}html[data-app-theme=theme2] .top-primary-nav>button{padding:6px!important;font-size:11px!important;gap:4px!important}html[data-app-theme=theme2] .top-nav-icon{width:28px!important;height:29px!important;padding:4px!important}.t49-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.t49-inbox{grid-column:1;grid-row:1/3}.t49-notes{grid-column:2;grid-row:1}.t49-reminders{grid-column:2;grid-row:2}.t49-favorites{grid-column:1/3}.t49-footer-art{display:none}.t49-request{min-height:81px}.t49-hero-copy{width:56%}.t49-hero-art{width:60%}.t49-hero{min-height:210px}.t49-hero p{max-width:425px}.t49-notes .t49-note-quote{margin-top:12px}.t49-reminder-quote{font-size:14px!important}.t49-stat-icon{width:50px;height:55px}.t49-stat-icon svg{width:34px;height:34px}.t49-stat small{font-size:10px}.appearance49-device{display:none}}
@media(max-width:1030px){html[data-app-theme=theme2] .top-primary-nav>button>span:not(.top-nav-icon){display:none!important}html[data-app-theme=theme2] .top-primary-nav>button{min-width:40px!important;justify-content:center!important}html[data-app-theme=theme2] .nav-chevron{display:none!important}.t49-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.t49-stat-arrow{display:grid}.t49-stat{min-height:107px}.t49-stat b{font-size:14px}.t49-stat small{font-size:11px}.t49-hero-copy{width:60%}.t49-hero-art{opacity:.7}.t49-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.t49-inbox{grid-column:1/3;grid-row:1}.t49-notes{grid-column:1;grid-row:2}.t49-reminders{grid-column:2;grid-row:2}.t49-favorites{grid-row:3}.t49-request-head,.t49-request{grid-template-columns:23px 65px minmax(110px,1.3fr) minmax(90px,.9fr) minmax(80px,.8fr) 100px 24px;font-size:13px}.t49-request{min-height:63px}.t49-request .pill{font-size:11px!important}.t49-hero{min-height:190px}.appearance49-art{width:32%;opacity:.4}}
@media(max-width:760px){html[data-app-theme=theme2] body:not(.auth-mode) .app-header{width:calc(100% - 20px)!important;margin-top:8px!important;min-height:64px!important;border-radius:20px!important}html[data-app-theme=theme2] body:not(.auth-mode) .app-header-inner{min-height:64px!important;padding:8px 12px!important}html[data-app-theme=theme2] .top-primary-nav{display:none!important}html[data-app-theme=theme2] .brand-copy strong{font-size:14px!important}html[data-app-theme=theme2] .brand-copy small{display:block!important;font-size:8px!important}html[data-app-theme=theme2] .header-actions{gap:6px!important}html[data-app-theme=theme2] .top-icon{width:34px!important;height:34px!important;padding:7px!important}.theme-shortcut49{display:grid!important}html[data-app-theme=theme2] .compact-profile,html[data-app-theme=theme2] .compact-profile .avatar{width:34px!important;height:34px!important;min-width:34px!important}
html[data-app-theme=theme2] body:not(.auth-mode)[data-view] .main-content{padding:16px 12px calc(124px + env(safe-area-inset-bottom,0px))!important}.t49-hero{margin:0 -12px;min-height:203px;align-items:flex-start}.t49-hero-copy{width:100%;padding:23px 22px 52px!important}.t49-hero h1{font-size:32px!important;letter-spacing:-.5px!important}.t49-hero p{max-width:320px;font-size:13px!important;line-height:1.6!important}.t49-kicker{font-size:9px}.t49-hero-art{height:105px;top:auto;bottom:0;width:80%;opacity:.5;background-size:cover;mask-image:linear-gradient(90deg,transparent,#000 55%);z-index:-1}.t49-desktop-break{display:none}
.t49-stats{gap:9px;margin-bottom:12px}.t49-stat{padding:13px 12px!important;gap:9px;min-height:113px;border-radius:17px;align-items:flex-start}.t49-stat-icon{width:39px;height:44px;border-radius:13px}.t49-stat-icon svg{width:29px;height:29px}.t49-stat b{font-size:11px}.t49-stat strong{font-size:28px}.t49-stat small{font-size:9px;line-height:1.4}.t49-stat-arrow{display:none}.t49-grid{gap:12px}.t49-panel{padding:15px;border-radius:18px}.t49-title-wrap h2{font-size:21px!important}.t49-title-wrap p{font-size:10px!important}.t49-heading-icon{width:25px}.t49-heading-icon svg{width:25px;height:25px}.t49-title-wrap{gap:8px}.t49-panel-head{margin-bottom:13px}.t49-text-button{font-size:10px;gap:4px}.t49-text-button svg{width:15px;height:15px}.t49-services-filter{gap:5px}.t49-services-filter button{font-size:10px;padding:5px 7px;min-height:33px}.t49-services-filter svg{width:14px;height:14px}.t49-status-filter button{font-size:10px;min-height:29px}.t49-status-filter{gap:5px}
.t49-request-head{display:none}.t49-request{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:12px;row-gap:6px;position:relative;padding:13px;font-size:13px;min-height:100px}.t49-row-number,.t49-row-unit{display:none}.t49-row-service{grid-column:1;grid-row:1;font-size:13px}.t49-row-service small{font-size:9px;margin-top:3px}.t49-row-person{grid-column:1;grid-row:2;font-size:12px}.t49-request time{grid-column:1;grid-row:3;font-size:10px}.t49-row-status{grid-column:2;grid-row:1;max-width:105px}.t49-row-action{grid-column:2;grid-row:2/4;justify-self:end;width:30px;height:30px}.t49-pagination{align-items:flex-start;flex-wrap:wrap;font-size:10px}.t49-pagination button{width:31px;height:31px}.t49-pagination nav{margin-left:auto}
.t49-notes,.t49-reminders,.t49-favorites{grid-column:1/3;grid-row:auto}.t49-note span{font-size:14px}.t49-note-quote{margin-top:20px!important}.t49-reminder .pill{display:inline-flex!important}.t49-reminder b{font-size:13px}.t49-reminder small{font-size:11px}.t49-reminder-quote{padding:16px 0 0}.t49-favorites-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.t49-service{min-height:90px}.t49-service b{font-size:11px}.t49-footer{flex-direction:column;gap:10px;margin-top:18px}.t49-footer-art{display:block;grid-column:1/3;min-height:130px;background-size:contain}.t49-grid .t49-footer-art{order:10}
.appearance49{padding:4px 0 28px}.appearance49-heading{padding:18px 15px;min-height:128px;gap:12px;margin-bottom:15px}.appearance49-heading h1{font-size:26px!important}.appearance49-heading p{font-size:13px!important}.appearance49-art{opacity:.2;width:65%}.appearance49-back{width:37px;height:39px;border-radius:12px}.appearance49-panel{padding:16px;border-radius:20px}.appearance49-intro{gap:11px;margin-bottom:18px}.appearance49-intro h2{font-size:24px!important}.appearance49-intro p{font-size:13px!important}.appearance49-palette{width:43px;height:44px;border-radius:15px}.appearance49-palette svg{width:29px;height:29px}.appearance49-options{grid-template-columns:1fr;gap:15px}.appearance49-option{padding:9px;border-radius:16px}.appearance49-option-copy{padding:12px 3px 7px}.appearance49-option-title{gap:8px}.appearance49-option-title b{font-size:20px}.appearance49-option-title em{font-size:10px}.appearance49-option-copy p{font-size:13px!important;margin-left:29px!important}.appearance49-footer{display:block}.appearance49-footer>span{display:block;margin-bottom:14px;font-size:12px}.appearance49-footer>div{display:grid;grid-template-columns:1fr 1.5fr}.appearance49-footer .btn{padding:0 12px!important;font-size:14px!important;min-height:48px!important}
}
@media(max-width:365px){html[data-app-theme=theme2] .brand-copy strong{font-size:12px!important}html[data-app-theme=theme2] .brand-copy small{font-size:7px!important}html[data-app-theme=theme2] .brand-home{gap:7px!important}html[data-app-theme=theme2] .top-icon{width:31px!important;height:31px!important;padding:6px!important}.t49-hero h1{font-size:28px!important}.t49-stat{padding:12px 9px!important;gap:7px}.t49-stat-icon{width:33px;height:38px}.t49-stat strong{font-size:25px}.t49-panel{padding:12px}.t49-title-wrap h2{font-size:19px!important}}
@media(prefers-reduced-motion:reduce){.t49-stat,.appearance49-option{transition:none!important;transform:none!important}}
/* Override the legacy global heading/font rules without touching Tema 1. */
html[data-app-theme=theme2] #appShell .t49-dashboard h1{font-family:Georgia,'Times New Roman',serif!important}
html[data-app-theme=theme2] #appShell .t49-dashboard h2{font-family:Georgia,'Times New Roman',serif!important}
html[data-app-theme=theme2] #appShell .brand-bloom,html[data-app-theme=theme2] #appShell .brand-bloom img{border-radius:0!important;transform:none!important;clip-path:none!important;overflow:visible!important}
html[data-app-theme=theme2] #appShell .brand-bloom img{object-fit:contain!important;object-position:center!important}
html[data-app-theme=theme2] #appShell .t49-hero-art{background-size:contain}
html[data-app-theme=theme2] #appShell .t49-title-wrap h2{font-weight:700!important}
html[data-app-theme=theme2] #appShell .t49-panel-head{min-height:0!important}
html[data-app-theme=theme2] #appShell .t49-dashboard .t49-request{font-family:Nunito,Arial,sans-serif!important;line-height:1.4!important}
html[data-app-theme=theme2] #appShell .t49-row-service{font-size:13px!important}
html[data-app-theme=theme2] #appShell .t49-row-person,html[data-app-theme=theme2] #appShell .t49-row-unit{font-size:12px!important}
html[data-app-theme=theme2] #appShell .t49-request time{font-size:12px!important}
html[data-app-theme=theme2] #appShell .t49-request-head{font-size:11px!important}
html[data-app-theme=theme2] #appShell .t49-stat b{font-size:15px!important}
html[data-app-theme=theme2] #appShell .t49-stat small{font-size:12px!important}
html[data-app-theme=theme2] #appShell .t49-stat strong{font-family:Nunito,Arial,sans-serif!important}
html[data-app-theme=theme2] #appShell .t49-service b{font-size:12px!important}
html[data-app-theme=theme2] #appShell .t49-note span{font-size:14px!important}
html[data-app-theme=theme2] #appShell .t49-reminder b{font-size:13px!important}
html[data-app-theme=theme2] #appShell .t49-request-list{min-height:0!important}
html[data-app-theme=theme2] #appShell .t49-text-button{min-height:28px!important;min-width:0!important;font-size:12px!important;line-height:1.3!important}
#appShell .appearance49 h1,#appShell .appearance49 h2{font-family:Nunito,Arial,sans-serif!important}
#appShell .appearance49-footer .btn{min-width:110px!important}
@media(max-width:1240px){html[data-app-theme=theme2] #appShell .t49-stat b{font-size:13px!important}html[data-app-theme=theme2] #appShell .t49-stat small{font-size:10px!important}}
@media(max-width:760px){html[data-app-theme=theme2] #appShell .t49-stat b{font-size:11px!important}html[data-app-theme=theme2] #appShell .t49-stat small{font-size:10px!important}html[data-app-theme=theme2] #appShell .t49-hero-art{background-size:cover}html[data-app-theme=theme2] #appShell .t49-request time{font-size:10px!important}html[data-app-theme=theme2] #appShell .t49-text-button{font-size:10px!important}}
/* Carry the palette to existing modules without replacing their controls. */
html[data-app-theme=theme2] #appShell :is(.mock-page-header,.inbox-page-header,.cute-page-header,.module-hero,.service-hero){background:linear-gradient(120deg,#fffdf8,#fff1f7 65%,#f5efff)!important;border-color:#ecd8e4!important}
html[data-app-theme=theme2] #appShell :is(.mock-request-card,.request-paper,.standalone-paper,.card,.ticket-table-wrap,.module-card,.request-service-tab){border-color:#eedce9!important;box-shadow:0 6px 20px #9155700a!important}
html[data-app-theme=theme2] #appShell .mock-request-card.active{background:linear-gradient(115deg,#fff5fa,#fde5f0)!important;border-color:#e6a4c2!important}
html[data-app-theme=theme2] #appShell .request-paper{background-color:#fffdfef7!important}
html[data-app-theme=theme2] #appShell .paper-field>span{color:#b15a87!important}
html[data-app-theme=theme2] #appShell .request-paper-id{background:#f4e6fe!important;color:#855994!important;border-color:#e6cbf4!important}
html[data-app-theme=theme2] #appShell .request-service-tab.active{background:linear-gradient(135deg,#fff1fa,#f9e5ff)!important;border-color:#e4b4d4!important}
html[data-app-theme=theme2] #appShell .request-service-tab:hover{background:#fff4f9!important}
html[data-app-theme=theme2] #appShell :is(.request-paper-actions .btn,.page-actions .btn){font-family:Nunito,Arial,sans-serif!important}


/* /theme2-wallpaper-v50.css */
/* v50 — one continuous approved wallpaper, not a banner/screenshot overlay.
   Theme 1, login v48 and printed documents are deliberately not restyled.
   Notification readability applies to BOTH workspace themes. */

/* ===== Continuous full-viewport scenery ===== */
html[data-app-theme="theme2"] body:not(.auth-mode) {
  background: #fff5ee url('/assets/theme-v50/dashboard-wallpaper.webp') center top / cover no-repeat scroll !important;
  color: #362737 !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell,
html[data-app-theme="theme2"] body:not(.auth-mode) .workspace,
html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] .main-content {
  background: transparent !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) .app-header {
  max-width: 1900px !important;
  width: calc(100% - 48px) !important;
  margin-top: 16px !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 10px 28px rgba(125,79,102,.07) !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) .app-header-inner {
  min-height: 78px !important;
  gap: 16px !important;
  padding: 10px 20px !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] .main-content {
  max-width: 1900px !important;
  padding: 22px 24px 30px !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode)[data-view="dashboard"] .main-content {
  padding-top: 0 !important;
}
html[data-app-theme="theme2"] #appShell .top-primary-nav>button {
  font-size: 14px !important;
  min-height: 48px !important;
  padding: 8px 10px !important;
}
html[data-app-theme="theme2"] #appShell .top-nav-icon {
  width: 32px !important;
  height: 34px !important;
  border-radius: 11px !important;
}
html[data-app-theme="theme2"] #appShell .brand-copy strong {font-size:16px!important}
html[data-app-theme="theme2"] #appShell .brand-copy small {font-size:10px!important}
html[data-app-theme="theme2"] #appShell .nav-count,
html[data-app-theme="theme2"] #appShell .badge-dot {font-size:12px!important;line-height:1.2!important}
html[data-app-theme="theme2"] #appShell .global-search {font-size:14px!important}
html[data-app-theme="theme2"] #appShell .global-search input {font-size:14px!important}
/* The two cropped rectangular illustrations used in v49 are no longer displayed. */
html[data-app-theme="theme2"] #appShell .t49-hero-art,
html[data-app-theme="theme2"] #appShell .t49-footer-art {display:none!important}
html[data-app-theme="theme2"] #appShell .t49-dashboard {font-size:16px;line-height:1.5}
html[data-app-theme="theme2"] #appShell .t49-hero {
  margin:0 !important;
  min-height:clamp(205px,15.5vw,278px) !important;
  background:none !important;
  overflow:visible !important;
  align-items:center !important;
}
html[data-app-theme="theme2"] #appShell .t49-hero-copy {
  width:50% !important;
  max-width:790px;
  padding:20px 22px 22px clamp(26px,4.5vw,88px) !important;
  min-width:0;
}
html[data-app-theme="theme2"] #appShell .t49-kicker {
  font-size:11px !important;
  letter-spacing:2.5px;
  color:#8c635c;
  margin-bottom:9px;
}
html[data-app-theme="theme2"] #appShell .t49-hero h1 {
  font-size:clamp(35px,3.05vw,57px) !important;
  line-height:1.14 !important;
  margin:0 0 12px !important;
  overflow-wrap:anywhere;
  text-shadow:0 2px 16px rgba(255,255,255,.5);
}
html[data-app-theme="theme2"] #appShell .t49-hero h1 em {color:#c83367}
html[data-app-theme="theme2"] #appShell .t49-hero p {
  font-size:16px !important;
  line-height:1.55 !important;
  font-weight:600 !important;
  color:#755266 !important;
  max-width:560px !important;
}
/* Real cards sit above the single wallpaper; no background screenshot covers data. */
html[data-app-theme="theme2"] #appShell .t49-stats {gap:16px;margin-bottom:16px}
html[data-app-theme="theme2"] #appShell .t49-stat {
  min-height:128px;
  padding:19px 18px !important;
  gap:17px;
  border:1px solid rgba(255,237,190,.9);
  border-radius:21px;
  background:linear-gradient(120deg,rgba(255,255,255,.98),rgba(255,253,244,.97));
  box-shadow:0 8px 28px rgba(141,85,83,.065);
}
html[data-app-theme="theme2"] #appShell .t49-color-1 {
  background:linear-gradient(120deg,rgba(255,255,255,.98),rgba(255,243,248,.97));
  border-color:#ffdeea;
}
html[data-app-theme="theme2"] #appShell .t49-color-2 {
  background:linear-gradient(120deg,rgba(255,255,255,.98),rgba(247,242,255,.97));
  border-color:#eee0fb;
}
html[data-app-theme="theme2"] #appShell .t49-color-3 {
  background:linear-gradient(120deg,rgba(255,255,255,.98),rgba(240,252,245,.97));
  border-color:#d8f3e4;
}
html[data-app-theme="theme2"] #appShell .t49-stat b {font-size:16px!important;line-height:1.35;margin-bottom:4px}
html[data-app-theme="theme2"] #appShell .t49-stat strong {font-size:37px;line-height:1.05;margin-bottom:5px}
html[data-app-theme="theme2"] #appShell .t49-stat small {font-size:12.5px;line-height:1.4;color:#756878}
html[data-app-theme="theme2"] #appShell .t49-stat-icon {width:66px;height:72px;border-radius:19px;box-shadow:inset 0 1px 0 white}
html[data-app-theme="theme2"] #appShell .t49-stat-icon svg {width:44px;height:44px}
html[data-app-theme="theme2"] #appShell .t49-stat-arrow {display:grid;width:32px;height:32px;flex-basis:32px}
html[data-app-theme="theme2"] #appShell .t49-grid {
  grid-template-columns:minmax(0,2.12fr) minmax(0,1fr) minmax(0,1.06fr);
  gap:16px;
}
html[data-app-theme="theme2"] #appShell .t49-panel {
  border:1px solid rgba(244,221,222,.95);
  border-radius:20px;
  padding:20px;
  background:rgba(255,255,255,.965);
  box-shadow:0 9px 30px rgba(147,85,107,.06);
}
html[data-app-theme="theme2"] #appShell .t49-notes {border-color:#ecd9f4;background:rgba(255,254,255,.97)}
html[data-app-theme="theme2"] #appShell .t49-title-wrap h2 {font-size:26px!important;line-height:1.15!important;letter-spacing:-.45px!important}
html[data-app-theme="theme2"] #appShell .t49-title-wrap p {font-size:13px!important;line-height:1.5!important;color:#827089!important;margin-top:6px!important}
html[data-app-theme="theme2"] #appShell .t49-panel-head {gap:10px;margin-bottom:17px}
html[data-app-theme="theme2"] #appShell .t49-heading-icon {width:32px}
html[data-app-theme="theme2"] #appShell .t49-heading-icon svg {width:32px;height:32px}
html[data-app-theme="theme2"] #appShell .t49-text-button {font-size:13px;min-height:34px;color:#ba3968}
html[data-app-theme="theme2"] #appShell .t49-text-button svg {width:18px;height:18px}
html[data-app-theme="theme2"] #appShell .t49-services-filter,
html[data-app-theme="theme2"] #appShell .t49-status-filter {gap:6px;margin-bottom:9px}
html[data-app-theme="theme2"] #appShell .t49-services-filter button,
html[data-app-theme="theme2"] #appShell .t49-status-filter button {font-size:12px;min-height:34px;padding:6px 8px}
html[data-app-theme="theme2"] #appShell .t49-services-filter b,
html[data-app-theme="theme2"] #appShell .t49-status-filter b {font-size:11px}
html[data-app-theme="theme2"] #appShell .t49-request-head,
html[data-app-theme="theme2"] #appShell .t49-request {
  grid-template-columns:20px 57px minmax(110px,1.4fr) minmax(72px,.9fr) minmax(75px,.9fr) 82px 25px;
  gap:9px;
  padding:11px 12px;
}
html[data-app-theme="theme2"] #appShell .t49-request-head {font-size:11.5px!important;line-height:1.4}
html[data-app-theme="theme2"] #appShell .t49-request {min-height:70px;line-height:1.45!important}
html[data-app-theme="theme2"] #appShell .t49-row-service {font-size:14px!important;line-height:1.35}
html[data-app-theme="theme2"] #appShell .t49-row-service small {font-size:10px;line-height:1.35;margin-top:4px;color:#89778f}
html[data-app-theme="theme2"] #appShell .t49-row-person,
html[data-app-theme="theme2"] #appShell .t49-row-unit {font-size:12.5px!important;line-height:1.45}
html[data-app-theme="theme2"] #appShell .t49-request time {font-size:12px!important;color:#89738a}
html[data-app-theme="theme2"] #appShell .t49-row-number {font-size:12px}
html[data-app-theme="theme2"] #appShell .t49-dashboard .pill {font-size:11px!important;line-height:1.3!important;padding:5px 7px!important}
html[data-app-theme="theme2"] #appShell .t49-row-action {width:26px;height:29px}
html[data-app-theme="theme2"] #appShell .t49-pagination {font-size:12px;margin-top:16px;color:#80697c;gap:12px;flex-wrap:wrap}
html[data-app-theme="theme2"] #appShell .t49-pagination button {font-size:13px;min-width:34px;height:36px}
html[data-app-theme="theme2"] #appShell .t49-note {min-height:49px;gap:11px;padding:10px 0}
html[data-app-theme="theme2"] #appShell .t49-note input {width:20px!important;height:20px!important}
html[data-app-theme="theme2"] #appShell .t49-note span {font-size:15px;line-height:1.5;color:#59465f}
html[data-app-theme="theme2"] #appShell .t49-note-quote {
  margin-top:auto;
  padding:24px 19px;
  font-size:18px;
  line-height:1.55;
  color:#8a5395;
  box-shadow:0 6px 17px rgba(152,107,178,.05);
}
html[data-app-theme="theme2"] #appShell .t49-reminder {
  padding:12px;
  min-height:88px;
  gap:10px;
  flex-wrap:wrap;
}
html[data-app-theme="theme2"] #appShell .t49-reminder>span:nth-child(2) {flex:1 1 130px}
html[data-app-theme="theme2"] #appShell .t49-reminder b {
  font-size:15px;
  line-height:1.4;
  display:block;
  overflow:visible;
  -webkit-line-clamp:unset;
  overflow-wrap:anywhere;
}
html[data-app-theme="theme2"] #appShell .t49-reminder small {font-size:12px;line-height:1.5;color:#8c7287}
html[data-app-theme="theme2"] #appShell .t49-reminder .pill {display:inline-flex!important;max-width:none;flex:0 1 auto;margin-left:44px}
html[data-app-theme="theme2"] #appShell .t49-small-icon {width:36px;height:40px}
html[data-app-theme="theme2"] #appShell .t49-reminder-quote {font-size:18px!important;line-height:1.65!important;padding:26px 8px 8px}
html[data-app-theme="theme2"] #appShell .t49-favorites {grid-column:1/3}
html[data-app-theme="theme2"] #appShell .t49-service {min-height:100px;padding:12px 9px;border-radius:16px}
html[data-app-theme="theme2"] #appShell .t49-service b {font-size:14px;line-height:1.35}
html[data-app-theme="theme2"] #appShell .t49-service>span {width:47px;height:45px;border-radius:15px}
html[data-app-theme="theme2"] #appShell .t49-service svg {width:30px;height:30px}
.t50-footer-message {display:flex;align-items:center;justify-content:center;gap:17px;padding:22px 12px;grid-column:3;text-align:center;color:#a1617d}
.t50-footer-message p {font:italic 22px/1.55 Georgia,serif!important}
.t50-footer-message>span {font-size:30px;color:#d08b55}
html[data-app-theme="theme2"] #appShell .t49-footer {font-size:13px;color:#855d77;padding:8px 4px}
html[data-app-theme="theme2"] #appShell .t49-footer button {font-size:13px;min-height:38px;color:#815574}
/* Theme settings get a continuous illustration too, not another strip of art. */
html[data-app-theme="theme2"] .appearance49-heading {background:rgba(255,255,255,.88)}
html[data-app-theme="theme2"] .appearance49-art {display:none!important}
html[data-app-theme="theme2"] .appearance49-panel {background:rgba(255,255,255,.97)}

/* ===== Readable notices: both themes; never hide error or sync status ===== */
body:not(.auth-mode) #notificationDrawer {
  width:min(490px,calc(100vw - 32px))!important;
  top:118px!important;
  right:20px!important;
  max-height:calc(100dvh - 140px)!important;
  max-height:min(740px,calc(100dvh - 140px))!important;
  padding:14px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  background:#fffdfa!important;
  border-radius:22px!important;
  box-shadow:0 20px 65px rgba(55,36,43,.2)!important;
  z-index:190!important;
  font-family:Arial, sans-serif!important;
  text-align:left;
}
body:not(.auth-mode) #notificationDrawer[hidden] {display:none!important}
body:not(.auth-mode) #notificationDrawer .notification-head {
  position:sticky;top:-14px;z-index:1;
  background:#fffdfa;
  padding:10px 5px 15px!important;
  margin-bottom:8px;
  border-bottom:1px solid #eee1d6;
}
body:not(.auth-mode) #notificationDrawer .notification-head h3 {font:700 23px/1.25 Arial,sans-serif!important;color:#472e3d!important}
body:not(.auth-mode) #notificationDrawer .notification-head button {width:42px;height:42px;border:1px solid #ecdbdf;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:#fff;color:#845466}
body:not(.auth-mode) #notificationDrawer .notification-head svg {width:24px;height:24px}
body:not(.auth-mode) #notificationDrawer .notification-item {
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  width:100%!important;min-width:0!important;
  padding:15px 12px!important;
  margin:0 0 9px!important;
  gap:12px!important;
  border:1px solid #f0e3d7!important;
  background:#fff!important;
  border-radius:15px!important;
  text-align:left!important;
  white-space:normal!important;
  line-height:1.55!important;
  color:#4d3846!important;
}
body:not(.auth-mode) #notificationDrawer .notification-item.unread {background:#fff8e3!important;border-color:#ead694!important}
body:not(.auth-mode) #notificationDrawer .notification-item:hover {background:#fff3d4!important}
body:not(.auth-mode) #notificationDrawer .notification-item>span {min-width:0;overflow-wrap:anywhere}
body:not(.auth-mode) #notificationDrawer .ni-icon {width:42px!important;height:44px!important;border-radius:13px!important}
body:not(.auth-mode) #notificationDrawer .ni-icon svg {width:26px!important;height:26px!important}
body:not(.auth-mode) #notificationDrawer .notification-item b {font:700 17px/1.4 Arial,sans-serif!important;display:block!important;color:#46303c!important}
body:not(.auth-mode) #notificationDrawer .notification-item p {font:400 16px/1.55 Arial,sans-serif!important;margin:7px 0 0!important;color:#675664!important;display:block!important}
body:not(.auth-mode) #notificationDrawer .notification-item time {font:400 13px/1.5 Arial,sans-serif!important;display:block!important;margin-top:9px!important;color:#86717f!important}
body:not(.auth-mode) #notificationDrawer .empty-inline {font:400 16px/1.5 Arial,sans-serif!important;padding:20px!important}
body:not(.auth-mode) #toastLayer {right:22px!important;bottom:22px!important;max-width:calc(100vw - 32px);max-height:70dvh;overflow-y:auto;z-index:240!important}
body:not(.auth-mode) #toastLayer .toast {
  width:480px!important;min-width:0!important;max-width:calc(100vw - 32px)!important;
  grid-template-columns:44px minmax(0,1fr) 36px!important;
  gap:12px!important;
  padding:18px 16px!important;
  border-radius:18px!important;
  background:#fffdfa!important;
  text-align:left!important;
  box-shadow:0 13px 40px rgba(70,45,31,.17)!important;
}
body:not(.auth-mode) #toastLayer .toast-icon {width:44px!important;height:46px!important;border-radius:13px!important}
body:not(.auth-mode) #toastLayer .toast-icon svg {width:27px!important;height:27px!important}
body:not(.auth-mode) #toastLayer .toast-copy {min-width:0;overflow-wrap:anywhere}
body:not(.auth-mode) #toastLayer .toast-copy b {display:block;font:700 17px/1.4 Arial,sans-serif!important;color:#493239!important}
body:not(.auth-mode) #toastLayer .toast-copy p {font:400 16px/1.55 Arial,sans-serif!important;color:#70596a!important;margin:6px 0 0!important;max-height:35dvh;overflow-y:auto}
body:not(.auth-mode) #toastLayer .toast>button {width:36px!important;height:36px!important;background:#fff4df}
body:not(.auth-mode) #toastLayer .toast>button svg {width:23px;height:23px}
body:not(.auth-mode) #toastLayer .toast-error {border-color:#dc8e99!important;background:#fff7f7!important}
body:not(.auth-mode) .connection-recovery-banner {font-family:Arial,sans-serif!important;padding:15px 18px;gap:14px}
body:not(.auth-mode) .connection-recovery-banner b {font:700 17px/1.4 Arial,sans-serif!important}
body:not(.auth-mode) .connection-recovery-banner p {font:400 15px/1.5 Arial,sans-serif!important}
body:not(.auth-mode) .connection-recovery-banner .btn {font:700 14px/1.4 Arial,sans-serif!important;min-height:42px!important}
html[data-app-theme="theme2"] #appShell .connection-recovery-banner {background:rgba(255,253,245,.98);border-color:#eed8b8;box-shadow:0 6px 18px #975d7010;margin:0 0 16px;width:100%;border-radius:17px}
html[data-app-theme="theme2"] #notificationDrawer {border-color:#efcad9!important}
html[data-app-theme="theme2"] #notificationDrawer .notification-item.unread {background:linear-gradient(120deg,#fff0f5,#fff9eb)!important;border-color:#f0c6d8!important}

/* ===== Responsive layout, never shrink the whole application via transform/zoom ===== */
@media(max-width:1590px) {
  html[data-app-theme="theme2"] #appShell .global-search {display:none!important}
  html[data-app-theme="theme2"] #appShell .app-header-inner {gap:12px!important}
  html[data-app-theme="theme2"] #appShell .top-primary-nav {gap:4px!important}
  html[data-app-theme="theme2"] #appShell .top-primary-nav>button {font-size:13px!important;padding:7px 8px!important}
  html[data-app-theme="theme2"] #appShell .t49-stat {gap:12px;padding:17px 16px!important}
  html[data-app-theme="theme2"] #appShell .t49-stat-icon {width:60px;height:68px}
  html[data-app-theme="theme2"] #appShell .t49-stat-arrow {display:none}
  html[data-app-theme="theme2"] #appShell .t49-title-wrap h2 {font-size:24px!important}
  html[data-app-theme="theme2"] #appShell .t49-panel {padding:18px}
  html[data-app-theme="theme2"] #appShell .t49-request-head,
  html[data-app-theme="theme2"] #appShell .t49-request {grid-template-columns:18px 48px minmax(99px,1.3fr) minmax(62px,.8fr) minmax(58px,.8fr) 75px 23px;gap:7px;padding:10px}
}
@media(max-width:1279px) {
  html[data-app-theme="theme2"] body:not(.auth-mode) .app-header {width:calc(100% - 28px)!important}
  html[data-app-theme="theme2"] #appShell .app-header-inner {padding:9px 12px!important;gap:8px!important}
  html[data-app-theme="theme2"] #appShell .top-primary-nav>button {font-size:12px!important;padding:7px 6px!important}
  html[data-app-theme="theme2"] #appShell .top-nav-icon {width:26px!important;height:30px!important;padding:4px!important}
  html[data-app-theme="theme2"] #appShell .t49-grid {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html[data-app-theme="theme2"] #appShell .t49-inbox {grid-column:1/3;grid-row:1}
  html[data-app-theme="theme2"] #appShell .t49-notes {grid-column:1;grid-row:2}
  html[data-app-theme="theme2"] #appShell .t49-reminders {grid-column:2;grid-row:2}
  html[data-app-theme="theme2"] #appShell .t49-favorites {grid-column:1/3;grid-row:3}
  html[data-app-theme="theme2"] #appShell .t49-note-quote {margin-top:24px!important}
  .t50-footer-message {grid-column:1/3;padding:12px}
  html[data-app-theme="theme2"] #appShell .t49-hero-copy {width:53%!important;padding-left:30px!important}
  html[data-app-theme="theme2"] #appShell .t49-hero h1 {font-size:38px!important}
  html[data-app-theme="theme2"] #appShell .t49-hero p {font-size:15px!important}
}
@media(max-width:1030px) {
  html[data-app-theme="theme2"] #appShell .top-primary-nav>button {min-width:46px!important}
  html[data-app-theme="theme2"] #appShell .t49-stats {grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-app-theme="theme2"] #appShell .t49-stat-arrow {display:grid}
  html[data-app-theme="theme2"] #appShell .t49-hero-copy {width:57%!important}
}
@media(max-width:760px) {
  html[data-app-theme="theme2"] body:not(.auth-mode) {
    background-image:linear-gradient(rgba(255,252,248,.64),rgba(255,250,247,.64)),url('/assets/theme-v50/dashboard-wallpaper-mobile.webp')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-attachment:scroll!important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) .app-header {width:calc(100% - 20px)!important;margin-top:8px!important;border-radius:19px!important}
  html[data-app-theme="theme2"] body:not(.auth-mode) .app-header-inner {min-height:64px!important;padding:8px 10px!important;gap:8px!important}
  html[data-app-theme="theme2"] #appShell .brand-home {gap:8px!important}
  html[data-app-theme="theme2"] #appShell .brand-copy strong {font-size:14px!important}
  html[data-app-theme="theme2"] #appShell .brand-copy small {font-size:8px!important}
  html[data-app-theme="theme2"] #appShell .brand-bloom {width:34px!important;height:41px!important}
  html[data-app-theme="theme2"] #appShell .brand-bloom img {width:33px!important;height:41px!important}
  html[data-app-theme="theme2"] #appShell .top-icon {width:34px!important;height:37px!important;padding:6px!important}
  html[data-app-theme="theme2"] #appShell .header-actions {gap:4px!important}
  html[data-app-theme="theme2"] #appShell .top-primary-nav {display:none!important}
  html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] .main-content {padding:14px 12px calc(120px + env(safe-area-inset-bottom,0px))!important}
  html[data-app-theme="theme2"] #appShell .t49-hero {min-height:184px!important;margin:0!important}
  html[data-app-theme="theme2"] #appShell .t49-hero-copy {width:100%!important;padding:25px 13px!important;max-width:none!important}
  html[data-app-theme="theme2"] #appShell .t49-kicker {font-size:10px!important}
  html[data-app-theme="theme2"] #appShell .t49-hero h1 {font-size:34px!important;line-height:1.14!important;max-width:100%!important}
  html[data-app-theme="theme2"] #appShell .t49-hero p {font-size:15px!important;max-width:335px!important;text-shadow:0 1px 9px #fff}
  html[data-app-theme="theme2"] #appShell .t49-stats {gap:10px;margin-bottom:13px}
  html[data-app-theme="theme2"] #appShell .t49-stat {padding:13px 11px!important;min-height:139px;gap:10px;flex-wrap:wrap;align-content:flex-start;position:relative}
  html[data-app-theme="theme2"] #appShell .t49-stat-icon {width:40px;height:43px;border-radius:13px}
  html[data-app-theme="theme2"] #appShell .t49-stat-icon svg {width:30px;height:30px}
  html[data-app-theme="theme2"] #appShell .t49-stat>div {flex:1 1 65px}
  html[data-app-theme="theme2"] #appShell .t49-stat b {font-size:14px!important;line-height:1.35!important}
  html[data-app-theme="theme2"] #appShell .t49-stat strong {font-size:32px!important;line-height:1.2}
  html[data-app-theme="theme2"] #appShell .t49-stat small {font-size:11.5px;line-height:1.5}
  html[data-app-theme="theme2"] #appShell .t49-stat-arrow {display:none}
  html[data-app-theme="theme2"] #appShell .t49-grid {grid-template-columns:minmax(0,1fr);gap:14px}
  html[data-app-theme="theme2"] #appShell .t49-grid>* {grid-column:1!important;grid-row:auto!important}
  html[data-app-theme="theme2"] #appShell .t49-panel {padding:17px 14px;border-radius:19px}
  html[data-app-theme="theme2"] #appShell .t49-title-wrap h2 {font-size:24px!important}
  html[data-app-theme="theme2"] #appShell .t49-title-wrap p {font-size:12px!important}
  html[data-app-theme="theme2"] #appShell .t49-title-wrap {gap:8px}
  html[data-app-theme="theme2"] #appShell .t49-heading-icon {width:27px}
  html[data-app-theme="theme2"] #appShell .t49-heading-icon svg {width:27px;height:27px}
  html[data-app-theme="theme2"] #appShell .t49-text-button {font-size:12px;white-space:normal;min-width:34px}
  html[data-app-theme="theme2"] #appShell .t49-services-filter button,
  html[data-app-theme="theme2"] #appShell .t49-status-filter button {min-height:37px;font-size:12px;padding:6px 8px}
  html[data-app-theme="theme2"] #appShell .t49-request-head {display:none}
  html[data-app-theme="theme2"] #appShell .t49-request {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto auto;
    gap:7px 12px;padding:14px;min-height:126px;
  }
  html[data-app-theme="theme2"] #appShell .t49-row-service {font-size:15px!important}
  html[data-app-theme="theme2"] #appShell .t49-row-service small {font-size:10.5px}
  html[data-app-theme="theme2"] #appShell .t49-row-person {font-size:14px!important}
  html[data-app-theme="theme2"] #appShell .t49-request time {font-size:12px!important}
  html[data-app-theme="theme2"] #appShell .t49-row-action {width:34px;height:34px}
  html[data-app-theme="theme2"] #appShell .t49-pagination {font-size:12px;gap:10px}
  html[data-app-theme="theme2"] #appShell .t49-pagination button {min-width:34px;height:38px;font-size:14px}
  html[data-app-theme="theme2"] #appShell .t49-note span {font-size:16px}
  html[data-app-theme="theme2"] #appShell .t49-reminder b {font-size:16px}
  html[data-app-theme="theme2"] #appShell .t49-reminder small {font-size:13px}
  html[data-app-theme="theme2"] #appShell .t49-reminder .pill {margin-left:0}
  html[data-app-theme="theme2"] #appShell .t49-favorites-list {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html[data-app-theme="theme2"] #appShell .t49-service {min-height:106px}
  html[data-app-theme="theme2"] #appShell .t49-service b {font-size:14px}
  .t50-footer-message p {font-size:20px!important}
  html[data-app-theme="theme2"] #appShell .t49-footer {gap:9px;font-size:12px;text-align:center}
  body:not(.auth-mode) #notificationDrawer {top:110px!important;right:10px!important;width:calc(100vw - 20px)!important;max-height:calc(100dvh - 130px)!important;padding:12px!important;border-radius:19px!important}
  body:not(.auth-mode) #notificationDrawer .notification-head {top:-12px}
  body:not(.auth-mode) #notificationDrawer .notification-item {padding:14px 10px!important;gap:10px!important;grid-template-columns:38px minmax(0,1fr)!important}
  body:not(.auth-mode) #notificationDrawer .ni-icon {width:38px!important;height:40px!important}
  body:not(.auth-mode) #notificationDrawer .notification-item b {font-size:17px!important}
  body:not(.auth-mode) #notificationDrawer .notification-item p {font-size:16px!important}
  body:not(.auth-mode) #toastLayer {left:10px!important;right:10px!important;bottom:calc(116px + env(safe-area-inset-bottom,0px))!important;max-width:none!important;max-height:55dvh}
  body:not(.auth-mode) #toastLayer .toast {width:100%!important;max-width:none!important;grid-template-columns:38px minmax(0,1fr) 30px!important;gap:10px!important;padding:15px 12px!important}
  body:not(.auth-mode) #toastLayer .toast-icon {width:38px!important;height:40px!important}
  body:not(.auth-mode) #toastLayer .toast>button {width:30px!important;height:32px!important}
  body:not(.auth-mode) .connection-recovery-banner {padding:13px;grid-template-columns:36px minmax(0,1fr);gap:10px}
  body:not(.auth-mode) .connection-recovery-banner b {font-size:16px!important}
  body:not(.auth-mode) .connection-recovery-banner p {font-size:14px!important}
  body:not(.auth-mode) .connection-recovery-banner .btn {grid-column:1/-1;width:100%;min-width:0}
  body:not(.auth-mode) .connection-recovery-icon {width:36px;height:40px}
}
@media(max-width:370px) {
  html[data-app-theme="theme2"] #appShell .brand-copy strong {font-size:12px!important}
  html[data-app-theme="theme2"] #appShell .brand-copy small {font-size:7px!important}
  html[data-app-theme="theme2"] #appShell .t49-hero h1 {font-size:31px!important}
  html[data-app-theme="theme2"] #appShell .t49-stat-icon {width:34px;height:37px}
  html[data-app-theme="theme2"] #appShell .t49-stat {gap:7px;padding:12px 10px!important}
  html[data-app-theme="theme2"] #appShell .t49-stat b {font-size:13px!important}
}
@media(prefers-reduced-motion:reduce) {
  html[data-app-theme="theme2"] #appShell .t49-stat:hover {transform:none!important}
}

body:not(.auth-mode) #pwaMessage {font:500 16px/1.55 Arial,sans-serif!important;padding:16px 20px!important;max-width:calc(100vw - 32px)!important;}

body:not(.auth-mode) #modalError, body:not(.auth-mode) .inline-alert {font:500 15px/1.55 Arial,sans-serif!important;overflow-wrap:anywhere;}


/* ===== v51 dense workspace refinements ===== */
html[data-app-theme="theme2"] body:not(.auth-mode) {
  min-height:100%;
}
html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] .main-content {
  min-height:calc(100dvh - 126px) !important;
  padding-bottom:42px !important;
}
html[data-app-theme="theme2"] #appShell .top-primary-nav {gap:6px!important;flex-wrap:wrap}
html[data-app-theme="theme2"] #appShell .top-primary-nav>button,
html[data-app-theme="theme2"] #appShell .nav-service-toggle {
  font-size:13px!important;
  min-height:46px!important;
  padding:8px 10px!important;
}
html[data-app-theme="theme2"] #appShell .t49-favorites-list {grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
html[data-app-theme="theme2"] #appShell .t49-service {min-height:92px;padding:12px 10px}
html[data-app-theme="theme2"] #appShell .t49-service b {font-size:14px;line-height:1.32}
html[data-app-theme="theme2"] #appShell .t49-request-list {max-height:none}
html[data-app-theme="theme2"] .page-header.cute-page-header h1 {font-size:52px!important;line-height:1.08!important;letter-spacing:-.03em}
html[data-app-theme="theme2"] .page-header.cute-page-header p {font-size:16px!important;line-height:1.55!important}
html[data-app-theme="theme2"] .page-header .eyebrow {font-size:12px!important;letter-spacing:.18em}
html[data-app-theme="theme2"] .ticket-list-card--dense,
html[data-app-theme="theme2"] .card.ticket-list-card,
html[data-app-theme="theme2"] .card.content-card,
html[data-app-theme="theme2"] .approval-ticket,
html[data-app-theme="theme2"] .kanban-col {
  border-radius:22px!important;
}
html[data-app-theme="theme2"] .ticket-toolbar-dense {gap:10px!important;align-items:center!important}
html[data-app-theme="theme2"] .ticket-toolbar-dense .field-shell {min-height:52px!important}
html[data-app-theme="theme2"] .ticket-toolbar-dense input,
html[data-app-theme="theme2"] .ticket-toolbar-dense select {font-size:15px!important}
html[data-app-theme="theme2"] .data-table--dense thead th,
html[data-app-theme="theme2"] .data-table thead th {
  font-size:12.5px!important;
  padding:13px 14px!important;
}
html[data-app-theme="theme2"] .data-table--dense tbody td,
html[data-app-theme="theme2"] .data-table tbody td {
  font-size:14px!important;
  padding:13px 14px!important;
  line-height:1.42!important;
}
html[data-app-theme="theme2"] .data-table--dense tbody td>b,
html[data-app-theme="theme2"] .data-table tbody td>b {font-size:16px!important;line-height:1.32!important}
html[data-app-theme="theme2"] .data-table--dense tbody td>span,
html[data-app-theme="theme2"] .data-table tbody td>span,
html[data-app-theme="theme2"] .data-table--dense tbody td small,
html[data-app-theme="theme2"] .data-table tbody td small {font-size:13px!important;line-height:1.42!important}
html[data-app-theme="theme2"] .data-table--dense .assignee .avatar,
html[data-app-theme="theme2"] .data-table .assignee .avatar {width:38px!important;height:38px!important;font-size:13px!important}
html[data-app-theme="theme2"] .data-table--dense .progress-line,
html[data-app-theme="theme2"] .data-table .progress-line {height:10px!important;min-width:120px!important}
html[data-app-theme="theme2"] .pill {font-size:12px!important;padding:6px 10px!important}
html[data-app-theme="theme2"] .ticket-pagination-shell {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 2px 2px}
html[data-app-theme="theme2"] .ticket-pagination-meta {font-size:14px!important;color:#7f687d}
html[data-app-theme="theme2"] .cute-pagination button {min-width:38px!important;height:38px!important;font-size:14px!important}
html[data-app-theme="theme2"] .approval-ticket-list {display:grid;gap:14px}
html[data-app-theme="theme2"] .approval-ticket {padding:18px 20px!important;grid-template-columns:minmax(0,1.5fr) auto auto!important;gap:18px!important;align-items:center!important}
html[data-app-theme="theme2"] .approval-ticket .ticket-id {font-size:13px!important}
html[data-app-theme="theme2"] .approval-ticket h3 {font-size:20px!important;line-height:1.28!important;margin:6px 0!important}
html[data-app-theme="theme2"] .approval-ticket p,
html[data-app-theme="theme2"] .approval-ticket-meta span {font-size:14px!important;line-height:1.45!important}
html[data-app-theme="theme2"] .approval-ticket-actions .btn {min-height:44px!important;font-size:14px!important;padding:10px 16px!important}
html[data-app-theme="theme2"] .kanban-wrap {gap:14px!important;grid-template-columns:repeat(5,minmax(210px,1fr))!important;align-items:start!important}
html[data-app-theme="theme2"] .kanban-col {padding:16px!important;background:rgba(255,255,255,.95)!important;border:1px solid rgba(238,217,223,.92)!important;box-shadow:0 8px 28px rgba(132,79,105,.06)!important}
html[data-app-theme="theme2"] .kanban-head {margin-bottom:14px!important}
html[data-app-theme="theme2"] .kanban-head h3 {font-size:18px!important;line-height:1.25!important}
html[data-app-theme="theme2"] .kanban-head b {font-size:16px!important}
html[data-app-theme="theme2"] .kanban-card {padding:14px!important;border-radius:18px!important}
html[data-app-theme="theme2"] .kanban-card .kicker {font-size:12px!important;line-height:1.35!important}
html[data-app-theme="theme2"] .kanban-card h4 {font-size:18px!important;line-height:1.35!important;margin:8px 0 10px!important}
html[data-app-theme="theme2"] .kanban-card .meta span {font-size:13px!important;line-height:1.42!important}
html[data-app-theme="theme2"] .kanban-card .avatar {width:40px!important;height:40px!important;font-size:13px!important}
html[data-app-theme="theme2"] .visit-letter-note {margin-bottom:14px}
@media(max-width:1400px){
  html[data-app-theme="theme2"] .kanban-wrap {grid-template-columns:repeat(3,minmax(220px,1fr))!important}
  html[data-app-theme="theme2"] #appShell .t49-favorites-list {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:980px){
  html[data-app-theme="theme2"] .approval-ticket {grid-template-columns:1fr!important}
  html[data-app-theme="theme2"] .kanban-wrap {grid-template-columns:repeat(2,minmax(220px,1fr))!important}
}
@media(max-width:760px){
  html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] .main-content {padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))!important}
  html[data-app-theme="theme2"] .page-header.cute-page-header h1 {font-size:40px!important}
  html[data-app-theme="theme2"] .page-header.cute-page-header p {font-size:15px!important}
  html[data-app-theme="theme2"] #appShell .t49-favorites-list {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html[data-app-theme="theme2"] .ticket-toolbar-dense {grid-template-columns:1fr!important}
  html[data-app-theme="theme2"] .ticket-pagination-shell {align-items:flex-start}
  html[data-app-theme="theme2"] .kanban-wrap {grid-template-columns:1fr!important}
  html[data-app-theme="theme2"] .data-table--dense thead {display:none}
  html[data-app-theme="theme2"] .data-table--dense, html[data-app-theme="theme2"] .data-table--dense tbody, html[data-app-theme="theme2"] .data-table--dense tr, html[data-app-theme="theme2"] .data-table--dense td {display:block;width:100%}
  html[data-app-theme="theme2"] .data-table--dense tbody tr {padding:10px 0;border-bottom:1px solid #efe3e6}
  html[data-app-theme="theme2"] .data-table--dense tbody td {padding:8px 10px!important}
}


/* /nav-favorites-v52.css */
/* v52: a single-row header and exactly four favorite shortcuts.
   Scope: workspace only. No login, print, data, or workflow changes. */
body:not(.auth-mode) #appShell .app-header-inner {
  flex-wrap: nowrap !important;
}
html[data-app-theme] body:not(.auth-mode) #appShell .top-primary-nav {
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  /* On narrower desktop/tablet widths, keep the header and its actions intact. */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  scroll-padding-inline: 6px;
  padding-block: 4px !important;
}
body:not(.auth-mode) #appShell .top-primary-nav::-webkit-scrollbar { display: none; }
body:not(.auth-mode) #appShell .top-primary-nav > button {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
body:not(.auth-mode) #appShell .header-actions { flex-shrink: 0 !important; }

/* Desktop: four equal columns. Mobile: two by two, never a 3+1 orphan. */
html[data-app-theme] body:not(.auth-mode) #appShell .v12-service-list,
html[data-app-theme] body:not(.auth-mode) #appShell .t49-favorites-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
body:not(.auth-mode) #appShell .v12-service-card,
body:not(.auth-mode) #appShell .t49-service { min-width: 0 !important; }
body:not(.auth-mode) #appShell .v12-service-card b,
body:not(.auth-mode) #appShell .t49-service b {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: normal !important;
  line-height: 1.35 !important;
}
@media (max-width: 900px) {
  /* Retain the existing mobile dock and Layanan dialog instead of wrapping the desktop bar. */
  html[data-app-theme] body:not(.auth-mode) #appShell .top-primary-nav { display: none !important; }
  html[data-app-theme] body:not(.auth-mode) #appShell .v12-service-list,
  html[data-app-theme] body:not(.auth-mode) #appShell .t49-favorites-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* Fit the complete Theme 2 navigation on common 1280–1400 px screens
   without making its text smaller. */
@media (min-width: 901px) and (max-width: 1400px) {
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .top-primary-nav { gap: 4px !important; }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .top-primary-nav > button { padding-inline: 8px !important; }
}
/* Theme 1 has a narrower favorites panel beside its inbox. Keep four cards,
   but use a balanced 2-by-2 grid rather than squeezing four narrow columns. */
@media (min-width: 901px) and (max-width: 1180px) {
  html[data-app-theme="theme1"] body:not(.auth-mode) #appShell .v12-service-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* /theme2-stickers-v58.css */
/* v58 — original approved butter-yellow lace plus separate transparent stickers.
 * Authentication, Theme 1 and printed documents are not restyled. */
#workspaceWallpaper53 {display:none;}
html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] {
  height:auto!important; min-height:100vh!important;
  background:#fff4c6!important; transform:none!important; filter:none!important;
  perspective:none!important; contain:none!important;
}
html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] > #workspaceWallpaper53 {
  display:block!important; position:fixed!important; inset:0!important;
  width:auto!important; height:auto!important; margin:0!important; padding:0!important;
  border:0!important; z-index:0!important; overflow:hidden!important;
  pointer-events:none!important; user-select:none;
  /* The full abstract/lace frame remains visible, no height-dependent cover zoom. */
  background:#fff4c6 url('/assets/theme-v58/butter-lace.webp') center / 100% 100% no-repeat!important;
  opacity:1!important; filter:none!important; transform:none!important;
}
html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] > #workspaceWallpaper53::before,
html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] > #workspaceWallpaper53::after {
  content:none!important; display:none!important; background:none!important;
}
html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] > #appShell {
  position:relative!important;z-index:1!important;background:transparent!important;
}
html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] #appShell > .workspace,
html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] #appShell #appView {background:transparent!important;}

/* The hero is a real component, not part of the viewport wallpaper. */
.sticker58-carousel {display:none;}
html[data-app-theme="theme2"] #appShell .t49-hero {
  overflow:visible!important;gap:8px!important;
}
html[data-app-theme="theme2"] #appShell .sticker58-carousel {
  display:block; position:relative; flex:1 1 50%; width:50%; min-width:0;
  max-width:1040px; align-self:center; padding:4px 10px 28px 0;
  box-sizing:border-box; background:none; border:0; isolation:isolate;
}
html[data-app-theme="theme2"] #appShell .sticker58-stage {
  position:relative;width:100%;aspect-ratio:3.12/1;overflow:visible;
}
html[data-app-theme="theme2"] #appShell .sticker58-slide {
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 650ms ease;
  z-index:0;transform:none;
}
html[data-app-theme="theme2"] #appShell .sticker58-slide.is-active {opacity:1;z-index:1;}
html[data-app-theme="theme2"] #appShell .sticker58-slide img {
  display:block;width:100%;height:100%;max-width:100%;object-fit:contain;
  object-position:center;user-select:none;pointer-events:none;opacity:1;
  border:0;background:transparent;border-radius:0;image-rendering:auto;
  /* Shadow only around the cutout, never blur the image/lettering itself. */
  filter:drop-shadow(0 2px 2px rgba(91,76,36,.10));
}
html[data-app-theme="theme2"] #appShell .sticker58-controls {
  display:flex;align-items:center;justify-content:center;gap:4px;
  position:absolute;bottom:0;left:0;right:10px;
}
html[data-app-theme="theme2"] #appShell .sticker58-controls button {
  display:grid;place-items:center;width:28px;height:28px;min-width:28px;
  padding:0;margin:0;border:1px solid transparent;border-radius:50%;
  background:transparent;color:#546637;box-shadow:none;cursor:pointer;
  appearance:none;touch-action:manipulation;
}
html[data-app-theme="theme2"] #appShell .sticker58-dot span {
  display:block;width:7px;height:7px;border-radius:100px;
  background:rgba(85,109,49,.28);transition:background-color 180ms ease;
}
html[data-app-theme="theme2"] #appShell .sticker58-dot[aria-pressed="true"] span {
  width:16px;background:#6a814a;
}
html[data-app-theme="theme2"] #appShell .sticker58-controls button:hover {
  background:rgba(255,255,255,.64);border-color:rgba(91,111,50,.22);
}
html[data-app-theme="theme2"] #appShell .sticker58-controls button:focus-visible {
  outline:2px solid #677d3b;outline-offset:2px;
}
html[data-app-theme="theme2"] #appShell .sticker58-controls svg {
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
html[data-app-theme="theme2"] #appShell .sticker58-play-icon {display:none;}
html[data-app-theme="theme2"] #appShell [data-sticker58-paused="true"] .sticker58-play-icon {display:block;}
html[data-app-theme="theme2"] #appShell [data-sticker58-paused="true"] .sticker58-pause-icon {display:none;}

/* Replace the three old quote text blocks, not the useful content above them. */
html[data-app-theme="theme2"] #appShell .quote58 {
  position:relative;display:flex;align-items:center;justify-content:center;
  min-width:0;width:100%;max-width:100%;margin:0;padding:10px 0 0;
  border:0;border-radius:0;background:none;box-shadow:none;transform:none;
}
html[data-app-theme="theme2"] #appShell .quote58 img {
  display:block;width:100%;height:auto;max-width:100%;object-fit:contain;
  border:0;background:transparent;border-radius:0;opacity:1;
  filter:drop-shadow(0 2px 2px rgba(95,96,48,.07));
}
html[data-app-theme="theme2"] #appShell .quote58-notes,
html[data-app-theme="theme2"] #appShell .quote58-reminders {margin-top:auto;padding-top:18px;}
html[data-app-theme="theme2"] #appShell .quote58-footer {
  grid-column:3;align-self:center;padding:12px 0;
}
@media(max-width:1279px){
  html[data-app-theme="theme2"] #appShell .quote58-footer {grid-column:1/-1;max-width:600px;justify-self:center;}
}
@media(max-width:900px){
  html[data-app-theme="theme2"] #appShell .t49-hero {flex-direction:column!important;align-items:stretch!important;gap:0!important;}
  html[data-app-theme="theme2"] #appShell .t49-hero-copy {width:100%!important;max-width:none;padding-bottom:10px!important;}
  html[data-app-theme="theme2"] #appShell .sticker58-carousel {
    width:100%;flex:none;max-width:740px;align-self:center;padding:0 8px 32px;
  }
  html[data-app-theme="theme2"] #appShell .sticker58-controls {right:0;gap:6px;}
  html[data-app-theme="theme2"] #appShell .sticker58-controls button {width:32px;height:32px;min-width:32px;}
}
@media(max-width:760px){
  html[data-app-theme="theme2"] #appShell .quote58-footer {grid-column:1!important;max-width:500px;}
  html[data-app-theme="theme2"] #appShell .quote58-notes,
  html[data-app-theme="theme2"] #appShell .quote58-reminders {margin-top:14px;}
}
@media(prefers-reduced-motion:reduce){
  html[data-app-theme="theme2"] #appShell .sticker58-slide,
  html[data-app-theme="theme2"] #appShell .sticker58-dot span {transition:none!important;}
}
body.auth-mode > #workspaceWallpaper53,
html:not([data-app-theme="theme2"]) #workspaceWallpaper53 {display:none!important;}
@media print {
  #workspaceWallpaper53,.sticker58-carousel,.quote58 {display:none!important;}
  html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] > #workspaceWallpaper53 {display:none!important;}
}


/* /theme2-glass-v54.css */
/* v54 — Frosted Glass / smartphone-style UI, exclusive to Tema 2.
 * The v53 viewport wallpaper remains unmodified. Only panel backgrounds are
 * translucent: do not apply opacity/filter to an ancestor of readable content.
 * Outer surfaces receive blur; nested rows do not, to limit GPU layers.
 * Login, Tema 1 and the independent printed-document pages are not restyled.
 */
html[data-app-theme="theme2"] body:not(.auth-mode) {
  --ui54-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ui54-ink: #30344b;
  --ui54-muted: #64677e;
  --ui54-blue: #347dc1;
  --ui54-line: rgba(130, 132, 163, .18);
  --ui54-blur: blur(20px) saturate(116%);
  --ui54-glass: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.34));
  --ui54-glass-solid: rgba(252,252,255,.94);
  --ui54-border: rgba(255,255,255,.86);
  --ui54-shadow: 0 10px 30px rgba(71,59,99,.07), inset 0 1px 0 rgba(255,255,255,.85);
  --font-body: var(--ui54-font);
  color: var(--ui54-ink) !important;
  font-family: var(--ui54-font) !important;
}

/* Main, un-nested surfaces: genuine frosted glass rather than a screenshot. */
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .t49-panel, .t49-stat, .card, .request-paper, .standalone-paper,
  .standalone-history, .kanban-col, .appearance49-panel,
  .appearance49-heading, .page-header, .service-spotlight, .idcard-spotlight
) {
  background: var(--ui54-glass) !important;
  border: 1px solid var(--ui54-border) !important;
  box-shadow: var(--ui54-shadow) !important;
  -webkit-backdrop-filter: var(--ui54-blur) !important;
  backdrop-filter: var(--ui54-blur) !important;
  color: var(--ui54-ink) !important;
  opacity: 1 !important;
  filter: none !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .t49-panel, .card, .request-paper, .standalone-paper, .kanban-col,
  .service-spotlight, .idcard-spotlight
)::before,
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .t49-panel, .card, .request-paper, .standalone-paper, .kanban-col,
  .service-spotlight, .idcard-spotlight
)::after {
  pointer-events: none !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .card .card {
  background: rgba(255,255,255,.24) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-stat {
  border-radius: 24px !important;
  background: linear-gradient(128deg,rgba(255,255,255,.72),rgba(255,240,231,.38)) !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-color-1 {
  background: linear-gradient(128deg,rgba(255,255,255,.70),rgba(231,242,255,.40)) !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-color-2 {
  background: linear-gradient(128deg,rgba(255,255,255,.70),rgba(236,229,255,.39)) !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-color-3 {
  background: linear-gradient(128deg,rgba(255,255,255,.70),rgba(221,250,239,.38)) !important;
}

/* Restrained, legible smartphone typography. Existing panel positions are kept. */
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  button, input, select, textarea, .btn, .t49-request, .t49-request-head,
  .t49-note span, .t49-stat strong, .t49-stat b, .t49-service b,
  .menu-tile-icon, .pill, .page-header h1, .card-title h3
) {
  font-family: var(--ui54-font) !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-dashboard :is(h2,h3,h4),
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .app-menu-head h2 {
  font-family: var(--ui54-font) !important;
  color: var(--ui54-ink) !important;
  font-weight: 650 !important;
  letter-spacing: -.45px !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-stat b {
  font-weight: 600 !important;
  color: #42425b !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-stat strong {
  font-weight: 700 !important;
  color: var(--ui54-ink) !important;
  font-variant-numeric: tabular-nums;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .t49-title-wrap p, .t49-stat small, .t49-request time, .t49-row-service small,
  .t49-reminder small, .t49-row-number, .t49-row-unit, .t49-row-person,
  .t49-note span, .page-header p, .app-menu-grid small
) { color: var(--ui54-muted) !important; }
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .t49-row-service, .t49-reminder b, .t49-service b, .app-menu-grid b
) { color: #363a53 !important; font-weight: 600 !important; }

/* Clear the old opaque table/row fills, otherwise the outer glass is hidden. */
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .t49-request-list, .t49-request, .ticket-table-wrap, .data-table,
  .data-table tbody, .data-table tbody tr, .data-table tbody td,
  .paper-info-grid, .t49-note-list, .t49-note, .card-title.content-card
) {
  background: transparent !important;
  border-color: var(--ui54-line) !important;
  box-shadow: none !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .t49-request-head, .data-table thead, .data-table thead th, .table-toolbar,
  .idcard-queue-head, .master-tabs
) {
  background: rgba(252,246,250,.40) !important;
  color: #616179 !important;
  border-color: var(--ui54-line) !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-request {
  border-top: 1px solid rgba(142,139,169,.14) !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .t49-request:nth-of-type(2n), .data-table tbody tr:nth-child(2n)
) { background: rgba(255,255,255,.10) !important; }
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .t49-request:hover, .t49-request:focus-visible, .data-table tbody tr:hover
) { background: rgba(255,255,255,.50) !important; }
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-row-action {
  background: rgba(255,255,255,.50) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 9px !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .t49-reminder, .t49-service, .kanban-card, .info-item, .source-report-item,
  .approval-step, .attachment, .route-row, .cal-day, .mobile-ticket-card,
  .idcard-mobile-card, .app-menu-grid .nav-item, .appearance49-option
) {
  background: rgba(255,255,255,.34) !important;
  border-color: rgba(255,255,255,.76) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .mock-request-card, .request-service-tab
) {
  background: rgba(255,255,255,.64) !important;
  border-color: rgba(255,255,255,.85) !important;
  box-shadow: 0 4px 16px rgba(91,88,132,.04) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .mock-request-card.active, .request-service-tab.active
) {
  background: linear-gradient(130deg,rgba(243,248,255,.81),rgba(227,231,255,.62)) !important;
  border-color: rgba(132,165,225,.73) !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .t49-reminder:hover, .t49-service:hover, .kanban-card:hover, .app-menu-grid .nav-item:hover
) { background: rgba(255,255,255,.63) !important; border-color: rgba(166,184,230,.6) !important; }
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-note-quote {
  background: linear-gradient(125deg,rgba(255,255,255,.12),rgba(229,215,254,.28)) !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  border-radius: 15px !important;
  transform: none !important;
  box-shadow: none !important;
  color: #796d96 !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-note input {accent-color:#5a8bc6}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-note:has(input:checked) span {color:#75758b!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-reminder-quote {color:#796d8b!important}

/* Header and installed-app dock; retain the single line, menu and safe areas. */
html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] #appShell :is(.app-header, .mobile-dock) {
  background: linear-gradient(125deg,rgba(255,255,255,.83),rgba(251,250,255,.57)) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  box-shadow: 0 8px 26px rgba(69,66,96,.06), inset 0 1px 0 white !important;
  -webkit-backdrop-filter: blur(22px) saturate(118%) !important;
  backdrop-filter: blur(22px) saturate(118%) !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .app-header .nav-item,
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .nav-service-toggle {
  color: #444359 !important;
  font-weight: 650 !important;
  text-shadow: none !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(.app-header .nav-item.active, .mobile-dock .nav-item.active) {
  background: linear-gradient(130deg,rgba(255,242,205,.81),rgba(255,248,230,.52)) !important;
  border-color: rgba(246,211,145,.75) !important;
  box-shadow: 0 3px 12px rgba(190,153,97,.06) !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(.global-search, .field-shell, .inbox-search, .input) {
  background: rgba(255,255,255,.52) !important;
  border-color: rgba(165,168,189,.30) !important;
  color: #36394d !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell input::placeholder,
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell textarea::placeholder {color:#777b90!important}

/* Buttons & filters stay real controls, with explicit hover/focus/active states. */
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .t49-services-filter button, .t49-status-filter button, .cute-status-tabs button,
  .btn:where(:not(.primary):not(.danger)), .top-icon, .t49-stat-arrow,
  .t49-pagination button, .cute-pagination button, .more-btn
) {
  background: rgba(255,255,255,.40) !important;
  border-color: rgba(255,255,255,.84) !important;
  color: #545a73 !important;
  box-shadow: 0 2px 9px rgba(104,96,128,.035) !important;
  font-weight: 600 !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .t49-services-filter button.active, .t49-status-filter button.active,
  .t49-pagination button.active, .cute-pagination button.active
) {
  background: rgba(232,239,255,.72) !important;
  border-color: rgba(135,164,224,.68) !important;
  color: #315e9c !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .t49-services-filter b, .t49-status-filter b
) {background:rgba(255,255,255,.46)!important;color:#65627e!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-text-button {color:#3575b7!important;font-weight:600!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(button,a,input,select,textarea):focus-visible,
html[data-app-theme="theme2"] body:not(.auth-mode) :is(#modalLayer,#notificationDrawer) :is(button,a,input,select,textarea):focus-visible {
  outline: 2px solid #4488d2 !important;
  outline-offset: 3px !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell button:disabled {opacity:.5!important;cursor:not-allowed!important}
/* Warning/destructive actions retain their original semantics. */
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(.btn.danger,.btn.delete-ticket-button,.danger-icon) {background:rgba(255,231,233,.85)!important;color:#b53952!important;border-color:#e7a2ae!important}

/* All 41 UI symbols have been replaced in the t2-* sprite. No external icon font. */
html[data-app-theme="theme2"] body:not(.auth-mode) :is(#appShell, #notificationDrawer, #modalLayer, #toastLayer) svg[data-ui-icon] {
  color: #67758f;
  fill: none !important;
  filter: none !important;
  opacity: 1;
  flex-shrink: 0;
  shape-rendering: geometricPrecision;
}
html[data-app-theme="theme2"] body:not(.auth-mode) :is(#appShell, #notificationDrawer, #modalLayer, #toastLayer) svg[data-ui-icon="inbox"] {color:#d4664a!important}
html[data-app-theme="theme2"] body:not(.auth-mode) :is(#appShell, #notificationDrawer, #modalLayer, #toastLayer) svg:is([data-ui-icon="briefcase"],[data-ui-icon="shield"],[data-ui-icon="chart"],[data-ui-icon="upload"],[data-ui-icon="arrow"],[data-ui-icon="back"]) {color:#347dc1!important}
html[data-app-theme="theme2"] body:not(.auth-mode) :is(#appShell, #notificationDrawer, #modalLayer, #toastLayer) svg:is([data-ui-icon="file"],[data-ui-icon="note"],[data-ui-icon="kanban"],[data-ui-icon="image"]) {color:#7954c8!important}
html[data-app-theme="theme2"] body:not(.auth-mode) :is(#appShell, #notificationDrawer, #modalLayer, #toastLayer) svg:is([data-ui-icon="check"],[data-ui-icon="card"],[data-ui-icon="settings"],[data-ui-icon="download"]) {color:#218f7a!important}
html[data-app-theme="theme2"] body:not(.auth-mode) :is(#appShell, #notificationDrawer, #modalLayer, #toastLayer) svg:is([data-ui-icon="home"],[data-ui-icon="grid"],[data-ui-icon="calendar"],[data-ui-icon="bell"],[data-ui-icon="star"],[data-ui-icon="box"],[data-ui-icon="palette"]) {color:#b87b29!important}
html[data-app-theme="theme2"] body:not(.auth-mode) :is(#appShell, #notificationDrawer, #modalLayer, #toastLayer) svg:is([data-ui-icon="trash"],[data-ui-icon="heart"]) {color:#b55c79!important}
/* Replace the old candy/mascot icon containers with subdued smartphone tiles. */
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .top-nav-icon, .menu-tile-icon, .t49-service>span, .t49-small-icon,
  .service-icon, .activity-icon, .metric-icon, .process-stage-icon
) {
  background: linear-gradient(145deg,rgba(255,255,255,.67),rgba(238,240,250,.42)) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
  border-radius: 14px !important;
  filter: none !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .top-nav-icon, .menu-tile-icon, .t49-service>span, .t49-small-icon,
  .t49-stat-icon, .service-icon
)::before,
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(
  .top-nav-icon, .menu-tile-icon, .t49-service>span, .t49-small-icon,
  .t49-stat-icon, .service-icon
)::after {display:none!important;content:none!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-stat-icon {
  background: linear-gradient(145deg,rgba(255,220,213,.76),rgba(255,235,232,.59)) !important;
  border: 1px solid rgba(255,255,255,.83) !important;
  border-radius: 21px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-color-1 .t49-stat-icon {background:linear-gradient(145deg,rgba(222,238,255,.8),rgba(226,239,255,.55))!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-color-2 .t49-stat-icon {background:linear-gradient(145deg,rgba(238,226,255,.8),rgba(236,230,252,.55))!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-color-3 .t49-stat-icon {background:linear-gradient(145deg,rgba(216,247,237,.8),rgba(226,247,241,.55))!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-stat-icon svg {width:39px;height:39px;filter:none!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .menu-tile-icon svg {width:30px!important;height:30px!important;filter:none!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-service svg {width:27px!important;height:27px!important;filter:none!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(.t49-heading-icon svg,.top-nav-icon svg) {filter:none!important}

/* Service launcher, notifications and forms are glass too, slightly more opaque
   so a busy dashboard behind a dialog cannot obscure its text. */
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .app-menu.v12-mega-menu,
html[data-app-theme="theme2"] body:not(.auth-mode) #notificationDrawer,
html[data-app-theme="theme2"] body:not(.auth-mode) #modalLayer .modal {
  background: linear-gradient(130deg,rgba(255,255,255,.86),rgba(247,245,255,.72)) !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 24px 70px rgba(53,49,78,.14), inset 0 1px 0 white !important;
  -webkit-backdrop-filter: blur(24px) saturate(112%) !important;
  backdrop-filter: blur(24px) saturate(112%) !important;
  font-family: var(--ui54-font) !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(.v12-menu-footer,.menu-theme-entry49,.user-mini),
html[data-app-theme="theme2"] body:not(.auth-mode) #modalLayer :is(.modal-head,.modal-foot) {
  background: rgba(255,255,255,.25) !important;
  border-color: var(--ui54-line) !important;
}
html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .sidebar-scrim,
html[data-app-theme="theme2"] body:not(.auth-mode) #modalLayer:not(:empty) {background:rgba(37,38,62,.22)!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #modalLayer :is(input,select,textarea) {background:rgba(255,255,255,.70)!important;border-color:rgba(125,141,177,.3)!important;font-family:var(--ui54-font)!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #notificationDrawer .notification-head {background:rgba(253,251,255,.88)!important;border-color:var(--ui54-line)!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #notificationDrawer .notification-item {background:rgba(255,255,255,.38)!important;border-color:rgba(255,255,255,.76)!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #notificationDrawer .notification-item.unread {background:rgba(234,240,255,.66)!important;border-color:rgba(198,214,244,.83)!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #notificationDrawer .ni-icon {background:rgba(255,255,255,.6)!important;box-shadow:none!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #toastLayer .toast {background:rgba(254,253,255,.92)!important;border-color:rgba(255,255,255,.86)!important;-webkit-backdrop-filter:blur(14px)!important;backdrop-filter:blur(14px)!important}
html[data-app-theme="theme2"] body:not(.auth-mode) #toastLayer .toast-error {background:rgba(255,242,245,.97)!important;border-color:#dca6b5!important}

@media (max-width:900px) {
  html[data-app-theme="theme2"] body:not(.auth-mode) {
    --ui54-glass: linear-gradient(125deg,rgba(255,255,255,.70),rgba(255,255,255,.40));
    --ui54-blur: blur(14px) saturate(112%);
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-stat-icon {border-radius:14px!important}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-stat-icon svg {width:28px;height:28px}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-note span {font-size:16px!important}
}

/* Honest fallback: maintain legible surfaces on unsupported browsers or when
   the user asks their OS for less transparency. Never make text translucent. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] #appShell :is(.t49-panel,.t49-stat,.card,.request-paper,.standalone-paper,.standalone-history,.kanban-col,.appearance49-panel,.appearance49-heading,.page-header,.service-spotlight,.idcard-spotlight,.app-header,.mobile-dock,.app-menu),
  html[data-app-theme="theme2"] body:not(.auth-mode) :is(#notificationDrawer,#modalLayer .modal) {
    background: rgba(253,251,255,.95) !important;
  }
}
@media (prefers-reduced-transparency:reduce) {
  html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] #appShell :is(.t49-panel,.t49-stat,.card,.request-paper,.standalone-paper,.standalone-history,.kanban-col,.appearance49-panel,.appearance49-heading,.page-header,.service-spotlight,.idcard-spotlight,.app-header,.mobile-dock,.app-menu),
  html[data-app-theme="theme2"] body:not(.auth-mode) :is(#notificationDrawer,#modalLayer .modal) {
    background: rgba(253,251,255,.97) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@media (forced-colors:active) {
  html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] #appShell :is(.t49-panel,.t49-stat,.card,.request-paper,.kanban-col,.app-header,.mobile-dock,.app-menu) {
    background: Canvas !important;
    color: CanvasText !important;
    border-color: CanvasText !important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    box-shadow:none!important;
  }
}
@media print {
  html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] #appShell :is(.t49-panel,.t49-stat,.card,.request-paper,.standalone-paper,.kanban-col,.page-header,.appearance49-panel) {
    background:#fff!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    box-shadow:none!important;
  }
}

html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-row-action svg {width:18px!important;height:18px!important;color:#64738c!important}


/* /typography-v55.css */
/* v55: preferred text sizes only. typography-v55.js fits them to the existing
   columns and line counts before applying them. No layout/colour/icon changes.
   Login and the standalone ID-card/letter print pages never receive this scope. */
@media screen {
  body:not(.auth-mode) :is(#appShell, #modalLayer, #notificationDrawer, #toastLayer) {
    --fs55-preferred: 16;
  }
  body:not(.auth-mode) :is(#appShell, #modalLayer) :is(h1) { --fs55-preferred: 34; }
  body:not(.auth-mode) :is(#appShell, #modalLayer) :is(h2) { --fs55-preferred: 28; }
  body:not(.auth-mode) :is(#appShell, #modalLayer) :is(h3) { --fs55-preferred: 23; }
  body:not(.auth-mode) :is(#appShell, #modalLayer) :is(h4) { --fs55-preferred: 20; }
  body:not(.auth-mode) :is(#appShell, #modalLayer) :is(p, label) { --fs55-preferred: 17; }
  body:not(.auth-mode) #appShell .top-primary-nav { --fs55-preferred: 16; }
  body:not(.auth-mode) #appShell .brand-copy strong { --fs55-preferred: 17; }
  body:not(.auth-mode) #appShell .brand-copy small { --fs55-preferred: 11; }
  body:not(.auth-mode) :is(#appShell, #modalLayer) :is(small,time,.ticket-id,.kicker,.eyebrow,.mini-overline) { --fs55-preferred: 14; }
  body:not(.auth-mode) :is(#appShell, #modalLayer) :is(.pill,.nav-count,.badge-dot,.mobile-dot,.menu-badge) { --fs55-preferred: 14; }
  body:not(.auth-mode) #appShell :is(.t49-stat b,.v12-stat-card>b) { --fs55-preferred: 18; }
  body:not(.auth-mode) #appShell :is(.t49-stat strong,.v12-stat-card>strong) { --fs55-preferred: 42; }
  body:not(.auth-mode) #appShell :is(.t49-stat small,.v12-stat-card>small) { --fs55-preferred: 14; }
  body:not(.auth-mode) #appShell :is(.t49-title-wrap h2,.v12-panel-title h2) { --fs55-preferred: 28; }
  body:not(.auth-mode) #appShell :is(.t49-title-wrap p,.card-title p,.idcard-queue-head p) { --fs55-preferred: 15; }
  body:not(.auth-mode) #appShell :is(.t49-row-service,.mock-request-card>strong) { --fs55-preferred: 18; }
  body:not(.auth-mode) #appShell :is(.t49-row-service small,.mock-request-card time,.mock-request-card small) { --fs55-preferred: 13; }
  body:not(.auth-mode) #appShell :is(.t49-row-person,.t49-row-unit) { --fs55-preferred: 16; }
  body:not(.auth-mode) #appShell :is(.t49-row-number,.t49-request-head>span,.data-table th) { --fs55-preferred: 14; }
  body:not(.auth-mode) #appShell .t49-row-status .pill { --fs55-preferred: 13; }
  body:not(.auth-mode) #appShell .t49-note span { --fs55-preferred: 18; }
  body:not(.auth-mode) #appShell .t49-reminder b { --fs55-preferred: 17; }
  body:not(.auth-mode) #appShell .t49-reminder small { --fs55-preferred: 14; }
  body:not(.auth-mode) #appShell :is(.t49-services-filter b,.t49-status-filter b) { --fs55-preferred: 12; }
  body:not(.auth-mode) #appShell :is(.t49-service b,.v12-service-card b,.app-menu-grid b) { --fs55-preferred: 17; }
  body:not(.auth-mode) #appShell .app-menu-grid small { --fs55-preferred: 14; }
  body:not(.auth-mode) #appShell :is(.data-table td>b,.assignee b,.info-item b,.source-report-item b,.paper-field b) { --fs55-preferred: 17; }
  body:not(.auth-mode) #appShell :is(.data-table td>span,.data-table td small,.info-item>span,.source-report-item>span,.paper-field>span) { --fs55-preferred: 14; }
  body:not(.auth-mode) #appShell :is(.t49-pagination,.t49-footer,.ticket-pagination-meta,.request-page-meta,.mobile-dock span) { --fs55-preferred: 14; }
  body:not(.auth-mode) :is(#appShell, #modalLayer) :is(input,select,textarea) { --fs55-preferred: 16; }
  body:not(.auth-mode) #notificationDrawer b { --fs55-preferred: 18; }
  body:not(.auth-mode) #notificationDrawer p { --fs55-preferred: 17; }
  body:not(.auth-mode) #toastLayer b { --fs55-preferred: 18; }
  body:not(.auth-mode) #toastLayer p { --fs55-preferred: 17; }
}


/* /theme2-botanical-v59.css */
/* v59 — the user's background no. 3 + illustrations extracted from the
 * approved 24-icon sheet. The source artwork is not redrawn or upscaled.
 * Theme 2 only. Authentication, Theme 1, print views and workflow data untouched.
 */
@media screen {
  html[data-app-theme="theme2"] body:not(.auth-mode) {
    --ui59-body: "Nunito", "Segoe UI", Arial, sans-serif;
    --ui59-display: "Baloo 2", "Nunito", "Segoe UI", sans-serif;
    --ui54-font: var(--ui59-body);
    --font-body: var(--ui59-body);
    --ui54-ink: #343f3b;
    --ui54-muted: #56635b;
    --ui54-line: rgba(95,113,85,.19);
    --ui54-border: rgba(255,255,249,.83);
    --ui54-glass: linear-gradient(135deg,rgba(255,255,252,.46),rgba(255,255,252,.22));
    --ui54-blur: blur(13px) saturate(106%);
    --ui54-shadow: 0 8px 24px rgba(89,88,49,.055), inset 0 1px 0 rgba(255,255,255,.68);
    font-family: var(--ui59-body) !important;
    color: var(--ui54-ink) !important;
  }

  /* An independent fixed viewport canvas always covers the visible screen.
   * Containing blocks are unchanged; page length NEVER stretches the photo.
   * Preserve the original aspect ratio instead of distorting the window. */
  html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] > #workspaceWallpaper53 {
    background: #fff1c7 url('/assets/perf-v674/background-03.webp') center center / cover no-repeat !important;
    filter:none !important;
    opacity:1 !important;
  }

  /* Less milk, more glass — text opacity stays 1; blur belongs to the backdrop. */
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(.t49-stat,.t49-color-1,.t49-color-2,.t49-color-3) {
    background:linear-gradient(125deg,rgba(255,255,252,.51),rgba(255,253,238,.27)) !important;
    border-color:rgba(255,255,255,.85) !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(.t49-reminder,.t49-service,.kanban-card,.info-item,.source-report-item,.approval-step,.attachment,.route-row,.cal-day,.mobile-ticket-card,.idcard-mobile-card,.appearance49-option) {
    background:rgba(255,255,251,.22) !important;
    border-color:rgba(255,255,255,.75) !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(.mock-request-card,.request-service-tab) {
    background:rgba(255,255,250,.38) !important;
    border-color:rgba(255,255,255,.88) !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(.mock-request-card.active,.request-service-tab.active) {
    background:linear-gradient(120deg,rgba(255,246,194,.66),rgba(244,248,225,.50)) !important;
    border-color:rgba(157,178,119,.65) !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(.t49-request-head,.data-table thead,.data-table thead th,.table-toolbar,.idcard-queue-head,.master-tabs) {
    background:rgba(255,252,233,.34) !important;
    color:#4f614f !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .app-header {
    background:linear-gradient(120deg,rgba(255,255,250,.72),rgba(255,255,251,.50)) !important;
    border-color:rgba(255,255,255,.88) !important;
    -webkit-backdrop-filter:blur(18px) saturate(105%) !important;
    backdrop-filter:blur(18px) saturate(105%) !important;
  }
  /* Popups remain a little more opaque, since two layers of text can overlap. */
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .app-menu.v12-mega-menu,
  html[data-app-theme="theme2"] body:not(.auth-mode) #notificationDrawer,
  html[data-app-theme="theme2"] body:not(.auth-mode) #modalLayer .modal {
    background:linear-gradient(130deg,rgba(255,255,252,.84),rgba(250,251,238,.68)) !important;
    -webkit-backdrop-filter:blur(22px) saturate(106%) !important;
    backdrop-filter:blur(22px) saturate(106%) !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .app-menu-grid .nav-item {
    background:rgba(255,255,251,.30) !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .mobile-dock {
    background:rgba(255,255,248,.78) !important;
  }

  /* Rounded, readable UI typography. v55's fitter still enforces local bounds.
   * No transforms, global zoom, screenshot text or bitmap labels are involved. */
  html[data-app-theme="theme2"] body:not(.auth-mode) :is(#appShell,#modalLayer,#notificationDrawer,#toastLayer) :is(button,input,select,textarea,p,span,b,strong,small,time,label,em,td,th,code) {
    font-family:var(--ui59-body) !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(h1,h2,h3,h4),
  html[data-app-theme="theme2"] body:not(.auth-mode) #modalLayer :is(h2,h3),
  html[data-app-theme="theme2"] body:not(.auth-mode) #notificationDrawer .notification-head h3 {
    font-family:var(--ui59-display) !important;
    font-weight:700 !important;
    letter-spacing:-.25px !important;
    color:#364c3d !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-hero h1 {
    font-family:var(--ui59-display) !important;
    font-style:normal !important;
    font-weight:700 !important;
    line-height:1.12 !important;
    letter-spacing:-.6px !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-hero h1 em {
    font-family:inherit !important;
    font-style:normal !important;
    color:#628052 !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-hero p {
    color:#536248 !important;
    font-weight:700 !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-kicker {color:#8e704d !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(.t49-stat b,.t49-row-service,.t49-reminder b,.t49-service b,.app-menu-grid b) {
    font-weight:800 !important;color:#354c40 !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-stat strong {
    font-family:var(--ui59-body) !important;font-weight:900 !important;
    color:#34483c !important;font-variant-numeric:tabular-nums;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(.t49-title-wrap p,.t49-stat small,.t49-request time,.t49-row-service small,.t49-reminder small,.t49-row-number,.t49-row-unit,.t49-row-person,.t49-note span,.page-header p,.app-menu-grid small) {
    color:#526253 !important;font-weight:600 !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-note span {font-weight:700 !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(.t49-text-button,.t49-footer button,.t49-pagination) {color:#526f51 !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-note input {accent-color:#84a16b !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(.t49-services-filter,.t49-status-filter) button.active {
    background:rgba(225,239,204,.56) !important;border-color:rgba(145,169,118,.70) !important;color:#3c5c3f !important;
  }

  /* Approved leaf-accent illustrations stand on their own — NO old coloured
   * smartphone tile behind them. Utility arrows/close glyphs remain functional. */
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(.top-nav-icon,.menu-tile-icon,.t49-service>span,.t49-small-icon,.t49-stat-icon,.service-icon,.activity-icon,.metric-icon,.process-stage-icon),
  html[data-app-theme="theme2"] body:not(.auth-mode) #notificationDrawer .ni-icon {
    background:transparent !important;border:0 !important;box-shadow:none !important;
    padding:0 !important;filter:none !important;overflow:visible !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) :is(#appShell,#notificationDrawer,#modalLayer,#toastLayer) svg[data-illustrated59] {
    fill:none !important;stroke:none !important;opacity:1 !important;
    filter:none !important;overflow:visible !important;pointer-events:none;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-stat-icon {
    width:78px !important;height:78px !important;flex:0 0 78px !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-stat-icon svg[data-illustrated59] {width:78px !important;height:78px !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .top-nav-icon {width:34px !important;height:34px !important;flex-basis:34px !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .top-nav-icon svg[data-illustrated59] {width:34px !important;height:34px !important;max-width:none !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .menu-tile-icon {width:62px !important;height:60px !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .menu-tile-icon svg[data-illustrated59] {width:62px !important;height:62px !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-service>span {width:58px !important;height:50px !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-service svg[data-illustrated59] {width:58px !important;height:58px !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-heading-icon {width:38px !important;flex:0 0 38px !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-heading-icon svg[data-illustrated59] {width:38px !important;height:38px !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-small-icon {width:38px !important;height:42px !important;flex:0 0 38px !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-small-icon svg[data-illustrated59] {width:40px !important;height:40px !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .top-icon svg[data-illustrated59] {width:30px !important;height:30px !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .mobile-dock svg[data-illustrated59] {width:34px !important;height:34px !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell :is(.t49-services-filter,.request-service-tabs) svg[data-illustrated59] {width:25px !important;height:25px !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) :is(#appShell,#notificationDrawer,#modalLayer,#toastLayer) svg[data-ui-icon]:not([data-illustrated59]) {color:#6e8764 !important;}
  html[data-app-theme="theme2"] body:not(.auth-mode) :is(#appShell,#modalLayer) :is(.danger,.danger-icon,.delete-ticket-button) svg[data-ui-icon] {color:#b04c42 !important;}
}
@media screen and (max-width:1279px) {
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-stat-icon,
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-stat-icon svg[data-illustrated59] {width:64px !important;height:64px !important;flex-basis:64px !important;}
}
@media screen and (max-width:900px) {
  html[data-app-theme="theme2"] body:not(.auth-mode) {
    --ui54-glass:linear-gradient(130deg,rgba(255,255,252,.53),rgba(255,255,252,.27));
    --ui54-blur:blur(10px) saturate(104%);
  }
  html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] > #workspaceWallpaper53 {
    background-position:16% center !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-stat-icon,
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-stat-icon svg[data-illustrated59] {width:48px !important;height:48px !important;flex-basis:48px !important;}
}
/* Meaning is readable without fancy compositing and under reduced transparency. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] #appShell :is(.t49-panel,.t49-stat,.card,.request-paper,.standalone-paper,.kanban-col,.page-header,.app-header,.app-menu,.mobile-dock),
  html[data-app-theme="theme2"] body:not(.auth-mode) :is(#notificationDrawer,#modalLayer .modal) {background:#fffcf0 !important;}
}
@media (prefers-reduced-transparency:reduce) {
  html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] #appShell :is(.t49-panel,.t49-stat,.card,.request-paper,.standalone-paper,.kanban-col,.page-header,.app-header,.app-menu,.mobile-dock),
  html[data-app-theme="theme2"] body:not(.auth-mode) :is(#notificationDrawer,#modalLayer .modal) {background:#fffcf0 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
}
@media (forced-colors:active) {
  html[data-app-theme="theme2"] body:not(.auth-mode)[data-view] #appShell :is(.t49-panel,.t49-stat,.card,.request-paper,.kanban-col,.app-header,.app-menu,.mobile-dock) {background:Canvas !important;color:CanvasText !important;border-color:CanvasText !important;}
}
/* Match the specificity of historical theme styles without altering layout. */
@media screen {
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell #appView :is(h1,h2,h3,h4),
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell #sidebar h2 {
    font-family:var(--ui59-display) !important;
    font-weight:700 !important;
    color:#364c3d !important;
  }
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .t49-stat .t49-stat-icon {
    background:transparent !important;border:0 !important;box-shadow:none !important;
  }
}
@media screen and (max-width:900px) {
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .mobile-dock > button > span {
    font-size:12px !important;line-height:1.2 !important;font-weight:700 !important;
    --fs55-preferred:12;white-space:nowrap !important;
  }
}
@media screen and (max-width:370px) {
  html[data-app-theme="theme2"] body:not(.auth-mode) #appShell .mobile-dock > button > span {font-size:11px !important;--fs55-preferred:11;}
}


/* /visit-letter-v64.css */
/* v64 — Surat Keterangan Izin Kunjungan (Kalender_KST). */
.visit64-card{overflow:hidden}.visit64-loading{display:flex;align-items:center;gap:14px;min-height:110px}.visit64-loading>span{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:#fff5c9}.visit64-loading svg{width:26px;height:26px}.visit64-loading p{margin:4px 0 0;color:var(--muted,#7a6d63)}
.visit64-info{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:11px 13px;border:1px solid rgba(230,203,133,.55);border-radius:14px;background:rgba(255,249,218,.56)}.visit64-info>span{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.65)}.visit64-info svg{width:22px;height:22px}.visit64-info b,.visit64-info small{display:block}.visit64-info small{margin-top:2px;color:#776b5e;line-height:1.4}
.visit64-table td{vertical-align:top}.visit64-table td>b{display:block}.visit64-table td>small{display:block;margin-top:3px;color:#7b6f66;line-height:1.35}.visit64-table td.center{text-align:center}.visit64-attachments{display:flex;flex-wrap:wrap;gap:5px}.visit64-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.1;white-space:nowrap}.visit64-chip.ok{background:#e9f6df;color:#477044;border:1px solid #cfe6bf}.visit64-chip.missing{background:#fff0e3;color:#9a5a36;border:1px solid #f3ceb0}.visit64-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.visit64-note{display:block;margin-top:5px;font-size:11px;line-height:1.35;color:#8d6b5d;max-width:220px}.visit64-issued{display:block;margin-top:5px;color:#527451!important;font-weight:700}.visit64-number{font-size:12px!important;line-height:1.35!important;overflow-wrap:anywhere;color:#4f604c}
html[data-app-theme="theme2"] .visit64-card,html[data-app-theme="theme2"] .visit64-loading{background:linear-gradient(135deg,rgba(255,255,252,.48),rgba(255,253,238,.25));backdrop-filter:blur(13px) saturate(106%);-webkit-backdrop-filter:blur(13px) saturate(106%);border-color:rgba(255,255,255,.82)}
@media(max-width:900px){.visit64-table thead{display:none}.visit64-table,.visit64-table tbody,.visit64-table tr,.visit64-table td{display:block;width:100%}.visit64-table tr{padding:12px;border-bottom:1px solid rgba(220,202,175,.5)}.visit64-table td{padding:5px 4px!important}.visit64-table td.center{text-align:left}.visit64-actions .btn{flex:1}.visit64-info{align-items:flex-start}.visit64-chip{font-size:12px}}


/* v65 — Surat Kunjungan is now a review workspace, not a passive list. */
.visit65-row{cursor:pointer;transition:background-color .16s ease,box-shadow .16s ease}.visit65-row:hover{background:rgba(255,250,226,.48)}.visit65-row:focus-visible{outline:2px solid #8ba47d;outline-offset:-2px}.visit65-review-btn{margin-bottom:6px}.visit65-review{display:grid;gap:14px}.visit65-statusbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.visit65-statusbar>div{display:flex;gap:7px;flex-wrap:wrap}.visit65-statusbar>b{font-size:13px;color:#5c6d57}.visit65-columns{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);gap:14px}.visit65-section{min-width:0;border:1px solid rgba(220,203,172,.62);border-radius:18px;background:rgba(255,255,252,.56);padding:16px}.visit65-section-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}.visit65-section-head>span{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#fff5cf}.visit65-section-head svg{width:24px;height:24px}.visit65-section-head h3{margin:0;font-size:19px}.visit65-section-head p{margin:3px 0 0;color:#7b7167;font-size:12px}.visit65-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.visit65-field{min-width:0;padding:10px 11px;border:1px solid rgba(229,215,190,.7);border-radius:12px;background:rgba(255,252,240,.58)}.visit65-field.full{grid-column:1/-1}.visit65-field span,.visit65-field b{display:block}.visit65-field span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#9a7951;font-weight:800}.visit65-field b{margin-top:4px;font-size:13px;line-height:1.45;color:#4b4e44;overflow-wrap:anywhere}.visit65-note{margin-top:10px;padding:11px 12px;border-radius:12px;background:#f7f3df}.visit65-note p{margin:4px 0 0;line-height:1.5}.visit65-files{display:grid;gap:8px}.visit65-file{display:grid;grid-template-columns:36px minmax(0,1fr) 18px;gap:9px;align-items:center;padding:10px 11px;border:1px solid #dce8d1;border-radius:13px;background:#f5faef;color:inherit;text-decoration:none}.visit65-file>svg:first-child{width:26px;height:26px;color:#6e8d61}.visit65-file>svg:last-child{width:16px;height:16px}.visit65-file b,.visit65-file small{display:block}.visit65-file b{font-size:13px}.visit65-file small{margin-top:2px;font-size:11px;color:#74806d}.visit65-file.missing{grid-template-columns:36px 1fr;background:#fff3e8;border-color:#f0d3bb}.visit65-participants{margin-top:10px;border:1px solid rgba(225,213,187,.72);border-radius:13px;background:rgba(255,252,242,.54);padding:0 12px}.visit65-participants summary{cursor:pointer;padding:10px 0;font-weight:800;color:#59674f}.visit65-names{margin:0 0 12px;padding-left:28px;max-height:210px;overflow:auto;columns:2;column-gap:28px}.visit65-names li{padding:3px 0;break-inside:avoid}.visit65-empty{margin:0 0 12px;color:#81766d}.visit65-letter-preview{margin-top:12px;padding:14px;border-radius:15px;border:1px solid rgba(204,188,157,.65);background:linear-gradient(150deg,#fffdf5,#fff8dd)}.visit65-overline{font-size:9px;letter-spacing:.16em;font-weight:900;color:#b48848}.visit65-letter-preview h4{margin:7px 0 2px;font-size:14px;text-align:center}.visit65-letter-preview>b{display:block;text-align:center;font-size:12px;margin-bottom:11px}.visit65-preview-grid{display:grid;grid-template-columns:72px minmax(0,1fr);gap:5px 8px;font-size:11px}.visit65-preview-grid span{color:#8c7963}.visit65-preview-grid strong{overflow-wrap:anywhere}.visit65-letter-preview>small{display:block;margin-top:9px;text-align:right;color:#7d6f61}.visit65-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.visit65-actions .btn{flex:1;min-width:145px}html[data-app-theme="theme2"] .visit65-section{background:linear-gradient(135deg,rgba(255,255,252,.52),rgba(255,253,238,.31));backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);border-color:rgba(255,255,255,.75)}
@media(max-width:900px){.visit65-columns{grid-template-columns:1fr}.visit65-fields{grid-template-columns:1fr}.visit65-field.full{grid-column:auto}.visit65-names{columns:1}.visit65-row{cursor:default}.visit65-review-btn{width:100%}}

/* v66 — admin-controlled Surat Kunjungan workflow, modeled after SIK review. */
.visit66-review{gap:16px}.visit66-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border:1px solid rgba(210,196,164,.55);border-radius:14px;background:rgba(255,251,232,.48);color:#526153}.visit66-flow span{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800}.visit66-flow span b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#fff5c8;color:#637a55;border:1px solid #eadca7}.visit66-flow i{font-style:normal;color:#aa9c81}.visit66-columns{grid-template-columns:minmax(320px,.88fr) minmax(0,1.12fr)}.visit66-admin-section{background:rgba(255,255,252,.64)!important}.visit66-form-grid{margin-top:4px}.visit66-form-grid .textarea.compact{min-height:74px}.visit66-names-input{min-height:130px}.visit66-source-files{margin-top:12px}.visit66-source-files h4{margin:0 0 8px;font-size:13px;color:#56644f}.visit66-confirm{margin-top:12px;padding:12px;border:1px solid rgba(200,219,180,.75);border-radius:14px;background:rgba(239,249,228,.62)}.visit66-confirm span span{display:block;margin-top:3px;font-size:11px;line-height:1.45;color:#6d7966}.visit66-actions{margin-top:14px}.visit66-actions .btn{min-width:160px}.visit66-actions .btn.primary{background:linear-gradient(180deg,#f7c64a,#efb730);color:#4e3b16}.visit66-review .inline-alert.butter{background:rgba(255,246,201,.64);border-color:#eed995;color:#645a3c}.visit66-review .form-field>span{font-weight:800;color:#6a5d4f}.visit66-review .input{background:rgba(255,255,255,.66)}
html[data-app-theme="theme2"] .visit66-admin-section{background:linear-gradient(135deg,rgba(255,255,252,.56),rgba(255,253,238,.36))!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media(max-width:1000px){.visit66-columns{grid-template-columns:1fr}.visit66-flow i{display:none}.visit66-flow span{flex:1 1 45%}}
@media(max-width:680px){.visit66-flow span{flex-basis:100%}.visit66-actions .btn{width:100%}.visit66-form-grid{grid-template-columns:1fr}.visit66-form-grid .full{grid-column:auto}}


/* /workflow-v67.css */
/* v67: additions only; existing theme, page layout and ID Card template retained. */
body:not(.auth-mode) .sync67-control{display:flex!important;flex-direction:column;align-items:center;gap:2px;flex:0 0 auto;max-width:182px}
body:not(.auth-mode) .sync67-button{display:inline-flex!important;gap:7px!important;align-items:center;justify-content:center;min-height:37px!important;padding:7px 12px!important;border:1px solid #d5decf!important;background:#f6f9ef!important;color:#435d4c!important;border-radius:12px!important;font-size:12px!important;white-space:nowrap;font-weight:700!important;cursor:pointer}
.sync67-button svg{width:16px;height:16px;flex:none}
.sync67-button[aria-busy="true"] svg{animation:sync67-spin 1.4s linear infinite}
.sync67-control small{font-size:9px;color:#717b6f;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sync67-button:disabled{opacity:.7;cursor:wait}
@keyframes sync67-spin{to{transform:rotate(360deg)}}
.workflow67-ds{border-color:#dbe3d0!important}
.workflow67-ds .card-title{align-items:flex-start;gap:12px;flex-wrap:wrap}
.workflow67-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}
.workflow67-steps>div{display:flex;align-items:flex-start;gap:10px;padding:15px 12px;border:1px solid #e4e4dc;border-radius:13px;background:rgba(255,255,255,.6)}
.workflow67-steps>div>b{display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:50%;background:#eceee6;color:#718071;font-size:13px}
.workflow67-steps>div>span{font-weight:700;font-size:13px;line-height:1.4;color:#4b604e}
.workflow67-steps small{display:block;font-size:11px;font-weight:400;color:#7d847a;margin-top:4px}
.workflow67-steps .done{background:#eff5e7;border-color:#d6e0ca}
.workflow67-steps .done>b{background:#628367;color:#fff}
.workflow67-steps .current{background:#fff7df;border-color:#ebd99d}
.workflow67-steps .current>b{background:#e3b759;color:#574824}
.workflow67-actions{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.workflow67-actions .btn{white-space:normal!important;text-align:center;line-height:1.4!important;height:auto!important;min-height:34px}
.workflow67-help{font-size:12px;line-height:1.7;margin:14px 0 0;color:#7d7a73}
.workflow67-file{display:flex;flex-direction:column;gap:5px;padding:12px 14px;margin-bottom:14px;background:rgba(255,255,255,.65);border:1px dashed #d0dcc8;border-radius:12px;overflow-wrap:anywhere}
.workflow67-file b{color:#43614b;font-size:13px}.workflow67-file span{font-size:11px;color:#7c8277}
.workflow67-check{display:flex;align-items:flex-start;gap:10px;margin:15px 0;padding:12px 14px;border:1px solid #e4ddc8;border-radius:12px;background:#fff9e9;line-height:1.6;font-size:13px}
.workflow67-check input{width:17px;height:17px;flex:none;margin-top:3px;accent-color:#708b64}
#dsUploadForm67 .form-field,#idReturnForm67 .form-field,#idLifeForm67 .form-field{margin-bottom:14px}
#dsUploadForm67 small,#idReturnForm67 small,#idLifeForm67 small{font-size:11px;line-height:1.6;color:#7d7e75}
#dsUploadForm67 .input[type="file"],#idReturnForm67 .input[type="file"]{height:auto;min-height:42px;padding:9px;max-width:100%;font-size:12px}
.workflow67-student{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 0;border-top:1px dashed #dfe3d5}
.workflow67-student>div:first-child{display:flex;flex-direction:column;gap:5px;min-width:0}
.workflow67-student>div:first-child b{font-size:14px}.workflow67-student>div:first-child span,.workflow67-student small{font-size:12px;color:#7d8077;line-height:1.5}
.idlife67-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.idlife67-summary>div{display:grid;grid-template-columns:42px 1fr;align-items:center;column-gap:13px;row-gap:2px;padding:19px 18px;background:rgba(255,255,255,.8);border:1px solid #e2e4d4;border-radius:18px}
.idlife67-summary>div>span{grid-row:span 2;background:#eff2dd;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#738261}
.idlife67-summary svg{width:22px;height:22px}.idlife67-summary small{font-size:12px;line-height:1.5;color:#7b806e}.idlife67-summary b{font-size:27px;line-height:1.3;color:#425b49}
.idlife67-card .card-title{flex-wrap:wrap;gap:14px;align-items:center}.idlife67-card .card-title .field-shell{max-width:360px;min-width:200px;flex:1}
.idlife67-tabs{display:flex;gap:7px;padding:0 0 14px;overflow-x:auto;overscroll-behavior:contain;max-width:100%}
.idlife67-tabs button{display:flex;align-items:center;gap:8px;flex:none;border:1px solid #e3e4d8;background:#fafbf5;border-radius:10px;padding:9px 12px;font:inherit;font-size:12px;color:#697765;cursor:pointer}
.idlife67-tabs button b{padding:1px 6px;border-radius:5px;background:#e9ecd9;font-size:11px}.idlife67-tabs button.selected{background:#eaf0d7;border-color:#bdcea2;color:#476042;font-weight:700}
.idlife67-table-wrap{max-width:100%;overflow-x:auto;border:1px solid #e6e7de;border-radius:12px}
.idlife67-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
.idlife67-table th{padding:13px 14px;background:#f3f4e8;color:#627258;font-size:11px;text-align:left;font-weight:700;border-bottom:1px solid #e2e4d6}
.idlife67-table th:first-child{width:24%}.idlife67-table th:nth-child(2){width:20%}.idlife67-table th:nth-child(3){width:16%}.idlife67-table th:nth-child(4){width:18%}.idlife67-table th:nth-child(5){width:22%}
.idlife67-table td{padding:15px 14px;vertical-align:top;border-bottom:1px solid #edeee5;overflow-wrap:anywhere;line-height:1.5}
.idlife67-table tr:last-child td{border-bottom:0}.idlife67-table td>b{display:block;color:#4c604d;font-size:13px}.idlife67-table td>span:not(.pill){display:block;font-size:12px;margin-top:3px;color:#767c71}.idlife67-table td>small{display:block;font-size:10px;margin-top:5px;color:#8c8d80}
.idlife67-table .pill{font-size:11px;white-space:normal;line-height:1.4}
.idlife67-pagination{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding-top:14px;flex-wrap:wrap}.idlife67-pagination small{margin-right:auto;font-size:12px;color:#808273}
@media(max-width:1250px){body:not(.auth-mode) .sync67-button{padding:7px 8px!important;font-size:11px!important}.sync67-control small{font-size:8px}.idlife67-summary{gap:10px}.idlife67-summary>div{padding:15px 12px;grid-template-columns:34px 1fr;column-gap:9px}.idlife67-summary>div>span{width:34px;height:34px;border-radius:10px}}
@media(max-width:900px){.idlife67-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.workflow67-steps{grid-template-columns:1fr}.workflow67-steps>div{padding:12px}.workflow67-student{flex-direction:column;align-items:flex-start}.idlife67-table,.idlife67-table tbody,.idlife67-table tr,.idlife67-table td{display:block;width:100%!important}.idlife67-table thead{display:none}.idlife67-table tr{padding:13px 14px;border-bottom:1px solid #ddd}.idlife67-table td{padding:5px 0;border:0}.idlife67-table td:nth-child(3):before{content:'Masa aktif';display:block;color:#858878;font-size:10px;margin-bottom:3px}.idlife67-table td:nth-child(3)>b,.idlife67-table td:nth-child(3)>span{display:inline;margin-right:4px}.idlife67-table td:last-child{padding-top:11px}.idlife67-card .card-title .field-shell{max-width:100%;min-width:0;width:100%;flex-basis:100%}.idlife67-table-wrap{overflow:hidden}.workflow67-ds .pill{max-width:100%;white-space:normal}.workflow67-actions .btn{font-size:12px!important}}
@media(max-width:640px){body:not(.auth-mode) .sync67-control{max-width:98px}.sync67-control small{display:none}body:not(.auth-mode) .sync67-button{white-space:normal!important;font-size:10px!important;line-height:1.2!important;padding:7px!important;gap:4px!important;min-height:34px!important;border-radius:10px!important}.sync67-button svg{width:14px;height:14px}.idlife67-summary b{font-size:24px}.idlife67-summary small{font-size:10px}.idlife67-summary>div{padding:13px 10px}.idlife67-card{padding:16px!important}.workflow67-actions{width:100%}.workflow67-student .workflow67-actions .btn{flex:1 1 130px}}
@media(prefers-reduced-motion:reduce){.sync67-button[aria-busy="true"] svg{animation:none}}
/* Preserve the single-row mobile header while making room for explicit sync. */
@media(max-width:640px){
 body:not(.auth-mode) #appShell .brand-copy{display:none!important}
 body:not(.auth-mode) #appShell .brand-home{min-width:0!important;flex:0 0 auto!important}
 body:not(.auth-mode) #appShell .header-actions{margin-left:auto!important}
}
/* Keep status toasts from blocking evidence-form buttons. Errors remain inline. */
body:has(#dsUploadForm67,#idReturnForm67,#idLifeForm67) #toastLayer{z-index:170!important}

/* v67.0.7 — source-uploaded ID Card forms. No embedded PDF or extra fetch. */
.source-documents677{margin-top:18px;padding-top:16px;border-top:1px solid var(--border,rgba(90,80,65,.16))}
.source-documents677-heading h4{margin:0 0 6px;font-size:16px}
.source-documents677-heading p,.source-documents677-note{margin:0;color:var(--muted,#7e7787);font-size:12px;line-height:1.6}
.source-documents677-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.source-document677{min-width:0;border:1px solid var(--border,rgba(90,80,65,.16));border-radius:14px;padding:14px;background:var(--surface,rgba(255,255,255,.54));overflow-wrap:anywhere}
.source-document677-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.source-document677-top small{font-size:12px;color:var(--muted,#7e7787)}
.source-document677 h5{font-size:14px;line-height:1.55;margin:10px 0 12px;font-weight:700}
.source-document677-links{display:grid;gap:8px}
.source-document677-link{display:flex;align-items:flex-start;gap:10px;min-width:0;min-height:44px;padding:10px;border-radius:10px;background:rgba(255,255,255,.55);text-decoration:none;color:inherit;border:1px solid var(--border,rgba(90,80,65,.16))}
.source-document677-link>svg{flex:0 0 20px;width:20px;height:20px}
.source-document677-link>span{min-width:0;display:grid;gap:5px}
.source-document677-link b{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.source-document677-link small{font-size:12px;color:var(--muted,#7e7787);display:flex;align-items:center;gap:6px}
.source-document677-link small svg{width:13px;height:13px}
.source-document677-link:focus-visible{outline:3px solid var(--accent,#b58225);outline-offset:3px}
.source-document677-missing{font-size:13px;line-height:1.6;margin:0;color:var(--muted,#7e7787)}
@media(max-width:680px){.source-documents677-grid{grid-template-columns:1fr}.source-document677{padding:12px}}


/* /access-v673.css */
/* Kebijakan akses v67.0.3; tidak mengubah tema/layout utama. */
[data-view][hidden] { display: none !important; }
.rejected673-card .table-toolbar { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.rejected673-card .field-shell { flex:1; min-width:min(100%,240px); }
.rejected673-card td { vertical-align:top; overflow-wrap:anywhere; }
.rejected673-card td small { display:block; margin:5px 0; }
.rejected673-card table { min-width:760px; }
.rejected673-pagination { display:flex; gap:16px; align-items:center; justify-content:flex-end; margin-top:16px; }
.rejected673-reason { border-left:4px solid #cb5262; background:#fff0f2; }
.rejected673-reason h3 { margin:0 0 8px; }
[data-view="rejected"] .menu-tile-icon { color:#a4384d; }
@media(max-width:600px) {.rejected673-pagination {justify-content:space-between;gap:8px;font-size:12px;}}

/* v67.0.11 — rejected records remain readable/actions reachable on phones.
   Existing compact table rules hide later columns; scope this override here only. */
@media (max-width:900px) {
  body:not(.auth-mode)[data-view="rejected"] .rejected673-card .ticket-table-wrap {
    display:block!important;max-width:100%!important;overflow:visible!important;
  }
  body:not(.auth-mode)[data-view="rejected"] .rejected673-card .data-table,
  body:not(.auth-mode)[data-view="rejected"] .rejected673-card .data-table tbody,
  body:not(.auth-mode)[data-view="rejected"] .rejected673-card .data-table tr,
  body:not(.auth-mode)[data-view="rejected"] .rejected673-card .data-table td {
    display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;
  }
  body:not(.auth-mode)[data-view="rejected"] .rejected673-card .data-table thead {display:none!important}
  body:not(.auth-mode)[data-view="rejected"] .rejected673-card .data-table tr {
    margin:12px 0;border:1px solid var(--border,rgba(119,89,81,.2));border-radius:14px;padding:12px;
    background:rgba(255,255,255,.58);overflow:hidden;
  }
  body:not(.auth-mode)[data-view="rejected"] .rejected673-card .data-table td {
    padding:7px 0!important;border:0!important;border-radius:0!important;background:transparent!important;
    white-space:normal!important;overflow-wrap:anywhere;line-height:1.55;font-size:13px;
  }
  body:not(.auth-mode)[data-view="rejected"] .rejected673-card .data-table td:nth-child(2)::before {content:'Layanan / Pemohon';}
  body:not(.auth-mode)[data-view="rejected"] .rejected673-card .data-table td:nth-child(3)::before {content:'Alasan penolakan';}
  body:not(.auth-mode)[data-view="rejected"] .rejected673-card .data-table td:nth-child(4)::before {content:'Waktu keputusan';}
  body:not(.auth-mode)[data-view="rejected"] .rejected673-card .data-table td::before {
    display:block;font-size:11px;font-weight:700;color:var(--muted,#7e7787);margin-bottom:4px;
  }
  body:not(.auth-mode)[data-view="rejected"] .rejected673-card .data-table td:last-child .btn {
    min-height:42px;width:100%;
  }
  body:not(.auth-mode)[data-view="rejected"] .rejected673-card .data-table td[colspan] {padding:12px 0!important;}
}


/* /performance-v674.css */
/* Screen-only performance controls. Document/ID-card print styles untouched. */
.performance674-panel{margin:0 0 20px;padding:22px;border:1px solid var(--border,#e7e1d4);border-radius:18px;background:rgba(255,255,255,.94);color:var(--text,#35463a)}
.performance674-panel h2{margin:0 0 8px;font-size:20px}
.performance674-panel p{margin:6px 0 14px;line-height:1.5}
.performance674-options{padding:0;border:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.performance674-options label{display:flex;gap:10px;align-items:flex-start;border:1px solid #ded9ca;border-radius:12px;padding:14px;cursor:pointer;min-width:0}
.performance674-options label:has(input:checked){border-color:#b29c49;background:#fff8df}
.performance674-options input{margin-top:5px;flex:0 0 auto}
.performance674-options b,.performance674-options small{display:block;line-height:1.45}
.performance674-options small{margin-top:4px;font-size:13px}
@media(max-width:650px){.performance674-options{grid-template-columns:1fr}.performance674-panel{padding:16px}}
@media screen {
  /* Extra specificity is intentional: old theme sheets use #appShell and !important. */
  html[data-performance="lite"][data-app-theme] body:not(.auth-mode) #appShell.app-shell :is(
    .app-header, .workspace-nav, .app-menu, .mobile-dock, .sidebar-scrim,
    .card, .t49-panel, .t49-stat, .request-paper, .standalone-paper,
    .standalone-history, .kanban-col, .appearance49-panel, .appearance49-heading,
    .page-header, .service-spotlight, .idcard-spotlight, .detail-actionbar, .hero-mini
  ),
  html[data-performance="lite"][data-app-theme] body:not(.auth-mode) #modalLayer.modal-layer,
  html[data-performance="lite"][data-app-theme] body:not(.auth-mode) #modalLayer .modal,
  html[data-performance="lite"][data-app-theme] body:not(.auth-mode) #toastLayer .toast,
  html[data-performance="lite"][data-app-theme] body:not(.auth-mode) #notificationDrawer.notification-drawer {
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  html[data-performance="lite"][data-app-theme] body:not(.auth-mode) #appShell.app-shell :is(.app-header,.app-menu,.mobile-dock),
  html[data-performance="lite"][data-app-theme] body:not(.auth-mode) #modalLayer .modal,
  html[data-performance="lite"][data-app-theme] body:not(.auth-mode) #notificationDrawer.notification-drawer{background:rgba(255,253,245,.98)!important}
  html[data-performance="lite"][data-app-theme] body:not(.auth-mode) #appShell.app-shell :is(.card,.t49-panel,.appearance49-panel,.request-paper,.standalone-paper){background:rgba(255,253,245,.95)!important}
  html[data-performance="lite"][data-app-theme] body:not(.auth-mode) #appShell.app-shell :is(.card,.t49-panel,.t49-stat,.appearance49-panel){box-shadow:0 2px 8px rgba(57,50,36,.07)!important}
  html[data-performance="lite"] body:not(.auth-mode) #workspaceWallpaper53,
  html[data-performance="lite"] body:not(.auth-mode) #workspaceWallpaper53::before,
  html[data-performance="lite"] body:not(.auth-mode) #workspaceWallpaper53::after{filter:none!important;animation:none!important;will-change:auto!important}
  html[data-performance="lite"][data-app-theme] body:not(.auth-mode) #appShell.app-shell :is(.t49-hero *, .service-spotlight-flower,.idcard-hero-doodle,.sticker58-slide){animation:none!important;transition:none!important;will-change:auto!important}
  html[data-performance="lite"][data-app-theme] body:not(.auth-mode) #appShell.app-shell :is(.app-header,.card,.t49-panel){transition:none!important}
  /* Large bounded lists need not paint off-screen entries. No semantic hiding. */
  @supports(content-visibility:auto){
    .mobile-functional-card{content-visibility:auto;contain-intrinsic-size:auto 210px}
  }
}


/* /identity-v678.css */
/* Source ID migration panel; only Admin Utama may operate it. */
.identity678 {min-width:0;line-height:1.55}.identity678 p{margin:12px 0}.identity678 h4{margin:18px 0 10px}.identity678 .data-table td{vertical-align:top}.identity678 small{display:block;color:var(--muted,#787482);overflow-wrap:anywhere;margin-top:4px}.identity678 code{white-space:normal;overflow-wrap:anywhere}.identity678 ul{padding-left:20px;margin:8px 0}.identity678-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.identity678-progress{padding:18px;border:1px solid var(--border,#e5e3d8);border-radius:16px}.identity678 progress{display:block;width:100%;height:16px}.identity678 form{display:grid;gap:12px;max-width:510px;margin:20px 0}.identity678 input{width:100%;min-height:44px;padding:12px;border:1px solid var(--border,#e5e3d8);border-radius:10px}.identity678 .ticket-table-wrap{max-height:380px;overflow:auto}.identity678 .inline-alert{display:block}.identity678 .rose{background:var(--rose-soft,#ffe5e7)}
@media(max-width:600px){.identity678 .card-title{display:block}.identity678-actions .btn{width:100%}.identity678 .data-table{min-width:600px}.identity678-progress{padding:12px}}
/* Generic legacy tables hide column 3 on phones; migration must show every state. */
.identity678 .data-table th,.identity678 .data-table td{display:table-cell!important}
@media(max-width:600px){
 .identity678 .data-table{min-width:0;width:100%;border-spacing:0}
 .identity678 .data-table thead{display:none}
 .identity678 .data-table tbody,.identity678 .data-table tr{display:block}
 .identity678 .data-table tr{border:1px solid var(--line,#dfd9cf);border-radius:12px;margin:0 0 10px;padding:10px}
 .identity678 .data-table td{display:block!important;border:0!important;border-radius:0!important;padding:6px!important;overflow-wrap:anywhere}
 .identity678 .data-table td::before{display:block;font-size:10px;color:var(--muted,#766c65);margin-bottom:3px;font-weight:700}
 .identity678 .data-table td:nth-child(1)::before{content:'ID ADMIN LAMA'}
 .identity678 .data-table td:nth-child(2)::before{content:'ID SETELAH PENYELARASAN'}
 .identity678 .data-table td:nth-child(3)::before{content:'STATUS / REKAMAN'}
}


/* /revision-v679.css */
/* v67.0.9 — existing theme, responsive form without additional network assets. */
.revision679-panel .card-title{align-items:flex-start;gap:16px;flex-wrap:wrap}
.revision679-panel .card-title>div{flex:1;min-width:220px}
.revision679-panel details{margin-top:12px}.revision679-panel summary{cursor:pointer;font-weight:700}
.revision679-group{border-top:1px solid var(--border,#eadfcc);margin-top:20px;padding-top:16px}
.revision679-group h4{margin:0 0 13px;font-size:15px}
.revision679 .form-grid{gap:12px}.revision679 .input{min-width:0;width:100%;box-sizing:border-box}
.revision679-files{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.revision679-file,.revision679-goods{padding:14px;border:1px solid var(--border,#eadfcc);border-radius:14px;background:rgba(255,255,255,.48);min-width:0;margin-bottom:12px}
.revision679-file>b{display:block;margin-bottom:8px}.revision679-file-links{margin-bottom:10px;display:grid;gap:7px}
.revision679-file-links a{overflow-wrap:anywhere;font-size:12px}.revision679-file small{display:block;font-size:11px;line-height:1.5;margin-top:7px}
.revision679-confirm{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:13px;line-height:1.6}
.revision679-confirm input{margin-top:5px;flex-shrink:0}
.revision679-goods-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.revision679-history{padding:10px 0;border-bottom:1px solid var(--border,#eadfcc)}.revision679-history span{display:block;font-size:12px}.revision679-history p{margin-bottom:0;white-space:pre-line}
@media(max-width:640px){.revision679-files{grid-template-columns:1fr}.revision679-panel .btn{width:100%}.revision679-panel .card-title>div{min-width:0}.revision679 .form-grid{grid-template-columns:1fr}.revision679 .form-field.full{grid-column:1}.revision679-file input[type=file]{font-size:12px}}
/* Existing alerts use flex for an icon+body. This form uses inline prose. */
.revision679 .inline-alert,.revision679-panel .inline-alert{display:block;line-height:1.6;white-space:normal;overflow-wrap:break-word}
.revision679 .inline-alert b{display:inline;white-space:normal}

/* R1: make availability and release explicit; do not imply denied edits work. */
.revision679-entry:disabled{opacity:.7;cursor:not-allowed}
.revision679-release{display:block;font-size:11px;margin-top:6px;overflow-wrap:anywhere}


/* /ui-display-r4.css */
/* v67.0.11 UI R4: screen-only repair; no document/print or workflow changes. */
@media screen {
  html[data-app-theme="theme2"] #appShell .dashboard-footer-r4 {
    grid-column:3; align-self:center; justify-self:center; width:100%;
    max-width:560px; margin:0; padding:12px 0; min-width:0;
  }
  html[data-app-theme="theme2"] #appShell .dashboard-footer-r4 img {
    display:block; width:100%; height:auto; object-fit:contain;
  }
  #appShell .ticket-operational-r4 .card-title,
  #appShell .ticket-additional-r4 .card-title { align-items:flex-start; gap:14px; }
  #appShell .ticket-operational-r4 .card-title .btn { flex-shrink:0; }
  #appShell .ticket-operational-r4 .info-item b,
  #appShell .ticket-additional-r4 .info-item b { overflow-wrap:anywhere; }
  @media (max-width:1279px) {
    html[data-app-theme="theme2"] #appShell .dashboard-footer-r4 { grid-column:1/-1; }
  }
  @media (max-width:600px) {
    #appShell .ticket-operational-r4 .card-title { flex-wrap:wrap; }
    html[data-app-theme="theme2"] #appShell .dashboard-footer-r4 { padding:6px 8px 0; }
  }
}


/* /dashboard-cats-r5.css */
/* Original sleeping cats and v61 time-dependent cat illustration. */
html[data-app-theme="theme2"] #appShell .t49-notes {
  position:relative; overflow:hidden; padding-bottom:112px !important;
}
html[data-app-theme="theme2"] #appShell .t49-notes .t49-panel-head,
html[data-app-theme="theme2"] #appShell .t49-notes .t49-note-list {position:relative; z-index:2;}
html[data-app-theme="theme2"] #appShell .quote60c-cats {
  position:absolute; left:0; right:0; bottom:0; height:104px;
  margin:0; padding:0; border:0; background:transparent; box-shadow:none;
  display:flex !important; align-items:flex-end; overflow:hidden; z-index:1;
  pointer-events:none;
}
html[data-app-theme="theme2"] #appShell .quote60c-cats img {
  display:block; width:100%; height:100%; max-width:none; max-height:none;
  object-fit:fill; object-position:center bottom;
}
html[data-app-theme="theme2"] #appShell .quote60c-time {
  grid-column:3; min-width:0; min-height:150px; width:100%; height:100%;
  display:flex !important; align-items:center; justify-content:center;
  margin:0; padding:0; border:0; background:transparent; box-shadow:none;
}
html[data-app-theme="theme2"] #appShell .time60c-card.time61-full {
  width:100%; min-width:0; position:relative; display:block; overflow:hidden;
  border-radius:22px; background:transparent;
}
html[data-app-theme="theme2"] #appShell .time60c-card.time61-full img {
  display:block; width:100%; height:auto; min-height:0; max-height:320px;
  object-fit:contain; object-position:center; border:0;
}
@media(max-width:1279px) {
  html[data-app-theme="theme2"] #appShell .quote60c-time {grid-column:1/-1; width:min(100%,640px); justify-self:center;}
}
@media(max-width:600px) {
  html[data-app-theme="theme2"] #appShell .t49-notes {padding-bottom:110px !important;}
  html[data-app-theme="theme2"] #appShell .quote60c-time {min-height:140px;}
}
/* Performance mode keeps both original cat pictures, without motion or blur. */
html[data-performance="lite"] #appShell .quote60c-cats,
html[data-performance="lite"] #appShell .quote60c-time {animation:none !important; filter:none !important;}


/* /letter-active-v6713.css */
/* v67.0.13: scoped letter registry, no modifications to themes or cat illustrations. */
.letter13-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}
.letter13-stats>button{padding:18px;text-align:left;cursor:pointer;color:inherit;font:inherit;display:grid;gap:5px}
.letter13-stats b{font-size:28px}.letter13-stats small{color:var(--muted,#777)}
.letter13-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.letter13-tabs button{padding:10px 14px;border-radius:14px;border:1px solid #ddd7c0;background:rgba(255,255,255,.62);color:inherit;font:inherit;cursor:pointer;display:flex;gap:9px;align-items:center}
.letter13-tabs .selected,.letter13-tabs button[aria-pressed=true]{background:#ffe399;border-color:#dfa82e;font-weight:700}
.letter13-tabs b{font-size:12px;background:rgba(255,255,255,.6);padding:3px 7px;border-radius:10px}
.letter13-filters{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.letter13-filters>.field-shell{flex:1;min-width:200px}.letter13-filters input{min-width:0;width:100%}
.letter13-filters>.form-field{min-width:185px}
.letter13-table-wrap{overflow:auto}.letter13-table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.letter13-table th,.letter13-table td{padding:14px 12px;border-bottom:1px solid rgba(127,132,108,.2);vertical-align:top}
.letter13-table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#747063)}
.letter13-table td>b,.letter13-table td>span:not(.pill),.letter13-table td>small{display:block;margin-bottom:5px;overflow-wrap:anywhere}
.letter13-table small{font-size:12px;color:var(--muted,#6c6c66)}.letter13-table td:first-child{width:38%}.letter13-table td:nth-child(2){min-width:145px}
.letter13-table .letter13-expired{color:#b83843}.letter13-actions{display:flex;flex-wrap:wrap;gap:6px}
.letter13-actions .btn{white-space:normal;text-align:center}.letter13-pagination{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0}
.letter13-pagination small{margin-right:auto}.letter13-alerts{margin:12px 0;display:grid;gap:8px}
.letter13-alert{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:0}.letter13-alert p{margin:5px 0 0}.letter13-alert.rose{background:#fff1f1;border:1px solid #efbac1;color:#8a343f}
.letter13-detail .inline-alert{margin-top:12px}.letter13-detail .inline-alert.rose{background:#fff1f1;color:#8a343f;border:1px solid #efbac1}
@media(max-width:680px){.letter13-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.letter13-stats>button{padding:14px}.letter13-stats b{font-size:24px}.letter13-alert{align-items:flex-start;flex-direction:column}.letter13-filters>*{width:100%}.letter13-tabs{gap:6px}.letter13-tabs button{padding:8px 10px;font-size:13px}.letter13-table thead{display:none}.letter13-table,.letter13-table tbody,.letter13-table tr,.letter13-table td{display:block;width:100%!important;min-width:0!important}.letter13-table tr{padding:10px 0;border-bottom:1px solid #ddd7c0}.letter13-table td{border:0;padding:8px 2px}.letter13-table td:before{content:attr(data-label);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px;color:#806947}.letter13-actions{width:100%}.letter13-card{min-width:0}.letter13-table-wrap{overflow:visible}.letter13-pagination{gap:7px}.letter13-pagination small{width:100%}}

/* v67.0.14: collapsed archive is not mounted or fetched. */
.letter14-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.letter14-archive{margin-top:16px;min-width:0}
.letter14-archive .card-title{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.letter14-archive .letter13-filters{margin:12px 0}
@media(max-width:680px){.letter14-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.letter14-archive .card-title .btn{width:100%}}


/* /permit-visit-v6715.css */
/* v67.0.15: complete source details, no change to themes or decorations. */
.permit-filter6715{display:flex;flex-direction:column;gap:4px;min-width:210px}.permit-filter6715>span{font-size:12px;font-weight:700}
.visit-group6715{border-top:1px solid rgba(127,112,70,.16);padding-top:16px;margin-top:18px}.visit-group6715>h4{font-size:15px;margin:0 0 12px}
.visit-value6715{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.55;margin-top:5px}
.visit-locations6715{display:flex;flex-direction:column;gap:10px}.visit-locations-list6715{display:flex;flex-direction:column;gap:8px}
.visit-location6715{display:grid;grid-template-columns:1fr 2fr auto;gap:8px;align-items:start}.visit-location6715 input{min-width:0;width:100%}.visit-locations6715>small{font-size:12px;line-height:1.45}
@media(max-width:640px){.permit-filter6715{min-width:0;width:100%}.visit-location6715{grid-template-columns:1fr auto}.visit-location6715 [data-loc6715="lokasi"]{grid-row:2;grid-column:1/-1}.visit-location6715 button{grid-column:2;grid-row:1}.visit-value6715{font-size:14px}}

.permit-toolbar6715{display:flex;gap:16px;align-items:end;flex-wrap:wrap;padding:18px;margin:16px 0 12px}.permit-toolbar6715 .field-shell{flex:1;min-width:200px}.permit-toolbar6715 .field-shell input{min-width:0;width:100%}@media(max-width:640px){.permit-toolbar6715{align-items:stretch;padding:14px}.permit-toolbar6715 .field-shell{width:100%;flex-basis:100%;min-width:0}.permit-toolbar6715 .pill{align-self:start}}