/* ===== Yuanqi Special Transport - Admin styles ===== */
:root {
    --a-bg: #0e0f12;
    --a-bg2: #15171c;
    --a-bg3: #1c1f26;
    --a-line: #2a2e37;
    --a-line2: #3a3f4a;
    --a-text: #e9eaec;
    --a-muted: #9aa0aa;
    --a-accent: #e8a33d;
    --a-accent2: #c9872a;
    --a-danger: #d9625b;
}

* { box-sizing: border-box; }
body.admin {
    margin: 0; background: var(--a-bg); color: var(--a-text);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px; line-height: 1.55;
}
a { color: inherit; text-decoration: none; }

.admin__bar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 1.5rem;
    padding: .8rem 1.4rem;
    background: rgba(14,15,18,.9); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--a-line);
}
.admin__brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; }
.admin__brand .brand__mark {
    width: 30px; height: 30px; display: grid; place-items: center;
    background: var(--a-accent); color: #1a1206; font-weight: 900; border-radius: 0;
}
.admin__nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.admin__nav a { color: var(--a-muted); font-weight: 600; font-size: .9rem; padding: .35rem 0; border-bottom: 2px solid transparent; }
.admin__nav a:hover, .admin__nav a.is-active { color: var(--a-text); border-color: var(--a-accent); }
.admin__user { margin-left: auto; display: flex; gap: .6rem; }

.admin__main { max-width: 1100px; margin: 0 auto; padding: 2rem 1.4rem 4rem; }
.admin__title { font-size: 1.7rem; margin: 0 0 .3rem; }
.admin__sub { color: var(--a-muted); margin: 0 0 2rem; }

/* cards / panels */
.panel { background: var(--a-bg2); border: 1px solid var(--a-line); padding: 1.4rem; margin-bottom: 1.4rem; }
.panel h3 { margin: 0 0 1rem; font-size: 1.05rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }

/* tables */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: .75rem .8rem; border-bottom: 1px solid var(--a-line); font-size: .9rem; vertical-align: middle; }
.table th { color: var(--a-muted); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.table img { width: 64px; height: 48px; object-fit: cover; border: 1px solid var(--a-line); }
.thumb-empty {
    display: grid; place-items: center; width: 64px; height: 48px;
    background: var(--a-bg3); border: 1px solid var(--a-line);
    color: var(--a-muted); font-size: .8rem; font-weight: 700; letter-spacing: .06em;
}
.table .row-actions a { margin-right: .6rem; color: var(--a-accent); font-size: .85rem; }
.table .row-actions a.danger { color: var(--a-danger); }

/* forms */
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .8rem; color: var(--a-muted); margin-bottom: .4rem; letter-spacing: .03em; }
.field input[type=text], .field input[type=password], .field input[type=email],
.field input[type=date], .field input[type=url], .field input[type=number],
.field textarea, .field select {
    width: 100%; background: var(--a-bg); color: var(--a-text);
    border: 1px solid var(--a-line2); padding: .7rem .8rem; font: inherit; border-radius: 0;
}
.field input[type=password] { letter-spacing: .2em; }
.field input[type=file] {
    width: 100%; background: var(--a-bg); color: var(--a-muted);
    border: 1px dashed var(--a-line2); padding: .55rem .7rem; font: inherit; font-size: .85rem; border-radius: 0;
}
.field input[type=file]::file-selector-button {
    background: var(--a-bg3); color: var(--a-text); border: 1px solid var(--a-line2);
    padding: .45rem .8rem; margin-right: .8rem; font: inherit; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .04em; cursor: pointer; border-radius: 0;
}
.field input[type=file]::file-selector-button:hover { border-color: var(--a-accent); color: var(--a-accent); }
.field textarea { min-height: 220px; resize: vertical; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .85rem; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--a-accent); }

/* buttons (square) */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.2rem; border: 1px solid var(--a-accent);
    background: var(--a-accent); color: #1a1206; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; font-size: .78rem;
    border-radius: 0; cursor: pointer; transition: background .2s, transform .12s;
}
.btn:hover { background: var(--a-accent2); border-color: var(--a-accent2); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--a-text); border-color: var(--a-line2); }
.btn--ghost:hover { border-color: var(--a-accent); color: var(--a-accent); background: transparent; }
.btn--danger { background: transparent; color: var(--a-danger); border-color: var(--a-danger); }
.btn--danger:hover { background: var(--a-danger); color: #fff; }

.notice { padding: .8rem 1rem; border: 1px solid var(--a-accent); background: rgba(232,163,61,.08); margin-bottom: 1.2rem; font-size: .9rem; }
.notice--err { border-color: var(--a-danger); background: rgba(217,98,91,.1); }
.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-bottom: 2rem; }
@media (max-width: 760px) { .stat-row { grid-template-columns: repeat(2,1fr); } }
.stat-box { background: var(--a-bg2); border: 1px solid var(--a-line); padding: 1.2rem; }
.stat-box .n { font-size: 1.8rem; font-weight: 800; color: var(--a-accent); }
.stat-box .l { color: var(--a-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }

/* ===== Login (square, split layout) ===== */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; }

