/* CF Manager v3.0 — Premium Dark Theme */

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;overflow-x:hidden}

:root{
    --bg:#090b10;
    --bg-card:#11141c;
    --bg-input:#181c28;
    --bg-hover:#1e2336;
    --bg-elevated:#1a1f2e;
    --border:#232a3b;
    --border-subtle:#1c2233;
    --text:#e8eaf0;
    --text-dim:#9ba3b5;
    --text-muted:#5e6578;
    --accent:#5b9cf6;
    --accent-hover:#4388ed;
    --accent-subtle:rgba(91,156,246,0.1);
    --green:#36d5a0;
    --green-bg:rgba(54,213,160,0.12);
    --green-border:rgba(54,213,160,0.25);
    --yellow:#f0c243;
    --yellow-bg:rgba(240,194,67,0.12);
    --yellow-border:rgba(240,194,67,0.25);
    --red:#f07070;
    --red-bg:rgba(240,112,112,0.12);
    --red-border:rgba(240,112,112,0.25);
    --purple:#a78bfa;
    --purple-bg:rgba(167,139,250,0.12);
    --orange:#fb923c;
    --orange-bg:rgba(251,146,60,0.12);
    --shadow-xs:0 1px 2px rgba(0,0,0,0.25);
    --shadow-sm:0 2px 6px rgba(0,0,0,0.3),0 1px 2px rgba(0,0,0,0.2);
    --shadow-md:0 4px 16px rgba(0,0,0,0.35),0 2px 4px rgba(0,0,0,0.2);
    --shadow-lg:0 12px 40px rgba(0,0,0,0.5),0 4px 12px rgba(0,0,0,0.3);
    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:14px;
    --radius-xl:18px
}

body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ===== Layout ===== */
.layout{display:flex;min-height:100vh}

.sidebar{
    width:232px;
    background:var(--bg-card);
    border-right:1px solid var(--border);
    box-shadow:2px 0 12px rgba(0,0,0,0.15);
    padding:20px 14px;
    position:fixed;
    height:100vh;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    z-index:10
}

.content{
    flex:1;
    margin-left:232px;
    padding:32px 40px 80px 40px;
    min-height:100vh
}

