:root{ --bg:#f8fafc; --panel:#ffffff; --ink:#101828; --muted:#5b6b7b; --brand:#0b4f2e; --accent:#ffb000; --soft:0 10px 30px rgba(16,24,40,.06) }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
.container{max-width:920px;margin:24px auto;padding:0 16px}
.card{background:var(--panel);border-radius:16px;box-shadow:var(--soft);padding:20px;margin:12px 0}
h1{font-size:22px;margin:0 0 16px}
nav a{margin-right:12px;text-decoration:none;color:var(--brand);font-weight:600}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left}
th{background:#f0f2f4}
label{display:block;margin:10px 0 6px;font-weight:600}
input,select,textarea{width:100%;padding:10px;border:1px solid #d0d5dd;border-radius:10px;background:#fff}
button,.btn{display:inline-block;background:var(--brand);color:#fff;border:none;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:600;text-decoration:none}
.btn.secondary{background:#e2e8f0;color:#111}
.notice{padding:10px 12px;border-radius:12px;background:#fff8e1;border:1px solid #ffe08a;color:#7a5d00;margin-top:10px}
.error{padding:10px 12px;border-radius:12px;background:#ffe8e8;border:1px solid #ffb3b3;color:#8a1f1f;margin-top:10px}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pagination{display:flex;gap:10px;align-items:center;margin-top:10px}
.pagination a{color:var(--brand);text-decoration:none;font-weight:600}
.small{color:var(--muted);font-size:13px}

/* === Sweet pastel theme refresh === */
:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --brand:#0ea5a5;      /* teal */
  --brand-2:#84cc16;    /* lime */
  --accent:#f59e0b;     /* amber */
  --danger:#ef4444;
  --soft:0 12px 30px rgba(2, 6, 23, .06);
  --ring:0 0 0 3px rgba(14, 165, 165, .15);
}
a{color:var(--brand)}
.container{max-width:1080px;margin:28px auto;padding:0 16px}
.card{background:var(--panel);border-radius:18px;box-shadow:var(--soft);padding:22px;margin:16px 0}
.btn{background:var(--brand)}
.btn.secondary{background:#e2e8f0;color:#0f172a}
.btn.ghost{background:transparent;border:1px solid #e2e8f0;color:#0f172a}
.btn.danger{background:var(--danger)}
.btn.small{padding:8px 10px;border-radius:10px;font-size:12px}
.btn:focus{outline:none;box-shadow:var(--ring)}
nav a{margin-right:14px;text-decoration:none;color:#0b4f2e;font-weight:700}
.table-wrap{width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse;table-layout:fixed}
th,td{padding:10px;border-bottom:1px solid #eef2f7;text-align:left;word-break:break-word;white-space:normal}
th{background:#f1f5f9}
.header h1{display:flex;align-items:center;gap:8px}
.header h1::before{content:'🧪';}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#e2f3f3;font-weight:600;font-size:12px}
.badge.gray{background:#eef2f7}
.badge.warn{background:#fff3cd}
.badge.danger{background:#ffe0e0}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.input-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
label{display:block;margin:10px 0 6px;font-weight:600}
input,select,textarea{width:100%;padding:10px;border:1px solid #d0d5dd;border-radius:10px;background:#fff}
.hr{height:1px;background:#eef2f7;margin:12px 0}
.stack{display:flex;flex-direction:column;gap:20px}


/* === Button readability & states === */
.btn{ color:#ffffff; font-weight:600; border:none; cursor:pointer; transition:filter .15s ease; }
.btn:hover{ filter:brightness(0.95); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn.danger{ background:var(--danger); color:#fff; }
.btn.secondary{ background:#e2e8f0; color:#0f172a; }
.btn.ghost{ background:transparent; border:1px solid #cbd5e1; color:var(--ink); }
.btn.small{ padding:8px 12px; border-radius:10px; font-size:12px; line-height:1.2; }
.actions .btn{ white-space:nowrap; }


/* === Mobile table readability fixes (appended) === */
.table.compact th, .table.compact td { word-break: normal; overflow-wrap: break-word; }
.table.compact td:not(:nth-child(6)), .table.compact th:not(:nth-child(6)) { white-space: nowrap; }
@media (max-width: 640px){
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
  table.table.compact{ table-layout:auto; }
}