/* ============================================
   ZY电竞系统 - 完整布局 + 动效体系
   Layout System + Animation + Components
   ============================================ */

/* === Design Tokens === */
:root {
    --bg: #F5F5F7;
    --card: #FFFFFF;
    --bar: #0A0A0A;
    --bar-hover: #1A1A1A;
    --hover-bg: #ECECED;
    --border-color: #E0E0E2;
    --border-light: #EBEBED;

    --primary: #0A0A0A;
    --primary-hover: #1E1E1E;
    --primary-active: #000000;
    --primary-light: #F0F0F2;
    --primary-ultra-light: #F8F8FA;

    --success: #1C1C1C;
    --success-light: #F0F0F0;
    --warning: #3A3A3A;
    --warning-light: #F5F5F5;
    --danger: #0A0A0A;
    --danger-light: #F0F0F0;
    --info: #2A2A2A;
    --info-light: #F2F2F4;

    --text-primary: #0A0A0A;
    --text-secondary: #505058;
    --text-tertiary: #8E8E93;
    --text-inverse: #FFFFFF;
    --sidebar-text: rgba(255,255,255,.82);
    --sidebar-active: #FFFFFF;
    --sidebar-inactive: rgba(255,255,255,.40);

    --sidebar-bg: #08080A;
    --sidebar-width: 252px;
    --sidebar-collapsed: 70px;

    --r-xs: 3px; --r-sm: 6px; --r-md: 10px;
    --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.03);
    --shadow-sm: 0 2px 6px rgba(0,0,0,.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,.06);
    --shadow-lg: 0 8px 30px rgba(0,0,0,.08);
    --shadow-xl: 0 20px 50px rgba(0,0,0,.12);

    --ease-out: cubic-bezier(.16,1,.3,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ================================
   Reset & Base
   ================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:14px; -webkit-font-smoothing:antialiased }
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--bg); color: var(--text-secondary);
    line-height: 1.65; overflow-x: hidden;
}
a { color: var(--text-primary); text-decoration:none; transition:color .15s ease }
a:hover { color: var(--primary) }

/* === Global Image Safety (防止图片溢出) === */
img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:#C8C8CC; border-radius:100px }
::-webkit-scrollbar-thumb:hover { background:#A0A0A6 }
::selection { background:var(--primary); color:#FFF }

/* ================================
   ANIMATIONS
   ================================ */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(20px) }
    to   { opacity:1; transform:translateY(0) }
}
@keyframes fadeInDown {
    from { opacity:0; transform:translateY(-16px) }
    to   { opacity:1; transform:translateY(0) }
}
@keyframes fadeInLeft {
    from { opacity:0; transform:translateX(-24px) }
    to   { opacity:1; transform:translateX(0) }
}
@keyframes fadeInRight {
    from { opacity:0; transform:translateX(24px) }
    to   { opacity:1; transform:translateX(0) }
}
@keyframes fadeIn {
    from { opacity:0 } to { opacity:1 }
}
@keyframes scaleIn {
    from { opacity:0; transform:scale(.92) }
    to   { opacity:1; transform:scale(1) }
}
@keyframes slideInLeft {
    from { transform:translateX(-100%) } to { transform:translateX(0) }
}
@keyframes float {
    0%,100% { transform:translateY(0) }
    50%      { transform:translateY(-6px) }
}
@keyframes shimmer {
    0%   { background-position:-200% 0 }
    100% { background-position:200% 0 }
}
@keyframes shake {
    0%,100% { transform:translateX(0) }
    20%    { transform:translateX(-6px) }
    40%    { transform:translateX(6px) }
    60%    { transform:translateX(-4px) }
    80%    { transform:translateX(4px) }
}
@keyframes ripple { to { transform:scale(4); opacity:0 } }
@keyframes rotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes pulse-soft { 0%,100%{opacity:1} 50%{opacity:.6} }
@keyframes borderGlow {
    0%,100% { border-color:rgba(10,10,10,.15) }
    50%      { border-color:rgba(10,10,10,.35) }
}
@keyframes dotPulse {
    0%,80%,100% { transform:scale(.6); opacity:.4 }
    40%           { transform:scale(1); opacity:1 }
}

