:root {
    --teal-700: #00555F;
    --teal-600: #006b77;
    --teal-500: #008494;
    --teal-400: #2aa0b0;
    --teal-300: #6cbfca;
    --teal-200: #a8d9df;
    --teal-100: #d4eef1;
    --teal-50:  #eef7f9;
    --comp-400: #e07820;
    --comp-100: #fde8c8;
    --comp-700: #7a3a00;
    --ink:      #0e1c1e;
    --ink-80:   #2a3d40;
    --ink-60:   #4a6165;
    --ink-40:   #7a9699;
    --ink-20:   #b8cbcd;
    --ink-10:   #dce8ea;
    --paper:    #f5fafb;
    --paper2:   #eaf3f5;
    --white:    #ffffff;
    --primary:  var(--teal-700);
    --muted:    var(--ink-60);
    --border:   var(--ink-10);
    --success:  #1d7a40;
    --danger:   #c0392b;
    --sans: 'Inter', 'DM Sans', system-ui, sans-serif;
    --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
    --shadow-sm: 0 1px 4px rgba(0,85,95,.08);
    --shadow-md: 0 4px 16px rgba(0,85,95,.10);
    --transition: 0.18s ease;
    --topbar-h: 56px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--sans); background: var(--paper2); color: var(--ink); min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Topbar */
.admin-topbar {
    position: sticky; top: 0; z-index: 50;
    height: var(--topbar-h);
    background: var(--teal-800, #003d44);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.75rem; gap: 1rem;
}
.topbar-logo { font-size: .95rem; font-weight: 700; color: var(--teal-200); letter-spacing: -.01em; white-space: nowrap; }
.topbar-nav { display: flex; align-items: center; gap: .2rem; flex: 1; }
.topbar-nav a {
    font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: rgba(255,255,255,.5); padding: .4rem .8rem; border-radius: var(--radius-sm);
    transition: all var(--transition); white-space: nowrap;
}
.topbar-nav a:hover  { background: rgba(255,255,255,.08); color: #fff; }
.topbar-nav a.active { background: rgba(255,255,255,.12); color: #fff; }
.topbar-badge { display: inline-block; background: var(--comp-400); color: #fff; font-size: .6rem; font-weight: 700; border-radius: 20px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.topbar-right a { font-size: .72rem; color: rgba(255,255,255,.38); transition: color var(--transition); }
.topbar-right a:hover { color: #fff; }

/* Page */
.admin-page { max-width: 1200px; margin: 0 auto; padding: 2rem; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap; }
.page-title { font-size: 1.6rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }

/* Cards */
.card { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 1.5rem; }
.card-title { font-size: 1rem; font-weight: 700; margin-bottom: 1.2rem; letter-spacing: -.01em; }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 1.2rem 1.4rem; }
.stat-num   { font-size: 2rem; font-weight: 800; color: var(--primary); display: block; letter-spacing: -.03em; }
.stat-label { font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; display: block; }

/* Table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: left; padding: .55rem .8rem; border-bottom: 2px solid var(--border); white-space: nowrap; }
td { padding: .75rem .8rem; border-bottom: 1px solid var(--paper2); font-size: .86rem; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--teal-50); }
.thumb { width: 56px; height: 42px; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--border); }

/* Badges */
.badge { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; border: none; cursor: default; }
.badge-available { background: var(--teal-50);  color: var(--teal-700); }
.badge-sold      { background: var(--ink-10);   color: var(--ink-60); }
.badge-unread    { background: var(--comp-100); color: var(--comp-700); }
.badge-featured  { background: var(--comp-100); color: var(--comp-700); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: .55rem 1.1rem; border-radius: var(--radius-sm); font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; border: none; transition: all var(--transition); text-decoration: none; white-space: nowrap; line-height: 1; }
.btn-primary  { background: var(--primary); color: #fff; }
.btn-primary:hover  { background: var(--teal-600); }
.btn-outline  { background: transparent; border: 1.5px solid var(--ink-20); color: var(--ink-80); }
.btn-outline:hover  { border-color: var(--primary); color: var(--primary); background: var(--teal-50); }
.btn-danger   { background: transparent; border: 1.5px solid #ffcdd0; color: var(--danger); }
.btn-danger:hover   { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-success  { background: var(--success); color: #fff; }
.btn-sm       { padding: .35rem .8rem; font-size: .68rem; }
.btn-lg       { padding: .8rem 1.6rem; font-size: .82rem; }

/* Flash */
.flash { padding: .8rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.5rem; font-size: .86rem; font-weight: 500; }
.flash.success { background: var(--teal-50); color: var(--teal-700); border: 1px solid var(--teal-200); }
.flash.error   { background: #fff0f0; color: var(--danger); border: 1px solid #ffcdd0; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: span 2; }
.form-label { font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
input[type=text], input[type=email], input[type=number], input[type=password], select, textarea {
    width: 100%; padding: .65rem .9rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--sans); font-size: .88rem; color: var(--ink); background: var(--white); outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,85,95,.1); }
textarea { resize: vertical; min-height: 100px; }
input[type=file] { padding: .5rem; border: 2px dashed var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: .82rem; }
input[type=file]:hover { border-color: var(--primary); }
.checkbox-label { display: flex; align-items: center; gap: .6rem; font-size: .86rem; cursor: pointer; }
.checkbox-label input { width: auto; }

/* Password field with toggle */
.input-with-toggle { position: relative; }
.input-with-toggle input { padding-right: 2.5rem; }
.toggle-pw {
    position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--muted);
    font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    transition: color var(--transition); padding: 2px;
}
.toggle-pw:hover { color: var(--primary); }

/* Layout helpers */
.two-col   { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.stack     { display: flex; flex-direction: column; gap: 1.5rem; }

/* Message detail */
.msg-meta-label { font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: .4rem .8rem .4rem 0; width: 80px; vertical-align: top; }
.msg-body { background: var(--paper2); border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; line-height: 1.85; font-size: .9rem; white-space: pre-wrap; }

/* Bulk upload drop zone */
.dropzone {
    border: 2px dashed var(--teal-300);
    border-radius: var(--radius-md);
    padding: 3rem 2rem;
    text-align: center;
    background: var(--teal-50);
    cursor: pointer;
    transition: all var(--transition);
}
.dropzone:hover, .dropzone.dragover {
    border-color: var(--primary);
    background: var(--teal-100);
}
.dropzone-icon { font-size: 2.5rem; color: var(--teal-400); margin-bottom: .75rem; }
.dropzone p { font-size: .9rem; color: var(--muted); }
.dropzone strong { color: var(--primary); }
.bulk-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; margin-top: 1.5rem; }
.bulk-preview-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; background: var(--paper2); }
.bulk-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.bulk-preview-item .remove-btn {
    position: absolute; top: 4px; right: 4px;
    background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 50%;
    width: 20px; height: 20px; font-size: .7rem; cursor: pointer; display: flex;
    align-items: center; justify-content: center; line-height: 1;
}
.bulk-progress { margin-top: 1rem; }
.progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: .5rem; }
.progress-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width .3s ease; }
.progress-text { font-size: .78rem; color: var(--muted); font-weight: 500; }

@media (max-width: 768px) {
    .topbar-nav { display: none; }
    .admin-page { padding: 1rem; }
    .form-grid { grid-template-columns: 1fr; }
    .form-group.full { grid-column: span 1; }
    .two-col { grid-template-columns: 1fr; }
}