/* ═══════════════════════════════════════════════════════════════
   PAKSA LICENSING PLATFORM — DESIGN SYSTEM v2.0
   Enterprise-grade UI comparable to Stripe/Azure/GitHub
   ═══════════════════════════════════════════════════════════════ */

/* ─── CSS Variables (Theme Tokens) ─── */
:root {
  --primary: #0F4C81;
  --primary-hover: #0D3F6E;
  --primary-light: #EBF4FF;
  --secondary: #1E88E5;
  --success: #2E7D32;
  --success-light: #E8F5E9;
  --warning: #ED6C02;
  --warning-light: #FFF3E0;
  --danger: #D32F2F;
  --danger-light: #FFEBEE;
  --info: #0288D1;
  --info-light: #E1F5FE;

  --bg: #F5F7FA;
  --bg-card: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --bg-header: #FFFFFF;
  --bg-hover: #F0F4F8;
  --bg-active: #EBF4FF;

  --text-primary: #1A1A2E;
  --text-secondary: #5F6B7A;
  --text-muted: #8E99A4;
  --text-inverse: #FFFFFF;

  --border: #E3E8EF;
  --border-hover: #CBD5E1;
  --border-focus: #1E88E5;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --sidebar-w: 256px;
  --header-h: 56px;
  --font: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --transition: 0.15s ease;

  /* Aliases */
  --bg-2: #F0F4F8;
  --c-primary: var(--primary);
}

/* ─── Dark Theme ─── */
[data-theme="dark"] {
  --bg: #0D1117;
  --bg-card: #161B22;
  --bg-sidebar: #0D1117;
  --bg-header: #161B22;
  --bg-hover: #21262D;
  --bg-active: #1C2D41;
  --bg-2: #1C2333;
  --text-primary: #E6EDF3;
  --text-secondary: #8B949E;
  --text-muted: #6E7681;
  --border: #30363D;
  --border-hover: #484F58;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.4);
  --primary-light: #1C2D41;
  --success-light: #0D2818;
  --warning-light: #2D1B00;
  --danger-light: #2D0F0F;
  --info-light: #0D2233;
}

/* ─── Reset ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text-primary);line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--secondary);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--primary);text-decoration:underline}
img{max-width:100%;display:block}

/* ─── Typography ─── */
.t-page{font-size:2.25rem;font-weight:700;color:var(--text-primary);letter-spacing:-0.025em;line-height:1.2}
.t-section{font-size:1.5rem;font-weight:600;color:var(--text-primary);letter-spacing:-0.01em}
.t-card{font-size:1.05rem;font-weight:600;color:var(--text-primary)}
.t-body{font-size:1rem;color:var(--text-secondary);line-height:1.7}
.t-caption{font-size:0.875rem;color:var(--text-muted);line-height:1.5}
.t-mono{font-family:var(--mono);font-size:0.875rem}
.t-center{text-align:center}
.t-right{text-align:right}

/* ─── App Shell ─── */
.shell{display:flex;min-height:100vh;overflow-x:hidden}

/* ─── Sidebar ─── */
.sidebar{width:var(--sidebar-w);background:var(--bg-sidebar);border-right:1px solid var(--border);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;z-index:50;transition:transform 0.2s ease;overflow:hidden}
.sidebar-brand{height:var(--header-h);padding:0 1.25rem;display:flex;align-items:center;gap:0.6rem;border-bottom:1px solid var(--border);flex-shrink:0}
.sidebar-brand-icon{width:28px;height:28px;background:var(--primary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:white;font-size:0.85rem;font-weight:700}
.sidebar-brand-text{font-weight:700;font-size:0.95rem;color:var(--text-primary)}
.sidebar-search{padding:0.75rem 1rem;flex-shrink:0}
.sidebar-search input{width:100%;padding:0.45rem 0.75rem;font-size:0.8rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);outline:none;transition:all var(--transition)}
.sidebar-search input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(30,136,229,0.08)}
.sidebar-search input::placeholder{color:var(--text-muted)}
.sidebar-nav{flex:1;overflow-y:auto;padding:0.25rem 0}
.sidebar-nav::-webkit-scrollbar{width:4px}
.sidebar-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.nav-group{padding:1rem 1rem 0.25rem;font-size:0.65rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted)}
.nav-item{display:flex;align-items:center;gap:0.6rem;padding:0.5rem 1rem;margin:0 0.5rem;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:0.84rem;transition:all var(--transition);cursor:pointer;text-decoration:none;border:1px solid transparent}
.nav-item:hover{background:var(--bg-hover);color:var(--text-primary);text-decoration:none}
.nav-item.active{background:var(--bg-active);color:var(--primary);font-weight:600;border-left:3px solid var(--primary);padding-left:calc(1rem - 3px)}
.nav-item .ni{width:18px;text-align:center;font-size:1rem;flex-shrink:0}
.sidebar-foot{padding:1rem 1.25rem;border-top:1px solid var(--border);flex-shrink:0}
.sidebar-foot p{font-size:0.7rem;color:var(--text-muted);line-height:1.6}

