/* admin.html — page-specific styles */

* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --line: rgba(140,153,168,0.16);
    --glass: rgba(24,31,41,0.55);
    --muted: #8c99a8;
}
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, #0b0e13 0%, #141c28 100%);
    min-height: 100vh; color: #c9d2dc; line-height: 1.6;
}
.background-pattern {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: url('../paibg.png') center / cover no-repeat; opacity: 0.25;
}

/* Header (matches Workspace) */
.header {
    position: sticky; top: 0; z-index: 20;
    background: rgba(11,14,19,0.72); backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 32px; display: flex; align-items: center; gap: 16px;
}
.logo img { height: 30px; display: block; }
.header-title {
    margin: 0 auto; font-size: 24px; font-weight: 700;
    background: linear-gradient(135deg, #ff6b00, #ff9933);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.header-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px;
    color: #d8e9fa; text-decoration: none; font-size: 13px; font-weight: 500;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); transition: background .2s;
}
.header-btn:hover { background: rgba(255,255,255,.1); }
.material-icons-outlined { color: #fff; }
.header-btn .material-icons-outlined { font-size: 18px; }

.content { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 32px 32px 64px; }

/* Intro */
.intro {
    position: relative; overflow: hidden; border-radius: 22px; padding: 28px 32px; margin-bottom: 28px;
    background: radial-gradient(120% 140% at 0% 0%, rgba(43,139,230,.18), transparent 55%),
                radial-gradient(90% 120% at 100% 100%, rgba(84,104,242,.2), transparent 55%),
                linear-gradient(160deg, rgba(26,34,46,.9), rgba(15,20,27,.92));
    border: 1px solid rgba(131,147,246,.22);
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.intro h2 { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.intro p { color: #c9d2dc; font-size: 15px; margin-top: 4px; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; }
.jump a {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
    font-size: 13px; color: #d8e9fa; text-decoration: none;
    background: rgba(255,255,255,.05); border: 1px solid var(--line); transition: background .2s, border-color .2s;
}
.jump a:hover { background: rgba(84,104,242,.18); border-color: rgba(131,147,246,.5); }
.jump .material-icons-outlined { font-size: 16px; }

/* Sections */
.section { margin-bottom: 32px; scroll-margin-top: 90px; border-radius: 20px; transition: box-shadow .6s; }
.section.flash { box-shadow: 0 0 0 2px rgba(84,104,242,.7), 0 0 40px rgba(84,104,242,.35); }
.section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 0 2px; }
.section-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.section-ic .material-icons-outlined { font-size: 19px; }
.section-head h3 { font-size: 17px; font-weight: 700; color: #fff; }
.section-head span.count { font-size: 12px; color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card {
    position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px;
    border-radius: 18px; text-decoration: none; color: inherit;
    background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(18px);
    transition: transform .25s, border-color .25s, box-shadow .25s;
}
.card:hover, .card:focus-visible {
    transform: translateY(-4px); border-color: rgba(131,147,246,.5); outline: none;
    box-shadow: 0 20px 40px -20px rgba(84,104,242,.6);
}
.card-ic { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
.card-ic .material-icons-outlined { font-size: 23px; }
.card h4 { font-size: 15.5px; font-weight: 600; color: #fff; }
.card p { font-size: 13px; color: #8c99a8; line-height: 1.5; }
.card .go {
    margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 4px;
    font-size: 12.5px; font-weight: 600; color: #6ee7b7;
}
.card .go .material-icons-outlined { font-size: 16px; color: #6ee7b7; transition: transform .2s; }
.card:hover .go .material-icons-outlined { transform: translateX(3px); }

.g-blue { background: linear-gradient(135deg, #2b8be6, #5468f2); }
.g-violet { background: linear-gradient(135deg, #5468f2, #596ef3); }
.g-green { background: linear-gradient(135deg, #10b981, #059669); }
.g-orange { background: linear-gradient(135deg, #ff6b00, #f59e0b); }
.g-teal { background: linear-gradient(135deg, #14b8a6, #1b7bdc); }
.g-pink { background: linear-gradient(135deg, #435af1, #5468f2); }

@media (max-width: 680px) {
    .header { padding: 14px 16px; }
    .header-title { font-size: 19px; }
    .header-btn span.label { display: none; }
    .content { padding: 20px 16px 48px; }
    .intro { padding: 22px 20px; }
}