/* Animation utility classes */
.anim-fade-up { opacity:0; animation:fadeInUp .55s var(--ease-out) forwards }
.anim-fade-down { opacity:0; animation:fadeInDown .5s var(--ease-out) forwards }
.anim-scale-in { opacity:0; animation:scaleIn .45s var(--ease-spring) forwards }
.stagger > *:nth-child(1){animation-delay:0ms!important}
.stagger > *:nth-child(2){animation-delay:60ms!important}
.stagger > *:nth-child(3){animation-delay:120ms!important}
.stagger > *:nth-child(4){animation-delay:180ms!important}
.stagger > *:nth-child(5){animation-delay:240ms!important}
.stagger > *:nth-child(6){animation-delay:300ms!important}
.hover-lift { transition:transform .25s var(--ease-out), box-shadow .25s ease }
.hover-lift:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg) }
.glass {
    background:rgba(255,255,255,.72);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
}
.skeleton {
    background:linear-gradient(90deg,#f0f0f2 25%,#e8e8ec 50%,#f0f0f2 75%);
    background-size:200% 100%; animation:shimmer 1.5s infinite;
    border-radius:var(--r-sm);
}

/* ================================
   LAYOUT SYSTEM (核心布局)
   ================================ */
.zy-layout {
    display:flex; min-height:100vh;
    background:var(--bg); position:relative;
}
.zy-layout::before {
    content:''; position:fixed; top:0;left:0;right:0;bottom:0;
    background:
        radial-gradient(circle at 20% 50%, rgba(0,0,0,.015) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0,0,0,.01) 0%, transparent 40%);
    pointer-events:none; z-index:0;
}

/* Sidebar */
.zy-sidebar {
    width:var(--sidebar-width); background:var(--sidebar-bg);
    display:flex; flex-direction:column;
    position:fixed; left:0; top:0; bottom:0; z-index:1000;
    transition:width .4s var(--ease-out);
    border-right:1px solid rgba(255,255,255,.05);
    animation:slideInLeft .5s var(--ease-out);
}
.zy-sidebar.collapsed { width:var(--sidebar-collapsed) }
.zy-sidebar.collapsed .sidebar-logo span,
.zy-sidebar.collapsed .menu-item > span,
.zy-sidebar.collapsed .user-meta,
.zy-sidebar.collapsed .balance-info span:not(:first-child),
.zy-sidebar.collapsed .balance-info b { display:none }

/* Main Content Area */
.zy-main {
    flex:1; margin-left:var(--sidebar-width);
    display:flex; flex-direction:column;
    min-height:100vh;
    transition:margin-left .4s var(--ease-out);
    position:relative; z-index:1;
    animation:fadeInRight .5s var(--ease-out) .15s both;
}
.zy-main.expanded { margin-left:var(--sidebar-collapsed) }