/* ─── Main ─── */
.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;min-width:0;overflow-x:hidden}

/* ─── Header ─── */
.header{height:var(--header-h);background:var(--bg-header);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;position:sticky;top:0;z-index:40}
.header-left{display:flex;align-items:center;gap:0.75rem}
.header-burger{display:none;width:32px;height:32px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--text-secondary);font-size:1.2rem;cursor:pointer}
.breadcrumb{font-size:0.8rem;color:var(--text-muted)}
.breadcrumb a{color:var(--text-secondary)}
.breadcrumb a:hover{color:var(--primary);text-decoration:none}
.breadcrumb .sep{margin:0 0.4rem;color:var(--border)}
.header-right{display:flex;align-items:center;gap:0.75rem}
.header-search{position:relative}
.header-search input{padding:0.4rem 0.75rem 0.4rem 2rem;border:1px solid var(--border);border-radius:var(--radius);font-size:0.8rem;width:200px;background:var(--bg);color:var(--text-primary);outline:none;transition:all 0.2s}
.header-search input:focus{width:280px;border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(30,136,229,0.08)}
.header-search::before{content:"⌕";position:absolute;left:0.7rem;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:0.85rem}
.hdr-icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);font-size:1rem;transition:all var(--transition);border:1px solid transparent}
.hdr-icon:hover{background:var(--bg-hover);border-color:var(--border)}
.hdr-avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:600;cursor:pointer}

/* ─── Page ─── */
.page{flex:1;padding:1.75rem 2rem;width:100%;min-width:0;overflow-x:hidden}
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.75rem;flex-wrap:wrap;gap:0.75rem}
.page-head h1{font-size:1.5rem;font-weight:700;color:var(--text-primary)}
.page-actions{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap}

