*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:#f8f5f0;--cream2:#f0ebe2;--cream3:#e8e1d6;
  --warm-white:#fdfcfa;--brown-dk:#3b2f23;--brown-md:#7a5c40;
  --brown-lt:#b08060;--brown-pale:#d4b896;
  --text:#3b3028;--text2:#7a6a5a;--text3:#a89880;
  --border:#ddd4c5;--border2:#c8bba8;
  --green:#4a7c59;--green-lt:#e8f2ec;--green-dk:#2d5e38;
  --red:#8b3a3a;--red-lt:#f5e8e8;
  --blue:#3a5f8b;--blue-lt:#e8eef5;
  --amber:#8b6d3a;--amber-lt:#f5efe8;
  --shadow:0 1px 3px rgba(59,47,35,.08);
  --shadow-md:0 4px 14px rgba(59,47,35,.12);
  --radius:5px;
  --sans:'Aptos',system-ui,sans-serif;
}

@font-face {
  font-family:'Aptos';
  src:local('Aptos'),local('Aptos Display'),local('Calibri');
  font-weight:300 900;font-style:normal;
}

body{background:var(--cream);color:var(--text);font-family:var(--sans);font-size:13px;min-height:100vh}

/* ── HEADER ── */
.header{background:var(--brown-dk);padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:54px;position:sticky;top:0;z-index:100;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.header-brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:30px;height:30px;background:var(--brown-lt);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:14px}
.brand-name{font-size:14px;font-weight:600;color:var(--cream);line-height:1.2}
.brand-sub{font-size:10px;color:var(--brown-pale);letter-spacing:.1em;text-transform:uppercase;font-weight:300}
.header-right{display:flex;align-items:center;gap:8px}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:var(--radius);font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .15s;font-family:var(--sans);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.btn-primary{background:var(--brown-lt);color:#fff}.btn-primary:hover{background:var(--brown-md)}
.btn-ghost-lt{background:transparent;color:var(--cream2);border:1px solid rgba(255,255,255,.25)}.btn-ghost-lt:hover{background:rgba(255,255,255,.1)}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}.btn-ghost:hover{background:var(--cream2)}
.btn-danger{background:transparent;color:var(--red);border:1px solid #d4a8a8}.btn-danger:hover{background:var(--red-lt)}
.btn-sm{padding:4px 10px;font-size:11px}

/* ── MAIN ── */
.main{padding:18px 24px;max-width:1100px;margin:0 auto}

/* ── STATS ── */
.stats-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stat-card{background:var(--warm-white);border:1px solid var(--border);border-radius:var(--radius);padding:12px 15px;box-shadow:var(--shadow)}
.stat-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.stat-value{font-size:22px;font-weight:700}
.stat-value.brown{color:var(--brown-md)}.stat-value.green{color:var(--green)}.stat-value.blue{color:var(--blue)}

/* ── TOOLBAR ── */
.table-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--cream2);border:1px solid var(--border);border-bottom:none;flex-wrap:wrap;gap:8px;border-radius:var(--radius) var(--radius) 0 0}
.toolbar-left{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.toolbar-right{display:flex;gap:8px;align-items:center}
.search-box{background:var(--warm-white);border:1px solid var(--border);border-radius:var(--radius);padding:6px 10px;font-size:13px;color:var(--text);width:260px;outline:none;font-family:var(--sans)}
.search-box:focus{border-color:var(--brown-lt)}
.search-box::placeholder{color:var(--text3)}

/* ── TABLE ── */
.table-wrap{background:var(--warm-white);border:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);overflow:hidden}
table{width:100%;border-collapse:collapse}
thead th{padding:9px 12px;text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);background:var(--cream2);border-bottom:1px solid var(--border2);white-space:nowrap}
thead th.sortable{cursor:pointer}
thead th.sortable:hover{color:var(--brown-md)}
.sort-arrow{font-size:10px;color:var(--brown-lt);margin-left:3px}
.th-code{width:120px}
.th-notes{}
.th-meta{width:170px}
.th-actions{width:120px;text-align:right}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--cream)}
td{padding:9px 12px;font-size:13px;vertical-align:middle}
.td-code{font-size:14px;font-weight:700;color:var(--brown-dk);letter-spacing:.05em;font-family:var(--sans)}
.code-chip{display:inline-block;background:var(--brown-dk);color:var(--cream);padding:3px 10px;border-radius:3px;font-weight:700;letter-spacing:.08em;font-size:13px}
.td-name{font-weight:600;font-size:13px;color:var(--text)}
.td-notes{font-size:12px;color:var(--text2);font-style:italic}
.td-meta{font-size:11px;color:var(--text3)}
.td-actions{text-align:right}
.row-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.icon-btn{background:none;border:1px solid var(--border);border-radius:3px;padding:3px 8px;cursor:pointer;font-size:11px;color:var(--text2);transition:all .12s}
.icon-btn:hover{background:var(--cream2);color:var(--brown-dk);border-color:var(--brown-lt)}
.icon-btn.danger:hover{background:var(--red-lt);color:var(--red);border-color:#d4a8a8}

.empty-state{text-align:center;padding:50px;color:var(--text3)}
.empty-icon{font-size:32px;margin-bottom:10px}
.empty-text{font-size:14px}

/* ── MODAL ── */
.modal-backdrop{position:fixed;inset:0;background:rgba(59,47,35,.45);display:flex;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(3px)}
.modal-backdrop.hidden{display:none}
.modal{background:var(--warm-white);border:1px solid var(--border2);border-radius:9px;width:460px;max-width:90vw;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-md)}
.modal-header{padding:18px 22px 13px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--cream2);border-radius:9px 9px 0 0}
.modal-title{font-size:15px;font-weight:600;color:var(--brown-dk)}
.modal-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:18px;padding:3px 7px;border-radius:3px}
.modal-close:hover{color:var(--text);background:var(--cream3)}
.modal-body{padding:18px 22px}
.modal-footer{padding:12px 22px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;background:var(--cream2);border-radius:0 0 9px 9px}

.form-group{margin-bottom:14px}
.form-label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text2);margin-bottom:5px}
.form-hint{font-size:11px;color:var(--text3);margin-top:4px;font-weight:400;text-transform:none;letter-spacing:0}
.form-input,.form-textarea{width:100%;background:var(--cream);border:1px solid var(--border2);border-radius:var(--radius);padding:9px 11px;color:var(--text);font-family:var(--sans);font-size:14px;outline:none}
.form-input:focus,.form-textarea:focus{border-color:var(--brown-lt);background:var(--warm-white)}
.form-input.code-input{font-size:18px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;text-align:center}
.form-input.error{border-color:var(--red);background:var(--red-lt)}
.form-input.ok{border-color:var(--green);background:var(--green-lt)}
.form-textarea{min-height:60px;resize:vertical;font-size:13px}
.form-error{font-size:12px;color:var(--red);margin-top:5px;font-weight:600;display:none}
.form-error.visible{display:block}

.toast{position:fixed;bottom:22px;right:22px;background:var(--brown-dk);color:var(--cream);padding:10px 18px;border-radius:var(--radius);font-size:13px;font-weight:500;box-shadow:var(--shadow-md);z-index:999;transition:opacity .3s}
.toast.hidden{opacity:0;pointer-events:none}
.toast.error{background:var(--red)}
.toast.success{background:var(--green-dk)}