/* Planet Hosts - Unified Theme Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg-primary: #000;
    --bg-card: rgba(8,16,28,.9);
    --bg-card-hover: rgba(8,16,28,.95);
    --bg-sidebar: rgba(8,16,28,.95);
    --border-color: rgba(0,191,255,.12);
    --border-hover: rgba(0,191,255,.25);
    --accent: #0A84FF;
    --accent-gradient: linear-gradient(135deg,#008cff,#3bb8ff);
    --accent-glow: 0 0 20px rgba(0,140,255,.3);
    --text-primary: #fff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-table: #cbd5e1;
    --success: #4ade80;
    --warning: #facc15;
    --danger: #f87171;
    --bg-overlay: linear-gradient(rgba(2,8,23,.88),rgba(2,8,23,.96));
    --bg-image: url('/theme/assets/img/background.png');
    --font-body: 'Inter', sans-serif;
    --font-logo: 'Orbitron', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden;line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{color:#fff}

/* Background */
.bg-overlay{position:fixed;inset:0;background:var(--bg-overlay),var(--bg-image);background-size:cover;background-position:center;z-index:-2}
.grid-overlay{position:fixed;inset:0;background-image:linear-gradient(rgba(0,140,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,140,255,.04) 1px,transparent 1px);background-size:80px 80px;z-index:-1;opacity:.35}

/* Layouts */
.admin-shell{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 80px);position:relative;z-index:1}
.sidebar-toggle{display:none;position:fixed;top:70px;left:10px;z-index:999;background:linear-gradient(135deg,#008cff,#3bb8ff);border:none;color:#fff;width:40px;height:40px;border-radius:8px;cursor:pointer;font-size:20px;align-items:center;justify-content:center;box-shadow:0 0 15px rgba(0,140,255,.3)}
.sidebar-toggle:hover{transform:scale(1.05)}
.sidebar.closed{display:none}
@media(max-width:900px){
.admin-shell{grid-template-columns:1fr}
.sidebar-toggle{display:flex}
.sidebar{position:fixed;left:0;top:80px;height:calc(100vh - 80px);z-index:998;transform:translateX(0);transition:transform .3s}
.sidebar.closed{transform:translateX(-105%)}
}
.main-content{min-height:60vh;padding:40px 0;position:relative;z-index:1}

/* Header/Nav */
.header{position:sticky;top:0;z-index:100;padding:16px 0;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.8)),url('/theme/assets/img/header.png');background-size:cover;background-position:center;border-bottom:1px solid var(--border-color)}
.container{width:min(1400px,94%);margin:auto}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:14px}
.logo img{width:50px;height:50px;border-radius:12px}
.logo h1{font-family:var(--font-logo);font-size:1.5rem;margin:0}
.logo span{color:var(--accent)}
.logo p{color:var(--text-secondary);font-size:.75rem;letter-spacing:4px;text-transform:uppercase;margin:0}
nav a{color:#fff;text-decoration:none;margin-left:24px;transition:.3s;font-weight:500;font-size:14px}
nav a:hover{color:var(--accent)}

/* Sidebar */
.sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border-color);padding:24px 16px;position:sticky;top:0;min-height:calc(100vh - 80px);overflow-y:auto}
.sidebar .logo-text{font-family:var(--font-logo);font-size:18px;color:var(--accent);margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.06)}
.sidebar .logo-text span{color:#fff}
.sidebar .nav-section{margin-bottom:20px}
.sidebar .nav-section .nav-label{font-size:11px;text-transform:uppercase;color:var(--text-muted);letter-spacing:1px;margin-bottom:8px;padding:0 10px}
.sidebar a{display:block;color:var(--text-secondary);text-decoration:none;padding:10px 14px;border-radius:8px;margin-bottom:2px;font-size:14px;transition:.2s}
.sidebar a:hover{background:rgba(0,191,255,.08);color:#fff}
.sidebar a.active{background:rgba(0,191,255,.12);color:var(--accent);font-weight:600}

/* Main Content Area */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:20px 32px;border-bottom:1px solid rgba(255,255,255,.05)}
.topbar h1{font-size:22px;font-weight:700}
.content{padding:28px 32px;flex:1}

/* Cards */
.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:24px 28px;margin-bottom:20px}
.card:hover{border-color:var(--border-hover)}
.card h2,.card h3{color:var(--accent)}

/* Stats Grid */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:rgba(8,16,28,.6);border:1px solid rgba(0,191,255,.08);border-radius:10px;padding:24px;text-align:center}
.stat-card h3{color:var(--text-secondary);font-size:13px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px}
.stat-card .value{font-size:32px;font-weight:700;color:var(--text-primary)}
.stat-card .label{color:var(--text-muted);font-size:13px;margin-top:4px}