/* ─── Cards ─── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);transition:box-shadow var(--transition),border-color var(--transition);margin-bottom:1.25rem}
.card:hover{box-shadow:var(--shadow)}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:0.75rem;border-bottom:1px solid var(--border)}
.card-title{font-size:1.05rem;font-weight:600;color:var(--text-primary)}

/* ─── Stats Grid ─── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:1.75rem}
.stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;box-shadow:var(--shadow-sm)}
.stat-val{font-size:1.75rem;font-weight:700;color:var(--text-primary);line-height:1.2}
.stat-lbl{font-size:0.78rem;color:var(--text-muted);margin-top:0.3rem}
.stat-trend{font-size:0.72rem;margin-top:0.4rem;font-weight:500}
.stat-up{color:var(--success)}
.stat-down{color:var(--danger)}
.stat-warn{color:var(--warning)}

/* ─── Tables ─── */
.tbl-wrap{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;overflow-x:auto;background:var(--bg-card)}
.tbl-bar{display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1rem;border-bottom:1px solid var(--border);gap:0.75rem;flex-wrap:wrap}
.tbl-bar input{padding:0.4rem 0.75rem;border:1px solid var(--border);border-radius:var(--radius);font-size:0.8rem;width:220px;background:var(--bg);color:var(--text-primary);outline:none}
.tbl-bar input:focus{border-color:var(--border-focus)}
table{width:100%;border-collapse:collapse;min-width:600px}
thead{background:var(--bg)}
th{padding:0.65rem 0.85rem;text-align:left;font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:0.65rem 0.85rem;font-size:0.84rem;color:var(--text-secondary);border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--bg-hover)}
.tbl-foot{display:flex;justify-content:space-between;align-items:center;padding:0.6rem 1rem;border-top:1px solid var(--border);font-size:0.78rem;color:var(--text-muted)}
.td-actions{display:flex;gap:0.35rem;align-items:center;flex-wrap:nowrap}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.6rem 1.25rem;border-radius:var(--radius);font-size:0.95rem;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all var(--transition);text-decoration:none;white-space:nowrap;line-height:1.4}
.btn:hover{text-decoration:none}
.btn-p{background:var(--primary);color:white;border-color:var(--primary)}.btn-p:hover{background:var(--primary-hover);box-shadow:var(--shadow-md)}
.btn-s{background:var(--bg-card);color:var(--text-primary);border-color:var(--border)}.btn-s:hover{border-color:var(--border-hover);background:var(--bg)}
.btn-d{background:var(--danger);color:white}.btn-d:hover{opacity:0.9}
.btn-g{background:transparent;color:var(--text-secondary)}.btn-g:hover{background:var(--bg-hover);color:var(--text-primary)}
.btn-sm{padding:0.4rem 0.8rem;font-size:0.85rem}
.btn-lg{padding:0.75rem 1.5rem;font-size:1.05rem}
.btn-block{width:100%}
.btn:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}

/* ─── Badges ─── */
.badge{display:inline-flex;align-items:center;padding:0.2rem 0.65rem;border-radius:50px;font-size:0.75rem;font-weight:600;line-height:1.4;white-space:nowrap}
.b-ok{background:var(--success-light);color:var(--success)}
.b-err{background:var(--danger-light);color:var(--danger)}
.b-warn{background:var(--warning-light);color:var(--warning)}
.b-info{background:var(--info-light);color:var(--info)}
.b-mute{background:var(--bg);color:var(--text-muted)}

/* ─── Alerts ─── */
.alert{padding:0.85rem 1.15rem;border-radius:var(--radius);font-size:0.95rem;margin-bottom:1rem;border:1px solid}
.a-ok{background:var(--success-light);color:var(--success);border-color:#A5D6A7}
.a-err{background:var(--danger-light);color:var(--danger);border-color:#EF9A9A}
.a-warn{background:var(--warning-light);color:var(--warning);border-color:#FFCC80}
.a-info{background:var(--info-light);color:var(--info);border-color:#81D4FA}

/* ─── Forms ─── */
.fg{margin-bottom:1.15rem}
.fg label{display:block;font-size:0.78rem;font-weight:500;color:var(--text-primary);margin-bottom:0.35rem;letter-spacing:0.01em}
.fg label .req{color:var(--danger);margin-left:2px}
.fg .help{font-size:0.72rem;color:var(--text-muted);margin-top:0.3rem}
.fg .err{font-size:0.72rem;color:var(--danger);margin-top:0.3rem}
.fc{width:100%;padding:0.55rem 0.85rem;border:1px solid var(--border);border-radius:var(--radius);font-size:0.84rem;color:var(--text-primary);background:var(--bg-card);outline:none;transition:border-color var(--transition),box-shadow var(--transition)}
.fc:hover{border-color:var(--border-hover)}
.fc:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(30,136,229,0.08)}
.fc:disabled{opacity:0.6;background:var(--bg);cursor:not-allowed}
.fc-err{border-color:var(--danger)}
.fc-err:focus{box-shadow:0 0 0 3px rgba(211,47,47,0.08)}
.fc::placeholder{color:var(--text-muted)}
select.fc{appearance:none;padding-right:2rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235F6B7A' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.6rem center}
textarea.fc{resize:vertical;min-height:80px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.form-section{font-size:0.82rem;font-weight:600;color:var(--text-primary);padding-bottom:0.5rem;border-bottom:1px solid var(--border);margin:1.5rem 0 1rem}
.form-hint{font-size:0.72rem;color:var(--text-muted);margin-top:0.25rem}
.form-check{display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;color:var(--text-secondary);cursor:pointer}
.form-check input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}
.input-group{display:flex;gap:0}
.input-group .fc{border-radius:0}
.input-group .fc:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.input-group .fc:last-child{border-radius:0 var(--radius) var(--radius) 0}
.input-group .btn{border-radius:0 var(--radius) var(--radius) 0;white-space:nowrap}

/* ─── Modal ─── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:200;animation:fadeIn 0.12s ease}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.75rem;width:100%;max-width:520px;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:slideUp 0.15s ease}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}
.modal-head h2{font-size:1.1rem;font-weight:600}
.modal-x{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);border:none;background:transparent;font-size:1.1rem}
.modal-x:hover{background:var(--bg-hover)}
.modal-foot{display:flex;justify-content:flex-end;gap:0.5rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border)}

/* ─── Empty State ─── */
.empty{text-align:center;padding:3rem 1.5rem}
.empty-icon{font-size:2.5rem;margin-bottom:0.75rem;opacity:0.35}
.empty h3{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:0.4rem}
.empty p{font-size:0.84rem;color:var(--text-muted);max-width:300px;margin:0 auto 1rem}

/* ─── Loading ─── */
.skeleton{background:linear-gradient(90deg,var(--border) 25%,var(--bg) 50%,var(--border) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius);height:1rem}
.spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 0.5s linear infinite;display:inline-block}

/* ─── Tabs ─── */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1.5rem}
.tab{padding:0.6rem 1rem;font-size:0.84rem;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--transition);font-weight:500}
.tab:hover{color:var(--text-primary)}
.tab.on{color:var(--primary);border-bottom-color:var(--primary)}

/* ─── Auth Page ─── */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);padding:1rem}

