:root{--bg:#f5f6fa;--panel:#ffffff;--border:#e5e7eb;--text:#111827;--muted:#6b7280;--primary:#2563eb;--primary-hover:#1d4ed8;--success:#16a34a;--warning:#d97706;--danger:#dc2626;--subtle:#f8fafc;--shadow:0 10px 30px rgba(15,23,42,.08);--shadow-strong:0 18px 48px rgba(15,23,42,.12);--radius:16px}html{scroll-behavior:smooth}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:radial-gradient(circle at top right,rgba(37,99,235,.08),transparent 30%),radial-gradient(circle at left bottom,rgba(124,58,237,.06),transparent 35%),linear-gradient(180deg,#f8fafc 0%,#f5f6fa 100%);background-attachment:fixed;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.5}body::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(148,163,184,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.03) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(180deg,rgba(0,0,0,.22),transparent 70%);z-index:0}body>*{position:relative;z-index:1}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:rgba(15,23,42,.04)}::-webkit-scrollbar-thumb{background:rgba(100,116,139,.38);border:3px solid transparent;background-clip:content-box;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:rgba(71,85,105,.52);border:3px solid transparent;background-clip:content-box}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh;display:flex}.sidebar{width:280px;background:rgba(255,255,255,.88);border-right:1px solid var(--border);padding:20px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;gap:18px;backdrop-filter:blur(18px);box-shadow:12px 0 36px rgba(15,23,42,.04)}.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.8);border-bottom:1px solid rgba(229,231,235,.95);backdrop-filter:blur(18px);box-shadow:0 12px 30px rgba(15,23,42,.04)}.content{flex:1;min-width:0}.container{padding:28px}.card,.stat-card,.modal-panel,.login-card{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.92));border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow)}.card,.login-card,.center-stage-card,.app-ids-panel,.table,.code-box,.input,.select,.textarea,.btn,.btn-primary,.btn-secondary,.btn-danger,.icon-btn,.app-ids-action,.menu-item,.toast{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease,opacity .18s ease}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-strong)}.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.dashboard-stats{display:grid;gap:18px;grid-template-columns:repeat(7,minmax(0,1fr))}.dashboard-stats .card{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.9)),radial-gradient(circle at top right,rgba(37,99,235,.08),transparent 35%)}.dashboard-stats .card::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,rgba(37,99,235,.3),rgba(124,58,237,.18),transparent)}.dashboard-stats .card>*{position:relative;z-index:1}.dashboard-table-card{margin-top:18px;padding:18px;box-shadow:var(--shadow)}.dashboard-table-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.section-kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}.section-title{margin:0;font-size:20px;line-height:1.2}.table-wrap{overflow:auto}.keys-shell{display:grid;gap:18px}.keys-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}.keys-filter{padding:14px;border:none;box-shadow:none;background:var(--subtle)}.keys-filter-grid{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr) auto auto;gap:12px;align-items:center}.keys-filter-grid .btn-secondary,.keys-filter-grid .input,.keys-filter-grid .select{min-height:44px}.keys-table-wrap{overflow:auto}.keys-table-wrap,.app-ids-table-wrap,.code-box,.form-panel,.preview-display,.center-stage-card,.app-ids-panel{box-shadow:var(--shadow)}.keys-table th,.keys-table td{white-space:nowrap}.keys-table th,.keys-table td{padding:6px 7px;vertical-align:middle}.table tbody tr:hover td{background:rgba(248,250,252,.9)}.keys-table thead th{font-size:11px}.keys-table th:nth-child(2),.keys-table td:nth-child(2){white-space:nowrap}.keys-table td:nth-child(2) div:first-child{white-space:normal}.keys-copy-btn{min-width:96px}.key-action-icons{display:inline-flex;align-items:center;gap:3px;flex-wrap:nowrap}.icon-btn{width:28px;height:28px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.08);background:rgba(15,23,42,.05);color:var(--text);box-shadow:none;font-size:11px}.icon-btn:hover{transform:translateY(-1px)}.icon-btn-info{color:#2563eb;background:#dbeafe}.icon-btn-warning{color:#d97706;background:#fef3c7}.icon-btn-primary{color:#0f766e;background:#ccfbf1}.icon-btn-danger{color:#dc2626;background:#fee2e2}.btn,.btn-primary,.btn-secondary,.btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--radius);padding:.72rem 1rem;font-weight:600;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease;text-decoration:none}.btn-primary{background:linear-gradient(135deg,var(--primary),#4f46e5);color:#fff;box-shadow:0 14px 28px rgba(37,99,235,.16)}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}.btn-secondary{background:rgba(255,255,255,.92);border-color:var(--border);color:var(--text);backdrop-filter:blur(10px)}.btn-secondary:hover{background:#fff;transform:translateY(-1px);border-color:#cbd5e1}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{filter:brightness(.92);transform:translateY(-1px)}.action-group{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.action-group form,.action-group a{margin:0}.action-group .input{width:82px;padding:.68rem .8rem}.action-group .btn-secondary,.action-group .btn-primary,.action-group .btn-danger{padding:.68rem .9rem;min-height:42px;white-space:nowrap}.action-group .btn-secondary,.action-group .btn-primary,.action-group .btn-danger,.action-group .input{box-shadow:none}.input,.select,.textarea{width:100%;border:1px solid var(--border);background:#fff;color:var(--text);border-radius:18px;padding:.82rem 1rem;font:inherit;outline:none;box-shadow:0 1px 0 rgba(15,23,42,.02) inset}.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,.1),0 10px 24px rgba(37,99,235,.08)}.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.table th,.table td{padding:12px 14px;border-bottom:1px solid #eef2f7;text-align:left;vertical-align:top}.table th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;background:#fbfcfe}.table tbody tr{transition:background-color .16s ease,transform .16s ease}.table tbody tr:hover{background:rgba(248,250,252,.75)}.table.compact-table th,.table.compact-table td{padding:8px 10px;vertical-align:middle}.table.compact-table th{font-size:11px}.table.compact-table td{white-space:nowrap}.table.compact-table td .cell-stack{display:inline-flex;flex-direction:column;gap:2px;min-width:0}.table.compact-table td .cell-primary{font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}.table.compact-table td .cell-secondary{font-size:11px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.table.compact-table td .badge{padding:.24rem .55rem;font-size:11px}.table.compact-table td .btn-secondary{padding:.45rem .75rem;min-height:34px;white-space:nowrap}.app-ids-shell{min-height:calc(100vh - 48px);padding:0;background:transparent;overflow:hidden}.app-ids-panel{position:relative;padding:18px;color:var(--text);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.92)),radial-gradient(circle at top right,rgba(37,99,235,.06),transparent 38%);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}.app-ids-panel::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(148,163,184,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.08) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.1) 40%,rgba(0,0,0,0) 100%);pointer-events:none}.app-ids-panel>*{position:relative;z-index:1}.app-ids-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}.app-ids-heading{display:flex;align-items:center;gap:14px}.app-ids-mark{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#2563eb;background:#dbeafe;border:1px solid #bfdbfe;box-shadow:none}.app-ids-kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:800}.app-ids-title{margin:4px 0 0;font-size:22px;line-height:1.1;color:var(--text)}.app-ids-create{display:inline-flex;align-items:center;gap:10px;padding:.88rem 1.15rem;border-radius:14px;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--primary),#4f46e5);box-shadow:0 10px 30px rgba(37,99,235,.18);border:1px solid rgba(37,99,235,.08)}.app-ids-create:hover{filter:brightness(1.05);transform:translateY(-1px)}.app-ids-empty{padding:18px;border-radius:18px;border:1px solid var(--border);background:var(--subtle);color:var(--muted)}.app-ids-table-wrap{overflow-x:auto;border-radius:20px;border:1px solid var(--border);background:rgba(255,255,255,.95);backdrop-filter:blur(12px)}.app-ids-table{color:var(--text);background:#fff;border:0}.app-ids-table th,.app-ids-table td{border-bottom:1px solid #eef2f7}.app-ids-table th{background:#fbfcfe;color:var(--muted)}.app-ids-table tr:last-child td{border-bottom:0}.app-ids-table .badge{border:0;backdrop-filter:none}.app-ids-table .badge-active{color:#34d399;background:#dcfce7}.app-ids-table .badge-expired{color:#f59e0b;background:#ffedd5}.app-ids-table .badge-revoked{color:#f87171;background:#fee2e2}.app-ids-table .badge-muted{color:var(--muted);background:#f3f4f6}.app-ids-table .cell-primary{color:var(--text)}.app-ids-table .cell-secondary{color:var(--muted)}.app-id-pill{display:flex;align-items:center;gap:12px}.app-id-pill-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#2563eb;background:#dbeafe;border:1px solid #bfdbfe;flex:0 0 auto}.app-id-pill-copy{min-width:0}.app-ids-created{color:var(--muted)}.app-ids-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.app-ids-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:.48rem .78rem;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--text);font-weight:700;cursor:pointer}.app-ids-action:hover{filter:brightness(1.06);transform:translateY(-1px)}.app-ids-action-copy{color:#2563eb}.app-ids-action-primary{color:#0f766e}.app-ids-action-warn{color:#d97706}.app-ids-action-ghost{color:#7c3aed}.app-ids-action-danger{color:#dc2626}.app-ids-action-warning{color:#d97706}.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .7rem;border-radius:var(--radius);font-size:12px;font-weight:700;text-transform:uppercase}.badge::before{content:"";width:.45rem;height:.45rem;border-radius:var(--radius);background:currentColor;opacity:.9}.badge-active{color:var(--success);background:#dcfce7}.badge-unused{color:#2563eb;background:#dbeafe}.badge-expired{color:var(--warning);background:#ffedd5}.badge-revoked,.badge-failed{color:var(--danger);background:#fee2e2}.badge-success{color:var(--success);background:#dcfce7}.badge-muted{color:var(--muted);background:#f3f4f6}.code-box{background:var(--subtle);border:1px solid var(--border);border-radius:var(--radius);padding:14px;font-family:ui-monospace,SFMono-Regular,"JetBrains Mono",monospace;overflow:auto}.code-box{background:linear-gradient(180deg,rgba(248,250,252,.92),rgba(241,245,249,.9));box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}.copy-box-head,.copy-field{display:flex;align-items:center;gap:10px}.copy-field{width:100%;justify-content:space-between;padding:12px 14px;border:1px solid var(--border);border-radius:18px;background:rgba(248,250,252,.82);flex-wrap:nowrap}.copy-field .copy-field-value{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.copy-box-head{justify-content:space-between;margin-bottom:6px}.copy-field-label-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.copy-field.copy-field-compact{padding:10px 12px}.copy-field.copy-field-compact .copy-field-value{font-size:14px !important}.mono{font-family:ui-monospace,SFMono-Regular,"JetBrains Mono",monospace}.center-stage{min-height:calc(100vh - 88px);display:grid;place-items:center;padding:10px 0 24px;position:relative}.center-stage::before,.center-stage::after{content:"";position:absolute;inset:auto;width:360px;height:360px;border-radius:999px;filter:blur(18px);opacity:.22;pointer-events:none;z-index:0}.center-stage::before{top:-60px;right:10%;background:radial-gradient(circle at center,#2563eb,transparent 68%)}.center-stage::after{left:5%;bottom:0;background:radial-gradient(circle at center,#8b5cf6,transparent 68%)}.center-stage-card{width:min(100%,980px);position:relative;z-index:1;border:1px solid rgba(37,99,235,.12);background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.98)),radial-gradient(circle at top right,rgba(37,99,235,.08),transparent 40%);box-shadow:var(--shadow-strong);overflow:hidden;border-radius:24px}.center-stage-card::before{content:"";display:block;height:4px;background:linear-gradient(90deg,#2563eb,#0ea5e9,#8b5cf6)}.form-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}.form-panel{display:grid;gap:16px;background:rgba(248,250,252,.7);border:1px solid var(--border);border-radius:18px;padding:16px}.form-preview{display:grid;gap:10px;align-content:start}.preview-display{padding:18px;border:1px dashed rgba(37,99,235,.25);background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(139,92,246,.06));border-radius:18px}.centered-form-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}.centered-form-grid .full{grid-column:1 / -1}.centered-form-grid .actions{grid-column:1 / -1;display:flex;gap:10px;flex-wrap:wrap}.modal-screen{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.38);backdrop-filter:blur(10px);animation:modalBackdropIn .16s ease-out both}.modal-screen[hidden]{display:none !important}.modal-screen .center-stage-card{max-height:calc(100vh - 40px);overflow:auto;animation:modalCardIn .18s ease-out both;will-change:transform,opacity;border-radius:24px}.modal-close{position:absolute;top:16px;right:16px;width:42px;height:42px;padding:0;border:1px solid var(--border);background:rgba(255,255,255,.92);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow)}.modal-close:hover{background:#fff}.modal-screen .form-panel,.modal-screen .preview-display{transform:translateZ(0)}.modal-screen .input,.modal-screen .select,.modal-screen .textarea,.modal-screen .btn-secondary,.modal-screen .btn-primary{will-change:auto}.page-fade{animation:fadeIn .22s ease-out}@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalCardIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.toast{position:fixed;right:20px;bottom:20px;z-index:60;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow);animation:toastIn .2s ease-out}.toast{border-radius:18px;backdrop-filter:blur(14px)}@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.sidebar .menu-item{display:flex;align-items:center;gap:.75rem;padding:.8rem .85rem;border-radius:18px;color:var(--muted);position:relative;overflow:hidden}.sidebar .menu-item::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(124,58,237,.06));opacity:0;transition:opacity .18s ease}.sidebar .menu-item>*{position:relative;z-index:1}.sidebar .menu-item.active,.sidebar .menu-item:hover{background:rgba(248,250,252,.92);color:var(--text);border-color:rgba(203,213,225,.8)}.sidebar .menu-item.active::before,.sidebar .menu-item:hover::before{opacity:1}.sidebar .menu-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:15px}.sidebar-close{display:none}.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:4px}.sidebar-nav{display:grid;gap:8px;flex:1 1 auto}.sidebar-footer{margin-top:auto;padding-top:18px}.menu-toggle{display:none;width:46px;height:46px;padding:0;border-radius:14px}.menu-bars{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:18px;height:18px}.menu-bars span{display:block;width:18px;height:2px;border-radius:0;background:currentColor}.avatar-card{display:flex;gap:.75rem;align-items:center;padding:14px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(135deg,#fff,#eff6ff)}.avatar-badge{width:56px;height:56px;border-radius:var(--radius);padding:2px;background:linear-gradient(135deg,#2563eb,#6366f1,#8b5cf6)}.avatar-badge>span{display:flex;width:100%;height:100%;border-radius:var(--radius);background:#fff;align-items:center;justify-content:center;color:#2563eb;font-size:20px;font-weight:800}.layout-wrap{display:flex;min-height:100vh}.main-col{flex:1;min-width:0}.topbar-inner{display:flex;align-items:center;gap:16px;padding:16px 24px}.search{width:min(420px,100%)}.muted{color:var(--muted)}.mobile-only{display:none}.desktop-only{display:block}@media (max-width:1024px){.menu-toggle{display:inline-flex}.sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);z-index:50}.sidebar.open{transform:translateX(0)}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3,.grid-2{grid-template-columns:1fr}.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.keys-filter-grid{grid-template-columns:1fr}.keys-copy-btn{min-width:0;width:100%}.mobile-only{display:inline-flex}.desktop-only{display:none !important}.search{display:none}.topbar-inner{gap:10px;padding:14px 16px}.container{padding:16px}.layout-wrap{display:block}.main-col{min-width:0}.hidden-mobile{display:none !important}.topbar-inner>div[style*="flex:1"]{min-width:0}.topbar-inner>div[style*="flex:1"]>div:first-child{display:none}.sidebar-close{display:inline-flex}.menu-toggle{width:44px;height:44px}.action-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.action-group .input{width:100%}.action-group .btn-secondary{width:100%}.app-ids-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.app-ids-action{width:100%}}@media (max-width:640px){.dashboard-stats{grid-template-columns:1fr}.keys-hero{gap:12px}.center-stage{min-height:auto;padding:0 0 16px}.centered-form-grid{grid-template-columns:1fr}.modal-screen{padding:0}.modal-screen .center-stage-card{max-height:100vh;height:100vh;border-radius:24px}.modal-screen .center-stage-card{animation-duration:.14s}.app-ids-panel{padding:18px}.app-ids-panel-head{align-items:stretch}.app-ids-create{width:100%;justify-content:center}.app-ids-actions{grid-template-columns:1fr}}.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at top left,rgba(37,99,235,.08),transparent 32%),radial-gradient(circle at bottom right,rgba(124,58,237,.08),transparent 30%),linear-gradient(180deg,#f8fafc 0%,#eef2ff 100%)}.login-card{position:relative;overflow:hidden;box-shadow:var(--shadow-strong)}.customer-login-card{width:min(100%,460px);padding:28px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.94));border:1px solid rgba(148,163,184,.25)}.login-card-top{display:flex;align-items:center;gap:14px;margin-bottom:22px}.login-mark{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-weight:900;font-size:20px;color:#fff;background:linear-gradient(135deg,#2563eb,#7c3aed);box-shadow:0 18px 36px rgba(37,99,235,.24)}.login-title{margin:4px 0 0;font-size:30px;line-height:1.1;letter-spacing:-.03em}.auth-form{display:grid;gap:14px}.auth-field{display:grid;gap:7px}.auth-field label{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.btn-block{width:100%;min-height:48px}.login-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(37,99,235,.08),transparent 32%),radial-gradient(circle at bottom left,rgba(124,58,237,.06),transparent 28%);pointer-events:none}.login-card>*{position:relative;z-index:1}