/* Tables */
table{width:100%;border-collapse:collapse;margin:12px 0}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}
th{color:var(--accent);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
td{color:var(--text-table)}
tr:hover{background:rgba(255,255,255,.02)}

/* Buttons */
.btn{display:inline-block;padding:10px 20px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-size:13px;transition:.3s;text-decoration:none;font-family:var(--font-body)}
.btn.primary,.btn-primary{background:var(--accent-gradient);color:#fff}
.btn.primary:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--accent-glow)}
.btn.secondary,.btn-secondary{background:rgba(255,255,255,.06);color:#ccc;border:1px solid rgba(255,255,255,.1)}
.btn.secondary:hover,.btn-secondary:hover{background:rgba(255,255,255,.1)}
.btn.danger,.btn-danger{background:rgba(255,50,50,.15);color:var(--danger);border:1px solid rgba(255,50,50,.2)}
.btn.danger:hover,.btn-danger:hover{background:rgba(255,50,50,.25)}
.btn-sm{padding:6px 14px;font-size:12px}
.btn-lg{padding:14px 32px;font-size:16px}

/* Status Badges */
.status-badge,.badge{display:inline-block;padding:3px 10px;border-radius:5px;font-size:12px;font-weight:600}
.status-active,.badge.active,.badge-success{background:#1a3a2a;color:var(--success)}
.status-suspended,.badge.warning{background:#3a3a1a;color:var(--warning)}
.status-terminated,.badge.danger{background:#3a1a1a;color:var(--danger)}
.status-running{background:#1a3a2a;color:var(--success)}
.status-stopped{background:#3a1a1a;color:var(--danger)}
.status-error{background:#3a1a1a;color:var(--danger)}

/* Forms */
.form-group{margin-bottom:16px}
.form-group label{display:block;color:var(--text-secondary);font-size:13px;font-weight:600;margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--text-primary);font-size:14px;outline:none;box-sizing:border-box;font-family:var(--font-body)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent)}

/* Alerts */
.alert-success{background:rgba(50,255,50,.08);border:1px solid rgba(50,255,50,.2);border-radius:8px;padding:12px 16px;margin-bottom:16px;color:var(--success);font-size:14px}
.alert-error,.alert-danger{background:rgba(255,50,50,.1);border:1px solid rgba(255,50,50,.2);border-radius:8px;padding:12px 16px;margin-bottom:16px;color:var(--danger);font-size:14px}

/* Footer */
.footer{padding:60px 0;text-align:center;border-top:1px solid var(--border-color);position:relative;z-index:1}
.footer .footer-logo{font-family:var(--font-logo);font-size:1.8rem}
.footer .footer-logo span{color:var(--accent)}
.footer p{color:var(--text-secondary);margin:12px 0 24px}
.footer-links{margin-bottom:24px}
.footer-links a{color:#fff;text-decoration:none;margin:0 12px;font-size:14px}
.copyright{color:var(--text-muted);font-size:13px}

/* Hero (Landing) */
.hero{min-height:90vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px;padding:80px 0;position:relative;z-index:1}
.hero-text h2{font-size:4.4rem;line-height:1.1;margin-bottom:20px}
.hero-text h2 span{color:var(--accent)}
.hero-text p{color:var(--text-table);line-height:1.9;font-size:1.1rem;margin-bottom:30px}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap}
.hero-image img{width:100%;border-radius:20px}

/* Tab Menu (Services) */
.tab-menu{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:40px}
.tab-btn{padding:12px 24px;border-radius:12px;border:1px solid var(--border-color);background:rgba(8,16,28,.8);color:var(--text-secondary);cursor:pointer;font-size:14px;font-weight:600;transition:.3s;white-space:nowrap;font-family:var(--font-body)}
.tab-btn:hover{color:#fff;border-color:var(--accent);background:rgba(0,191,255,.08)}
.tab-btn.active{background:var(--accent-gradient);color:#fff;border-color:var(--accent);box-shadow:var(--accent-glow)}
.tab-content{display:none}
.tab-content.active{display:block}

/* Package Cards */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.pkg-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:28px;transition:.35s}
.pkg-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 0 30px rgba(0,191,255,.08)}
.pkg-card h4{font-size:1.3rem;margin-bottom:6px}
.pkg-card .price{font-size:1.8rem;font-weight:800;color:var(--accent);margin-bottom:12px}
.pkg-card .price small{font-size:.9rem;font-weight:400;color:var(--text-secondary)}
.pkg-card p{color:var(--text-secondary);font-size:.9rem;line-height:1.7;margin-bottom:15px}
.pkg-card .features-list{list-style:none;padding:0;margin-bottom:18px}
.pkg-card .features-list li{color:var(--text-table);font-size:.85rem;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.pkg-card .btn{display:block;text-align:center}

/* Feature Cards */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px;padding:60px 0 100px;position:relative;z-index:1}
.feature-card{padding:35px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:20px;transition:.35s}
.feature-card:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:0 0 40px rgba(0,191,255,.15)}
.feature-card h3{color:var(--accent);margin-bottom:15px}
.feature-card p{color:var(--text-secondary);line-height:1.8}

/* Responsive */
@media(max-width:992px){
.hero{grid-template-columns:1fr;text-align:center}
.hero-buttons{justify-content:center}
.hero-text h2{font-size:3rem}
.admin-shell{grid-template-columns:1fr}
.sidebar{display:none}
}
@media(max-width:768px){
.hero-text h2{font-size:2.4rem}
.content{padding:20px 16px}
.topbar{padding:16px 20px}
.nav{flex-direction:column;gap:16px}
nav a{margin:0 10px}
}