/* ─── Hero Section (Global) ─── */
.hero{position:relative;padding:10rem 2rem 5rem;text-align:center;overflow:hidden;background:linear-gradient(165deg, #F8FAFF 0%, #EBF4FF 40%, #F5F7FA 100%)}
[data-theme="dark"] .hero{background:linear-gradient(165deg, #0D1117 0%, #1C2D41 40%, #0D1117 100%)}
.hero::before{content:'';position:absolute;top:-50%;left:-10%;width:120%;height:200%;background:radial-gradient(ellipse at 50% 0%, rgba(15,76,129,0.06) 0%, transparent 60%);pointer-events:none}
.hero-inner{position:relative;max-width:850px;margin:0 auto;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:50px;font-size:0.88rem;font-weight:500;color:var(--primary);margin-bottom:2rem;box-shadow:var(--shadow-sm)}
.hero-title{font-size:clamp(2.5rem,6vw,4.2rem);font-weight:800;line-height:1.1;letter-spacing:-0.03em;color:var(--text-primary);margin:0}
.hero-highlight{background:linear-gradient(135deg, var(--primary), var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-top:0.1em}
.hero-desc{max-width:680px;margin:1.75rem auto 0;font-size:1.2rem;line-height:1.8;color:var(--text-secondary)}
.hero-sub{max-width:600px;margin:1rem auto 0;font-size:0.95rem;color:var(--text-muted);letter-spacing:0.01em}
.hero-actions{margin-top:2.5rem;display:flex;justify-content:center;gap:0.75rem;flex-wrap:wrap}
@media(max-width:768px){.hero{padding:8rem 1.5rem 3.5rem}.hero-title{font-size:2.2rem}.hero-desc{font-size:1.05rem}}
@media(max-width:480px){.hero{padding:7rem 1rem 3rem}.hero-title{font-size:1.8rem}.hero-desc{font-size:1rem}.hero-actions{flex-direction:column;align-items:center}}

/* ─── Public Footer ─── */
.pub-footer{background:var(--bg-card);border-top:1px solid var(--border);margin-top:4rem}
.pub-footer-top{padding:4rem 2rem 3rem}
.pub-footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem}
.pub-footer-brand{display:flex;flex-direction:column;gap:1rem}
.pub-footer-logo{display:flex;align-items:center;gap:0.6rem;text-decoration:none;font-weight:700;font-size:1.1rem;color:var(--text-primary)}
.pub-footer-logo:hover{text-decoration:none;color:var(--primary)}
.pub-footer-brand p{font-size:0.9rem;color:var(--text-secondary);line-height:1.7;max-width:280px}
.pub-footer-contact{display:flex;flex-direction:column;gap:0.5rem}
.pub-footer-contact a{display:flex;align-items:center;gap:0.5rem;font-size:0.88rem;color:var(--text-secondary);text-decoration:none;transition:color var(--transition)}
.pub-footer-contact a:hover{color:var(--primary);text-decoration:none}
.pub-footer-col h4{font-size:0.85rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-primary);margin-bottom:1.25rem}
.pub-footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.6rem}
.pub-footer-col ul li a{font-size:0.9rem;color:var(--text-secondary);text-decoration:none;transition:color var(--transition)}
.pub-footer-col ul li a:hover{color:var(--primary);text-decoration:none}
.pub-footer-bottom{border-top:1px solid var(--border);padding:1.25rem 2rem}
.pub-footer-bottom-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.pub-footer-bottom-inner span{font-size:0.85rem;color:var(--text-muted)}
.pub-footer-bottom-inner a{color:var(--text-secondary)}
.pub-footer-bottom-inner a:hover{color:var(--primary)}
.pub-footer-badges{display:flex;gap:0.5rem;flex-wrap:wrap}
.pub-footer-badge{padding:0.25rem 0.65rem;background:var(--bg);border:1px solid var(--border);border-radius:50px;font-size:0.75rem;color:var(--text-muted);font-weight:500}
@media(max-width:1024px){.pub-footer-inner{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:640px){.pub-footer-inner{grid-template-columns:1fr;gap:2rem}.pub-footer-top{padding:2.5rem 1.5rem 2rem}.pub-footer-bottom-inner{flex-direction:column;text-align:center}}

/* ─── Phase 14.5 – Activation Wizard ─── */
.act-wizard{max-width:720px;margin:0 auto}
.wizard-steps{display:flex;align-items:center;justify-content:center;margin-bottom:2.5rem;gap:0}
.wizard-step{display:flex;flex-direction:column;align-items:center;gap:0.4rem}
.ws-num{width:36px;height:36px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:0.85rem;font-weight:600;color:var(--text-muted);background:var(--bg-card);transition:all 0.2s}
.wizard-step.active .ws-num{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
.wizard-step.done .ws-num{border-color:var(--success);color:white;background:var(--success)}
.ws-label{font-size:0.75rem;color:var(--text-muted);font-weight:500;white-space:nowrap}
.wizard-step.active .ws-label{color:var(--primary);font-weight:600}
.wizard-connector{flex:1;height:2px;background:var(--border);min-width:40px;transition:background 0.2s}
.wizard-connector.done{background:var(--success)}
.act-card{text-align:center;padding:2.5rem 2rem}
.act-icon{font-size:3rem;margin-bottom:1rem}
.act-title{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:0.5rem}
.act-desc{font-size:0.95rem;color:var(--text-secondary);max-width:480px;margin:0 auto}
.act-actions{display:flex;justify-content:center;gap:0.75rem;margin-top:1.75rem;flex-wrap:wrap}
.act-hint{font-size:0.82rem;color:var(--text-muted);margin-top:1rem}
.act-success{border-color:var(--success)!important}
.act-progress{display:flex;flex-direction:column;gap:0.5rem;max-width:300px;margin:1.5rem auto 0;text-align:left}
.act-progress-item{font-size:0.85rem;color:var(--text-muted);padding:0.35rem 0;opacity:0.35;transition:opacity 0.3s}
.act-progress-item.done{color:var(--success);opacity:1}
.lic-summary{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;margin:1.5rem auto 0;max-width:480px;text-align:left}
.lic-row{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0;border-bottom:1px solid var(--border);font-size:0.88rem}
.lic-row:last-child{border-bottom:none}
.lic-row span:first-child{color:var(--text-muted);font-size:0.82rem}

/* ─── Offline Steps ─── */
.offline-steps{display:flex;flex-direction:column;gap:0}
.offline-step{display:flex;gap:1.25rem;padding:1.5rem 0;border-bottom:1px solid var(--border)}
.offline-step:last-child{border-bottom:none}
.os-num{width:32px;height:32px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.9rem;flex-shrink:0;margin-top:0.1rem}
.os-body h4{font-size:1rem;font-weight:600;margin-bottom:0.35rem}
.os-body p{font-size:0.88rem;color:var(--text-secondary)}
.os-body{flex:1}

/* ─── License Health Cards ─── */
.lic-health-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.25rem;margin-bottom:1.25rem}
.lic-health-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm);transition:box-shadow var(--transition)}
.lic-health-card:hover{box-shadow:var(--shadow-md)}
.lic-health-card.expiring{border-color:#FFCC80;background:#FFFDF5}
.lic-health-card.expired{border-color:#EF9A9A;background:#FFF5F5}
[data-theme="dark"] .lic-health-card.expiring{background:var(--warning-light);border-color:#7A4F00}
[data-theme="dark"] .lic-health-card.expired{background:var(--danger-light);border-color:#7A1F1F}
.lhc-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}
.lhc-product{font-size:1.05rem;font-weight:700;color:var(--text-primary)}
.lhc-key{font-size:0.75rem;color:var(--text-muted);margin-top:0.2rem}
.lhc-meta{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:1rem}
.lhc-meta-item{display:flex;flex-direction:column;gap:0.2rem}
.lhc-meta-label{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);font-weight:600}
.lhc-meta-val{font-size:0.88rem;font-weight:500;color:var(--text-primary)}
.lhc-features{display:flex;flex-wrap:wrap;gap:0.35rem;margin-bottom:1rem}
.lhc-actions{display:flex;gap:0.5rem;flex-wrap:wrap;padding-top:0.75rem;border-top:1px solid var(--border)}

/* ─── Machine Cards ─── */
.machine-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;padding:0.25rem}
.machine-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;transition:box-shadow var(--transition)}
.machine-card:hover{box-shadow:var(--shadow-md)}
.mc-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem}
.mc-icon{font-size:1.75rem;flex-shrink:0}
.mc-name{font-size:0.95rem;font-weight:600;color:var(--text-primary)}
.mc-os{margin-top:0.1rem}
.mc-meta{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem 1rem;margin-bottom:1rem;font-size:0.82rem}
.mc-meta div{display:flex;flex-direction:column;gap:0.1rem}
.mc-actions{display:flex;gap:0.5rem;flex-wrap:wrap;padding-top:0.75rem;border-top:1px solid var(--border)}

