@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* Sinora Admin Dashboard - Styles */



      /* ===== THEME VARIABLES ===== */


      :root {


        --violet: #8B5CF6;


        --violet-glow: rgba(139, 92, 246, 0.35);


        --violet-light: rgba(139, 92, 246, 0.08);


        --violet-border: rgba(139, 92, 246, 0.2);


      }





      [data-theme="light"] {


        --bg-primary: #FAF8F5;


        --bg-secondary: #ffffff;


        --bg-tertiary: #F3F0EB;


        --bg-glass: rgba(255, 255, 255, 0.75);


        --bg-glass-strong: rgba(255, 255, 255, 0.9);


        --border-primary: rgba(139, 92, 246, 0.12);


        --border-secondary: #E7E2DC;


        --text-primary: #1C1917;


        --text-secondary: #57534E;


        --text-muted: #94a3b8;


        --shadow-card:


          0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(139, 92, 246, 0.06);


        --shadow-card-hover:


          0 8px 30px rgba(139, 92, 246, 0.12),


          0 0 0 1px rgba(139, 92, 246, 0.1);


        --dot-pattern: rgba(139, 92, 246, 0.07);


        --geometry-opacity: 0.03;


        --terminal-bg: #1C1917;


        --code-bg: #F3F0EB;


      }





      [data-theme="dark"] {


        --bg-primary: #171412;


        --bg-secondary: rgba(30, 27, 24, 0.9);


        --bg-tertiary: rgba(38, 34, 32, 0.7);


        --bg-glass: rgba(30, 27, 24, 0.75);


        --bg-glass-strong: rgba(30, 27, 24, 0.92);


        --border-primary: rgba(139, 92, 246, 0.15);


        --border-secondary: rgba(139, 92, 246, 0.1);


        --text-primary: #EDE8E3;


        --text-secondary: #A8A29E;


        --text-muted: #6B6560;


        --shadow-card:


          0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(139, 92, 246, 0.08);


        --shadow-card-hover:


          0 8px 30px rgba(139, 92, 246, 0.2),


          0 0 0 1px rgba(139, 92, 246, 0.15);


        --dot-pattern: rgba(139, 92, 246, 0.06);


        --geometry-opacity: 0.04;


        --terminal-bg: #171412;


        --code-bg: rgba(23, 20, 18, 0.8);


      }





      * {


        margin: 0;


        padding: 0;


        box-sizing: border-box;


      }


      body {


        font-family:


          "Inter",


          "Inter",


          -apple-system,


          BlinkMacSystemFont,


          system-ui,


          sans-serif;


        background: var(--bg-primary);


        background-image: radial-gradient(


          circle,


          var(--dot-pattern) 1px,


          transparent 1px


        );


        background-size: 24px 24px;


        color: var(--text-primary);


        font-size: 14px;


        line-height: 1.6;


        min-height: 100vh;


        transition:


          background-color 0.3s ease,


          color 0.3s ease;


      }





      /* Sacred geometry background overlay */


      body::before {


        content: "";


        position: fixed;


        top: -50%;


        right: -30%;


        width: 800px;


        height: 800px;


        background: radial-gradient(


          circle,


          var(--violet-glow) 0%,


          transparent 70%


        );


        opacity: var(--geometry-opacity);


        pointer-events: none;


        z-index: 0;


        animation: floatGlow 20s ease-in-out infinite;


      }


      body::after {


        content: "";


        position: fixed;


        bottom: -40%;


        left: -20%;


        width: 600px;


        height: 600px;


        background: radial-gradient(


          circle,


          rgba(78, 205, 196, 0.3) 0%,


          transparent 70%


        );


        opacity: var(--geometry-opacity);


        pointer-events: none;


        z-index: 0;


        animation: floatGlow 25s ease-in-out infinite reverse;


      }


      @keyframes floatGlow {


        0%,


        100% {


          transform: translate(0, 0);


        }


        50% {


          transform: translate(30px, -20px);


        }


      }





      @keyframes spin {


        to {


          transform: rotate(360deg);


        }


      }





      .app-layout {


        display: flex;


        min-height: 100vh;


      }





      .sidebar {


        width: 240px;


        background: var(--bg-glass-strong);


        backdrop-filter: blur(20px) saturate(180%);


        border-right: 1px solid var(--border-primary);


        color: var(--text-primary);


        display: flex;


        flex-direction: column;


        position: fixed;


        top: 0;


        left: 0;


        bottom: 0;


        z-index: 100;


        transition: transform 0.3s ease;


      }


      .sidebar-header {


        padding: 20px;


        display: flex;


        align-items: center;


        gap: 12px;


        border-bottom: 1px solid var(--border-secondary);


      }


      .sidebar-header img {


        height: 32px;


        width: auto;


        filter: drop-shadow(0 0 8px var(--violet-glow));


      }


      .sidebar-header h1 {


        font-family: "Inter", sans-serif;


        color: var(--violet);


        font-size: 11px;


        font-weight: 700;


        line-height: 1.3;


        letter-spacing: 0.5px;


      }


      .sidebar-nav {


        flex: 1;


        padding: 12px 0;


      }


      .nav-item {


        display: flex;


        align-items: center;


        gap: 12px;


        padding: 12px 20px;


        cursor: pointer;


        color: var(--text-secondary);


        font-size: 13px;


        font-weight: 500;


        transition: all 0.15s;


        border-left: 3px solid transparent;


      }


      .nav-item:hover {


        color: var(--text-primary);


        background: rgba(139, 92, 246, 0.06);


      }


      .nav-item.active {


        color: var(--violet);


        background: var(--violet-light);


        border-left-color: var(--violet);


      }


      .nav-item svg {


        width: 18px;


        height: 18px;


        flex-shrink: 0;


      }


      .nav-item .nav-label {


        font-family: "Inter", sans-serif;


      }


      .sidebar-footer {


        padding: 16px 20px;


        border-top: 1px solid var(--border-secondary);


      }


      .sidebar-footer .btn {


        width: 100%;


        justify-content: center;


        font-size: 11px;


        padding: 8px;


      }





      /* Theme toggle */


      .theme-toggle {


        display: flex;


        align-items: center;


        gap: 10px;


        padding: 10px 20px;


        cursor: pointer;


        font-size: 13px;


        color: var(--text-secondary);


        transition: all 0.2s;


        border-top: 1px solid var(--border-secondary);


        margin-top: auto;


      }


      .theme-toggle:hover {


        color: var(--text-primary);


      }


      .theme-toggle-track {


        width: 36px;


        height: 20px;


        border-radius: 10px;


        background: var(--border-secondary);


        position: relative;


        transition: background 0.3s;


      }


      [data-theme="dark"] .theme-toggle-track {


        background: var(--violet);


      }


      .theme-toggle-thumb {


        width: 16px;


        height: 16px;


        border-radius: 50%;


        background: white;


        position: absolute;


        top: 2px;


        left: 2px;


        transition: transform 0.3s;


        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);


      }


      [data-theme="dark"] .theme-toggle-thumb {


        transform: translateX(16px);


      }





      .sidebar-overlay {


        display: none;


        position: fixed;


        inset: 0;


        background: rgba(0, 0, 0, 0.5);


        z-index: 99;


      }


      .sidebar-overlay.active {


        display: block;


      }


      .mobile-header {


        display: none;


        background: var(--bg-glass-strong);


        backdrop-filter: blur(20px);


        border-bottom: 1px solid var(--border-secondary);


        padding: 12px 16px;


        align-items: center;


        gap: 12px;


        position: sticky;


        top: 0;


        z-index: 50;


      }


      .mobile-header img {


        height: 28px;


      }


      .mobile-header h1 {


        font-family: "Inter", sans-serif;


        color: var(--violet);


        font-size: 10px;


        font-weight: 700;


        flex: 1;


      }


      .hamburger {


        background: none;


        border: none;


        color: var(--text-secondary);


        cursor: pointer;


        padding: 4px;


      }


      .hamburger svg {


        width: 24px;


        height: 24px;


      }





      .main-content {


        flex: 1;


        margin-left: 240px;


        min-height: 100vh;


      }


      .container {


        max-width: 1400px;


        margin: 0 auto;


        padding: 24px;


      }





      .section {


        display: none;


      }


      .section.active {


        display: block;


      }





      .stats-bar {


        display: grid;


        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));


        gap: 16px;


        margin-bottom: 24px;


      }


      .stat-card {


        background: var(--bg-glass);


        backdrop-filter: blur(12px);


        border: 1px solid var(--border-primary);


        border-radius: 14px;


        padding: 20px 24px;


        display: flex;


        align-items: center;


        gap: 16px;


        box-shadow: var(--shadow-card);


        transition:


          box-shadow 0.2s,


          transform 0.2s;


      }


      .stat-card:hover {


        box-shadow: var(--shadow-card-hover);


        transform: translateY(-1px);


      }


      .stat-icon {


        width: 48px;


        height: 48px;


        border-radius: 12px;


        display: flex;


        align-items: center;


        justify-content: center;


        flex-shrink: 0;


      }


      .stat-icon svg {


        width: 24px;


        height: 24px;


      }


      .stat-icon.violet {


        background: var(--violet-light);


        color: var(--violet);


      }


      .stat-icon.teal {


        background: rgba(78, 205, 196, 0.12);


        color: #4ecdc4;


      }


      .stat-icon.red {
        background: rgba(239, 68, 68, 0.12);
        color: #ef4444;
      }

      .stat-icon.amber {
        background: rgba(245, 158, 11, 0.12);
        color: #F59E0B;
      }

      .stat-icon.green {
        background: rgba(34, 197, 94, 0.12);
        color: #22C55E;
      }

      .stat-icon.blue {
        background: rgba(59, 130, 246, 0.12);
        color: #3B82F6;
      }


      .stat-value {


        font-size: 28px;


        font-weight: 700;


        color: var(--text-primary);


        line-height: 1.2;


      }


      .stat-label {


        font-family: "Inter", sans-serif;


        font-size: 10px;


        color: var(--text-muted);


        font-weight: 600;


        text-transform: uppercase;


        margin-top: 4px;


        letter-spacing: 0.5px;


      }





      .section-header {


        margin-bottom: 24px;


      }


      .section-header h2 {


        font-family: "Inter", sans-serif;


        color: var(--violet);


        font-size: 16px;


        font-weight: 700;


        margin-bottom: 4px;


      }


      .section-header p {


        color: var(--text-secondary);


        font-size: 13px;


      }





      .controls {


        display: flex;


        justify-content: space-between;


        align-items: center;


        margin-bottom: 24px;


        flex-wrap: wrap;


        gap: 12px;


      }


      .search-box {


        background: var(--bg-glass);


        border: 1px solid var(--border-secondary);


        border-radius: 12px;


        padding: 10px 16px;


        color: var(--text-primary);


        font-family: "Inter", sans-serif;


        font-size: 14px;


        width: 340px;


        outline: none;


        transition:


          border-color 0.2s,


          box-shadow 0.2s;


      }


      .search-box:focus {


        border-color: var(--violet);


        box-shadow: 0 0 0 3px var(--violet-light);


      }


      .search-box::placeholder {


        color: var(--text-muted);


      }


      .btn-group {


        display: flex;


        gap: 10px;


        align-items: center;


      }





      .btn {


        border: none;


        border-radius: 10px;


        padding: 10px 18px;


        color: #ffffff;


        font-family: "Inter", sans-serif;


        font-size: 13px;


        font-weight: 600;


        cursor: pointer;


        transition: all 0.2s;


        display: inline-flex;


        align-items: center;


        gap: 6px;


      }


      .btn-violet {


        background: var(--violet);


      }


      .btn-violet:hover {


        background: #6b5be8;


        transform: translateY(-1px);


      }


      .btn-danger {


        background: #ef4444;


      }


      .btn-danger:hover {


        background: #dc2626;


        transform: translateY(-1px);


      }


      .btn-teal {


        background: #4ecdc4;


      }


      .btn-teal:hover {


        background: #3dbdb5;


        transform: translateY(-1px);


      }


      .btn-ghost {


        background: transparent;


        color: var(--violet);


        border: 1px solid var(--violet);


      }


      .btn-ghost:hover {


        background: var(--violet-light);


      }


      .btn-sm {
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }


      .btn:active {


        transform: translateY(0);


      }


      .btn:disabled {


        opacity: 0.5;


        cursor: not-allowed;


        transform: none;


      }





      .panel {


        background: var(--bg-glass);


        backdrop-filter: blur(12px);


        border: 1px solid var(--border-primary);


        border-radius: 14px;


        overflow: hidden;


        box-shadow: var(--shadow-card);


      }


      .panel-header {


        padding: 18px 24px;


        border-bottom: 1px solid var(--border-secondary);


        display: flex;


        align-items: center;


        gap: 10px;


      }


      .panel-header svg {


        width: 20px;


        height: 20px;


        color: var(--violet);


        flex-shrink: 0;


      }


      .panel-title {


        font-family: "Inter", sans-serif;


        color: var(--violet);


        font-size: 13px;


        font-weight: 700;


      }





      .table-wrap {


        overflow-x: auto;


      }


      table {


        width: 100%;


        border-collapse: collapse;


      }


      th,


      td {


        padding: 12px 16px;


        text-align: left;


        font-size: 13px;


      }


      th {


        background: var(--bg-tertiary);


        color: var(--text-secondary);


        font-weight: 600;


        font-size: 11px;


        text-transform: uppercase;


        letter-spacing: 0.5px;


        position: sticky;


        top: 0;


        z-index: 1;


        border-bottom: 2px solid var(--border-secondary);


      }


      td {


        border-bottom: 1px solid var(--border-secondary);


        color: var(--text-primary);


      }


      tbody tr {


        cursor: pointer;


        transition: background 0.15s;


      }


      tbody tr:hover {


        background: var(--bg-tertiary);


      }





      .badge {


        display: inline-block;


        padding: 3px 10px;


        border-radius: 20px;


        font-size: 11px;


        font-weight: 600;


        text-transform: uppercase;


        letter-spacing: 0.3px;


      }


      .badge-trial {


        background: rgba(78, 205, 196, 0.15);


        color: #4ecdc4;


      }


      .badge-active {


        background: rgba(72, 187, 120, 0.15);


        color: #22C55E;


      }


      .badge-cancelled,


      .badge-wind-down,


      .badge-cancelling {


        background: rgba(237, 137, 54, 0.15);


        color: #F59E0B;


      }


      .badge-destroyed,


      .badge-churned {


        background: rgba(239, 68, 68, 0.15);


        color: #ef4444;


      }


      .badge-provisioning {


        background: rgba(139, 92, 246, 0.15);


        color: var(--violet);


      }


      .badge-past_due {

        background: rgba(239, 68, 68, 0.15);

        color: #EF4444;

      }

      .badge-disabled {


        background: rgba(148, 163, 184, 0.15);


        color: var(--text-secondary);


      }


      .badge-stable {


        background: rgba(72, 187, 120, 0.15);


        color: #22C55E;


      }


      .badge-coming-soon {


        background: rgba(237, 137, 54, 0.15);


        color: #F59E0B;


      }


      .badge-essential {


        background: var(--violet-light);


        color: var(--violet);


      }





      /* Plan badges */


      .plan-badge {


        display: inline-block;


        padding: 3px 10px;


        border-radius: 20px;


        font-size: 11px;


        font-weight: 700;


        text-transform: uppercase;


        letter-spacing: 0.3px;


      }


      .plan-starter {


        background: rgba(148, 163, 184, 0.18);


        color: #64748b;


      }


      .plan-power {


        background: rgba(59, 130, 246, 0.15);


        color: #3b82f6;


      }


      .plan-promax {


        background: rgba(139, 92, 246, 0.15);


        color: #7c6cff;


      }





      .ip-link {


        color: #4ecdc4;


        font-weight: 500;


        cursor: pointer;


      }


      .ip-link:hover {


        text-decoration: underline;


      }





      #detailView {


        display: none;


      }


      .detail-grid {


        display: grid;


        grid-template-columns: 1fr 1fr;


        gap: 24px;


      }


      .detail-card {


        background: var(--bg-glass);


        backdrop-filter: blur(12px);


        border: 1px solid var(--border-primary);


        border-radius: 14px;


        padding: 24px;


        box-shadow: var(--shadow-card);


      }


      .detail-card h3 {


        font-family: "Inter", sans-serif;


        font-size: 12px;


        color: var(--violet);


        font-weight: 700;


        margin-bottom: 16px;


        text-transform: uppercase;


      }


      .detail-row {


        display: flex;


        justify-content: space-between;


        padding: 10px 0;


        border-bottom: 1px solid var(--border-secondary);


      }


      .detail-row:last-child {


        border-bottom: none;


      }


      .detail-label {


        color: var(--text-muted);


        font-size: 13px;


      }


      .detail-value {


        font-weight: 600;


        font-size: 13px;


        color: var(--text-primary);


      }


      .detail-actions {


        display: flex;


        gap: 10px;


        flex-wrap: wrap;


        margin-top: 16px;


      }





      .back-btn {


        background: none;


        border: none;


        color: var(--violet);


        cursor: pointer;


        font-weight: 600;


        font-size: 14px;


        padding: 0;


        margin-bottom: 16px;


        display: flex;


        align-items: center;


        gap: 6px;


      }


      .back-btn:hover {


        text-decoration: underline;


      }





      .health-dot {


        display: inline-block;


        width: 10px;


        height: 10px;


        border-radius: 50%;


        margin-right: 6px;


      }


      .health-healthy {


        background: #4ecdc4;


        box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.2);


      }


      .health-unhealthy,


      .health-unreachable {


        background: #ef4444;


        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);


      }


      .health-unknown {


        background: #94a3b8;


        box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2);


      }





      .modal-overlay {


        display: none;


        position: fixed;


        inset: 0;


        background: rgba(0, 0, 0, 0.5);


        backdrop-filter: blur(8px);


        z-index: 1000;


        align-items: center;


        justify-content: center;


        padding: 24px;


      }


      .modal-overlay.active {


        display: flex;


      }


      .modal-box {


        background: var(--bg-glass-strong);


        backdrop-filter: blur(20px);


        border: 1px solid var(--border-primary);


        border-radius: 14px;


        padding: 32px;


        max-width: 460px;


        width: 100%;


        text-align: center;


        box-shadow:


          0 20px 60px rgba(0, 0, 0, 0.3),


          0 0 0 1px rgba(139, 92, 246, 0.1);


      }


      .modal-box h2 {


        font-family: "Inter", sans-serif;


        color: var(--violet);


        font-size: 15px;


        font-weight: 700;


        margin-bottom: 12px;


      }


      .modal-box p {


        color: var(--text-secondary);


        font-size: 14px;


        margin-bottom: 20px;


        line-height: 1.6;


      }


      .modal-box input,


      .modal-box textarea,


      .modal-box select {


        width: 100%;


        padding: 12px 16px;


        margin-bottom: 16px;


        background: var(--bg-tertiary);


        border: 1px solid var(--border-secondary);


        border-radius: 10px;


        font-size: 14px;


        outline: none;


        font-family: "Inter", sans-serif;


        color: var(--text-primary);


      }


      .modal-box input:focus,


      .modal-box textarea:focus {


        border-color: var(--violet);


        box-shadow: 0 0 0 3px var(--violet-light);


      }


      .modal-btns {


        display: flex;


        gap: 10px;


        justify-content: center;


      }


      .modal-btns .btn {


        flex: 1;


        padding: 12px;


        text-align: center;


        justify-content: center;


      }





      .login-modal {


        display: none;


        position: fixed;


        inset: 0;


        background: var(--bg-primary);


        background-image:


          radial-gradient(


            circle at 30% 40%,


            var(--violet-glow) 0%,


            transparent 50%


          ),


          radial-gradient(


            circle at 70% 60%,


            rgba(78, 205, 196, 0.15) 0%,


            transparent 50%


          );


        z-index: 1000;


        align-items: center;


        justify-content: center;


      }


      .login-modal.active {


        display: flex;


      }


      .login-box {


        background: var(--bg-glass-strong);


        backdrop-filter: blur(20px) saturate(180%);


        border: 1px solid var(--border-primary);


        border-radius: 20px;


        padding: 40px;


        width: 420px;


        max-width: 90%;


        text-align: center;


        box-shadow:


          0 20px 60px rgba(0, 0, 0, 0.3),


          0 0 80px rgba(139, 92, 246, 0.08);


      }


      .login-box img {


        width: 56px;


        margin-bottom: 16px;


        filter: drop-shadow(0 0 12px var(--violet-glow));


      }


      .login-box h2 {


        font-family: "Inter", sans-serif;


        color: var(--violet);


        margin-bottom: 8px;


        font-size: 16px;


        font-weight: 700;


        letter-spacing: 2px;


      }


      .login-box .sub {


        color: var(--text-muted);


        font-size: 13px;


        margin-bottom: 24px;


      }


      .login-box input {


        width: 100%;


        padding: 14px 16px;


        margin: 8px 0 16px;


        background: var(--bg-tertiary);


        border: 1px solid var(--border-secondary);


        border-radius: 12px;


        font-size: 14px;


        outline: none;


        font-family: "Inter", sans-serif;


        color: var(--text-primary);


      }


      .login-box input:focus {


        border-color: var(--violet);


        box-shadow:


          0 0 0 3px var(--violet-light),


          0 0 20px rgba(139, 92, 246, 0.1);


      }


      .login-box .btn {


        width: 100%;


        padding: 14px;


        font-size: 14px;


        border-radius: 12px;


      }


      .error-msg {


        color: #ef4444;


        font-size: 13px;


        margin-top: 12px;


      }





      .toast {


        position: fixed;


        top: 24px;


        right: 24px;


        background: var(--bg-glass-strong);


        backdrop-filter: blur(12px);


        border: 1px solid var(--border-primary);


        border-left: 4px solid #4ecdc4;


        border-radius: 12px;


        padding: 16px 20px;


        z-index: 1001;


        transform: translateX(400px);


        transition: transform 0.3s ease;


        font-size: 13px;


        color: var(--text-primary);


        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);


      }


      .toast.show {


        transform: translateX(0);


      }


      .toast.error {


        border-color: #ef4444;


      }





      .ssh-box {


        background: var(--terminal-bg);


        color: #4ecdc4;


        padding: 14px 18px;


        border-radius: 10px;


        font-family: "Courier New", monospace;


        font-size: 14px;


        margin-top: 12px;


        cursor: pointer;


        user-select: all;


        word-break: break-all;


        border: 1px solid var(--border-primary);


      }


      .ssh-box:hover {


        background: rgba(30, 33, 58, 0.9);


      }





      /* Skills */


      .skills-controls {


        display: flex;


        gap: 12px;


        margin-bottom: 24px;


        flex-wrap: wrap;


        align-items: center;


      }


      .skills-controls .search-box {


        flex: 1;


        min-width: 200px;


      }


      .category-filter {


        background: var(--bg-glass);


        border: 1px solid var(--border-secondary);


        border-radius: 10px;


        padding: 8px 14px;


        font-family: "Inter", sans-serif;


        font-size: 13px;


        color: var(--text-primary);


        cursor: pointer;


        outline: none;


      }


      .category-filter:focus {


        border-color: var(--violet);


      }


      .skills-grid {
        display: flex;
        flex-direction: column;
        gap: 28px;
      }

      .skill-category-group {
        border: 1px solid var(--border-primary);
        border-radius: 16px;
        background: var(--bg-glass);
        overflow: hidden;
      }

      .skill-category-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(78, 205, 196, 0.04));
        border-bottom: 1px solid var(--border-primary);
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
      }

      .skill-category-icon {
        display: flex;
        align-items: center;
        color: var(--violet);
        opacity: 0.8;
      }

      .skill-category-count {
        font-weight: 400;
        color: var(--text-muted);
        font-size: 12px;
        margin-left: auto;
      }

      .skill-category-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 20px;
        padding: 20px;
      }

      .skill-essential-star {
        color: #FF6B4A;
        font-size: 13px;
        margin-left: 2px;
      }


      .skill-card {
        background: var(--bg-glass);
        backdrop-filter: blur(12px);
        border: 1px solid var(--border-primary);
        border-radius: 14px;
        padding: 18px 20px;
        position: relative;
        transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
        display: flex;
        flex-direction: column;
        gap: 12px;
        box-shadow: var(--shadow-card);
      }
      .skill-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-card-hover);
        border-color: rgba(139, 92, 246, 0.25);
      }

      .skill-card-head {
        display: flex;
        align-items: center;
        gap: 12px;
      }


      /* Skill icon container */
      .skill-icon-wrap {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: rgba(139, 92, 246, 0.1);
        color: var(--violet);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background 0.15s;
      }
      .skill-card:hover .skill-icon-wrap {
        background: rgba(139, 92, 246, 0.18);
      }
      .skill-icon--orphan {
        background: rgba(245, 158, 11, 0.12);
        color: #D97706;
      }
      .skill-card:hover .skill-icon--orphan {
        background: rgba(245, 158, 11, 0.2);
      }
      .skill-card--orphan {
        border-color: rgba(245, 158, 11, 0.25);
      }

      .skill-card-head .skill-meta {
        flex: 1;
        min-width: 0;
      }
      .skill-name {
        font-weight: 700;
        font-size: 14px;
        color: var(--text-primary);
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* Type label (Essential / Custom / VPS only) */
      .skill-type {
        display: inline-block;
        font-size: 10px;
        font-weight: 600;
        padding: 1px 8px;
        border-radius: 100px;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }
      .skill-type-essential {
        background: rgba(139, 92, 246, 0.1);
        color: var(--violet);
      }
      .skill-type-custom {
        background: var(--bg-tertiary);
        color: var(--text-secondary);
      }
      .skill-type-orphan {
        background: rgba(245, 158, 11, 0.12);
        color: #B45309;
      }
      [data-theme="dark"] .skill-type-orphan {
        color: #FBBF24;
      }

      .skill-desc {
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 0;
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .skill-card-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: auto;
        padding-top: 14px;
        border-top: 1px solid var(--border-secondary);
      }

      /* Install count bar */
      .skill-installs {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .skill-installs-bar {
        width: 48px;
        height: 4px;
        border-radius: 2px;
        background: var(--bg-tertiary);
        overflow: hidden;
      }
      .skill-installs-fill {
        height: 100%;
        border-radius: 2px;
        background: var(--violet);
        transition: width 0.3s ease;
      }
      .skill-installs-label {
        font-size: 11px;
        font-weight: 500;
        color: var(--text-muted);
        white-space: nowrap;
      }

      /* Action buttons */
      .skill-actions {
        display: flex;
        gap: 4px;
      }
      .skill-action-btn {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        border: 1px solid transparent;
        background: transparent;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.15s;
      }
      .skill-action-btn:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
        border-color: var(--border-secondary);
      }
      .skill-action-btn--primary:hover {
        background: rgba(139, 92, 246, 0.1);
        color: var(--violet);
        border-color: rgba(139, 92, 246, 0.2);
      }
      .skill-action-btn--danger:hover {
        background: rgba(239, 68, 68, 0.1);
        color: #EF4444;
        border-color: rgba(239, 68, 68, 0.2);
      }

      /* ── Fleet table refinements ─────────────────────── */
      .fleet-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 12px;
      }
      .fleet-controls-left {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .fleet-select-all {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--text-muted);
        cursor: pointer;
      }
      .fleet-select-all input {
        accent-color: var(--violet);
        cursor: pointer;
      }

      .fleet-customer {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .fleet-avatar {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: linear-gradient(135deg, var(--violet), #A78BFA);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        flex-shrink: 0;
      }
      .fleet-avatar--offline {
        background: linear-gradient(135deg, #6B7280, #9CA3AF);
        opacity: 0.6;
      }
      .fleet-name {
        font-weight: 600;
        font-size: 13px;
        color: var(--text-primary);
      }
      .fleet-sub {
        font-size: 11px;
        color: var(--text-muted);
      }

      .fleet-dns {
        font-size: 10px;
        color: var(--violet);
        opacity: 0.7;
        margin-top: 1px;
      }

      .fleet-status-dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-right: 6px;
        vertical-align: middle;
      }
      .fleet-status-dot--online {
        background: #22C55E;
        box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
      }
      .fleet-status-dot--offline {
        background: #EF4444;
        box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
      }
      .fleet-status-label {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary);
      }

      .fleet-version {
        font-size: 12px;
        font-weight: 500;
        font-family: 'JetBrains Mono', 'SF Mono', monospace;
        color: var(--text-secondary);
        background: var(--bg-tertiary);
        padding: 2px 8px;
        border-radius: 6px;
      }

      .fleet-stat-pill {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary);
      }

      .fleet-actions {
        display: flex;
        gap: 4px;
        justify-content: flex-end;
        flex-wrap: wrap;
      }





      .settings-placeholder {


        background: var(--bg-glass);


        backdrop-filter: blur(12px);


        border: 1px solid var(--border-primary);


        border-radius: 14px;


        padding: 60px 40px;


        text-align: center;


        box-shadow: var(--shadow-card);


      }


      .settings-placeholder svg {


        width: 48px;


        height: 48px;


        color: var(--text-muted);


        margin-bottom: 16px;


      }


      .settings-placeholder h3 {


        font-family: "Inter", sans-serif;


        color: var(--violet);


        font-size: 13px;


        font-weight: 700;


        margin-bottom: 8px;


      }


      .settings-placeholder p {


        color: var(--text-secondary);


        font-size: 14px;


      }





      .credits-search {


        background: var(--bg-glass);


        border: 1px solid var(--border-primary);


        border-radius: 12px;


        padding: 20px 24px;


        margin-bottom: 24px;


      }


      .credits-search input {


        width: 100%;


        padding: 12px 16px;


        background: var(--bg-tertiary);


        border: 1px solid var(--border-secondary);


        border-radius: 10px;


        font-size: 14px;


        outline: none;


        font-family: "Inter", sans-serif;


        color: var(--text-primary);


        margin-bottom: 16px;


      }


      .credits-search input:focus {


        border-color: var(--violet);


        box-shadow: 0 0 0 3px var(--violet-light);


      }


      .credit-info {


        background: var(--bg-glass);


        border: 1px solid var(--border-primary);


        border-radius: 14px;


        padding: 24px;


        margin-bottom: 24px;


        box-shadow: var(--shadow-card);


      }


      .credit-info h3 {


        font-family: "Inter", sans-serif;


        color: var(--violet);


        font-size: 13px;


        font-weight: 700;


        margin-bottom: 16px;


      }





      .logs-controls {


        background: var(--bg-glass);


        border: 1px solid var(--border-primary);


        border-radius: 14px;


        padding: 20px 24px;


        margin-bottom: 24px;


      }


      .logs-panel {


        background: var(--bg-glass);


        border: 1px solid var(--border-primary);


        border-radius: 14px;


        padding: 20px 24px;


        margin-bottom: 24px;


      }


      .log-output {


        background: var(--terminal-bg);


        color: #4ecdc4;


        padding: 16px;


        border-radius: 10px;


        font-family: "Courier New", monospace;


        font-size: 12px;


        max-height: 400px;


        overflow-y: auto;


        white-space: pre-wrap;


        margin-top: 16px;


      }





      /* Billing sub-nav */


      .billing-subnav {


        display: flex;


        gap: 0;


        border-bottom: 2px solid var(--border-secondary);


        margin-bottom: 24px;


      }


      .billing-subnav-item {
        padding: 12px 24px;
        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-muted);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }


      .billing-subnav-item:hover {


        color: var(--text-secondary);


      }


      .billing-subnav-item.active {


        color: var(--violet);


        border-bottom-color: var(--violet);


      }


      .billing-tab {


        display: none;


      }


      .billing-tab.active {


        display: block;


      }

      /* Settings sub-tabs (reuse billing subnav style) */
      .settings-subnav-item {
        padding: 12px 24px;
        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-muted);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .settings-subnav-item:hover { color: var(--text-secondary); }
      .settings-subnav-item.active { color: var(--violet); border-bottom-color: var(--violet); }
      .settings-tab { display: none; }
      .settings-tab.active { display: block; }





      /* Billing revenue styles */


      .billing-banner {


        padding: 16px 24px;


        border-radius: 12px;


        font-size: 14px;


        font-weight: 500;


        margin-bottom: 24px;


        line-height: 1.5;


      }


      .billing-banner.banner-green {


        background: rgba(72, 187, 120, 0.12);


        color: #22C55E;


        border: 1px solid rgba(72, 187, 120, 0.25);


      }


      .billing-banner.banner-amber {


        background: rgba(237, 137, 54, 0.12);


        color: #F59E0B;


        border: 1px solid rgba(237, 137, 54, 0.25);


      }


      .billing-banner.banner-red {


        background: rgba(239, 68, 68, 0.12);


        color: #ef4444;


        border: 1px solid rgba(239, 68, 68, 0.25);


      }


      .billing-sortable {


        cursor: pointer;


        user-select: none;


      }


      .billing-sortable:hover {


        color: var(--violet);


      }


      .billing-days-btn.active {


        background: var(--violet);


        color: #fff;


        border-color: var(--violet);


      }


      .billing-undercharge {


        background: rgba(239, 68, 68, 0.04);


      }


      .billing-bar-row {


        display: flex;


        align-items: flex-end;


        gap: 3px;


        height: 120px;


        padding-bottom: 4px;


      }


      .billing-bar-col {


        display: flex;


        flex-direction: column;


        align-items: center;


        gap: 2px;


        flex: 1;


        min-width: 24px;


      }


      .billing-bar {


        width: 100%;


        border-radius: 3px 3px 0 0;


        min-height: 2px;


        transition: height 0.3s;


        position: relative;


      }


      .billing-bar:hover::after {


        content: attr(data-tip);


        position: absolute;


        bottom: 100%;


        left: 50%;


        transform: translateX(-50%);


        background: #1C1917;


        color: #fff;


        padding: 4px 8px;


        border-radius: 6px;


        font-size: 11px;


        white-space: nowrap;


        z-index: 10;


      }


      .billing-bar.flat {


        background: var(--violet);


        opacity: 0.7;


      }


      .billing-bar.token {


        background: #4ecdc4;


        opacity: 0.7;


      }


      .billing-bar-label {


        font-size: 9px;


        color: var(--text-muted);


        writing-mode: vertical-rl;


        text-orientation: mixed;


        max-height: 60px;


        overflow: hidden;


      }


      .billing-legend {


        display: flex;


        gap: 16px;


        padding: 12px 24px 0;


        font-size: 11px;


        color: var(--text-secondary);


      }


      .billing-legend-dot {


        display: inline-block;


        width: 10px;


        height: 10px;


        border-radius: 2px;


        margin-right: 4px;


        vertical-align: middle;


      }





      /* Users table enhancements */


      .server-dot {


        display: inline-block;


        width: 8px;


        height: 8px;


        border-radius: 50%;


        margin-right: 6px;


      }


      .server-online {


        background: #22C55E;


        box-shadow: 0 0 0 2px rgba(56, 161, 105, 0.2);


      }


      .server-offline {


        background: #ef4444;


        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);


      }


      .credit-mini-bar {


        width: 80px;


        height: 6px;


        background: var(--border-secondary);


        border-radius: 3px;


        display: inline-block;


        vertical-align: middle;


        margin-left: 8px;


      }


      .credit-mini-fill {


        height: 100%;


        border-radius: 3px;


        transition: width 0.3s;


      }


      .user-expand-row {


        display: none;


      }


      .user-expand-row.active {


        display: table-row;


      }


      .user-expand-content {


        padding: 20px 24px;


        background: var(--bg-tertiary);


      }


      .user-expand-grid {


        display: grid;


        grid-template-columns: 1fr 1fr 1fr;


        gap: 20px;


      }


      .user-expand-section h4 {


        font-family: "Inter", sans-serif;


        font-size: 11px;


        color: var(--violet);


        font-weight: 700;


        text-transform: uppercase;


        margin-bottom: 12px;


      }





      /* Activity feed */


      .activity-item {


        display: flex;


        gap: 12px;


        padding: 12px 0;


        border-bottom: 1px solid var(--border-secondary);


      }


      .activity-item:last-child {


        border-bottom: none;


      }


      .activity-dot {


        width: 8px;


        height: 8px;


        border-radius: 50%;


        margin-top: 6px;


        flex-shrink: 0;


      }


      .activity-dot.credit {


        background: #22C55E;


      }


      .activity-dot.debit {


        background: #ef4444;


      }


      .activity-dot.plan {


        background: var(--violet);


      }


      .activity-dot.topup {


        background: #3b82f6;


      }


      .activity-time {


        font-size: 11px;


        color: var(--text-muted);


        margin-top: 2px;


      }





      /* Dashboard charts */


      .dash-charts {


        display: grid;


        grid-template-columns: 1fr 1fr;


        gap: 16px;


        margin-bottom: 24px;


      }


      .dash-chart-card {


        background: var(--bg-glass);


        backdrop-filter: blur(12px);


        border: 1px solid var(--border-primary);


        border-radius: 14px;


        padding: 24px;


        box-shadow: var(--shadow-card);


      }


      .dash-chart-card h3 {


        font-family: "Inter", sans-serif;


        font-size: 12px;


        color: var(--violet);


        font-weight: 700;


        text-transform: uppercase;


        margin-bottom: 16px;


      }


      .donut-container {


        display: flex;


        align-items: center;


        justify-content: center;


        gap: 24px;


      }


      .donut-legend {


        display: flex;


        flex-direction: column;


        gap: 8px;


      }


      .donut-legend-item {


        display: flex;


        align-items: center;


        gap: 8px;


        font-size: 13px;


      }


      .donut-legend-dot {


        width: 10px;


        height: 10px;


        border-radius: 3px;


        flex-shrink: 0;


      }


      .credits-health-bar {


        display: flex;


        gap: 4px;


        align-items: center;


      }


      .credits-health-segment {


        height: 28px;


        border-radius: 6px;


        display: flex;


        align-items: center;


        justify-content: center;


        font-size: 11px;


        font-weight: 600;


        color: #fff;


        min-width: 40px;


      }





      @media (max-width: 768px) {


        .sidebar {


          transform: translateX(-240px);


        }


        .sidebar.open {


          transform: translateX(0);


        }


        .main-content {


          margin-left: 0;


        }


        .mobile-header {


          display: flex;


        }


        .container {


          padding: 16px;


        }


        .detail-grid {


          grid-template-columns: 1fr;


        }


        .stats-bar {


          grid-template-columns: repeat(2, 1fr);


        }


        .controls {


          flex-direction: column;


          align-items: stretch;


        }


        .search-box {


          width: 100%;


        }


        .skill-category-grid {
          grid-template-columns: 1fr;
        }


        .dash-charts {


          grid-template-columns: 1fr;


        }


        .user-expand-grid {


          grid-template-columns: 1fr;


        }


      }



/* Anonymous mode */
[data-anon="true"] .anon-hide { filter: blur(6px) !important; user-select: none; pointer-events: none; }
[data-anon="true"] .anon-mask::after { content: '••••••'; }
.anon-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); cursor: pointer; padding: 4px 10px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); transition: all 0.2s; }
.anon-toggle:hover { border-color: var(--violet); }
.anon-toggle.active { background: var(--violet); color: white; border-color: var(--violet); }