/*
 * Professional UI system for admin + web frontend.
 * Direction: clean B2B SaaS, restrained motion, one accent color.
 */
:root{
    --ui-bg:#f7f8fb;
    --ui-surface:#ffffff;
    --ui-surface-soft:#f9fafb;
    --ui-ink:#101828;
    --ui-text:#344054;
    --ui-muted:#667085;
    --ui-subtle:#98a2b3;
    --ui-line:#e4e7ec;
    --ui-line-strong:#d0d5dd;
    --ui-primary:#2563eb;
    --ui-primary-hover:#1d4ed8;
    --ui-primary-soft:#eff6ff;
    --ui-success:#16a34a;
    --ui-warning:#d97706;
    --ui-danger:#dc2626;
    --ui-radius-sm:8px;
    --ui-radius-md:10px;
    --ui-radius-lg:14px;
    --ui-radius-xl:18px;
    --ui-shadow-xs:0 1px 2px rgba(16,24,40,.04);
    --ui-shadow-sm:0 4px 12px rgba(16,24,40,.06);
    --ui-shadow-md:0 12px 30px rgba(16,24,40,.08);
}

html{scroll-behavior:smooth}
.admin-ui,
.web-ui{
    color:var(--ui-text);
    background:var(--ui-bg) !important;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
.admin-ui:before,
.web-ui:before{
    display:none !important;
}

/* Shell */
.admin-ui .sidebar,
.web-ui .sidebar{
    background:#0b1220 !important;
    border-right:1px solid rgba(255,255,255,.08) !important;
    box-shadow:none !important;
}
.admin-ui .sidebar::-webkit-scrollbar,
.web-ui .sidebar::-webkit-scrollbar,
.admin-ui .sidebar nav::-webkit-scrollbar{width:6px}
.admin-ui .sidebar::-webkit-scrollbar-thumb,
.web-ui .sidebar::-webkit-scrollbar-thumb,
.admin-ui .sidebar nav::-webkit-scrollbar-thumb{background:#334155;border-radius:999px}

.admin-ui .admin-sidebar-brand,
.web-ui .brand{
    background:#111a2e !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:var(--ui-radius-xl) !important;
    box-shadow:none !important;
}
.web-ui .brand{padding:14px 12px 18px !important;margin-bottom:16px !important}
.web-ui .brand-logo,
.admin-ui .admin-sidebar-brand .w-10{
    color:#0b1220 !important;
    background:#fff !important;
    box-shadow:none !important;
}
.web-ui .nav-title,
.admin-ui .sidebar .text-slate-400,
.admin-ui .sidebar p{
    color:#8ea0b8 !important;
}
.web-ui .nav a,
.admin-ui .sidebar nav a,
.admin-ui .sidebar nav div[onclick]{
    border:1px solid transparent !important;
    color:#cbd5e1 !important;
    transition:background .16s ease,border-color .16s ease,color .16s ease !important;
    transform:none !important;
}
.web-ui .nav a:hover,
.web-ui .nav a.active,
.admin-ui .sidebar nav a:hover,
.admin-ui .sidebar nav a.is-active,
.admin-ui .sidebar nav div[onclick]:hover{
    color:#fff !important;
    background:#172033 !important;
    border-color:rgba(255,255,255,.08) !important;
    transform:none !important;
}
.web-ui .nav a.active:before{
    width:3px !important;
    height:20px !important;
    background:var(--ui-primary) !important;
}
.admin-ui .admin-shell-header,
.web-ui .topbar{
    background:rgba(255,255,255,.94) !important;
    border-bottom:1px solid var(--ui-line) !important;
    box-shadow:none !important;
    backdrop-filter:blur(12px);
}
.admin-ui .admin-header-title,
.web-ui .topbar strong{
    color:var(--ui-ink) !important;
    letter-spacing:-.02em !important;
}
.admin-ui .admin-header-pill{
    background:var(--ui-primary-soft) !important;
    color:#1d4ed8 !important;
    border-color:#dbeafe !important;
}

/* Layout and surfaces */
.admin-ui main.flex-1,
.web-ui .page{
    max-width:1440px;
}
.web-ui .page{padding:28px}
.admin-ui .card,
.admin-ui .table-container,
.admin-ui .modal-content,
.web-ui .card,
.web-ui .hero,
.web-ui .toolbar-card,
.web-ui .plan-card,
.web-ui .record-card,
.web-ui .message-card,
.web-ui .locked-preview,
.web-ui .empty{
    background:var(--ui-surface) !important;
    border:1px solid var(--ui-line) !important;
    border-radius:var(--ui-radius-xl) !important;
    box-shadow:var(--ui-shadow-xs) !important;
}
.admin-ui .card:hover,
.web-ui a.card:hover,
.web-ui .plan-card:hover{
    border-color:var(--ui-line-strong) !important;
    box-shadow:var(--ui-shadow-sm) !important;
    transform:none !important;
}

/* Typography */
.admin-ui h1,
.admin-ui h2,
.admin-ui h3,
.web-ui h1,
.web-ui h2,
.web-ui h3,
.web-ui .domain-name,
.web-ui .stat-num{
    color:var(--ui-ink) !important;
    letter-spacing:-.025em !important;
}
.web-ui .hero h1{
    font-size:clamp(32px,3.2vw,46px) !important;
    line-height:1.08 !important;
    letter-spacing:-.045em !important;
}
.web-ui .hero p,
.web-ui .muted,
.web-ui .hint,
.admin-ui .text-slate-500,
.admin-ui .text-gray-500{
    color:var(--ui-muted) !important;
}
.web-ui .section-kicker{
    color:var(--ui-muted) !important;
    letter-spacing:.03em !important;
    text-transform:none !important;
}

/* Buttons */
.admin-ui .btn,
.web-ui .btn{
    min-height:36px;
    border-radius:var(--ui-radius-md) !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease !important;
}
.admin-ui .btn:active,
.web-ui .btn:active{transform:translateY(1px) !important}
.admin-ui .btn-primary,
.admin-ui .btn-success,
.web-ui .btn{
    color:#fff !important;
    background:var(--ui-primary) !important;
    border:1px solid var(--ui-primary) !important;
    box-shadow:var(--ui-shadow-xs) !important;
}
.admin-ui .btn-primary:hover,
.admin-ui .btn-success:hover,
.web-ui .btn:hover{
    background:var(--ui-primary-hover) !important;
    border-color:var(--ui-primary-hover) !important;
    box-shadow:var(--ui-shadow-sm) !important;
    transform:translateY(-1px);
}
.admin-ui .btn-outline,
.web-ui .btn.secondary{
    color:var(--ui-text) !important;
    background:#fff !important;
    border:1px solid var(--ui-line-strong) !important;
    box-shadow:none !important;
}
.admin-ui .btn-outline:hover,
.web-ui .btn.secondary:hover{
    color:var(--ui-primary) !important;
    background:var(--ui-primary-soft) !important;
    border-color:#bfdbfe !important;
    box-shadow:none !important;
}
.admin-ui .btn-warning{background:#f59e0b !important;color:#111827 !important;border-color:#f59e0b !important}
.admin-ui .btn-danger,
.web-ui .btn.danger{background:var(--ui-danger) !important;color:#fff !important;border-color:var(--ui-danger) !important}
.web-ui .btn.ok{background:var(--ui-success) !important;border-color:var(--ui-success) !important}

/* Forms */
.admin-ui .form-input,
.admin-ui .form-select,
.admin-ui textarea.form-input,
.web-ui .input,
.web-ui .select,
.web-ui .textarea{
    border-radius:var(--ui-radius-md) !important;
    border:1px solid var(--ui-line-strong) !important;
    background:#fff !important;
    color:var(--ui-ink) !important;
    box-shadow:none !important;
    transition:border-color .15s ease,box-shadow .15s ease !important;
}
.admin-ui .form-input:hover,
.admin-ui .form-select:hover,
.admin-ui textarea.form-input:hover,
.web-ui .input:hover,
.web-ui .select:hover,
.web-ui .textarea:hover{
    border-color:#98a2b3 !important;
}
.admin-ui .form-input:focus,
.admin-ui .form-select:focus,
.admin-ui textarea.form-input:focus,
.web-ui .input:focus,
.web-ui .select:focus,
.web-ui .textarea:focus{
    border-color:var(--ui-primary) !important;
    box-shadow:0 0 0 3px rgba(37,99,235,.12) !important;
}
.admin-ui .form-label,
.web-ui .label{
    color:var(--ui-ink) !important;
    font-weight:800 !important;
}

/* Tables */
.admin-ui .table-container,
.web-ui table{
    max-width:100%;
    overflow-x:auto !important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    border-radius:var(--ui-radius-lg) !important;
    border:1px solid var(--ui-line) !important;
}
.admin-ui table,
.web-ui table{border-color:var(--ui-line) !important}
.admin-ui table th,
.web-ui th{
    height:44px;
    background:#f9fafb !important;
    color:#475467 !important;
    font-weight:800 !important;
}
.admin-ui table td,
.web-ui td{
    color:var(--ui-text) !important;
    border-bottom-color:#f2f4f7 !important;
}
.admin-ui tbody tr:hover td,
.web-ui tbody tr:hover td{background:#f9fafb !important}
.admin-ui table tbody tr:hover,
.web-ui table tbody tr:hover{transform:none !important}

/* Numeric semantics: money/count/metrics should not look like plain text */
.admin-ui .ui-num,
.web-ui .ui-num{
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum";
    font-weight:750 !important;
    letter-spacing:-.015em;
}
.admin-ui .ui-num-money,
.admin-ui table td.ui-num-money,
.web-ui .ui-num-money,
.web-ui table td.ui-num-money{
    color:#059669 !important;
}
.admin-ui .ui-num-positive,
.admin-ui table td.ui-num-positive,
.web-ui .ui-num-positive,
.web-ui table td.ui-num-positive{
    color:#16a34a !important;
}
.admin-ui .ui-num-negative,
.admin-ui table td.ui-num-negative,
.web-ui .ui-num-negative,
.web-ui table td.ui-num-negative{
    color:#dc2626 !important;
}
.admin-ui .ui-num-count,
.admin-ui table td.ui-num-count,
.web-ui .ui-num-count,
.web-ui table td.ui-num-count,
.admin-ui #totalCount,
.admin-ui #batchAvailCount,
.admin-ui #addDomainSelectedCount{
    color:#2563eb !important;
    font-weight:800 !important;
}
.admin-ui .ui-num-muted,
.admin-ui table td.ui-num-muted,
.web-ui .ui-num-muted,
.web-ui table td.ui-num-muted{
    color:#667085 !important;
    font-weight:700 !important;
}
.admin-ui .ui-num-rate,
.admin-ui table td.ui-num-rate,
.web-ui .ui-num-rate,
.web-ui table td.ui-num-rate{
    color:#7c3aed !important;
}
.admin-ui .ui-num-order,
.web-ui .ui-num-order{
    color:#475467 !important;
    font-weight:650 !important;
}
.admin-ui table td.ui-num,
.web-ui table td.ui-num{
    white-space:nowrap;
}

/* Badges, chips, alerts */
.admin-ui .badge,
.web-ui .badge,
.web-ui .chip{
    display:inline-flex;
    align-items:center;
    border:1px solid var(--ui-line) !important;
    background:#f9fafb !important;
    color:#475467 !important;
    font-weight:800 !important;
    box-shadow:none !important;
}
.admin-ui .badge:hover,
.web-ui .badge:hover,
.web-ui .chip:hover{
    transform:none !important;
    box-shadow:none !important;
}
.admin-ui .badge-success,
.web-ui .badge.ok{background:#ecfdf3 !important;color:#027a48 !important;border-color:#abefc6 !important}
.admin-ui .badge-warning,
.web-ui .badge.warn{background:#fffaeb !important;color:#b54708 !important;border-color:#fedf89 !important}
.admin-ui .badge-danger,
.web-ui .badge.danger{background:#fef3f2 !important;color:#b42318 !important;border-color:#fecdca !important}
.admin-ui .badge-info{background:var(--ui-primary-soft) !important;color:#1d4ed8 !important;border-color:#bfdbfe !important}
.admin-ui .alert,
.web-ui .alert{
    border-radius:var(--ui-radius-md) !important;
    box-shadow:none !important;
}

/* Admin dashboard */
.admin-ui #statCards > div,
.admin-ui #statCards + .grid > div{
    min-height:116px;
    overflow:hidden;
    color:var(--ui-ink) !important;
    background:#fff !important;
    border:1px solid var(--ui-line) !important;
    border-left:3px solid var(--ui-primary) !important;
    border-radius:var(--ui-radius-xl) !important;
    box-shadow:var(--ui-shadow-xs) !important;
}
.admin-ui #statCards > div:nth-child(1){border-left-color:#2563eb !important}
.admin-ui #statCards > div:nth-child(2){border-left-color:#16a34a !important}
.admin-ui #statCards > div:nth-child(3){border-left-color:#d97706 !important}
.admin-ui #statCards > div:nth-child(4){border-left-color:#dc2626 !important}
.admin-ui #statCards + .grid > div:nth-child(1){border-left-color:#059669 !important}
.admin-ui #statCards + .grid > div:nth-child(2){border-left-color:#2563eb !important}
.admin-ui #statCards + .grid > div:nth-child(3){border-left-color:#7c3aed !important}
.admin-ui #statCards + .grid > div:nth-child(4){border-left-color:#475467 !important}
.admin-ui #statCards > div:hover,
.admin-ui #statCards + .grid > div:hover{
    border-color:var(--ui-line-strong) !important;
    box-shadow:var(--ui-shadow-sm) !important;
    transform:none !important;
}
.admin-ui #statCards > div:after,
.admin-ui #statCards + .grid > div:after{display:none !important}
.admin-ui #statCards [id^="stat"],
.admin-ui #statCards + .grid [id^="stat"]{
    color:#475467 !important;
    font-weight:700 !important;
    letter-spacing:-.025em !important;
}
.admin-ui #statCards > div span,
.admin-ui #statCards + .grid > div span,
.admin-ui #statCards > div div:last-child,
.admin-ui #statCards + .grid > div div:last-child{
    color:var(--ui-muted) !important;
}
.admin-ui #statCards > div .bg-white\/20,
.admin-ui #statCards + .grid > div [class*="bg-"]{
    background:var(--ui-primary-soft) !important;
    color:var(--ui-primary) !important;
}
body.admin-ui #statCards #statTotalUsers{color:#2563eb !important}
body.admin-ui #statCards #statActiveDomains{color:#16a34a !important}
body.admin-ui #statCards #statPendingOrders{color:#d97706 !important}
body.admin-ui #statCards #statOpenTickets{color:#dc2626 !important}
body.admin-ui #statCards + .grid #statTodayAmount{color:#059669 !important}
body.admin-ui #statCards + .grid #statWeekAmount{color:#2563eb !important}
body.admin-ui #statCards + .grid #statMonthAmount{color:#7c3aed !important}
body.admin-ui #statCards + .grid #statTotalAmount{color:#0891b2 !important}
.admin-ui #statCards > div:nth-child(1) .bg-white\/20{background:#eff6ff !important;color:#2563eb !important}
.admin-ui #statCards > div:nth-child(2) .bg-white\/20{background:#ecfdf3 !important;color:#16a34a !important}
.admin-ui #statCards > div:nth-child(3) .bg-white\/20{background:#fffaeb !important;color:#d97706 !important}
.admin-ui #statCards > div:nth-child(4) .bg-white\/20{background:#fef3f2 !important;color:#dc2626 !important}
.admin-ui #statCards + .grid > div:nth-child(1) [class*="bg-"]{background:#ecfdf3 !important;color:#059669 !important}
.admin-ui #statCards + .grid > div:nth-child(2) [class*="bg-"]{background:#eff6ff !important;color:#2563eb !important}
.admin-ui #statCards + .grid > div:nth-child(3) [class*="bg-"]{background:#f4f3ff !important;color:#7c3aed !important}
.admin-ui #statCards + .grid > div:nth-child(4) [class*="bg-"]{background:#f2f4f7 !important;color:#475467 !important}
.admin-ui #statCards > div:nth-child(1) span{color:#5281ea !important}
.admin-ui #statCards > div:nth-child(2) span{color:#16a34a !important}
.admin-ui #statCards > div:nth-child(3) span{color:#d97706 !important}
.admin-ui #statCards > div:nth-child(4) span{color:#dc2626 !important}
.admin-ui #statCards + .grid > div:nth-child(1) span{color:#059669 !important}
.admin-ui #statCards + .grid > div:nth-child(2) span{color:#2563eb !important}
.admin-ui #statCards + .grid > div:nth-child(3) span{color:#7c3aed !important}
.admin-ui #statCards + .grid > div:nth-child(4) span{color:#667085 !important}
.admin-ui #revenueChart,
.admin-ui #userChart{
    width:100% !important;
    background:#fff !important;
    border:1px solid #f2f4f7 !important;
    border-radius:var(--ui-radius-lg) !important;
    padding:8px;
}

/* Web frontend */
.web-ui .hero{
    padding:30px !important;
    background:#fff !important;
    border-left:3px solid var(--ui-primary) !important;
    box-shadow:var(--ui-shadow-xs) !important;
}
.web-ui .hero:after{display:none !important}
.web-ui .domain-card,
.web-ui .stat-card{
    border-left:3px solid var(--ui-primary) !important;
}
.web-ui .stat-card>span,
.web-ui .stat-card-main>span{
    background:var(--ui-primary-soft) !important;
    color:var(--ui-primary) !important;
}
.web-ui .price{
    color:#e11d48 !important;
    text-shadow:none !important;
}
.web-ui .hero-mini-domain strong{
    color:#e11d48 !important;
    font-variant-numeric:tabular-nums;
}
.web-ui .grid-4 > .card:nth-child(1) .stat-num{color:#2563eb !important}
.web-ui .grid-4 > .card:nth-child(2) .stat-num{color:#16a34a !important}
.web-ui .grid-4 > .card:nth-child(3) .stat-num{color:#7c3aed !important}
.web-ui .grid-4 > .card:nth-child(4) .stat-num{color:#059669 !important}
.web-ui .stat-num{
    font-variant-numeric:tabular-nums;
}
.web-ui .finance-balance,
.web-ui .balance-amount{
    color:#059669 !important;
    font-variant-numeric:tabular-nums;
}
.web-ui .vip-current{
    background:#0b1220 !important;
    color:#fff !important;
}
.web-ui .message-card.staff{
    background:var(--ui-primary-soft) !important;
    border-color:#bfdbfe !important;
}
.web-ui .notification-card.unread{
    background:#fffaeb !important;
    border-color:#fedf89 !important;
}

/* Pagination */
.admin-ui .admin-page-btn.active{
    background:var(--ui-primary) !important;
    border-color:var(--ui-primary) !important;
}
.admin-ui .admin-page-jump:focus,
.admin-ui .admin-page-size:focus{
    border-color:var(--ui-primary) !important;
    box-shadow:0 0 0 3px rgba(37,99,235,.12) !important;
}

/* Motion: restrained, no glow */
.admin-ui .card,
.admin-ui .table-container,
.admin-ui .modal-content,
.admin-ui #statCards > div,
.admin-ui #statCards + .grid > div,
.web-ui .card,
.web-ui .hero,
.web-ui .toolbar-card,
.web-ui .domain-card,
.web-ui .stat-card,
.web-ui .plan-card,
.web-ui .record-card,
.web-ui .message-card,
.web-ui .locked-preview,
.web-ui .vip-current,
.web-ui .notification-card{
    will-change:auto !important;
    transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,transform .16s ease !important;
}
.ui-hoverable{
    position:relative !important;
    isolation:auto !important;
    overflow:visible !important;
}
.ui-hover-glow{display:none !important}
.ui-hoverable > :not(.ui-hover-glow){
    position:relative;
    z-index:auto;
}
.admin-ui .card.ui-hoverable:hover,
.admin-ui #statCards > div.ui-hoverable:hover,
.admin-ui #statCards + .grid > div.ui-hoverable:hover,
.web-ui .card.ui-hoverable:hover,
.web-ui .hero.ui-hoverable:hover,
.web-ui .toolbar-card.ui-hoverable:hover,
.web-ui .domain-card.ui-hoverable:hover,
.web-ui .stat-card.ui-hoverable:hover,
.web-ui .plan-card.ui-hoverable:hover,
.web-ui .record-card.ui-hoverable:hover,
.web-ui .message-card.ui-hoverable:hover,
.web-ui .locked-preview.ui-hoverable:hover,
.web-ui .vip-current.ui-hoverable:hover,
.web-ui .notification-card.ui-hoverable:hover{
    transform:translateY(-1px) !important;
    border-color:var(--ui-line-strong) !important;
    box-shadow:var(--ui-shadow-sm) !important;
}
.admin-ui .btn i,
.web-ui .btn i,
.admin-ui .sidebar i,
.web-ui .nav i{
    transition:color .16s ease,transform .16s ease;
}
.admin-ui .btn:hover i,
.web-ui .btn:hover i{
    transform:translateX(1px);
}
.admin-ui .sidebar a:hover i,
.web-ui .nav a:hover i{
    transform:none !important;
}
.admin-ui .modal.show .modal-content{
    animation:uiModalIn .16s ease-out;
}
@keyframes uiModalIn{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}

@media(max-width:900px){
    .admin-ui{
        overflow-x:hidden;
    }
    .admin-ui main.flex-1{
        width:100%;
        min-width:0 !important;
        max-width:100%;
        overflow-x:hidden;
    }
    .admin-ui .table-container > table{
        min-width:720px;
    }
    .admin-ui .modal-content .flex.justify-end{
        flex-wrap:wrap;
    }
    .web-ui .page{padding:14px 12px 96px}
    .web-ui .card,
    .web-ui .hero{
        border-radius:var(--ui-radius-lg) !important;
        padding:18px !important;
    }
    .web-ui .hero h1{font-size:34px !important}
    .web-ui .mobile-tabs{
        background:rgba(255,255,255,.96) !important;
        border-top:1px solid var(--ui-line) !important;
        backdrop-filter:blur(12px);
    }
    .web-ui .mobile-tabs a.active{
        background:var(--ui-primary) !important;
        color:#fff !important;
    }
}
@media (prefers-reduced-motion: reduce){
    .admin-ui *,
    .web-ui *{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
}