/* ===== Logo ===== */
.logo{display:flex;align-items:center;gap:12px;padding:4px 10px;margin-bottom:24px}
.logo-icon{
    width:38px;height:38px;
    background:linear-gradient(135deg,#fb923c 0%,#f97316 50%,#ea580c 100%);
    border-radius:var(--radius-md);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:18px;font-weight:700;
    box-shadow:0 2px 8px rgba(249,115,22,0.3)
}
.logo-text{font-weight:700;font-size:16px;color:#fff;letter-spacing:-0.3px}

/* ===== User Box ===== */
.user-box{
    padding:14px 16px;
    background:var(--bg-input);
    border-radius:var(--radius-md);
    margin-bottom:20px;
    border:1px solid var(--border-subtle);
    flex-shrink:0
}
.user-name{font-weight:600;font-size:13px;color:#fff;margin-bottom:3px}
.user-role{font-size:11px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.5px}
.user-role.admin{color:var(--orange);font-weight:600}

/* ===== Navigation ===== */
.nav-section{margin-bottom:20px}
.nav-label{
    font-size:10px;font-weight:600;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:0.8px;
    padding:0 12px;
    margin-bottom:8px
}
.nav-item{
    display:flex;align-items:center;gap:10px;
    padding:9px 12px;
    border-radius:var(--radius-sm);
    color:var(--text-dim);
    cursor:pointer;
    margin-bottom:2px;
    font-size:13px;font-weight:500;
    border:none;background:none;
    width:100%;text-align:left;
    position:relative
}
.nav-item:hover{background:var(--bg-hover);color:var(--text)}
.nav-item.active{
    background:var(--accent-subtle);
    color:var(--accent);
    font-weight:600
}
.nav-item.active::before{
    content:'';
    position:absolute;
    left:0;top:50%;
    transform:translateY(-50%);
    width:3px;height:20px;
    background:var(--accent);
    border-radius:0 3px 3px 0
}
.nav-item i{width:20px;font-size:15px;text-align:center;opacity:0.8}
.nav-item.active i{opacity:1}
.nav-item .badge{margin-left:auto;font-size:10px;background:rgba(255,255,255,0.08);padding:2px 7px;border-radius:10px;font-weight:600}

/* ===== Stats Box ===== */
.stats-box{
    padding:16px;
    background:var(--bg-input);
    border-radius:var(--radius-md);
    border:1px solid var(--border-subtle);
    margin-top:auto;
    flex-shrink:0
}
.stats-title{font-size:10px;font-weight:600;color:var(--text-muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.8px}
.stats-row{display:flex;justify-content:space-between;padding:5px 0;font-size:12px}
.stats-row span:first-child{color:var(--text-dim)}
.stats-row span:last-child{font-weight:700}
.stats-row .green{color:var(--green)}
.stats-row .yellow{color:var(--yellow)}

/* ===== Pages ===== */
.page{display:none}.page.active{display:block}
.page-header{margin-bottom:32px}
.page-title{
    font-size:24px;font-weight:700;
    color:#fff;
    margin-bottom:8px;
    display:flex;align-items:center;gap:12px;
    letter-spacing:-0.5px
}
.page-title i{color:var(--accent);font-size:22px}
.page-desc{color:var(--text-dim);font-size:14px;line-height:1.6}

/* ===== Cards ===== */
.card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:28px;
    margin-bottom:24px;
    box-shadow:var(--shadow-xs)
}
.card-title{
    font-size:15px;font-weight:600;
    color:#fff;
    margin-bottom:18px;
    display:flex;align-items:center;gap:10px;
    letter-spacing:-0.2px
}
.card-title i{color:var(--accent);font-size:16px}

/* ===== Buttons ===== */
.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 18px;
    font-size:13px;font-weight:500;
    border-radius:var(--radius-sm);
    cursor:pointer;
    border:1px solid var(--border);
    background:var(--bg-input);
    color:var(--text);
    font-family:inherit;
    letter-spacing:0.01em;
    box-shadow:var(--shadow-xs)
}
.btn:hover{background:var(--bg-hover);border-color:#2f3750}
.btn:active{background:var(--bg-input)}
.btn:disabled{opacity:0.4;cursor:not-allowed;box-shadow:none}

.btn-primary{background:var(--accent);color:#fff;border:none;box-shadow:0 2px 8px rgba(91,156,246,0.25)}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 2px 12px rgba(91,156,246,0.35)}
.btn-primary:active{background:#3a7ae0}

.btn-success{background:var(--green);color:#0a2a1f;border:none;font-weight:600;box-shadow:0 2px 8px rgba(54,213,160,0.2)}
.btn-success:hover{background:#2bc490}

.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.btn-danger:hover{background:rgba(240,112,112,0.18);border-color:rgba(240,112,112,0.4)}

.btn-accent{background:linear-gradient(135deg,#fb923c,#f97316);color:#fff;border:none;font-weight:600;box-shadow:0 2px 8px rgba(249,115,22,0.25)}
.btn-accent:hover{background:linear-gradient(135deg,#f97316,#ea580c)}

.btn-purple{background:linear-gradient(135deg,var(--purple),#8b5cf6);color:#fff;border:none;font-weight:600;box-shadow:0 2px 8px rgba(139,92,246,0.25)}
.btn-purple:hover{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}

.btn-group{display:flex;gap:2px;background:var(--bg-input);padding:3px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}
.btn-group .btn{border-radius:5px;padding:6px 12px;border:none;box-shadow:none}
.btn-group .btn.active{background:var(--accent);color:#fff;box-shadow:0 1px 4px rgba(91,156,246,0.3)}

.btn-sm{padding:7px 14px;font-size:12px}
.btn-icon{padding:8px;width:34px;height:34px;justify-content:center}

/* ===== Form Elements ===== */
.form-group{margin-bottom:20px}
.form-label{
    display:block;
    font-size:12px;font-weight:600;
    color:var(--text-dim);
    margin-bottom:8px;
    letter-spacing:0.02em
}
.form-input,.form-select,.form-textarea{
    width:100%;
    padding:11px 14px;
    font-size:14px;
    background:var(--bg-input);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text);
    font-family:inherit
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(91,156,246,0.15)
}
.form-input::placeholder{color:var(--text-muted)}
.form-textarea{min-height:120px;resize:vertical}
.form-hint{font-size:11px;color:var(--text-muted);margin-top:6px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* ===== Tables ===== */
table{width:100%;border-collapse:collapse}
th{
    text-align:left;
    padding:12px 20px;
    font-size:11px;font-weight:600;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:0.6px;
    border-bottom:1px solid var(--border);
    background:var(--bg-card)
}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--accent)}
td{padding:14px 20px;border-bottom:1px solid var(--border-subtle)}
tr:hover td{background:rgba(255,255,255,0.015)}
tr.selected td{background:rgba(91,156,246,0.06);border-color:rgba(91,156,246,0.15)}
.cell-main{font-weight:500;color:#fff;font-size:14px}
.cell-sub{font-size:12px;color:var(--text-muted);margin-top:3px}
.cell-actions{display:flex;gap:6px;opacity:0}
tr:hover .cell-actions{opacity:1}
tr.group-header td{border-bottom:none}
tr.group-header.other-user td{background:rgba(240,194,67,0.05) !important}

/* ===== Badges ===== */
.badge{
    display:inline-flex;align-items:center;gap:5px;
    padding:4px 10px;
    font-size:11px;font-weight:600;
    border-radius:20px;
    background:var(--bg-input);
    color:var(--text-dim);
    letter-spacing:0.02em
}
.badge-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.badge-yellow{background:var(--yellow-bg);color:var(--yellow);border:1px solid var(--yellow-border)}
.badge-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.badge-blue{background:var(--accent-subtle);color:var(--accent);border:1px solid rgba(91,156,246,0.2)}
.badge-purple{background:var(--purple-bg);color:var(--purple);border:1px solid rgba(167,139,250,0.2)}
.badge-orange{background:var(--orange-bg);color:var(--orange);border:1px solid rgba(251,146,60,0.2)}

/* ===== Toolbar ===== */
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.toolbar-left{display:flex;gap:12px;flex:1;flex-wrap:wrap;align-items:center}
.toolbar-right{display:flex;gap:10px}
.search-box{position:relative;width:280px}
.search-box input{padding-left:40px}
.search-box i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:13px}
.filter-select{width:160px}

/* ===== Selection Bar ===== */
.selection-bar{
    display:none;align-items:center;gap:16px;
    padding:14px 20px;
    background:var(--accent-subtle);
    border:1px solid rgba(91,156,246,0.2);
    border-radius:var(--radius-md);
    margin-bottom:16px
}
.selection-bar.active{display:flex}
.selection-info{font-size:14px;color:var(--accent);font-weight:600}
.selection-actions{margin-left:auto;display:flex;gap:8px}

/* ===== Stats Bar ===== */
.stats-bar{
    display:flex;gap:28px;
    padding:16px 24px;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    margin-bottom:20px;
    box-shadow:var(--shadow-xs)
}
.stat-item{font-size:14px;display:flex;align-items:center;gap:8px}
.stat-item strong{color:#fff;font-size:17px;font-weight:700}
.stat-item span{color:var(--text-muted);font-size:13px}

/* ===== Empty State ===== */
.empty{text-align:center;padding:64px 24px}
.empty i{font-size:48px;color:var(--text-muted);margin-bottom:16px;display:block;opacity:0.5}
.empty-text{font-size:15px;color:var(--text-dim);line-height:1.6}

/* ===== Modal ===== */
.modal-overlay{
    position:fixed;inset:0;
    background:rgba(5,7,12,0.75);
    backdrop-filter:blur(6px);
    display:none;
    align-items:center;justify-content:center;
    z-index:100;padding:24px
}
.modal-overlay.active{display:flex}
.modal{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    width:100%;max-width:500px;max-height:85vh;
    display:flex;flex-direction:column;
    box-shadow:var(--shadow-lg),0 0 80px rgba(0,0,0,0.4)
}
.modal-lg{max-width:700px}
.modal-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:22px 28px;
    border-bottom:1px solid var(--border)
}
.modal-title{font-size:17px;font-weight:600;color:#fff;letter-spacing:-0.2px}
.modal-close{
    background:var(--bg-input);
    border:1px solid var(--border-subtle);
    color:var(--text-muted);
    font-size:14px;
    cursor:pointer;
    width:34px;height:34px;
    border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center
}
.modal-close:hover{background:var(--bg-hover);color:var(--text)}
.modal-body{padding:28px;overflow-y:auto;flex:1}
.modal-footer{
    padding:18px 28px;
    border-top:1px solid var(--border);
    display:flex;gap:10px;
    justify-content:flex-end
}

/* ===== Detail Items ===== */
.detail-item{
    display:flex;justify-content:space-between;align-items:flex-start;
    padding:13px 0;
    border-bottom:1px solid var(--border-subtle)
}
.detail-item:last-child{border-bottom:none}
.detail-label{color:var(--text-muted);font-size:13px;font-weight:500}
.detail-value{color:var(--text);text-align:right;word-break:break-all;max-width:60%;font-size:13px;font-weight:500}

/* ===== DNS Section ===== */
.dns-section{margin-top:28px}
.dns-title{
    font-size:15px;font-weight:600;
    margin-bottom:14px;
    display:flex;justify-content:space-between;align-items:center;
    color:#fff
}
.dns-record{
    padding:14px 18px;
    background:var(--bg-input);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-sm);
    margin-bottom:8px
}
.dns-record:hover{border-color:var(--border)}
.dns-record-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.dns-type{font-weight:700;font-size:10px;padding:3px 8px;border-radius:4px;margin-right:10px;text-transform:uppercase;letter-spacing:0.5px}
.dns-type.A,.dns-type.AAAA{background:var(--green-bg);color:var(--green)}
.dns-type.CNAME{background:var(--accent-subtle);color:var(--accent)}
.dns-type.MX{background:var(--orange-bg);color:var(--orange)}
.dns-type.TXT{background:var(--purple-bg);color:var(--purple)}
.dns-name{color:#fff;font-weight:500}
.dns-content{color:var(--text-dim);word-break:break-all;font-size:13px}
.dns-meta{color:var(--text-muted);font-size:11px;margin-top:8px;display:flex;gap:16px}

/* ===== Log Box ===== */
.log-box{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:18px;
    max-height:400px;
    overflow-y:auto;
    font-family:'JetBrains Mono','Fira Code','SF Mono',monospace;
    font-size:12px;
    line-height:1.7
}
.log-line{padding:3px 0;color:var(--text-dim)}
.log-line.ok,.log-line.success{color:var(--green)}
.log-line.err,.log-line.error{color:var(--red)}
.log-line.warn,.log-line.warning{color:var(--yellow)}
.log-line.info{color:var(--accent)}
.log-time{color:var(--text-muted);margin-right:12px}

/* ===== Info Box ===== */
.info-box{
    padding:16px 20px;
    background:var(--accent-subtle);
    border:1px solid rgba(91,156,246,0.15);
    border-radius:var(--radius-sm);
    font-size:13px;
    color:var(--text-dim);
    line-height:1.6
}
.info-box strong{color:var(--accent)}

/* ===== Dropdowns ===== */
.dropdown{position:relative}
.dropdown-menu{
    position:absolute;top:calc(100% + 4px);right:0;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:6px;
    min-width:180px;
    z-index:50;
    display:none;
    box-shadow:var(--shadow-lg)
}
.dropdown-menu.show{display:block}
.dropdown-item{
    display:flex;align-items:center;gap:10px;
    width:100%;
    padding:9px 14px;
    background:none;border:none;
    color:var(--text-dim);
    font-size:13px;font-weight:500;
    text-align:left;cursor:pointer;
    border-radius:var(--radius-sm);
    font-family:inherit
}
.dropdown-item:hover{background:var(--bg-hover);color:var(--text)}
.dropdown-item i{width:16px;text-align:center;font-size:13px;opacity:0.7}

/* ===== Loading ===== */
.loading-overlay{
    position:fixed;inset:0;
    background:rgba(9,11,16,0.92);
    display:none;flex-direction:column;
    align-items:center;justify-content:center;
    z-index:200
}
.loading-overlay.active{display:flex}
.spinner{
    width:40px;height:40px;
    border:3px solid var(--border);
    border-top-color:var(--accent);
    border-radius:50%;
    animation:spin 0.8s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{margin-top:20px;color:var(--text-dim);font-size:14px;font-weight:500}

/* ===== Progress ===== */
.progress-container{width:360px;margin-top:28px;display:none}
.progress-container.active{display:block}
.progress-bar{height:6px;background:var(--bg-input);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--purple));border-radius:3px;transition:width 0.3s ease}
.progress-info{display:flex;justify-content:space-between;margin-top:12px;font-size:13px;color:var(--text-muted);font-weight:500}
.progress-status{text-align:center;margin-top:12px;font-size:12px;color:var(--text-dim)}

/* ===== Toast ===== */
.toast{
    position:fixed;bottom:24px;right:24px;
    padding:14px 22px;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    font-size:14px;font-weight:500;
    display:none;z-index:300;
    box-shadow:var(--shadow-lg)
}
.toast.show{display:flex;align-items:center;gap:10px}
.toast.ok{border-color:var(--green-border);color:var(--green)}
.toast.err{border-color:var(--red-border);color:var(--red)}

/* ===== Pagination ===== */
.pagination-bar{
    display:flex;justify-content:space-between;align-items:center;
    padding:16px 24px;
    border-top:1px solid var(--border);
    background:var(--bg-card);
    border-radius:0 0 var(--radius-lg) var(--radius-lg)
}
.pagination-info{color:var(--text-muted);font-size:13px;font-weight:500}
.pagination-controls{display:flex;align-items:center;gap:12px}
.pagination-pages{display:flex;gap:4px}
.pagination-pages .btn{min-width:36px;justify-content:center;font-weight:600}

/* ===== Checkbox ===== */
.checkbox{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}

/* ===== Login Page ===== */
.login-page{
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    padding:24px;
    background:var(--bg);
    background-image:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(91,156,246,0.08),transparent)
}
.login-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    padding:44px 40px;
    width:100%;max-width:420px;
    box-shadow:var(--shadow-lg),0 0 120px rgba(91,156,246,0.04)
}
.login-logo{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:36px}
.login-title{text-align:center;font-size:20px;font-weight:700;color:#fff;margin-bottom:8px;letter-spacing:-0.3px}
.login-subtitle{text-align:center;font-size:14px;color:var(--text-dim);margin-bottom:32px}
.login-tabs{display:flex;gap:4px;margin-bottom:28px;background:var(--bg-input);padding:3px;border-radius:var(--radius-sm)}
.login-tab{
    flex:1;
    padding:10px;
    text-align:center;
    background:transparent;
    border:none;
    border-radius:5px;
    cursor:pointer;
    font-size:13px;font-weight:600;
    color:var(--text-muted);
    font-family:inherit
}
.login-tab:hover{color:var(--text-dim)}
.login-tab.active{background:var(--accent);color:#fff;box-shadow:0 1px 4px rgba(91,156,246,0.3)}
.login-error{
    padding:14px 18px;
    background:var(--red-bg);
    border:1px solid var(--red-border);
    border-radius:var(--radius-sm);
    color:var(--red);
    font-size:13px;font-weight:500;
    margin-bottom:16px;
    display:none
}

/* ===== Domain Icon ===== */
.domain-icon{
    width:38px;height:38px;
    border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;flex-shrink:0;
    color:#fff;font-weight:600
}
.domain-icon.active{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.domain-icon.pending{background:var(--yellow-bg);color:var(--yellow);border:1px solid var(--yellow-border)}

/* ===== Admin ===== */
.admin-only{display:none}
.is-admin .admin-only{display:block}

/* ===== Scrollbar ===== */
::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ===== Highlight ===== */
.highlight{background:rgba(91,156,246,0.2);padding:1px 5px;border-radius:3px;font-weight:500}

/* ===== Responsive ===== */
@media(max-width:900px){
    .sidebar{width:60px;padding:12px 8px}
    .sidebar .logo-text,
    .sidebar .nav-item span,
    .sidebar .nav-label,
    .sidebar .stats-box,
    .sidebar .user-box{display:none}
    .sidebar .nav-item{justify-content:center;padding:12px}
    .sidebar .nav-item.active::before{display:none}
    .sidebar .logo{justify-content:center;padding:6px}
    .content{margin-left:60px;padding:20px 16px 80px 16px}
    .form-row{grid-template-columns:1fr}
    .stats-bar{flex-wrap:wrap;gap:16px}
}