/* ─── Renewal List ─── */
.renewal-list{display:flex;flex-direction:column;gap:0}
.renewal-item{display:flex;align-items:center;gap:1.5rem;padding:1.25rem 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.renewal-item:last-child{border-bottom:none}
.renewal-item.critical{background:var(--warning-light);margin:0 -1.75rem;padding:1.25rem 1.75rem;border-radius:0}
.renewal-item.urgent{background:var(--danger-light);margin:0 -1.75rem;padding:1.25rem 1.75rem;border-radius:0}
.ri-info{flex:1;min-width:200px}
.ri-product{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:0.35rem}
.ri-meta{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
.ri-expiry{text-align:center;min-width:120px}
.ri-days{font-size:1.1rem;font-weight:700}
.ri-actions{display:flex;gap:0.5rem;flex-wrap:wrap}

/* ─── Health Dashboard ─── */
.health-list{display:flex;flex-direction:column;gap:0}
.health-row{display:flex;align-items:center;gap:1rem;padding:0.85rem 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.health-row:last-child{border-bottom:none}
.hr-status{flex-shrink:0}
.hr-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot-ok{background:var(--success)}
.dot-warn{background:var(--warning)}
.dot-err{background:var(--danger)}
.hr-info{flex:1;min-width:180px}
.hr-product{font-size:0.9rem;font-weight:600;display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap}
.hr-key{margin-top:0.15rem}
.hr-meta{display:flex;flex-direction:column;gap:0.1rem;min-width:120px}
.hr-expiry{text-align:center;min-width:100px}
.hr-action{flex-shrink:0}

@media(max-width:768px){
  .lic-health-grid{grid-template-columns:1fr}
  .machine-grid{grid-template-columns:1fr}
  .renewal-item{flex-direction:column;align-items:flex-start}
  .health-row{gap:0.5rem}
  .hr-meta{display:none}
  .act-card{padding:1.5rem 1rem}
  .wizard-steps{gap:0}
  .wizard-connector{min-width:20px}
}

/* ─── Landing ─── */
.land-nav{position:fixed;top:0;width:100%;background:var(--bg-header);border-bottom:1px solid var(--border);z-index:100;padding:0 3rem;height:var(--header-h);display:flex;align-items:center;justify-content:space-between}
.land-nav-brand{font-weight:700;font-size:1.1rem;color:var(--text-primary);display:flex;align-items:center;gap:0.5rem;text-decoration:none}
.land-nav-brand:hover{text-decoration:none;color:var(--primary)}
.land-nav-links{display:flex;align-items:center;gap:1.5rem}
.land-nav-links a{color:var(--text-secondary);font-size:0.92rem}
.land-hero{padding:9rem 2rem 5rem;text-align:center;max-width:900px;margin:0 auto}
.land-hero h1{font-size:clamp(2.5rem,6vw,4rem);font-weight:800;line-height:1.1;margin-bottom:1.25rem}
.land-hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.land-stats{display:flex;justify-content:center;gap:3.5rem;margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--border)}
.land-stats div{text-align:center}
.land-stats strong{display:block;font-size:1.6rem;font-weight:700;color:var(--primary)}
.land-stats span{font-size:0.82rem;color:var(--text-muted)}
.land-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.25rem;max-width:1200px;margin:0 auto;padding:0 2rem 4rem}
.land-foot{text-align:center;padding:2.5rem;border-top:1px solid var(--border);font-size:0.85rem;color:var(--text-muted)}

/* ─── Utilities ─── */
.mt-xs{margin-top:0.25rem}.mt-sm{margin-top:0.5rem}.mt-md{margin-top:1rem}.mt-lg{margin-top:1.5rem}
.mb-xs{margin-bottom:0.25rem}.mb-sm{margin-bottom:0.5rem}.mb-md{margin-bottom:1rem}.mb-lg{margin-bottom:1.5rem}
.ml-xs{margin-left:0.25rem}.ml-sm{margin-left:0.5rem}
.gap-sm{gap:0.5rem}.gap-md{gap:1rem}
.flex{display:flex}.flex-col{flex-direction:column}.items-c{align-items:center}.justify-c{justify-content:center}
.w-full{width:100%}.max-w-sm{max-width:400px}.max-w-md{max-width:520px}
.t-muted{color:var(--text-muted)}
.t-mono{font-family:var(--mono);font-size:0.82rem}

/* ─── Feature List (Licenses modal) ─── */
.feature-list{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.5rem;padding:0.75rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);min-height:40px}
.feature-item{font-size:0.8rem;color:var(--text-secondary);padding:0.2rem 0.6rem;background:var(--bg-card);border:1px solid var(--border);border-radius:50px}

