*{box-sizing:border-box;margin:0;padding:0}
@font-face{
  font-family:'ALKATIP';
  src:url('fonts/ALKATIP-Yazma-Tom.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:#eef2f6;color:#1f2937;font-size:14px;min-height:100vh;-webkit-font-smoothing:antialiased}
.font-ug,input.font-ug,textarea.font-ug,input[data-f="name_ug"],textarea.ug-field{
  font-family:'ALKATIP','ALKATIP Basma Tom','UKIJ Tuz Tom',sans-serif;
  font-size:15px;
  line-height:1.85;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
}
.dir-rtl,input.dir-rtl,textarea.dir-rtl,input[data-f="name_ug"],textarea.ug-field{
  direction:rtl;
  text-align:right;
  unicode-bidi:plaintext;
}
.hidden{display:none!important}

/* 登录 */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e8f2ff 0%,#f0f4f8 45%,#eef2f6 100%)}
.login-box{background:#fff;padding:40px 36px;border-radius:20px;width:400px;box-shadow:0 20px 60px rgba(59,130,246,.12);border:1px solid rgba(255,255,255,.8);text-align:center}
.login-logo{width:56px;height:56px;margin:0 auto 16px;border-radius:16px;background:linear-gradient(135deg,#3b82f6,#60a5fa);color:#fff;font-size:26px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(59,130,246,.28)}
.login-box h1{font-size:20px;margin-bottom:6px;color:#111827;font-weight:600}
.login-box p{color:#9ca3af;margin-bottom:24px;font-size:13px}
.login-box input{width:100%;padding:12px 14px;border:1px solid #e5e7eb;border-radius:12px;margin-bottom:14px;font-size:14px;background:#f9fafb;transition:.15s}
.login-box input:focus{outline:none;border-color:#93c5fd;background:#fff;box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.login-box button{width:100%;padding:12px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:12px;font-size:15px;cursor:pointer;font-weight:600;box-shadow:0 6px 20px rgba(37,99,235,.25)}
.login-box button:hover{filter:brightness(1.05)}

/* 布局 */
.app{display:flex;min-height:100vh;background:#eef2f6}
.sidebar{width:240px;background:#fff;flex-shrink:0;transition:width .2s;overflow-y:auto;border-right:1px solid #eef2f6;box-shadow:2px 0 16px rgba(15,23,42,.04)}
.sidebar.collapsed{width:72px}
.sidebar.collapsed .logo-text-wrap,.sidebar.collapsed .menu-title,.sidebar.collapsed .menu-text{display:none}
.sidebar.collapsed .menu-item{justify-content:center;padding:12px}
.logo{display:flex;align-items:center;gap:12px;padding:20px 20px 16px}
.logo-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#3b82f6,#60a5fa);color:#fff;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 16px rgba(59,130,246,.25)}
.logo-text-wrap{display:flex;flex-direction:column;min-width:0}
.logo-text{font-size:16px;font-weight:700;color:#111827;line-height:1.2;white-space:nowrap}
.logo-sub{font-size:11px;color:#9ca3af;margin-top:2px;white-space:nowrap}
.menu-group{padding:4px 12px 12px}
.menu-title{padding:8px 12px 6px;font-size:11px;color:#9ca3af;font-weight:600;letter-spacing:.5px}
.menu-item{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;font-size:14px;color:#4b5563;transition:.15s;border-radius:12px;margin-bottom:2px;font-weight:500}
.menu-item:hover{background:#f3f6fb;color:#1f2937}
.menu-item.active{background:linear-gradient(90deg,#e8f2ff,#eff6ff);color:#2563eb;box-shadow:inset 0 0 0 1px rgba(59,130,246,.08)}
.menu-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#9ca3af}
.menu-icon svg{width:20px;height:20px;display:block}
.menu-item.active .menu-icon{color:#2563eb}
.menu-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main-wrap{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:56px;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #e5e7eb}
.top-left,.top-right{display:flex;align-items:center;gap:10px}
.tab{padding:6px 14px;border-radius:8px;font-size:13px;color:#9ca3af;cursor:default}
.tab.active{background:#eff6ff;color:#2563eb;font-weight:600}
.icon-btn{border:none;background:#f3f4f6;cursor:pointer;font-size:16px;color:#6b7280;padding:8px 10px;border-radius:10px;transition:.15s}
.icon-btn:hover{background:#eff6ff;color:#2563eb}
.refresh-btn{font-size:18px}
.admin-dropdown{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:#f9fafb;border:1px solid #e5e7eb;color:#374151;font-size:13px}
.admin-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#dbeafe,#bfdbfe);display:flex;align-items:center;justify-content:center;font-size:14px}
.link-btn{border:none;background:none;cursor:pointer;font-size:12px;color:#2563eb;margin-left:4px;font-weight:500}
.content{padding:20px;overflow:auto;flex:1}

/* 统计卡片 */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.card{border-radius:16px;padding:20px 22px;color:#fff;position:relative;overflow:hidden;min-height:110px;box-shadow:0 8px 24px rgba(15,23,42,.08)}
.card-title{font-size:13px;opacity:.92;margin-bottom:4px;font-weight:500}
.card .num{font-size:34px;font-weight:700;line-height:1.2;margin:6px 0}
.card .sub{font-size:12px;opacity:.85}
.card-icon{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:44px;opacity:.22}
.card.green{background:linear-gradient(135deg,#22c55e,#4ade80)}
.card.purple{background:linear-gradient(135deg,#8b5cf6,#a78bfa)}
.card.pink{background:linear-gradient(135deg,#ec4899,#f472b6)}
.card.orange{background:linear-gradient(135deg,#f59e0b,#fbbf24)}

/* 面板 */
.panel-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{background:#fff;border-radius:16px;padding:18px 20px;box-shadow:0 4px 20px rgba(15,23,42,.05);border:1px solid rgba(255,255,255,.8)}
.panel h3{font-size:15px;font-weight:600;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid #f3f4f6;color:#111827}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat-box{display:flex;align-items:flex-start;gap:12px;padding:14px;background:#f9fafb;border-radius:12px;border:1px solid #f3f4f6;transition:.15s}
.stat-box:hover{box-shadow:0 4px 12px rgba(15,23,42,.05);border-color:#e5e7eb}
.stat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.stat-icon.blue{background:#eff6ff;color:#2563eb}
.stat-icon.orange{background:#fff7ed;color:#ea580c}
.stat-icon.green{background:#f0fdf4;color:#16a34a}
.stat-icon.purple{background:#faf5ff;color:#9333ea}
.stat-icon.yellow{background:#fefce8;color:#ca8a04}
.stat-icon.red{background:#fef2f2;color:#dc2626}
.stat-body{flex:1;min-width:0}
.stat-title{font-size:12px;color:#9ca3af;margin-bottom:4px}
.stat-value{font-size:24px;font-weight:700;color:#111827;line-height:1.2}
.stat-sub{font-size:12px;color:#d1d5db;margin-top:4px}

.chart-wrap{height:280px;position:relative}
.line-chart{width:100%;height:100%}
.line-chart svg{width:100%;height:100%}

/* 表格与表单 */
.page-title{font-size:16px;font-weight:600;margin-bottom:14px;color:#111827}
.loading{color:#9ca3af;padding:60px;text-align:center}
.toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.toolbar input,.toolbar select{padding:8px 12px;border:1px solid #e5e7eb;border-radius:10px;font-size:13px;background:#fff;color:#374151}
.btn{padding:8px 16px;border:none;border-radius:10px;cursor:pointer;font-size:13px;font-weight:500;transition:.15s}
.btn-primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.2)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-success{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}
.btn-danger{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.btn-warning{background:#fffbeb;color:#d97706;border:1px solid #fde68a}
.btn-sm{padding:5px 10px;font-size:12px;margin-right:4px;border-radius:8px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #eef2f6;box-shadow:0 2px 12px rgba(15,23,42,.04)}
th,td{padding:12px 14px;border-bottom:1px solid #f3f4f6;text-align:left;font-size:13px;color:#374151}
th{background:#f9fafb;font-weight:600;color:#6b7280}
tr:hover td{background:#fafbff}
tr:last-child td{border-bottom:none}
.tag{display:inline-block;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:500}
.tag.pending{background:#fffbeb;color:#d97706}
.tag.approved,.tag.paid{background:#f0fdf4;color:#16a34a}
.tag.rejected{background:#fef2f2;color:#dc2626}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid label{display:block;font-size:13px;color:#6b7280;margin-bottom:4px;font-weight:500}
.form-grid input,.form-grid textarea,.form-grid select{width:100%;padding:9px 12px;border:1px solid #e5e7eb;border-radius:10px;font-size:13px;background:#fff;color:#374151}
.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{outline:none;border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.form-grid .full{grid-column:1/-1}
.inline-input{width:100%;min-width:100px;padding:6px 10px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;background:#fff;color:#374151}
.inline-input.short{max-width:88px}

/* 轮播图 */
.banner-cell{min-width:360px}
.banner-img-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.banner-upload-col{display:flex;flex-direction:column;gap:8px;min-width:120px}
.banner-mode-col{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.banner-mode-label{font-size:12px;color:#9ca3af;line-height:1;font-weight:500}
.banner-toggle{display:inline-flex;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;padding:3px;gap:2px}
.toggle-seg{border:none;background:transparent;color:#9ca3af;padding:8px 18px;border-radius:999px;font-size:13px;cursor:pointer;transition:.2s;font-weight:500;min-width:64px}
.toggle-seg:hover{color:#6b7280}
.toggle-seg.public.active,.toggle-seg.closed.active{background:linear-gradient(135deg,#22c55e,#4ade80);color:#fff;box-shadow:0 2px 8px rgba(34,197,94,.3)}
.panel-head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.panel-head-row h3{margin:0}
.banner-mode-del{width:100%;margin-top:4px}
.banner-preview{width:96px;height:54px;object-fit:cover;border-radius:10px;border:1px solid #e5e7eb;background:#f9fafb;flex-shrink:0}
.banner-preview.empty{display:flex;align-items:center;justify-content:center;font-size:12px;color:#d1d5db}
.banner-file.hidden{display:none}

.featured-preview{display:flex;gap:12px;max-width:360px;margin:12px 0 16px;padding:12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px}
.featured-preview-left{display:flex;flex-direction:column;gap:12px;flex:1}
.featured-preview-box{border-radius:10px;background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af;font-size:12px;font-weight:600;display:flex;align-items:flex-end;justify-content:flex-end;padding:10px;box-sizing:border-box}
.featured-preview-box.small{height:56px}
.featured-preview-box.large{width:140px;height:124px}
.slot-image-preview{width:160px;height:90px;border-radius:10px;border:1px solid #e5e7eb;background-size:cover;background-repeat:no-repeat;background-color:#f9fafb;flex-shrink:0;margin:6px 0}
.slot-image-preview.empty{display:flex;align-items:center;justify-content:center;font-size:12px;color:#d1d5db;height:72px;width:128px}
.slot-type-name{color:#111827}
.slot-crop-wrap{display:flex;justify-content:center;margin:12px 0}
.slot-crop-frame{position:relative;overflow:hidden;border-radius:12px;border:2px solid #2563eb;background:#f3f4f6;cursor:grab;touch-action:none;user-select:none;width:100%;max-width:360px}
.slot-crop-frame:active{cursor:grabbing}
.slot-crop-frame.small{aspect-ratio:187/152}
.slot-crop-frame.large{aspect-ratio:187/320;max-width:220px}
.slot-crop-bg{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat}
.slot-crop-sliders{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.slot-crop-slider{display:flex;align-items:center;gap:10px;font-size:13px;color:#374151}
.slot-crop-slider span:first-child{width:36px;flex-shrink:0}
.slot-crop-slider input[type=range]{flex:1}
.slot-crop-slider span:last-child{width:42px;text-align:right;color:#6b7280;font-size:12px}
.poster-png-preview{width:160px;min-height:96px;border-radius:10px;border:1px solid #e5e7eb;flex-shrink:0;margin:6px 0;background:repeating-conic-gradient(#e5e7eb 0% 25%, #fff 0% 50%) 50% / 16px 16px;display:flex;align-items:center;justify-content:center;padding:8px;box-sizing:border-box}
.poster-png-preview.has-image img{max-width:144px;max-height:144px;display:block}
.poster-png-preview.empty{font-size:12px;color:#9ca3af;min-height:96px;width:128px;background:#f9fafb}
.popup-poster-slot h4{color:#374151}
.tier-label{margin-right:12px;font-size:13px;cursor:pointer;color:#4b5563}
.tier-label input{margin-right:4px;accent-color:#2563eb}
.publish-pts,.contact-pts{min-width:72px}
.info-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #f3f4f6;font-size:13px}
.info-row span:first-child{color:#9ca3af}
.section-h{font-size:14px;margin:16px 0 8px;color:#374151;font-weight:600}
.detail-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #f3f4f6;font-size:13px}
.detail-item span:last-child{font-weight:600;color:#2563eb}
.muted{color:#9ca3af;font-size:13px;padding:8px 0;line-height:1.6}
.warn-box{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:10px 12px;border-radius:10px;margin:8px 0;font-size:13px}

/* 弹窗 */
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 24px;border-radius:10px;z-index:9999;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.35);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9998}
.modal-box{background:#fff;border-radius:16px;width:520px;max-width:92vw;max-height:88vh;overflow:auto;box-shadow:0 24px 64px rgba(15,23,42,.15)}
.modal-lg{width:640px}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #f3f4f6;font-weight:600;font-size:15px;color:#111827}
.modal-head button{border:none;background:none;font-size:22px;cursor:pointer;color:#9ca3af;line-height:1}
.modal-body{padding:20px;color:#374151}
.modal-foot{padding:12px 20px;border-top:1px solid #f3f4f6;text-align:right;display:flex;gap:8px;justify-content:flex-end}

@media(max-width:1100px){.cards{grid-template-columns:1fr 1fr}.stat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.panel-row{grid-template-columns:1fr}.cards{grid-template-columns:1fr}}