/* Sidebar Logo */
.sidebar-logo {
    padding:22px 20px; display:flex; align-items:center; gap:11px;
    height:66px; border-bottom:1px solid rgba(255,255,255,.05);
    position:relative; overflow:hidden;
}
.sidebar-logo::after {
    content:''; position:absolute; bottom:0; left:20px; right:20px;
    height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
.sidebar-logo img {
    width:36px;height:36px;border-radius:var(--r-sm);
    object-fit: cover;
    transition:transform .3s var(--ease-spring);
    animation:scaleIn .5s var(--ease-spring) .3s both;
}
.sidebar-logo:hover img { transform:rotate(-5deg) scale(1.08) }
.sidebar-logo span {
    font-size:15.5px;font-weight:700;color:#fff;
    white-space:nowrap; letter-spacing:.03em;
    background:linear-gradient(135deg,#FFF 30%, rgba(255,255,255,.7) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Sidebar Navigation */
.sidebar-menu { flex:1;padding:10px 0 16px; overflow-y:auto;overflow-x:hidden }
.sidebar-menu::-webkit-scrollbar { width:2px }
.sidebar-menu::-webkit-scrollbar-thumb { background:rgba(255,255,255,.06) }

.menu-group-label {
    padding:18px 22px 8px; font-size:9.5px;font-weight:700;
    color:rgba(255,255,255,.20); text-transform:uppercase;
    letter-spacing:2.5px; white-space:nowrap;
}
.menu-item {
    display:flex; align-items:center;
    padding:10px 20px 10px 22px;
    color:var(--sidebar-inactive); cursor:pointer;
    transition:all .18s var(--ease-out);
    white-space:nowrap; font-size:13px;font-weight:500;
    min-height:42px; position:relative; margin:1.5px 8px; border-radius:var(--r-sm);
}
.menu-item svg { flex-shrink:0;width:18px;height:18px;margin-right:10px;transition:transform .2s ease }
.menu-item:hover {
    background:rgba(255,255,255,.07); color:rgba(255,255,255,.85);
    transform:translateX(3px);
}
.menu-item.active {
    background:rgba(255,255,255,.1); color:#fff;font-weight:600;
}
.menu-item.active::before {
    content:'';position:absolute;left:0;top:6px;bottom:6px;
    width:3px;background:#fff;border-radius:0 3px 3px 0;
}
.menu-item.has-sub { padding-right:12px }
.menu-arrow { margin-left:auto;flex-shrink:0;opacity:.4;transition:transform .25s ease }
.menu-item.has-sub.open .menu-arrow { transform:rotate(180deg);opacity:.7 }
.menu-sub { max-height:0; overflow:hidden; transition:max-height .35s var(--ease-out) }
.menu-sub.open { max-height:300px }
.menu-sub .menu-item {
    padding:8px 20px 8px 48px; margin:0 8px; font-size:12.5px;
    min-height:36px;color:rgba(255,255,255,.32);
}
.menu-sub .menu-item:hover { color:rgba(255,255,255,.65); transform:translateX(2px) }
.menu-sub .menu-item.active { color:rgba(255,255,255,.9); background:rgba(255,255,255,.06) }

/* Menu Badge (unread notification count) */
.menu-badge {
    margin-left: auto; background: #f5222d; color: #fff;
    font-size: 11px; font-weight: 700; min-width: 18px; height: 18px;
    border-radius: 9px; display: flex; align-items: center; justify-content: center;
    padding: 0 6px; line-height: 1;
}

/* Sidebar Footer / User Info */
.sidebar-footer {
    padding:14px 16px; border-top:1px solid rgba(255,255,255,.04);
}
.user-info { display:flex; align-items:center; gap:10px }
.user-avatar {
    width:34px;height:34px;border-radius:50%;
    background:linear-gradient(135deg, #222, #444);
    display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.7);font-size:13px;font-weight:700;
    flex-shrink:0;
}
.user-meta { flex:1;min-width:0 }
.user-meta .name { font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.user-meta .role { font-size:11px;color:rgba(255,255,255,.35);margin-top:1px }
.balance-info {
    background:rgba(255,255,255,.05); border-radius:var(--r-sm);
    padding:10px 12px; margin-bottom:12px;
}
.balance-info span { font-size:11.5px;color:rgba(255,255,255,.45) }
.balance-info b { color:#fff;font-weight:700;font-size:14px }

/* Header */
.zy-header {
    height:58px; background:rgba(255,255,255,.78);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--border-light);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 28px; position:sticky; top:0; z-index:100;
    transition:background .25s ease, box-shadow .25s ease;
}
.zy-header.scrolled {
    background:rgba(255,255,255,.92);
    box-shadow:0 1px 8px rgba(0,0,0,.04);
}
.header-left, .header-right { display:flex;align-items:center;gap:12px }
.toggle-btn {
    width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    border-radius:var(--r-sm); cursor:pointer; color:var(--text-secondary);
    transition:all .2s ease; border:none;background:none;
}
.toggle-btn:hover { background:var(--hover-bg); color:var(--text-primary) }
.page-title-text { font-size:16px;font-weight:700;color:var(--text-primary); letter-spacing:-.01em }
.header-icon {
    width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    border-radius:var(--r-sm); cursor:pointer; color:var(--text-tertiary);
    transition:all .2s ease;
}
.header-icon:hover { background:var(--hover-bg); color:var(--text-primary) }

/* Content Area */
.zy-content { flex:1;padding:28px 30px 40px; min-height:calc(100vh - 58px) }

/* Mobile Overlay */
.sidebar-overlay {
    display:none; position:fixed;inset:0;
    background:rgba(0,0,0,.4); z-index:999;
    opacity:0; transition:opacity .3s ease;
}
.sidebar-overlay.show { display:block; opacity:1 }

@media(max-width:1300px){
    :root { --sidebar-width:220px }
    .zy-content { padding:24px 24px 36px }
}
@media(max-width:900px){
    .zy-sidebar {
        transform:translateX(-100%); z-index:1100;
        transition:transform .35s var(--ease-out);
    }
    .zy-sidebar.show { transform:translateX(0) }
    .zy-main { margin-left:0!important }
    .zy-header { padding:0 16px }
    .zy-content { padding:20px 16px 32px }
    .mobile-menu-btn { display:block!important }
}
@media(max-width:480px){
    .zy-content { padding:16px 12px 24px }
    .page-title-text { font-size:14px }
}

/* ================================
   PANELS & CARDS
   ================================ */
.panel {
    background:var(--card); border:1px solid var(--border-color);
    border-radius:var(--r-lg); padding:24px;
    box-shadow:var(--shadow-xs); transition:box-shadow .25s ease;
    animation:fadeInUp .5s var(--ease-out) both;
}
.panel:hover { box-shadow:var(--shadow-md) }

.panel-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:20px; padding-bottom:16px;
    border-bottom:1px solid var(--border-light);
}
.panel-title { font-size:16px;font-weight:700;color:var(--text-primary); letter-spacing:-.01em }
.panel-subtitle { font-size:12px;color:var(--text-tertiary);margin-top:3px }

/* Table */
.data-table { width:100%; border-collapse:collapse; font-size:13px }
.data-table th {
    text-align:left; padding:12px 14px;
    background:#FAFBFC; color:var(--text-secondary);
    font-weight:600; font-size:11.5px;
    text-transform:uppercase; letter-spacing:.06em;
    border-bottom:1px solid var(--border-color); white-space:nowrap;
}
.data-table td { padding:11px 14px; border-bottom:1px solid var(--border-light); color:var(--text-secondary); line-height:1.6 }
.data-table tr:last-child td { border-bottom:none }
.data-table tr:hover td { background:var(--primary-ultra-light) }
.table-responsive { overflow-x:auto;-webkit-overflow-scrolling:touch; border-radius:var(--r-md); border:1px solid var(--border-color) }

/* Buttons */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:9px 18px; border-radius:var(--r-sm); font-size:13px;
    font-weight:550; cursor:pointer; border:none; transition:all .2s var(--ease-out);
    font-family:inherit; line-height:1.4; white-space:nowrap;
}
.btn-primary {
    background:var(--primary); color:#fff;
}
.btn-primary:hover { background:var(--primary-hover); transform:translateY(-1px); box-shadow:var(--shadow-sm) }
.btn-default {
    background:var(--card); color:var(--text-secondary);
    border:1.5px solid var(--border-color);
}
.btn-default:hover { border-color:var(--text-primary); color:var(--text-primary); background:var(--primary-ultra-light) }
.btn-danger { background:var(--danger); color:#fff }
.btn-danger:hover { opacity:.88; transform:translateY(-1px) }
.btn-success { background:var(--success); color:#fff }
.btn-success:hover { opacity:.88; transform:translateY(-1px) }
.btn-sm { padding:6px 13px; font-size:12px }
.btn-xs { padding:4px 10px; font-size:11.5px; border-radius:var(--r-xs) }
.btn-group { display:flex; gap:8px; flex-wrap:wrap }

/* Form Elements */
.form-group { margin-bottom:16px }
.form-label { display:block; margin-bottom:6px; font-size:12.5px;font-weight:600;color:var(--text-primary) }
.form-input, .form-select, .form-textarea {
    width:100%; padding:10px 14px;
    background:#FAFBFC; border:1.5px solid var(--border-color);
    border-radius:var(--r-sm); color:var(--text-primary);
    font-size:13.5px; outline:none; transition:all .2s var(--ease-out);
    font-family:inherit;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color:var(--text-primary);
    box-shadow:0 0 0 3px rgba(10,10,10,.05); background:#fff;
}
.form-textarea { resize:vertical; min-height:80px }
.form-hint { font-size:11.5px;color:var(--text-tertiary);margin-top:4px }

/* Badge */
.badge {
    display:inline-flex; align-items:center; padding:3px 9px;
    border-radius:100px; font-size:11px;font-weight:600;
    line-height:1.6;
}
.badge-primary { background:#EEE; color:var(--text-primary) }
.badge-success { background:#F0F0F0; color:#333 }
.badge-warning { background:#F5F5F0; color:#555 }
.badge-danger { background:#F0F0F0; color:#222 }

/* Tabs */
.tabs { display:flex; gap:0; background:#F3F3F5; border-radius:var(--r-sm); padding:3.5px; margin-bottom:20px; overflow-x:auto }
.tab {
    padding:9px 18px; border-radius:5px; font-size:13px;
    font-weight:550; color:var(--text-secondary); cursor:pointer;
    border:none;background:none; transition:all .25s var(--ease-out);
    white-space:nowrap;
}
.tab.active { background:var(--card); color:var(--text-primary); font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.06) }
.tab:hover:not(.active) { color:var(--text-primary) }

/* Search bar */
.search-bar {
    display:flex; align-items:center; gap:8px;
    background:var(--card); border:1.5px solid var(--border-color);
    border-radius:var(--r-md); padding:8px 14px;
    max-width:360px; transition:border-color .2s ease;
}
.search-bar:focus-within { border-color:var(--text-primary) }
.search-bar input { border:none;background:none;outline:none;font-size:13.5px;color:var(--text-primary);width:100%;font-family:inherit }
.search-bar input::placeholder { color:var(--text-tertiary) }
.search-bar svg { color:var(--text-tertiary); flex-shrink:0 }

/* Empty state */
.empty-state {
    text-align:center; padding:60px 20px;
    animation:fadeInUp .5s var(--ease-out) both;
}
.empty-state-icon {
    width:64px;height:64px;margin:0 auto 16px;
    background:var(--primary-ultra-light); border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:var(--text-tertiary); font-size:26px;
}
.empty-state-title { font-size:17px;font-weight:700;color:var(--text-primary);margin-bottom:6px }
.empty-state-desc { font-size:13px;color:var(--text-tertiary);max-width:320px;margin:0 auto;line-height:1.6 }

/* Pagination */
.pagination { display:flex; justify-content:center; gap:6px; margin-top:24px; flex-wrap:wrap }
.page-btn {
    min-width:34px; height:34px; display:flex;align-items:center;justify-content:center;
    border:1px solid var(--border-color); border-radius:var(--r-sm);
    font-size:12.5px; color:var(--text-secondary); cursor:pointer;
    background:var(--card); transition:all .2s ease; padding:0 10px;
}
.page-btn:hover { border-color:var(--primary); color:var(--text-primary) }
.page-btn.active { background:var(--primary); color:#fff; border-color:var(--primary) }

/* Alert */
.alert {
    display:flex; align-items:flex-start; gap:12px;
    padding:14px 18px; border-radius:var(--r-md); margin-bottom:16px;
    font-size:13px; line-height:1.6; animation:fadeInUp .4s var(--ease-out) both;
}
.alert-icon { flex-shrink:0;width:22px;height:22px;margin-top:1px }
.alert-info { background:#F5F5FF;border:1px solid #E8E8F2;color:var(--text-secondary) }
.alert-warn { background:#FFFDF5;border:1px solid #F2EDE0;color:var(--text-secondary) }
.alert-error { background:#FFF5F5;border:1px solid #F2D8D8;color:var(--text-secondary) }
.alert-success { background:#F5FFF8;border:1px solid #D8F2DD;color:var(--text-secondary) }

/* Toast Notification */
.zy-toast {
    position:fixed;top:76px;right:20px;
    padding:13px 22px; border-radius:var(--r-md);
    color:#fff; font-size:13px; z-index:3000;
    display:flex; align-items:center; gap:9px;
    transform:translateX(calc(100% + 30px));
    transition:transform .4s cubic-bezier(.16,1,.3,1);
    box-shadow:var(--shadow-xl), 0 0 30px rgba(0,0,0,.08);
    font-weight:550; backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.1);
}
.zy-toast.show { transform:translateX(0) }
.zy-toast-success { background:linear-gradient(135deg, #1A1A1A, #2A2A2A) }
.zy-toast-error { background:linear-gradient(135deg, #0A0A0A, #1A1A1A); animation:toastIn .4s var(--ease-out) both, shake .5s ease .4s both }
.zy-toast-warning { background:linear-gradient(135deg, #2A2A2A, #3A3A3A); color:#fff }
.zy-toast-info { background:linear-gradient(135deg, #333, #444) }
@keyframes toastIn { from{opacity:0;transform:translateY(-12px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }

/* Modal */
.zy-modal-overlay, .modal-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,.35); backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center;
    z-index:2000; opacity:0; visibility:hidden;
    transition:all .35s var(--ease-out);
}
.zy-modal-overlay.show, .modal-overlay.show { opacity:1; visibility:visible }
.zy-modal-box, .modal-content {
    background:var(--card); border:1px solid var(--border-color);
    border-radius:var(--r-xl); width:90%; max-width:520px;
    overflow:hidden;
    box-shadow:var(--shadow-xl), 0 0 80px rgba(0,0,0,.1);
    animation:scaleIn .4s var(--ease-spring);
    border:1px solid rgba(255,255,255,.8);
}
@keyframes modalIn {
    from{transform:scale(.94) translateY(16px); opacity:0}
    to{transform:scale(1) translateY(0); opacity:1}
}
.modal-header, .zy-modal-header {
    padding:18px 22px; border-bottom:1px solid var(--border-light);
    display:flex; align-items:center; justify-content:space-between;
    background:linear-gradient(180deg, rgba(0,0,0,.005), transparent);
}
.modal-title, .zy-modal-title { font-size:15.5px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em }
.modal-close, .zy-modal-close {
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    border-radius:var(--r-sm);cursor:pointer;color:var(--text-tertiary);
    font-size:17px;transition:all .18s var(--ease-out);border:none;background:none;
}
.modal-close:hover, .zy-modal-close:hover { background:var(--hover-bg);color:var(--text-primary);transform:rotate(90deg) }
.modal-body, .zy-modal-body { padding:22px;overflow-y:auto;max-height:62vh;color:var(--text-secondary);font-size:13.5px;line-height:1.72 }
.modal-footer, .zy-modal-footer {
    padding:16px 22px; border-top:1px solid var(--border-light);
    display:flex; justify-content:flex-end; gap:10px; background:var(--primary-ultra-light);
}

/* Form components (inline with page views) */
.form-row { display:flex; gap:16px; margin-bottom:16px }
.form-row .form-group { flex:1 }
.form-actions { display:flex; gap:10px; margin-top:20px; justify-content:flex-end }

/* Status tag */
.status-tag {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 10px; border-radius:100px; font-size:11.5px;
    font-weight:600;
}
.status-dot { width:6px;height:6px;border-radius:50%; flex-shrink:0 }
.status-active .status-dot { background:#1C1C1C }
.status-inactive .status-dot { background:#999 }
.status-pending .status-dot { background:#B8971A }

/* Card grid */
.card-grid { display:grid; gap:16px; margin-bottom:24px }
.card-grid-2 { grid-template-columns:repeat(2,1fr) }
.card-grid-3 { grid-template-columns:repeat(3,1fr) }
.card-grid-4 { grid-template-columns:repeat(4,1fr) }

/* Stat card */
.stat-card {
    background:var(--card); border:1px solid var(--border-color);
    border-radius:var(--r-lg); padding:22px;
    position:relative; overflow:hidden;
    box-shadow:var(--shadow-xs);
    transition:all .3s var(--ease-out);
    animation:fadeInUp .5s var(--ease-out) both;
}
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg) }
.stat-card:nth-child(2) { animation-delay:.08s }
.stat-card:nth-child(3) { animation-delay:.16s }
.stat-card:nth-child(4) { animation-delay:.24s }
.stat-card-icon {
    width:46px;height:46px;border-radius:var(--r-md);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:14px; font-size:20px;
    background:linear-gradient(135deg, #0A0A0A, #333);
    color:#fff;
}
.stat-card-label { font-size:12.5px;color:var(--text-tertiary);font-weight:550;margin-bottom:8px; letter-spacing:.02em }
.stat-card-value { font-size:30px;font-weight:800;color:var(--text-primary);line-height:1.2;letter-spacing:-.8px }

/* Template card */
.template-card {
    background:var(--card); border:1px solid var(--border-color);
    border-radius:var(--r-lg); overflow:hidden;
    transition:all .3s var(--ease-out);
    animation:fadeInUp .5s var(--ease-out) both;
}
.template-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(0,0,0,.12) }
.template-preview {
    width:100%; height:170px; object-fit:cover;
    filter:grayscale(25%) contrast(1.05);
    transition:all .4s var(--ease-out);
}
.template-card:hover .template-preview { filter:grayscale(0%) contrast(1); transform:scale(1.03) }
.template-info { padding:18px }
.template-name { font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:6px }
.template-desc { font-size:12px;color:var(--text-tertiary);margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.65 }
.template-price { font-size:20px;font-weight:800;color:var(--text-primary);letter-spacing:-.02em }

/* Balance info area */
.balance-warning {
    background:linear-gradient(135deg, var(--primary-ultra-light), #F0F0F4);
    border:1px solid var(--border-color);
    border-radius:var(--r-md); padding:14px 18px;
    color:var(--text-secondary); margin-bottom:20px; font-size:13px;
    display:flex; align-items:center; gap:10px;
    border-left:4px solid var(--primary);
    box-shadow:var(--shadow-xs);
}
.balance-info-inline {
    background:linear-gradient(135deg, var(--primary-ultra-light), #F2F2F6);
    border:1px solid var(--border-color);
    border-radius:var(--r-md); padding:14px 18px;
    color:var(--text-secondary); margin-bottom:20px; font-size:13px;
    display:flex; align-items:center; gap:10px;
}

/* Responsive adjustments */
@media(max-width:900px){
    .card-grid-4, .card-grid-3 { grid-template-columns:repeat(2,1fr) }
    .search-bar { max-width:100% }
}
@media(max-width:600px){
    .card-grid-4, .card-grid-3, .card-grid-2 { grid-template-columns:1fr }
    .form-row { flex-direction:column;gap:0 }
    .data-table { font-size:12px }
    .data-table th, .data-table td { padding:8px 10px }
}

/* ================================
   MISCELLANEOUS COMPONENTS
   ==================== */

/* zy-table (used by dashboard views) */
.zy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.zy-table th {
    text-align: left;
    padding: 10px 14px;
    background: #FAFBFC;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}
.zy-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    line-height: 1.6;
    vertical-align: middle;
}
.zy-table tr:last-child td { border-bottom: none }
.zy-table tr:hover td { background: rgba(0,0,0,.015) }

/* zy-tag (status badges) */
.zy-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.7;
    white-space: nowrap;
}
.zy-tag-green { background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0 }
.zy-tag-red { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA }
.zy-tag-orange { background: #FFF7ED; color: #EA580C; border: 1px solid #FED7AA }
.zy-tag-blue { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE }
.zy-tag-gray { background: #F5F5F5; color: #666; border: 1px solid #E5E5E5 }

/* Breadcrumb navigation */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-tertiary);
}
.breadcrumb-item {
    color: var(--text-tertiary);
    transition: color 0.15s ease;
}
.breadcrumb-item:not(.active):hover { color: var(--primary); cursor: pointer }
.breadcrumb-item.active { color: var(--text-primary); font-weight: 550 }
.breadcrumb-sep { color: var(--text-tertiary); opacity: 0.4; flex-shrink: 0 }

/* Sidebar user info avatar */
.user-info > img,
.sidebar-footer .user-info img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0;
}

/* Loading state */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-tertiary);
    font-size: 13px;
}

/* ================================
   ZY COMPONENTS (Admin Page Views)
   ================================ */

/* Panel Body */
.panel-body { padding:0 24px 24px }
.panel-body[style*="padding:0"] { padding:0 !important }

/* === ZY Buttons === */
.zy-btn {
    display:inline-flex;align-items:center;justify-content:center;gap:5px;
    padding:8px 16px;border-radius:var(--r-sm);font-size:12.5px;
    font-weight:600;cursor:pointer;border:none;transition:all .2s var(--ease-out);
    font-family:inherit;line-height:1.4;white-space:nowrap;
    background:#F0F0F2;color:var(--text-secondary);border:1.5px solid var(--border-color);
}
.zy-btn:hover { border-color:var(--text-primary);color:var(--text-primary);background:var(--primary-ultra-light);transform:translateY(-1px) }
.zy-btn:active { transform:translateY(0) }
.zy-btn-primary {
    background:var(--primary);color:#fff;border-color:var(--primary);
}
.zy-btn-primary:hover { background:var(--primary-hover);border-color:var(--primary-hover);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15) }
.zy-btn-success { background:#16A34A;color:#fff;border-color:#16A34A }
.zy-btn-success:hover { background:#15803D;border-color:#15803D;color:#fff;opacity:.92 }
.zy-btn-warning { background:#D97706;color:#fff;border-color:#D97706 }
.zy-btn-warning:hover { background:#B45309;border-color:#B45309;color:#fff;opacity:.92 }
.zy-btn-danger { background:#DC2626;color:#fff;border-color:#DC2626 }
.zy-btn-danger:hover { background:#B91C1C;border-color:#B91C1C;color:#fff;opacity:.92 }
.zy-btn-default { background:var(--card);color:var(--text-secondary);border:1.5px solid var(--border-color) }
.zy-btn-default:hover { border-color:var(--text-primary);color:var(--text-primary);background:var(--primary-ultra-light) }
.zy-btn-sm { padding:5px 11px;font-size:11.5px;border-radius:4px }
.zy-btn-xs { padding:3px 8px;font-size:10.5px;border-radius:3px }

/* === ZY Form Elements === */
.zy-form { margin:0 }
.zy-form-group { margin-bottom:16px }
.zy-form-group:last-child { margin-bottom:0 }
.zy-form-group label,
.zy-label {
    display:block;margin-bottom:6px;font-size:12.5px;
    font-weight:600;color:var(--text-primary);letter-spacing:-.01em;
}
.zy-input {
    width:100%;padding:9px 13px;
    background:#FAFBFC;border:1.5px solid var(--border-color);
    border-radius:var(--r-sm);color:var(--text-primary);
    font-size:13px;outline:none;transition:all .2s var(--ease-out);
    font-family:inherit;line-height:1.5;
}
.zy-input:focus {
    border-color:var(--primary);background:#fff;
    box-shadow:0 0 0 3px rgba(10,10,10,.06);
}
.zy-input::placeholder { color:var(--text-tertiary) }
select.zy-input { cursor:pointer;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px }

textarea.zy-input { resize:vertical;min-height:72px;line-height:1.55 }

.zy-form-actions {
    display:flex;gap:10px;margin-top:20px;
    justify-content:flex-end;padding-top:16px;
    border-top:1px solid var(--border-light);
}

/* === ZY Modal (Full) === */
.zy-modal {
    position:fixed;inset:0;
    background:rgba(0,0,0,.35);backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;
    z-index:3000;opacity:0;visibility:hidden;
    transition:all .35s var(--ease-out);
}
.zy-modal.show { opacity:1;visibility:visible }
.zy-modal-content {
    background:var(--card);border:1px solid var(--border-color);
    border-radius:var(--r-xl);width:90%;max-width:500px;
    max-height:85vh;overflow-y:auto;overflow-x:hidden;
    box-shadow:var(--shadow-xl),0 0 60px rgba(0,0,0,.12);
    animation:scaleIn .35s var(--ease-spring) both;
    border:1px solid rgba(255,255,255,.85);
}
.zy-modal-header {
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 22px;border-bottom:1px solid var(--border-light);
    background:linear-gradient(180deg,rgba(0,0,0,.008),transparent);
    flex-shrink:0;
}
.zy-modal-title { font-size:15px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em }
.zy-modal-close {
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    border-radius:var(--r-sm);cursor:pointer;color:var(--text-tertiary);
    font-size:20px;transition:all .18s ease;border:none;background:none;
    line-height:1;
}
.zy-modal-close:hover { background:var(--hover-bg);color:var(--text-primary);transform:rotate(90deg) }
.zy-modal-body { padding:22px;overflow-y:auto;color:var(--text-secondary);font-size:13.5px;line-height:1.7 }

/* ZY Alert */
.zy-alert {
    display:flex;align-items:flex-start;gap:10px;
    padding:14px 18px;border-radius:var(--r-md);margin-bottom:16px;
    font-size:13px;line-height:1.6;animation:fadeInUp .4s var(--ease-out) both;
    border:1px solid transparent;
}
.zy-alert-success { background:#F0FDF4;border-color:#BBF7D0;color:#166534 }
.zy-alert-error { background:#FEF2F2;border-color:#FECACA;color:#991B1B }
.zy-alert-warning { background:#FFF7ED;border-color:#FED7AA;color:#9A3412 }
.zy-alert-info { background:#EFF6FF;border-color:#BFDBFE;color:#1E40AF }

/* ZY Pagination */
.zy-pagination { display:flex;justify-content:center;gap:6px;margin-top:24px;flex-wrap:wrap }
.zy-page-btn {
    min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--border-color);border-radius:var(--r-sm);
    font-size:12px;color:var(--text-secondary);cursor:pointer;
    background:var(--card);transition:all .2s ease;padding:0 10px;
}
.zy-page-btn:hover { border-color:var(--primary);color:var(--text-primary) }
.zy-page-btn.active { background:var(--primary);color:#fff;border-color:var(--primary) }

/* === ZY Grid System === */
.zy-grid { display:grid; gap:16px }
.zy-grid-2 { grid-template-columns:repeat(2,1fr) }
.zy-grid-3 { grid-template-columns:repeat(3,1fr) }
.zy-grid-4 { grid-template-columns:repeat(4,1fr) }

/* === Steps Wizard === */
.steps {
    display:flex;align-items:flex-start;justify-content:space-between;
    padding:24px 0 32px;margin-bottom:8px;position:relative;
}
.steps::before { content:'';position:absolute;top:28px;left:60px;right:60px;height:2px;background:var(--border-color);z-index:0 }
.step { display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:1;flex:1 }
.step-number {
    width:40px;height:40px;border-radius:50%;display:flex;
    align-items:center;justify-content:center;font-size:14px;font-weight:700;
    background:var(--card);border:2px solid var(--border-color);color:var(--text-tertiary);
    transition:all .35s var(--ease-out);
}
.step-title { font-size:12px;color:var(--text-tertiary);font-weight:500;text-align:center }
.step.active .step-number { background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15) }
.step.active .step-title { color:var(--primary);font-weight:700 }
.step.completed .step-number { background:#16A34A;border-color:#16A34A;color:#fff }
.step.completed .step-title { color:#16A34A }

/* === Terminal/Console (Deploy Log) === */
.terminal {
    background:#0d1117;border-radius:var(--r-md);
    padding:16px;font-family:'SF Mono','Fira Code',Menlo,'Consolas',monospace;
    font-size:12.5px;line-height:1.7;color:#c9d1d9;overflow-x:auto;
    border:1px solid #30363d;min-height:120px;max-height:320px;overflow-y:auto;
}
.terminal-line { padding:2px 0;white-space:pre-wrap;word-break:break-all }
.terminal-line::before { content:'❯ ';color:#58a6ff;font-weight:700;margin-right:4px }

/* === Success Page === */
.success-page {
    display:flex;flex-direction:column;align-items:center;
    padding:48px 20px;text-align:center;
}
.success-icon {
    width:72px;height:72px;border-radius:50%;
    background:#F0FDF4;display:flex;align-items:center;justify-content:center;
    margin-bottom:20px;color:#16A34A;animation:scaleIn .5s var(--ease-spring) both;
}
.success-title { font-size:22px;font-weight:800;color:var(--text-primary);margin-bottom:8px;letter-spacing:-.02em }

/* === Form Row (inline fields) === */
.zy-form-row { display:flex; gap:16px }
.zy-form-row .zy-form-group { flex:1 }

/* === Panel Footer === */
.panel-footer { padding:12px 24px;border-top:1px solid var(--border-light);display:flex;align-items:center;gap:12px }

/* === Dashboard Hero (control panel top) === */
.dash-hero {
    background:linear-gradient(135deg,#0A0A0A,#1a1a2e);
    border-radius:var(--r-xl);padding:32px;color:#fff;
    position:relative;overflow:hidden;margin-bottom:24px;
}
.dash-hero::before { content:'';position:absolute;top:-50%;right:-10%;width:300px;height:300px;background:rgba(255,255,255,.04);border-radius:50% }
.dash-hero::after { content:'';position:absolute;bottom:-30%;left:-5%;width:200px;height:200px;background:rgba(255,255,255,.03);border-radius:50% }

/* === Quick Panel / Records Panel / Sys Info Panel === */
.records-panel,.quick-panel,.sys-info-panel {
    background:var(--card);border:1px solid var(--border-color);
    border-radius:var(--r-lg);padding:22px;
    box-shadow:var(--shadow-xs);transition:box-shadow .25s ease;
}
.records-panel:hover,.quick-panel:hover,.sys-info-panel:hover { box-shadow:var(--shadow-md) }

/* === Compat CSS Variables (used by inline styles in views) === */
:root {
    --purple: #7C3AED;
    --muted: #8E8E93;
    --fg: #505058;
    --green: #1C1C1C;
    --red: #0A0A0A;
    --orange: #3A3A3A;
    --blue: #0A0A0A;
    --border: #E0E0E2;
    --r: 10px;
}

/* === Disabled button state === */
.zy-btn[disabled], .zy-btn:disabled {
    opacity:.45;cursor:not-allowed;
    transform:none!important;box-shadow:none!important;
}

/* === Mobile responsive grids === */
@media(max-width:900px){
    .zy-grid-3,.zy-grid-4{grid-template-columns:repeat(2,1fr)}
    .steps{padding:16px 0 24px}
}
@media(max-width:600px){
    .zy-grid-2,.zy-grid-3,.zy-grid-4{grid-template-columns:1fr}
    .zy-form-row{flex-direction:column;gap:0}
}