/* ─── Animations ─── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes toastProgress{from{width:100%}to{width:0%}}

/* ─── Focus & Accessibility ─── */
:focus-visible{outline:2px solid var(--secondary);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
[aria-hidden="true"]{display:none}

/* ─── Profile Menu ─── */
.header-right{position:relative}
.profile-menu{position:absolute;top:100%;right:0;margin-top:0.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:200px;padding:0.5rem 0;z-index:200;animation:slideUp 0.12s ease}
.profile-item{display:block;padding:0.5rem 1rem;font-size:0.82rem;color:var(--text-secondary);text-decoration:none;transition:background var(--transition)}
.profile-item:hover{background:var(--bg-hover);color:var(--text-primary);text-decoration:none}

/* ─── Responsive ─── */
@media(max-width:1024px){
  .sidebar{transform:translateX(-100%);z-index:100}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .main{margin-left:0}
  .header-burger{display:flex}
  .header-search input{width:140px}
  .header-search input:focus{width:180px}
  .land-hero{max-width:100%;padding:8rem 2rem 4rem}
  .land-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));padding:0 1.5rem 3rem}
  .form-row-3{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .land-hero h1{font-size:2.2rem}
  .land-stats{gap:1.5rem;flex-wrap:wrap}
  .land-stats strong{font-size:1.3rem}
  .land-nav{padding:0 1.5rem}
  .land-nav-links{gap:1rem}
  .land-nav-links a{font-size:0.84rem}
}
@media(max-width:640px){
  .page{padding:1rem 0.75rem}
  .stats{grid-template-columns:1fr 1fr}
  .form-row,.form-row-3{grid-template-columns:1fr}
  .page-head{flex-direction:column;align-items:flex-start;gap:0.75rem}
  .land-stats{gap:1.25rem}
  .land-nav-links{display:none}
  .land-hero{padding:7rem 1.25rem 3rem}
  .land-hero h1{font-size:1.8rem}
  .land-grid{grid-template-columns:1fr;padding:0 1rem 2rem}
  .modal{padding:1.25rem;border-radius:var(--radius-lg)}
  table{min-width:480px}
}
@media print{.sidebar,.header{display:none}.main{margin-left:0}}

