/* 快手荧光计划自动发布 —— 界面样式 */
:root {
    --yg-bg: #0f1117;
    --yg-panel: #171a22;
    --yg-panel-2: #1d212b;
    --yg-border: #262b36;
    --yg-accent: #ff5a2b;
    --yg-accent-2: #ffb02e;
    --yg-text: #e8ecf3;
    --yg-dim: #98a2b3;
}

html, body { height: 100%; }

.yg-body {
    background: radial-gradient(1200px 600px at 10% -10%, rgba(255, 90, 43, .16), transparent 60%), var(--yg-bg);
    color: var(--yg-text);
    font-family: "Segoe UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    min-height: 100vh;
}

.yg-shell { display: flex; min-height: 100vh; }

/* 侧边栏 */
.yg-sidebar {
    width: 236px;
    flex: 0 0 236px;
    background: linear-gradient(180deg, #14161d, #101218);
    border-right: 1px solid var(--yg-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.yg-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1.05rem 1rem;
    border-bottom: 1px solid var(--yg-border);
}
.yg-brand i { font-size: 1.6rem; color: var(--yg-accent); }
.yg-nav { padding: .75rem .5rem; overflow-y: auto; flex: 1; }
.yg-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--yg-dim);
    border-radius: .55rem;
    padding: .55rem .75rem;
    font-size: .94rem;
}
.yg-nav .nav-link i { width: 1.1rem; text-align: center; }
.yg-nav .nav-link:hover { background: var(--yg-panel-2); color: var(--yg-text); }
.yg-nav .nav-link.active {
    background: linear-gradient(90deg, rgba(255, 90, 43, .22), rgba(255, 90, 43, .04));
    color: #fff;
    box-shadow: inset 2px 0 0 var(--yg-accent);
}
.yg-nav-title {
    font-size: .72rem;
    letter-spacing: .12em;
    color: #667085;
    text-transform: uppercase;
    padding: 1rem .75rem .35rem;
}
.yg-sidebar-footer { padding: .9rem 1rem; border-top: 1px solid var(--yg-border); }

/* 主区域 */
.yg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.yg-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.35rem;
    border-bottom: 1px solid var(--yg-border);
    background: rgba(23, 26, 34, .72);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 5;
}
.yg-content { padding: 1.25rem 1.35rem 3rem; }

/* 卡片与表格 */
.card {
    background: var(--yg-panel);
    border: 1px solid var(--yg-border);
    border-radius: .9rem;
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--yg-border);
    font-weight: 600;
}
.table { --bs-table-bg: transparent; --bs-table-color: var(--yg-text); margin-bottom: 0; }
.table > :not(caption) > * > * { border-bottom-color: var(--yg-border); }
.table thead th { color: var(--yg-dim); font-weight: 600; font-size: .84rem; white-space: nowrap; }
.table td, .table th { vertical-align: middle; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(255, 255, 255, .03); color: #fff; }

.stat-card { padding: 1rem 1.1rem; }
.stat-card .stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.15; }
.stat-card .stat-label { color: var(--yg-dim); font-size: .82rem; }
.stat-card .stat-icon {
    width: 2.5rem; height: 2.5rem;
    display: grid; place-items: center;
    border-radius: .7rem;
    background: rgba(255, 90, 43, .12);
    color: var(--yg-accent);
    font-size: 1.2rem;
}

.hero-band {
    background: linear-gradient(120deg, rgba(255, 90, 43, .22), rgba(255, 176, 46, .06));
    border: 1px solid rgba(255, 90, 43, .35);
    border-radius: 1rem;
    padding: 1.1rem 1.25rem;
}

.text-dim { color: var(--yg-dim) !important; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; }
.template-box {
    background: #0d0f14;
    border: 1px dashed var(--yg-border);
    border-radius: .6rem;
    padding: .7rem .85rem;
    font-family: Consolas, monospace;
    font-size: .86rem;
    color: #ffd9a8;
    word-break: break-all;
}
.spark { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.spark span { flex: 1; background: linear-gradient(180deg, var(--yg-accent), rgba(255, 90, 43, .25)); border-radius: 3px 3px 0 0; min-height: 3px; }

/* 二维码 */
.qr-frame {
    width: 232px; height: 232px;
    background: #fff;
    border-radius: .75rem;
    display: grid; place-items: center;
    padding: .6rem;
    margin: 0 auto;
}
.qr-frame canvas, .qr-frame img { width: 100% !important; height: 100% !important; image-rendering: pixelated; }
.qr-state { font-weight: 600; }

/* 空态 */
.empty-state { text-align: center; padding: 2.6rem 1rem; color: var(--yg-dim); }
.empty-state i { font-size: 2.4rem; opacity: .5; display: block; margin-bottom: .6rem; }

/* 登录 / 注册 / 安装 */
.yg-blank {
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}
.yg-blank-card {
    width: 100%;
    max-width: 430px;
    background: var(--yg-panel);
    border: 1px solid var(--yg-border);
    border-radius: 1.1rem;
    padding: 1.8rem 1.75rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.yg-logo {
    width: 3.2rem; height: 3.2rem;
    margin: 0 auto;
    display: grid; place-items: center;
    border-radius: 1rem;
    background: linear-gradient(140deg, var(--yg-accent), var(--yg-accent-2));
    color: #16110c;
    font-size: 1.6rem;
}
.form-control, .form-select {
    background: #12141a;
    border-color: var(--yg-border);
    color: var(--yg-text);
}
.form-control:focus, .form-select:focus {
    background: #12141a;
    border-color: var(--yg-accent);
    box-shadow: 0 0 0 .18rem rgba(255, 90, 43, .18);
    color: #fff;
}
.btn-primary {
    background: linear-gradient(120deg, var(--yg-accent), #ff7a3d);
    border: none;
    font-weight: 600;
}
.btn-primary:hover { background: linear-gradient(120deg, #ff6b3d, var(--yg-accent-2)); }
.badge-status { font-weight: 600; letter-spacing: .02em; }

@media (max-width: 991.98px) {
    .yg-shell { flex-direction: column; }
    .yg-sidebar { width: 100%; flex: none; height: auto; position: static; }
    .yg-nav { flex-direction: row; flex-wrap: wrap; }
    .yg-nav .nav-link { flex: 0 0 auto; }
    .yg-sidebar-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
    .yg-sidebar-footer .btn { width: auto !important; margin-top: 0 !important; }
}