*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#3498db;--primary-dark:#2980b9;--success:#27ae60;--danger:#e74c3c;--warning:#f39c12;--dark:#2c3e50;--light:#ecf0f1;--gray:#95a5a6;--white:#fff;--border:#ddd;--bg:#f5f7fa}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:#333;line-height:1.6}
/* Login */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}
.login-container{width:100%;max-width:400px;padding:20px}
.login-box{background:var(--white);padding:40px;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.1)}
.login-box h1{font-size:28px;margin-bottom:10px;text-align:center;color:var(--dark)}
.subtitle{text-align:center;color:var(--gray);margin-bottom:30px}
/* Layout */
.container{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--dark);color:var(--white);padding:20px 0;position:fixed;height:100vh;overflow-y:auto}
.sidebar-header{padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar-header h2{font-size:18px;color:var(--white)}
.sidebar-menu{list-style:none;margin-top:10px}
.sidebar-menu li a{display:block;padding:12px 20px;color:rgba(255,255,255,.7);text-decoration:none;transition:.3s;font-size:14px}
.sidebar-menu li a:hover{background:rgba(255,255,255,.1);color:var(--white)}
.sidebar-menu li.active a{background:var(--primary);color:var(--white)}
.main-content{margin-left:240px;padding:20px 30px;flex:1;min-width:0}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}
.header h1{font-size:24px;color:var(--dark)}
/* Buttons */
.btn{padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:14px;font-weight:500;transition:.3s;display:inline-block;text-decoration:none}
.btn-primary{background:var(--primary);color:var(--white)}
.btn-primary:hover{background:var(--primary-dark)}
.btn-success{background:var(--success);color:var(--white)}
.btn-danger{background:var(--danger);color:var(--white)}
.btn-warning{background:var(--warning);color:var(--white)}
.btn-secondary{background:var(--gray);color:var(--white)}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-block{width:100%}
.btn-group{display:flex;gap:5px}
/* Forms */
.form-group{margin-bottom:15px}
.form-group label{display:block;margin-bottom:5px;font-weight:500;color:var(--dark);font-size:14px}
.form-input,.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:5px;font-size:14px}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary)}
.form-group small{display:block;margin-top:4px;color:var(--gray);font-size:12px}
.error-message{background:#fee;color:var(--danger);padding:10px;border-radius:5px;margin-bottom:15px}
/* Table */
.content-section{background:var(--white);border-radius:10px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.08);margin-bottom:20px}
.content-section h2{font-size:18px;color:var(--dark);margin-bottom:15px}
.table-container{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse}
.data-table thead{background:var(--light)}
.data-table th{padding:12px;text-align:left;font-weight:600;color:var(--dark);font-size:13px;white-space:nowrap}
.data-table td{padding:10px 12px;border-top:1px solid var(--border);font-size:13px}
.data-table tbody tr:hover{background:#f8f9fa}
.text-center{text-align:center}
/* Stats Grid */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px;margin-bottom:20px}
.stat-card{background:var(--white);padding:20px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.08);text-align:center}
.stat-card .stat-icon{font-size:24px;margin-bottom:5px}
.stat-card .stat-value{font-size:28px;font-weight:700;color:var(--dark)}
.stat-card h3{font-size:13px;color:var(--gray);margin-bottom:5px}
.stat-card.success{border-left:4px solid var(--success)}
.stat-card.danger{border-left:4px solid var(--danger)}
.stat-card.warning{border-left:4px solid var(--warning)}
.stat-card.info{border-left:4px solid var(--primary)}
/* Badges */
.badge{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;display:inline-block}
.badge-success{background:#d4edda;color:#155724}
.badge-danger{background:#f8d7da;color:#721c24}
.badge-warning{background:#fff3cd;color:#856404}
.badge-info{background:#d1ecf1;color:#0c5460}
.badge-secondary{background:#e2e3e5;color:#383d41}
/* Modal */
.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5)}
.modal.show{display:flex;align-items:center;justify-content:center}
.modal-content{background:var(--white);border-radius:10px;width:90%;max-width:600px;max-height:90vh;overflow-y:auto;padding:25px}
.modal-content.large{max-width:750px}
.modal-content h2{font-size:20px;margin-bottom:20px;color:var(--dark)}
.close{float:right;font-size:28px;cursor:pointer;color:var(--gray);line-height:1}
.close:hover{color:var(--dark)}
/* Checkbox */
.checkbox-group{margin-bottom:12px}
.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.checkbox-label input[type="checkbox"]{width:18px;height:18px;cursor:pointer}
.warning-text{color:var(--danger);font-weight:bold;font-size:12px}
/* Section Headers */
h3{margin-top:20px;margin-bottom:12px;color:var(--dark);border-bottom:2px solid var(--primary);padding-bottom:8px;font-size:16px}
/* Toast */
.toast{position:fixed;bottom:20px;right:20px;background:var(--dark);color:var(--white);padding:12px 24px;border-radius:8px;font-size:14px;z-index:10000;opacity:0;transition:.3s;transform:translateY(10px)}
.toast.show{opacity:1;transform:translateY(0)}
/* Domain Status */
.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px}
.status-dot.active{background:var(--success)}
.status-dot.pending_dns{background:var(--warning)}
.status-dot.pending_ssl{background:#17a2b8}
.status-dot.added{background:var(--gray)}
.status-dot.error{background:var(--danger)}
.status-dot.issuing{background:#17a2b8;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* Copyable */
.copyable{cursor:pointer;padding:4px 8px;background:var(--light);border-radius:4px;font-family:monospace;font-size:12px;display:inline-block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:.2s}
.copyable:hover{background:#d5dbdb}
.copyable:active{background:var(--primary);color:var(--white)}
/* Small text */
.small-text{font-size:12px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* URL display */
.url-cell{max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace;font-size:12px}
/* Responsive */
@media(max-width:768px){
    .sidebar{width:200px}
    .main-content{margin-left:200px}
    .stats-grid{grid-template-columns:1fr 1fr}
    .modal-content{width:95%}
}
/* Loading */
.loading{text-align:center;padding:40px;color:var(--gray)}
.settings-card{background:var(--white);border-radius:10px;padding:25px;box-shadow:0 2px 10px rgba(0,0,0,.08);margin-bottom:20px;max-width:600px}
.settings-card h3{margin-top:0}
.info-box{background:var(--light);padding:12px;border-radius:6px;font-size:13px;margin-top:10px}
.admin-only{display:none}

/* Hide permission-controlled sidebar items until JS checks permissions */
.sidebar-menu .perm-item { display: none !important; }
.sidebar-menu .perm-item.perm-granted { display: block !important; }
.sidebar-menu .admin-only { display: none !important; }
.sidebar-menu .admin-only.perm-granted { display: block !important; }