/* ─── Global Responsive Overhaul ─── */

/* Inline grid helpers — used by Dashboard, Detail pages, Portal */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1.25rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.25rem}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1.25rem}

/* Tabs — horizontal scroll on overflow */
.tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex-shrink:0}

/* tbl-bar — search + filter row */
.tbl-bar{flex-wrap:wrap;gap:0.5rem}
.tbl-bar input{flex:1;min-width:140px}
.tbl-bar select{min-width:120px}

/* Modal — full-width on small screens */
.modal{width:calc(100% - 2rem);margin:1rem}

/* Stats — always at least 2 cols */
.stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

/* Revenue chart bar heights — use px not % */
.rev-bar-wrap{display:flex;align-items:flex-end;gap:6px;height:120px;padding:0.5rem 0}
.rev-bar{flex:1;background:var(--c-primary);border-radius:4px 4px 0 0;opacity:0.85;min-height:4px;transition:height 0.3s}

@media(max-width:1100px){
  .grid-4{grid-template-columns:1fr 1fr}
}

@media(max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  /* Page padding */
  .page{padding:1rem}
  /* Card padding */
  .card{padding:1.25rem}
  /* Stats 2-col */
  .stats{grid-template-columns:1fr 1fr}
  /* Page head stack */
  .page-head{flex-direction:column;align-items:flex-start}
  .page-actions{width:100%;flex-wrap:wrap}
  /* Header search hide on mobile */
  .header-search{display:none}
  /* Sidebar burger */
  .header-burger{display:flex}
}

