:root { --ink:#173029; --muted:#667771; --green:#0d604b; --green-dark:#073d31; --soft:#f2f7f5; --border:#dce6e2; --gold:#d8a53c; --white:#fff; --danger:#a53f3f; --shadow:0 12px 35px rgba(10,60,48,.08); }
* { box-sizing:border-box; }
body { margin:0; font-family:"DM Sans",sans-serif; color:var(--ink); background:#f5f8f7; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.brand-mark { width:43px; height:43px; color:#238068; }
.brand-mark svg { display:block; width:100%; height:100%; }
.icon.flip { transform:rotate(180deg); }

.login-body { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; background:var(--white); }
.login-visual { position:relative; min-height:100vh; overflow:hidden; color:var(--white); background:var(--green-dark); }
.login-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(3,38,30,.92),rgba(3,38,30,.1) 65%); }
.login-visual img { width:100%; height:100%; object-fit:cover; }
.login-visual-copy { position:absolute; z-index:1; right:9%; bottom:9%; left:9%; }
.login-visual-copy > span { font-size:.72rem; font-weight:800; letter-spacing:.18em; }
.login-visual-copy h1 { max-width:680px; margin:18px 0; font-family:"Manrope",sans-serif; font-size:clamp(2.5rem,4.3vw,4.8rem); line-height:1.06; letter-spacing:-.045em; }
.login-visual-copy p { max-width:550px; margin:0; color:#d3e2dd; font-size:1.02rem; }
.login-main { min-height:100vh; display:flex; flex-direction:column; padding:45px clamp(30px,8vw,105px); }
.login-brand { display:flex; align-items:center; gap:12px; }
.login-brand > span:last-child { display:flex; flex-direction:column; }
.login-brand strong { font-family:"Manrope",sans-serif; font-size:1rem; }
.login-brand small { margin-top:5px; color:var(--muted); font-size:.57rem; font-weight:800; letter-spacing:.2em; }
.login-card { width:100%; max-width:460px; margin:auto; padding:55px 0; }
.login-kicker,.admin-eyebrow { display:block; margin-bottom:13px; color:#1b7961; font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.login-card h2 { margin:0 0 8px; font-family:"Manrope",sans-serif; font-size:2.5rem; letter-spacing:-.04em; }
.login-card > p { margin:0 0 30px; color:var(--muted); }
.login-card form { display:grid; gap:18px; }
.login-card label { display:grid; gap:7px; color:#374d46; font-size:.82rem; font-weight:700; }
.login-card input { min-height:54px; padding:12px 15px; border:1px solid #cddbd6; border-radius:10px; outline:0; }
.login-card input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(13,96,75,.1); }
.login-card .admin-primary { width:100%; margin-top:5px; }
.login-card button:disabled { opacity:.5; cursor:not-allowed; }
.login-help { display:block; margin-top:22px; color:#889690; font-size:.73rem; }
.back-site { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.8rem; font-weight:700; }

.admin-shell { min-height:100vh; }
.admin-sidebar { position:fixed; z-index:50; inset:0 auto 0 0; width:258px; display:flex; flex-direction:column; padding:25px 17px 18px; color:#b9cfc7; background:#073d31; overflow-y:auto; }
.admin-brand { display:flex; align-items:center; gap:11px; padding:0 9px 25px; border-bottom:1px solid rgba(255,255,255,.1); }
.admin-brand > span:last-child { display:flex; flex-direction:column; }
.admin-brand strong { color:var(--white); font-family:"Manrope",sans-serif; }
.admin-brand small { margin-top:5px; font-size:.53rem; font-weight:800; letter-spacing:.19em; }
.admin-sidebar nav { display:grid; gap:3px; padding:16px 0; }
.nav-label { margin:18px 11px 6px; color:#759d90; font-size:.6rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.admin-sidebar nav a,.sidebar-footer a { display:flex; align-items:center; gap:11px; min-height:42px; padding:0 11px; border-radius:8px; font-size:.82rem; font-weight:600; }
.admin-sidebar nav a:hover,.admin-sidebar nav a.active { color:var(--white); background:rgba(255,255,255,.1); }
.admin-sidebar nav a.active { box-shadow:inset 3px 0 var(--gold); }
.sidebar-footer { display:grid; gap:3px; margin-top:auto; padding-top:15px; border-top:1px solid rgba(255,255,255,.1); }
.sidebar-footer a:hover { color:var(--white); }
.admin-main { min-height:100vh; margin-left:258px; }
.admin-topbar { height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.94); backdrop-filter:blur(12px); }
.admin-topbar > div:first-of-type { display:flex; flex-direction:column; }
.admin-topbar > div:first-of-type span { color:var(--muted); font-size:.7rem; }
.admin-topbar > div:first-of-type strong { font-size:.86rem; }
.admin-menu { display:none; width:40px; height:40px; place-items:center; border:0; border-radius:9px; color:var(--green); background:var(--soft); }
.admin-user { display:flex; align-items:center; gap:10px; }
.admin-user > span { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:var(--white); background:var(--green); font-weight:800; }
.admin-user strong,.admin-user small { display:block; }
.admin-user strong { font-size:.78rem; }
.admin-user small { color:var(--muted); font-size:.65rem; text-transform:capitalize; }
.admin-content { width:min(calc(100% - 56px),1450px); margin:0 auto; padding:44px 0 65px; }
.admin-page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:25px; margin-bottom:30px; }
.admin-page-head h1 { margin:0 0 6px; font-family:"Manrope",sans-serif; font-size:2.1rem; line-height:1.1; letter-spacing:-.04em; }
.admin-page-head p { margin:0; color:var(--muted); font-size:.84rem; }
.admin-back { display:flex; align-items:center; gap:6px; margin-bottom:16px; color:var(--green); font-size:.78rem; font-weight:700; }
.head-actions { display:flex; gap:9px; }
.admin-primary,.admin-secondary { min-height:43px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 17px; border:1px solid transparent; border-radius:9px; font-weight:700; font-size:.8rem; }
.admin-primary { color:var(--white); background:var(--green); }
.admin-primary:hover { background:var(--green-dark); }
.admin-secondary { color:var(--green); border-color:var(--border); background:var(--white); }
.admin-secondary:hover { border-color:#9cb8ae; }
.admin-alert { display:flex; align-items:center; gap:8px; padding:13px 16px; margin-bottom:22px; border-radius:9px; font-size:.82rem; }
.admin-alert.success { color:#1d5c49; background:#dff1e9; }
.admin-alert.error { color:#813838; background:#fae6e6; }
.admin-alert a { text-decoration:underline; font-weight:700; }

.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:17px; margin-bottom:24px; }
.metric-card { display:grid; grid-template-columns:46px 1fr; gap:14px; padding:22px; border:1px solid var(--border); border-radius:14px; background:var(--white); box-shadow:0 5px 18px rgba(10,60,48,.03); transition:transform .2s,box-shadow .2s; }
.metric-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.metric-icon { width:45px; height:45px; display:grid; place-items:center; border-radius:12px; }
.metric-icon.green { color:#18705a; background:#e1f0ea; }
.metric-icon.gold { color:#9d6e13; background:#fbefd7; }
.metric-icon.blue { color:#2b6e95; background:#e2f0f7; }
.metric-icon.violet { color:#655496; background:#eeeaf7; }
.metric-card small { display:block; color:var(--muted); font-size:.68rem; }
.metric-card strong { display:block; margin:5px 0 8px; font-family:"Manrope",sans-serif; font-size:1.6rem; line-height:1; letter-spacing:-.04em; }
.metric-card em { display:flex; align-items:center; gap:5px; color:var(--green); font-style:normal; font-size:.67rem; font-weight:700; }
.dashboard-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:20px; }
.admin-panel { border:1px solid var(--border); border-radius:14px; background:var(--white); box-shadow:0 5px 18px rgba(10,60,48,.025); }
.panel-head { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 23px; border-bottom:1px solid var(--border); }
.panel-head h2,.quick-panel h2 { margin:0 0 3px; font-family:"Manrope",sans-serif; font-size:1rem; }
.panel-head p { margin:0; color:var(--muted); font-size:.7rem; }
.panel-head > a { display:flex; align-items:center; gap:5px; color:var(--green); font-size:.7rem; font-weight:700; }
.compact-list { display:grid; }
.compact-list > a { display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:12px; min-height:68px; padding:10px 23px; border-bottom:1px solid #edf2f0; }
.compact-list > a:last-child { border-bottom:0; }
.compact-list > a:hover { background:#f8fbfa; }
.list-avatar { width:37px; height:37px; display:grid; place-items:center; border-radius:50%; color:var(--green); background:var(--soft); font-weight:800; }
.compact-list strong,.compact-list small { display:block; }
.compact-list strong { font-size:.78rem; }
.compact-list small { color:var(--muted); font-size:.65rem; }
.compact-list b { display:grid; justify-items:end; font-size:.77rem; }
.activity-list { display:grid; padding:10px 23px; }
.activity-list > div { display:grid; grid-template-columns:32px 1fr; gap:10px; padding:12px 0; border-bottom:1px solid #edf2f0; }
.activity-list > div:last-child { border-bottom:0; }
.activity-list > div > span { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:var(--green); background:var(--soft); }
.activity-list p { margin:0; color:var(--muted); font-size:.72rem; }
.activity-list p strong { color:var(--ink); }
.activity-list small { display:block; margin-top:3px; color:#94a29d; font-size:.62rem; }
.panel-empty { padding:50px 20px; color:var(--muted); text-align:center; font-size:.8rem; }
.quick-panel { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:20px; padding:24px; }
.quick-actions { display:flex; flex-wrap:wrap; gap:8px; }
.quick-actions a { min-height:40px; display:flex; align-items:center; gap:7px; padding:0 13px; border:1px solid var(--border); border-radius:8px; color:var(--green); font-size:.72rem; font-weight:700; }
.quick-actions a:hover { background:var(--soft); }

.status { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px; color:#446058; background:#e8efec; font-size:.61rem; font-style:normal; font-weight:800; text-transform:capitalize; }
.status::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.status-paid,.status-active,.status-published,.status-approved,.status-completed,.status-resolved { color:#17634e; background:#def1e9; }
.status-pending,.status-reviewing,.status-planned,.status-draft,.status-in_progress { color:#966915; background:#fbefd4; }
.status-failed,.status-declined,.status-spam,.status-disabled,.status-cancelled { color:#993f3f; background:#f8e3e3; }

.table-panel { overflow:hidden; }
.table-tools { display:flex; align-items:center; gap:10px; padding:17px 20px; border-bottom:1px solid var(--border); }
.table-search { min-width:260px; max-width:430px; flex:1; position:relative; }
.table-search svg { position:absolute; top:50%; left:13px; color:#8ca099; transform:translateY(-50%); }
.table-tools input,.table-tools select { width:100%; min-height:40px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; outline:0; color:var(--ink); background:var(--white); font-size:.76rem; }
.table-search input { padding-left:39px; }
.table-tools select { width:160px; }
.table-tools input:focus,.table-tools select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(13,96,75,.08); }
.clear-filter { color:var(--muted); font-size:.7rem; text-decoration:underline; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; white-space:nowrap; }
th { padding:13px 17px; color:#788983; background:#f8faf9; font-size:.63rem; font-weight:800; letter-spacing:.06em; text-align:left; text-transform:uppercase; }
td { max-width:300px; padding:15px 17px; overflow:hidden; border-top:1px solid #edf2f0; color:#3e544e; font-size:.73rem; text-overflow:ellipsis; }
tbody tr:hover { background:#fbfdfc; }
.actions-col { text-align:right; }
.row-actions { display:flex; justify-content:flex-end; gap:9px; }
.row-actions a,.row-actions button { padding:0; border:0; color:var(--green); background:none; font-size:.68rem; font-weight:700; }
.row-actions button { color:var(--danger); }
.row-actions form { margin:0; }
.table-empty { height:160px; color:var(--muted); text-align:center; }

.admin-form { max-width:1000px; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--white); box-shadow:var(--shadow); }
.admin-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:30px; }
.admin-field { display:grid; align-content:start; gap:7px; }
.admin-field.wide { grid-column:1/-1; }
.admin-field > span:first-child { color:#384f48; font-size:.74rem; font-weight:700; }
.admin-field input:not([type=checkbox]),.admin-field textarea,.admin-field select { width:100%; min-height:46px; padding:10px 12px; border:1px solid #ccd9d4; border-radius:8px; outline:0; color:var(--ink); background:var(--white); font-size:.8rem; }
.admin-field textarea { min-height:115px; resize:vertical; }
.admin-field.wide textarea { min-height:170px; }
.admin-field input:focus,.admin-field textarea:focus,.admin-field select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(13,96,75,.08); }
.admin-field small { color:var(--muted); font-size:.66rem; }
.admin-field small a { color:var(--green); text-decoration:underline; }
.admin-check { min-height:46px; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.8rem; }
.admin-check input { width:18px; height:18px; accent-color:var(--green); }
.file-field { position:relative; min-height:70px; display:grid; place-items:center; overflow:hidden; border:1px dashed #a9beb6; border-radius:9px; color:var(--green); background:var(--soft); font-size:.75rem; font-weight:700; cursor:pointer; }
.file-field input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.admin-form-actions { display:flex; justify-content:flex-end; gap:10px; padding:18px 30px; border-top:1px solid var(--border); background:#fafcfe; }
.admin-errors { max-width:1000px; padding:14px 20px 14px 38px; border-radius:9px; color:#803a3a; background:#fae6e6; font-size:.8rem; }

@media (max-width:1200px) { .metric-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:920px) {
  .login-body { grid-template-columns:1fr; }
  .login-visual { display:none; }
  .admin-sidebar { transform:translateX(-100%); transition:transform .2s; box-shadow:15px 0 45px rgba(3,35,28,.2); }
  .sidebar-open .admin-sidebar { transform:none; }
  .admin-main { margin-left:0; }
  .admin-menu { display:grid; }
  .admin-topbar { justify-content:flex-start; gap:16px; padding:0 22px; }
  .admin-user { margin-left:auto; }
  .dashboard-grid { grid-template-columns:1fr; }
  .quick-panel { align-items:flex-start; flex-direction:column; }
}
@media (max-width:620px) {
  .login-main { padding:28px 22px; }
  .admin-content { width:calc(100% - 28px); padding-top:30px; }
  .admin-page-head { align-items:flex-start; flex-direction:column; }
  .head-actions { width:100%; flex-wrap:wrap; }
  .metric-grid { grid-template-columns:1fr; }
  .admin-topbar > div:first-of-type { display:none; }
  .admin-user strong,.admin-user small { display:none; }
  .table-tools { align-items:stretch; flex-direction:column; }
  .table-search { width:100%; min-width:0; max-width:none; }
  .table-tools select { width:100%; }
  .admin-form-grid { grid-template-columns:1fr; padding:20px; }
  .admin-field.wide { grid-column:auto; }
  .admin-form-actions { padding:15px 20px; }
}