@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');
    :root { --primary:#0ea5e9; --font-scale:1; --surface:#ffffff; --surface-2:#f8fafc; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; }
    * { box-sizing:border-box; }
    html { font-size:calc(16px * var(--font-scale)); scroll-behavior:smooth; }
    body { font-family:'Sarabun',sans-serif; background:#f1f5f9; color:var(--ink); min-height:100vh; margin:0; -webkit-tap-highlight-color:transparent; }
    button,input,select,textarea { font:inherit; }
    button { min-height:44px; }
    .glass-card { background:rgba(255,255,255,.96); border:1px solid var(--line); box-shadow:0 8px 28px rgba(15,23,42,.06); border-radius:1rem; }
    .input-glass { background:#fff; border:1px solid #cbd5e1; color:var(--ink); width:100%; min-height:44px; padding:.72rem .9rem; border-radius:.7rem; outline:none; transition:border-color .18s,box-shadow .18s; }
    .input-glass:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent); }
    .input-glass::placeholder { color:#94a3b8; }
    .input-glass option { background:#fff; color:var(--ink); }
    .menu-active { background:color-mix(in srgb,var(--primary) 10%,white); color:var(--primary)!important; font-weight:700; }
    .btn-primary { background:var(--primary); color:#fff; font-weight:700; border:0; border-radius:.7rem; padding:.72rem 1rem; transition:filter .18s,transform .18s; }
    .btn-primary:hover { filter:brightness(.96); transform:translateY(-1px); }
    .btn-primary:active { transform:none; }
    .chart-container { position:relative; height:250px; width:100%; }
    .table-wrap { overflow:auto; border:1px solid var(--line); border-radius:.8rem; background:#fff; }
    .data-table { width:100%; min-width:720px; border-collapse:collapse; font-size:.78rem; }
    .data-table th { position:sticky; top:0; z-index:2; background:#f8fafc; color:#334155; text-align:left; padding:.78rem; white-space:nowrap; border-bottom:1px solid var(--line); }
    .data-table td { padding:.78rem; border-top:1px solid #eef2f7; vertical-align:top; color:#334155; }
    .data-table tr:hover td { background:#f8fafc; }
    .badge { display:inline-flex; align-items:center; padding:.22rem .52rem; border-radius:999px; font-size:.67rem; font-weight:700; background:#e2e8f0; color:#334155; }
    .module-title { display:flex; align-items:center; gap:.6rem; font-weight:700; color:#0f172a; border-bottom:1px solid var(--line); padding-bottom:.9rem; margin-bottom:1.1rem; }
    .scroll-thin { scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
    #viewLogin { background:linear-gradient(145deg,#f8fafc,#e2e8f0); }
    #viewLogin .glass-card { max-width:390px; }
    #viewWorkspace header { background:rgba(255,255,255,.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); color:var(--ink); }
    #menuSidebar { position:sticky; top:76px; }
    #menuSidebar button { color:#64748b!important; border-radius:.7rem; }
    #menuSidebar button:hover { background:#f1f5f9!important; color:#0f172a!important; }
    #menuSidebar .menu-active { color:var(--primary)!important; }
    .content-module { animation:fadeIn .18s ease; }
    @keyframes fadeIn { from { opacity:.25; transform:translateY(4px); } to { opacity:1; transform:none; } }
    #mobileBackdrop { display:none; }
    @media (max-width:1023px) {
      #menuSidebar { position:fixed; top:0; left:0; bottom:0; z-index:70; width:min(86vw,330px); max-height:none!important; border-radius:0 1rem 1rem 0; transform:translateX(-105%); transition:transform .22s ease; padding-top:max(1rem,env(safe-area-inset-top)); overflow-y:auto; }
      #menuSidebar.mobile-open { transform:translateX(0); }
      #mobileBackdrop.mobile-open { display:block; position:fixed; inset:0; z-index:60; background:rgba(15,23,42,.42); backdrop-filter:blur(2px); }
      #moduleContainer { min-width:0; }
      .chart-container { height:225px; }
    }
    @media (max-width:640px) {
      body { padding-bottom:env(safe-area-inset-bottom); }
      .glass-card { border-radius:.85rem; box-shadow:0 4px 18px rgba(15,23,42,.05); }
      .content-module { padding:1rem!important; }
      .data-table { font-size:.74rem; }
      .data-table th,.data-table td { padding:.62rem; }
      .chart-container { height:210px; }
    }

    #viewWorkspace .text-slate-200,#viewWorkspace .text-slate-300 { color:#475569!important; }
    #viewWorkspace .text-slate-400 { color:#64748b!important; }
    #viewWorkspace .bg-slate-950\/45,#viewWorkspace .bg-slate-950\/35,#viewWorkspace .bg-slate-950\/55,#viewWorkspace .bg-slate-900\/60,#viewWorkspace .bg-slate-900\/40 { background:#f8fafc!important; }
    #viewWorkspace .bg-slate-800\/70,#viewWorkspace .bg-slate-800\/50 { background:#f1f5f9!important; }
    #viewWorkspace .border-slate-700,#viewWorkspace .border-slate-700\/50,#viewWorkspace .border-slate-600 { border-color:#e2e8f0!important; }
    @media print { body * { visibility:hidden!important; } #businessCard,#businessCard * { visibility:visible!important; } #businessCard { position:absolute; inset:0; margin:auto; box-shadow:none; } }

    .app-gradient { background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 14%,white),#fff 48%,#f8fafc); }
    .app-install-btn { display:none; align-items:center; justify-content:center; gap:.55rem; border:1px solid color-mix(in srgb,var(--primary) 28%,#cbd5e1); background:color-mix(in srgb,var(--primary) 8%,white); color:var(--primary); font-weight:700; border-radius:.75rem; padding:.65rem .9rem; }
    .app-install-btn.ready { display:inline-flex; }
    .product-hero { background:linear-gradient(135deg,#fff7ed,#ffffff 55%,#f8fafc); border:1px solid #fed7aa; border-radius:1rem; padding:1rem; }
    .product-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
    .product-stat { border:1px solid var(--line); background:#fff; border-radius:.85rem; padding:.8rem; min-width:0; }
    .product-stat small { display:block; color:var(--muted); font-size:.68rem; }
    .product-stat strong { display:block; margin-top:.2rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .stock-low { color:#dc2626; font-weight:700; }
    .stock-ok { color:#059669; font-weight:700; }
    .mobile-quickbar { display:none; }
    @media (max-width:640px) {
      .product-summary { grid-template-columns:1fr; }
      .mobile-quickbar { display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:.65rem; right:.65rem; bottom:calc(.65rem + env(safe-area-inset-bottom)); z-index:55; background:rgba(255,255,255,.96); backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:1rem; box-shadow:0 14px 34px rgba(15,23,42,.16); padding:.35rem; }
      .mobile-quickbar button { min-height:50px; border-radius:.75rem; color:#64748b; font-size:.64rem; font-weight:700; }
      .mobile-quickbar i { display:block; font-size:1rem; margin-bottom:.18rem; }
      #viewWorkspace { padding-bottom:82px; }
    }

  
    /* Neon Aurora UI */
    :root { --neon-cyan:#22d3ee; --neon-blue:#3b82f6; --neon-violet:#8b5cf6; --neon-pink:#ec4899; --neon-green:#34d399; }
    body { background:radial-gradient(circle at 15% 10%,rgba(59,130,246,.20),transparent 34%),radial-gradient(circle at 85% 8%,rgba(236,72,153,.16),transparent 28%),linear-gradient(145deg,#060a19,#0f1734 50%,#081226); color:#eaf6ff; }
    #viewLogin { background:radial-gradient(circle at 50% 22%,rgba(34,211,238,.23),transparent 30%),linear-gradient(145deg,#060a19,#11183b); }
    .glass-card { background:linear-gradient(145deg,rgba(15,23,42,.90),rgba(17,24,55,.84)); border:1px solid rgba(103,232,249,.20); box-shadow:0 18px 55px rgba(0,0,0,.38),0 0 28px rgba(34,211,238,.07); color:#eaf6ff; backdrop-filter:blur(18px); }
    .input-glass { background:rgba(5,12,30,.80); border-color:rgba(103,232,249,.20); color:#f8fafc; }
    .input-glass:focus { border-color:var(--neon-cyan); box-shadow:0 0 0 3px rgba(34,211,238,.12),0 0 22px rgba(34,211,238,.18); }
    .input-glass option { background:#0f172a; color:#fff; }
    .module-title { color:#fff; border-color:rgba(148,163,184,.18); }
    #viewWorkspace header { background:rgba(6,10,25,.88); color:#fff; border-color:rgba(103,232,249,.16); box-shadow:0 0 25px rgba(34,211,238,.08); }
    #menuSidebar button { color:#94a3b8!important; }
    #menuSidebar button:hover,.menu-active { background:linear-gradient(90deg,rgba(34,211,238,.12),rgba(139,92,246,.12))!important; color:#fff!important; box-shadow:inset 3px 0 0 var(--neon-cyan),0 0 16px rgba(34,211,238,.08); }
    .btn-primary { background:linear-gradient(90deg,var(--neon-blue),var(--neon-violet),var(--neon-pink)); background-size:200% 100%; box-shadow:0 0 18px rgba(59,130,246,.28); animation:neonShift 5s linear infinite; }
    .btn-primary:hover { filter:brightness(1.12); box-shadow:0 0 30px rgba(139,92,246,.42); }
    @keyframes neonShift { 0%{background-position:0 0}50%{background-position:100% 0}100%{background-position:0 0} }
    .neon-panel { background:linear-gradient(145deg,rgba(5,12,30,.92),rgba(22,18,55,.84)); border:1px solid rgba(103,232,249,.25); border-radius:1.25rem; box-shadow:inset 0 0 25px rgba(59,130,246,.05),0 0 26px rgba(34,211,238,.08); }
    .neon-time { text-shadow:0 0 10px rgba(34,211,238,.65),0 0 28px rgba(59,130,246,.35); }
    .break-card { position:relative; overflow:hidden; background:rgba(15,23,42,.72); border:1px solid rgba(148,163,184,.18); border-radius:1rem; padding:1rem; }
    .break-card.active { border-color:rgba(52,211,153,.75); box-shadow:0 0 26px rgba(52,211,153,.18); }
    .break-card.over { border-color:rgba(251,113,133,.85); box-shadow:0 0 30px rgba(244,63,94,.25); animation:pulseDanger 1.15s ease-in-out infinite alternate; }
    @keyframes pulseDanger { from{transform:scale(1)}to{transform:scale(1.012)} }
    .break-progress { height:.48rem; background:rgba(148,163,184,.18); border-radius:99px; overflow:hidden; }
    .break-progress > span { display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--neon-cyan),var(--neon-violet));box-shadow:0 0 12px var(--neon-cyan);transition:width .4s ease; }
    .action-grid button { min-height:70px; border-radius:1rem; font-weight:800; border:1px solid rgba(255,255,255,.10); transition:.2s; }
    .action-grid button:hover { transform:translateY(-2px); filter:brightness(1.12); }
    .action-grid button:disabled { opacity:.34; filter:grayscale(.7); transform:none; cursor:not-allowed; }
    .table-wrap { background:rgba(8,15,35,.80); border-color:rgba(148,163,184,.15); }
    .data-table th { background:#111a35; color:#bae6fd; border-color:rgba(148,163,184,.15); }
    .data-table td { color:#dbeafe; border-color:rgba(148,163,184,.10); }
    .data-table tr:hover td { background:rgba(34,211,238,.05); }

  
    /* Unified notification center */
    .notify-btn{position:relative;width:44px;height:44px;border-radius:14px;border:1px solid rgba(103,232,249,.25);background:rgba(15,23,42,.72);color:#e2e8f0;transition:.2s}
    .notify-btn:hover{color:#67e8f9;box-shadow:0 0 24px rgba(34,211,238,.2)}
    .notify-badge{position:absolute;right:-4px;top:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:linear-gradient(135deg,#f43f5e,#ec4899);color:white;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 18px rgba(244,63,94,.55)}
    .notify-drawer{position:fixed;right:14px;top:70px;z-index:90;width:min(430px,calc(100vw - 28px));max-height:78vh;overflow:hidden;border-radius:20px;background:rgba(7,12,30,.97);border:1px solid rgba(103,232,249,.25);box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 28px rgba(34,211,238,.12);backdrop-filter:blur(20px)}
    .notify-list{max-height:calc(78vh - 78px);overflow:auto;padding:10px}
    .notify-item{display:flex;gap:12px;padding:13px;border-radius:15px;border:1px solid rgba(148,163,184,.13);background:rgba(15,23,42,.72);margin-bottom:9px;cursor:pointer;transition:.18s}
    .notify-item:hover{transform:translateY(-1px);border-color:rgba(103,232,249,.35);background:rgba(30,41,59,.88)}
    .notify-dot{width:11px;height:11px;border-radius:50%;margin-top:5px;flex:0 0 auto;box-shadow:0 0 14px currentColor}


    /* Mobile-first navigation, contrast, and standard CR80 portrait card */
    :root{
      --ui-text:#f8fafc;
      --ui-muted:#cbd5e1;
      --ui-soft:#94a3b8;
      --ui-panel:#0b1226;
      --ui-panel-2:#111a35;
      --ui-border:rgba(148,163,184,.22);
      --ui-focus:#67e8f9;
    }
    #viewWorkspace{overflow-x:hidden}
    #moduleContainer,.content-module,.content-module>*{min-width:0}
    #viewWorkspace label,#viewWorkspace .text-slate-500{color:#cbd5e1!important}
    #viewWorkspace .text-slate-600,#viewWorkspace .text-slate-700{color:#e2e8f0!important}
    #viewWorkspace .text-slate-300,#viewWorkspace .text-slate-200{color:#f1f5f9!important}
    #viewWorkspace .text-slate-400{color:#cbd5e1!important}
    .input-glass::placeholder{color:#94a3b8}
    .badge{background:rgba(148,163,184,.18);color:#f8fafc;border:1px solid rgba(148,163,184,.2)}
    .btn-primary:focus-visible,.card-action:focus-visible,#menuSidebar button:focus-visible{outline:3px solid rgba(103,232,249,.45);outline-offset:2px}
    .form-grid>*{min-width:0}
    .table-wrap{max-width:100%;-webkit-overflow-scrolling:touch}
    .data-table{min-width:680px}
    .menu-shell{display:flex;flex-direction:column;min-height:100%}
    .menu-top{position:sticky;top:0;z-index:3;padding:.4rem .25rem .65rem;background:linear-gradient(180deg,rgba(7,12,30,.99) 75%,transparent)}
    .menu-user{display:flex;align-items:center;gap:.65rem;padding:.75rem;border:1px solid var(--ui-border);border-radius:1rem;background:rgba(15,23,42,.78)}
    .menu-user-avatar{width:42px;height:42px;border-radius:14px;object-fit:cover;background:#1e293b;border:1px solid rgba(103,232,249,.24)}
    .menu-section{margin-top:.55rem}
    .menu-section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem .75rem;color:#bae6fd!important;background:rgba(15,23,42,.56);border:1px solid rgba(148,163,184,.13);font-size:.72rem;font-weight:800;letter-spacing:.02em}
    .menu-section-toggle .chev{transition:transform .2s}
    .menu-section.collapsed .menu-section-toggle .chev{transform:rotate(-90deg)}
    .menu-section-items{display:grid;gap:.2rem;padding:.3rem 0}
    .menu-section.collapsed .menu-section-items{display:none}
    .menu-section-items>button{min-height:46px}
    .menu-bottom{margin-top:auto;padding:.8rem .25rem max(.5rem,env(safe-area-inset-bottom));font-size:.66rem;color:#94a3b8;text-align:center}
    @media(max-width:1023px){
      #menuSidebar{height:100dvh;max-height:100dvh!important;padding:0 .75rem!important;overscroll-behavior:contain;overflow-y:auto!important}
      .menu-top{padding-top:max(.9rem,env(safe-area-inset-top))}
      .menu-section-toggle{min-height:44px}
      #moduleContainer{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
    }
    @media(max-width:640px){
      .content-module{padding:1rem!important;border-radius:1rem}
      .module-title{font-size:.92rem}
      .grid.grid-cols-2{gap:.7rem}
      .action-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
      .action-grid button{min-height:64px}
      .notify-drawer{right:.5rem;top:64px;width:calc(100vw - 1rem);max-height:calc(100dvh - 76px)}
      .notify-list{max-height:calc(100dvh - 150px)}
    }

    /* Standard vertical employee ID card, CR80 portrait ratio */
    .idcard-stage{perspective:1600px;max-width:380px;margin:0 auto}
    .idcard-flipper{position:relative;width:100%;aspect-ratio:53.98/85.60;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.8,.2,1);isolation:isolate;contain:layout paint style}
    .idcard-flipper.flipped{transform:rotateY(180deg);-webkit-transform:rotateY(180deg)}
    .idcard-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0);-webkit-transform:translateZ(0);border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.28);box-shadow:0 24px 70px rgba(0,0,0,.48),0 0 34px color-mix(in srgb,var(--card-accent,#22d3ee) 28%,transparent);background:#071225;color:white;transition:opacity .18s ease,visibility .18s ease;will-change:transform,opacity}
    .idcard-front{z-index:2;opacity:1;visibility:visible;pointer-events:auto}
    .idcard-back{z-index:1;transform:rotateY(180deg) translateZ(1px);-webkit-transform:rotateY(180deg) translateZ(1px);opacity:0;visibility:hidden;pointer-events:none}
    .idcard-flipper.flipped .idcard-front{opacity:0;visibility:hidden;pointer-events:none}
    .idcard-flipper.flipped .idcard-back{opacity:1;visibility:visible;pointer-events:auto}
    .idcard-bg{position:absolute;inset:0;background-size:cover;background-position:center}
    .idcard-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.58),rgba(2,6,23,.88) 72%,rgba(2,6,23,.98))}
    .idcard-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(to bottom,#000,transparent)}
    .idcard-content{position:relative;z-index:2;height:100%;padding:22px;display:flex;flex-direction:column}
    .idcard-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .idcard-brand{display:flex;align-items:center;gap:10px;min-width:0}
    .idcard-brand-logo{width:44px;height:44px;object-fit:contain;flex:0 0 auto}
    .idcard-org{font-size:1rem;font-weight:900;letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .idcard-sub{font-size:.55rem;letter-spacing:.2em;color:#cbd5e1}
    .idcard-photo-wrap{display:flex;justify-content:center;margin:18px 0 12px}
    .idcard-photo{width:66%;aspect-ratio:4/5;object-fit:cover;border-radius:22px;border:3px solid rgba(255,255,255,.92);box-shadow:0 0 0 5px color-mix(in srgb,var(--card-accent,#22d3ee) 30%,transparent),0 18px 42px rgba(0,0,0,.42)}
    .idcard-name{text-align:center;font-size:1.52rem;line-height:1.12;font-weight:900;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .idcard-position{text-align:center;color:var(--card-accent,#22d3ee);font-size:.92rem;font-weight:800;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .idcard-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
    .idcard-meta-item{background:rgba(15,23,42,.66);border:1px solid rgba(255,255,255,.11);border-radius:12px;padding:8px;min-width:0}
    .idcard-meta-item small{display:block;color:#cbd5e1;font-size:.56rem}
    .idcard-meta-item strong{display:block;font-size:.72rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .idcard-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
    .idcard-note{font-size:.52rem;color:#cbd5e1;line-height:1.45}
    .idcard-qr{background:#fff;padding:6px;border-radius:12px;width:78px;height:78px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
    .idcard-qr img,.idcard-qr canvas{max-width:66px!important;max-height:66px!important}
    .idcard-accent{color:var(--card-accent,#22d3ee)}
    .idcard-back-title{text-align:center;margin-top:12px}
    .idcard-back-title h3{font-weight:900;font-size:1.1rem}
    .idcard-back-title p{font-size:.62rem;color:var(--card-accent,#22d3ee);font-weight:800;letter-spacing:.15em}
    #profileDetails{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
    #profileDetails>div{background:rgba(15,23,42,.7);border:1px solid rgba(255,255,255,.11);border-radius:12px;padding:8px;min-width:0}
    #profileDetails>div>div:first-child{font-size:.56rem;color:#cbd5e1}
    #profileDetails>div>div:last-child{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .idcard-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
    .card-action{min-height:44px;padding:0 15px;border-radius:12px;border:1px solid rgba(103,232,249,.24);background:rgba(15,23,42,.78);color:#f8fafc;font-weight:700}
    .card-action:hover{color:#67e8f9;box-shadow:0 0 18px rgba(34,211,238,.16)}
    .card-print-hint{text-align:center;color:#cbd5e1;font-size:.7rem;margin-top:12px}
    .card-admin-editor{margin-bottom:18px;padding:16px;border-radius:18px;border:1px solid rgba(244,114,182,.28);background:linear-gradient(145deg,rgba(80,7,36,.30),rgba(30,41,59,.82));box-shadow:0 0 28px rgba(236,72,153,.08)}
    .card-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .card-admin-preview{width:76px;height:96px;object-fit:cover;border-radius:14px;border:2px solid rgba(255,255,255,.75);background:#0f172a}
    .card-admin-help{font-size:.68rem;color:#cbd5e1;line-height:1.5}
    @media(max-width:640px){.card-admin-grid{grid-template-columns:1fr}.card-admin-editor{padding:12px}.card-admin-preview{width:68px;height:86px}}
    @media(max-width:420px){
      .idcard-stage{max-width:min(330px,calc(100vw - 36px));overflow:hidden;border-radius:22px}
      .idcard-flipper{width:100%;max-width:100%}
      .idcard-face{border-radius:22px}
      .idcard-content{padding:15px}
      .idcard-photo-wrap{margin:12px 0 8px}
      .idcard-name{font-size:1.18rem}
      .idcard-position{font-size:.78rem}
      .idcard-meta{gap:5px;margin-top:10px}
      .idcard-meta-item,#profileDetails>div{padding:6px}
      #profileDetails{gap:5px;margin-top:10px;overflow:hidden}
      #profileDetails>div>div:last-child{font-size:.64rem}
      .idcard-qr{width:60px;height:60px;padding:5px}
      .idcard-qr img,.idcard-qr canvas{max-width:50px!important;max-height:50px!important}
      .idcard-foot{gap:6px}
    }
    @page{size:53.98mm 85.60mm;margin:0}
    @media print{
      html,body{width:53.98mm!important;height:85.60mm!important;margin:0!important;padding:0!important;background:white!important}
      body *{visibility:hidden!important}
      .idcard-stage,.idcard-stage *{visibility:visible!important}
      .idcard-stage{position:absolute!important;left:0!important;top:0!important;width:53.98mm!important;height:85.60mm!important;max-width:none!important;margin:0!important;perspective:none!important}
      .idcard-flipper{width:53.98mm!important;height:85.60mm!important;aspect-ratio:auto!important;transform:none!important}
      .idcard-face{width:53.98mm!important;height:85.60mm!important;border-radius:0!important;box-shadow:none!important}
      .idcard-face.idcard-back{display:none!important}
      .idcard-flipper.flipped .idcard-front{display:none!important}
      .idcard-flipper.flipped .idcard-back{display:block!important;transform:none!important}
      .idcard-actions,.module-title,.card-print-hint{display:none!important}
    }

/* YSG V2 consistency and mobile safety */
button:disabled{opacity:.48!important;cursor:not-allowed!important;filter:grayscale(.25);transform:none!important;box-shadow:none!important}
#roleDraftList>div{min-width:0}
#roleDraftList .badge{flex:0 0 auto}
#userPageInfo{min-width:6rem;text-align:center;font-weight:700}
#myExceptionTable,#exceptionAdminTable,#leaveTypeTable,#userTable{min-width:0}
#viewWorkspace .bg-white{color:#0f172a}
#viewWorkspace .bg-slate-50{color:#0f172a}
#viewWorkspace input[type="checkbox"]{width:1.05rem;height:1.05rem;accent-color:var(--primary)}
@media(max-width:640px){
  #roleDraftList>div{align-items:flex-start;flex-wrap:wrap}
  #userPrev,#userNext{flex:1}
  #userPageInfo{min-width:auto;white-space:nowrap}
  .card-admin-grid .flex.gap-2{flex-wrap:wrap}
  .card-admin-grid .flex.gap-2>.input-glass,.card-admin-grid .flex.gap-2>select{flex-basis:100%}
}


/* YSG GROUP PLATFORM V3 — PILOT DESIGN SYSTEM */
:root{
  --ysg-navy:#0b1628;--ysg-navy-2:#13233b;--ysg-teal:#0f766e;
  --ysg-canvas:#eef2f6;--ysg-panel:#ffffff;--ysg-border:#d9e1ea;
  --ysg-ink:#102033;--ysg-muted:#66758a;--primary:var(--ysg-teal);
}
body{background:var(--ysg-canvas)!important;color:var(--ysg-ink)!important}
#viewLogin{background:linear-gradient(115deg,rgba(11,22,40,.97),rgba(19,35,59,.94))!important}
#viewWorkspace header{background:rgba(255,255,255,.97)!important;color:var(--ysg-ink)!important;border-bottom:1px solid var(--ysg-border)!important;box-shadow:0 6px 24px rgba(16,32,51,.06)!important}
.glass-card{background:var(--ysg-panel)!important;color:var(--ysg-ink)!important;border:1px solid var(--ysg-border)!important;box-shadow:0 8px 28px rgba(16,32,51,.06)!important;backdrop-filter:none!important}
#menuSidebar{background:var(--ysg-navy)!important;border:0!important;border-radius:18px!important;box-shadow:0 18px 42px rgba(11,22,40,.20)!important}
#menuSidebar button{color:#adbacb!important}
#menuSidebar button:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
#menuSidebar .menu-active{background:#fff!important;color:var(--ysg-navy)!important;box-shadow:none!important}
.menu-user{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.08)!important}
.menu-bottom{color:#718097!important}
.module-title{color:var(--ysg-ink)!important;border-color:var(--ysg-border)!important}
.input-glass{background:#fff!important;color:var(--ysg-ink)!important;border:1px solid #cbd5e1!important;box-shadow:none!important}
.input-glass:focus{border-color:var(--ysg-teal)!important;box-shadow:0 0 0 3px rgba(15,118,110,.12)!important}
.btn-primary{background:var(--ysg-teal)!important;animation:none!important;box-shadow:none!important}
.neon-panel,.break-card{background:#f8fafc!important;color:var(--ysg-ink)!important;border:1px solid var(--ysg-border)!important;box-shadow:none!important}
.neon-time{color:var(--ysg-navy)!important;text-shadow:none!important}
.data-table th{background:#f4f7fa!important;color:#334155!important}
.data-table td{color:#334155!important}
.table-wrap{background:#fff!important;border-color:var(--ysg-border)!important}
.notify-drawer{background:#fff!important;color:var(--ysg-ink)!important;border:1px solid var(--ysg-border)!important}
.notify-item strong{color:var(--ysg-ink)!important}
.notify-item p{color:var(--ysg-muted)!important}
.notify-btn{background:#fff!important;color:var(--ysg-navy)!important;border:1px solid var(--ysg-border)!important}
.ysg-command-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px;margin-bottom:18px;color:#fff;border-radius:20px;background:linear-gradient(110deg,var(--ysg-navy),var(--ysg-navy-2) 70%,#164e63);overflow:hidden;position:relative}
.ysg-command-hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-90px;top:-120px;background:rgba(255,255,255,.08)}
.ysg-command-hero h2{font-size:clamp(1.5rem,3vw,2.4rem);font-weight:800;letter-spacing:-.02em}
.ysg-command-hero p{color:#cbd5e1;margin-top:6px}
.ysg-eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.22em;color:#99f6e4;margin-bottom:8px}
.ysg-command-actions{display:flex;gap:10px;z-index:1;flex-wrap:wrap}
.ysg-command-actions button{min-width:92px;padding:12px;border-radius:14px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);color:#fff;display:grid;gap:6px;place-items:center}
.ysg-command-actions button:hover{background:rgba(255,255,255,.17)}
.ysg-workflow-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;margin-bottom:18px;border-radius:14px;background:#f8fafc;border:1px solid var(--ysg-border)}
.ysg-workflow-strip>div{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center}
.ysg-workflow-strip small{grid-column:2;color:var(--ysg-muted)}
.ysg-workflow-strip button{background:var(--ysg-navy);color:#fff;padding:9px 14px;border-radius:10px;font-weight:700}
.ysg-status-dot{width:9px;height:9px;background:#22c55e;border-radius:50%;display:inline-block}
.card-action{background:#fff!important;color:var(--ysg-navy)!important;border:1px solid var(--ysg-border)!important}
@media(max-width:640px){
  .ysg-command-hero{align-items:flex-start;flex-direction:column;padding:20px}
  .ysg-command-actions{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .ysg-command-actions button{min-width:0}
  .ysg-workflow-strip{align-items:flex-start;flex-direction:column}
  .ysg-workflow-strip button{width:100%}
}