/* Fivestar OS */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: #0f1115;
    color: #e6e8ee;
    font-size: 14px;
}

.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px;
    background: #161922;
    border-bottom: 1px solid #232838;
    position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo-img { height: 22px; width: auto; display: block; }
.brand .logo { color: #ffb648; font-size: 22px; }
.brand .name { font-weight: 700; font-size: 18px; letter-spacing: .3px; }
.brand .tag  { color: #8a93a8; font-size: 12px; }
.actions { display: flex; gap: 8px; }

.btn {
    background: #232838; color: #e6e8ee;
    border: 1px solid #2e3447; border-radius: 6px;
    padding: 7px 14px; cursor: pointer; font-size: 13px;
    transition: background .15s;
}
.btn:hover { background: #2e3447; }
.btn.primary { background: #ffb648; color: #1a1300; border-color: #ffb648; font-weight: 600; }
.btn.primary:hover { background: #ffc977; }
.btn.ghost { background: transparent; border-color: transparent; font-size: 22px; line-height: 1; padding: 4px 10px; }
.btn.danger { background: #4a1f23; border-color: #6a2a30; color: #ffb6b6; }
.btn.danger:hover { background: #5a262b; }

.stats {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 12px; padding: 18px 24px 6px;
}
.stat {
    background: #161922; border: 1px solid #232838; border-radius: 8px;
    padding: 12px 16px; display: flex; flex-direction: column; gap: 4px;
}
.stat .label { color: #8a93a8; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; }
.stat .value { font-size: 20px; font-weight: 600; }

.filters {
    display: flex; gap: 8px; padding: 12px 24px; align-items: center;
}
.filters input, .filters select {
    background: #161922; border: 1px solid #232838; color: #e6e8ee;
    border-radius: 6px; padding: 7px 10px; font-size: 13px;
}
.filters input { flex: 1; }
.filters input:focus, .filters select:focus { outline: none; border-color: #ffb648; }

main { padding: 0 24px 32px; }

table.orders {
    width: 100%; border-collapse: collapse;
    background: #161922; border: 1px solid #232838; border-radius: 8px; overflow: hidden;
}
table.orders th, table.orders td {
    padding: 10px 14px; text-align: left; border-bottom: 1px solid #232838;
}
table.orders th {
    background: #1a1e2a; color: #8a93a8;
    font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
    font-weight: 600;
}
table.orders tbody tr { cursor: pointer; transition: background .1s; }
table.orders tbody tr:hover { background: #1c2030; }
table.orders td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.orders th.num { text-align: right; }
table.orders .empty { text-align: center; color: #8a93a8; padding: 30px; }

.badge {
    display: inline-block; padding: 2px 8px; border-radius: 99px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
}
.badge.src-stripe { background: #1f3a5a; color: #8ec7ff; }
.badge.src-manual { background: #3a2f1f; color: #ffd28e; }
.badge.status-new        { background: #2a3148; color: #aab8f0; }
.badge.status-processing { background: #3a3010; color: #ffd28e; }
.badge.status-shipped    { background: #1a3a3a; color: #8eebd6; }
.badge.status-completed  { background: #1f4a2a; color: #8eea9a; }
.badge.status-cancelled  { background: #4a1f23; color: #ffb6b6; }
.badge.status-refunded   { background: #2a2a2a; color: #c0c0c0; }

.badge.istatus-open      { background: #2a3148; color: #aab8f0; }
.badge.istatus-progress  { background: #3a3010; color: #ffd28e; }
.badge.istatus-finished  { background: #1f4a2a; color: #8eea9a; }

.badge.platform          { background: #1f2532; color: #c9d3e6; text-transform: none; letter-spacing: 0; font-weight: 500; }
.badge.platform-unknown  { background: #2a2a2a; color: #8a93a8; }

/* Drawer */
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: 520px; max-width: 95vw;
    background: #0f1115; border-left: 1px solid #232838;
    box-shadow: -8px 0 30px rgba(0,0,0,.5);
    display: flex; flex-direction: column;
    z-index: 20;
    transition: transform .2s ease;
}
.drawer.hidden { transform: translateX(100%); pointer-events: none; }
.drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #232838;
}
.drawer-head h2 { margin: 0; font-size: 16px; }
.drawer-body { padding: 18px; overflow: auto; flex: 1; }

.drawer-body .field { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.drawer-body label { color: #8a93a8; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.drawer-body input, .drawer-body select, .drawer-body textarea {
    background: #161922; border: 1px solid #232838; color: #e6e8ee;
    border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: inherit;
}
.drawer-body input:focus, .drawer-body select:focus, .drawer-body textarea:focus { outline: none; border-color: #ffb648; }
.drawer-body textarea { min-height: 70px; resize: vertical; }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.meta-list { display: flex; flex-direction: column; gap: 6px; }
.meta-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
.meta-row input { width: 100%; }

.events {
    margin-top: 18px; border-top: 1px solid #232838; padding-top: 14px;
    max-height: 220px; overflow: auto;
}
.events h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; color: #8a93a8; letter-spacing: .6px; }
.event { padding: 6px 0; border-bottom: 1px dashed #232838; font-size: 12px; }
.event .t { color: #8a93a8; margin-right: 8px; }
.event .type { color: #ffb648; font-weight: 600; margin-right: 8px; }

.drawer-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding-top: 14px; border-top: 1px solid #232838; margin-top: 14px;
}
.drawer-actions .spacer { flex: 1; }

.notify-row { display: flex; align-items: center; gap: 6px; color: #8a93a8; font-size: 12px; }

.toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: #161922; color: #e6e8ee; border: 1px solid #2e3447;
    padding: 10px 18px; border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    z-index: 30; font-size: 13px;
}
.toast.hidden { display: none; }
.toast.error  { border-color: #6a2a30; color: #ffb6b6; }
.toast.success{ border-color: #2a6a3c; color: #8eea9a; }

@media (max-width: 720px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .drawer { width: 100%; }
}

/* Login */
.login-body {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
}
.login-card {
    width: 360px; max-width: 92vw;
    background: #161922; border: 1px solid #232838; border-radius: 10px;
    padding: 26px 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.login-card .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.login-card label { color: #8a93a8; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.login-card input {
    background: #0f1115; border: 1px solid #232838; color: #e6e8ee;
    border-radius: 6px; padding: 9px 11px; font-size: 14px;
}
.login-card input:focus { outline: none; border-color: #ffb648; }
a.btn { display: inline-block; text-decoration: none; }