.login__brand {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: 2.5rem; padding: clamp(2rem, 5vw, 4rem);
    background: linear-gradient(180deg, rgba(232,163,61,.08), transparent 42%), var(--a-bg);
    border-right: 1px solid var(--a-line);
}
.login__brand::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 74px 74px;
    -webkit-mask-image: linear-gradient(205deg, #000 8%, transparent 72%);
    mask-image: linear-gradient(205deg, #000 8%, transparent 72%);
}
.login__brand-top { position: relative; display: flex; align-items: center; gap: .7rem; }
.login__brand-top .brand__mark {
    width: 34px; height: 34px; display: grid; place-items: center;
    background: var(--a-accent); color: #1a1206; font-weight: 900;
}
.login__wordmark { font-weight: 800; letter-spacing: .02em; font-size: 1.05rem; }
.login__wordmark em { font-style: normal; color: var(--a-accent); font-size: .78rem; margin-left: .28rem; }

.login__lede { position: relative; max-width: 34ch; }
.login__kicker {
    display: block; font-size: .7rem; letter-spacing: .28em; text-transform: uppercase;
    color: var(--a-accent); margin-bottom: 1rem;
}
.login__lede h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 1.1rem; }
.login__lede p { color: var(--a-muted); font-size: .95rem; margin: 0; }

.login__meta {
    position: relative; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px; background: var(--a-line); border: 1px solid var(--a-line);
}
.login__meta > div { background: var(--a-bg); padding: .85rem 1rem; }
.login__meta dt { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--a-muted); }
.login__meta dd { margin: .35rem 0 0; font-weight: 700; font-size: .88rem; }

.login__form-wrap {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: clamp(2rem, 5vw, 4rem); background: var(--a-bg2);
}
.login__form { width: 100%; max-width: 360px; }
.login__form h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin: .55rem 0 .5rem; }
.login__hint { color: var(--a-muted); font-size: .9rem; margin: 0 0 1.8rem; }
.login__submit { width: 100%; justify-content: center; margin-top: .3rem; }
.login__back { margin: 1.5rem 0 0; font-size: .85rem; }
.login__back a { color: var(--a-muted); transition: color .2s; }
.login__back a:hover { color: var(--a-accent); }
.login__legal {
    max-width: 360px; margin: 2.5rem 0 0; text-align: center;
    color: var(--a-muted); font-size: .72rem; line-height: 1.7; letter-spacing: .03em;
}
.login__legal span { display: block; opacity: .65; }

@media (max-width: 880px) {
    .login { grid-template-columns: 1fr; }
    .login__brand { border-right: none; border-bottom: 1px solid var(--a-line); gap: 1.6rem; }
    .login__lede h1 { font-size: 2rem; }
    .login__meta { display: none; }
    .login__legal { margin-top: 1.8rem; }
}

/* ===== Page image slots ===== */
.imgslots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-bottom: 1.4rem; }
.imgslots--one { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.imgslot { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1rem; padding: .9rem; background: var(--a-bg); border: 1px solid var(--a-line); }
.imgslot__preview { display: grid; place-items: center; aspect-ratio: 4/3; background: var(--a-bg3); border: 1px solid var(--a-line); overflow: hidden; }
.imgslot__preview img { width: 100%; height: 100%; object-fit: cover; }
.imgslot__preview span { color: var(--a-muted); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; }
.imgslot h4 { margin: 0 0 .25rem; font-size: .92rem; }
.imgslot p { margin: 0 0 .7rem; color: var(--a-muted); font-size: .78rem; line-height: 1.5; }
.imgslot input[type=file] { font-size: .78rem; padding: .45rem .55rem; }
.imgslot__remove { display: flex; align-items: center; gap: .45rem; margin-top: .6rem; color: var(--a-danger); font-size: .78rem; cursor: pointer; }
@media (max-width: 900px) { .imgslots { grid-template-columns: 1fr; } }

/* ===== Page images page (grouped, bilingual) ===== */
.howto { margin: 0; padding-left: 1.1rem; color: var(--a-muted); line-height: 1.9; font-size: .88rem; }
.howto strong { color: var(--a-text); }
.howto a { color: var(--a-accent); border-bottom: 1px solid var(--a-accent); }
.imggroup { margin-bottom: 1.8rem; }
.imggroup__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .8rem; padding-bottom: .55rem; border-bottom: 1px solid var(--a-line); }
.imggroup__head h3 { margin: 0; font-size: 1rem; letter-spacing: .02em; }
.imggroup__view { color: var(--a-accent); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.imgslot__body { min-width: 0; }
.imgslot__ref { color: var(--a-muted) !important; font-size: .78rem; margin: .15rem 0 .5rem !important; }
.imgslot__ratio { display: inline-block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--a-accent); border: 1px solid var(--a-line2); padding: .18rem .45rem; }
.save-bar { position: sticky; bottom: 0; padding: 1rem 0; background: linear-gradient(transparent, var(--a-bg) 40%); }

/* ===== Logo / brand editor ===== */
.brandedit { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1rem; }
.brandedit__preview { display: grid; place-items: center; min-height: 78px; padding: .6rem; background: var(--a-bg); border: 1px dashed var(--a-line2); overflow: hidden; }
.brandedit__preview img { max-height: 60px; max-width: 100%; width: auto; }
.brandedit__preview span { color: var(--a-muted); font-size: .72rem; text-align: center; letter-spacing: .06em; line-height: 1.6; }
@media (max-width: 700px) { .brandedit { grid-template-columns: 1fr; } }