@media(max-width:640px){
  .grid-4{grid-template-columns:1fr 1fr}
  /* Stats single col on very small */
  .stats{grid-template-columns:1fr 1fr}
  /* Modal full screen */
  .overlay{align-items:flex-end}
  .modal{width:100%;max-width:100%;border-radius:var(--radius-lg) var(--radius-lg) 0 0;margin:0;max-height:92vh}
  /* Table scroll */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:520px}
  /* Form rows single col */
  .form-row,.form-row-3{grid-template-columns:1fr}
  /* Tabs scroll */
  .tabs{gap:0}
  /* Buttons smaller */
  .btn{padding:0.5rem 0.9rem;font-size:0.88rem}
  .btn-sm{padding:0.35rem 0.65rem;font-size:0.78rem}
  /* Page head */
  .page-head h1{font-size:1.25rem}
  /* Card head stack */
  .card-head{flex-direction:column;align-items:flex-start;gap:0.5rem}
  /* tbl-bar full width inputs */
  .tbl-bar input,.tbl-bar select{width:100%;flex:unset}
  /* Stat values smaller */
  .stat-val{font-size:1.4rem}
  /* Hide less important table columns via utility */
  .hide-mobile{display:none!important}
}

@media(max-width:400px){
  .stats{grid-template-columns:1fr}
  .page{padding:0.75rem}
}