:root{
  --ink:#273142;
  --muted:#737b86;
  --border:#d7dce2;
  --border-soft:#e4e7eb;
  --bg:#f5f7f9;
  --surface:#fff;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:20px;
  --space-5:24px;
  --space-6:32px;
  --shadow-card:0 4px 16px rgba(0,0,0,.07);
}
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;margin:0;background:var(--bg);color:var(--ink)}
a{color:var(--brand)}
button,.btn{font:inherit}
input[type=file]{font:inherit;color:var(--ink)}

header{background:var(--surface);border-bottom:1px solid var(--border-soft);padding:20px 28px;display:flex;flex-direction:column;align-items:center;gap:14px}
.brand{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:750;font-size:20px}
.brand img{width:190px;max-height:72px;object-fit:contain;object-position:center}

main{max-width:1200px;margin:32px auto;padding:0 20px}

.card{background:var(--surface);border-radius:var(--radius-md);padding:var(--space-5);box-shadow:var(--shadow-card)}

.section-head{display:flex;justify-content:space-between;align-items:center;margin-top:32px;gap:12px;flex-wrap:wrap}
h2{font-size:18px;margin:0}

table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--radius-md);overflow:hidden;margin-top:22px}
th,td{padding:12px 14px;border-bottom:1px solid #edf0f2;text-align:left;font-size:13px;vertical-align:top}
th{background:#f8fafb;font-weight:650}
tbody tr:hover{background:#fafbfc}

.small,.muted{font-size:13px;color:var(--muted)}
.actions-cell{text-align:right;white-space:nowrap}

.notice{padding:12px 15px;border-radius:var(--radius-sm);background:#edf6fb;border:1px solid #cfe4ef;color:#315b70;margin:0 0 var(--space-3);font-size:13px}
.error{padding:12px 15px;border-radius:var(--radius-sm);background:#fff0f0;border:1px solid #f0c2c2;color:#a33b3b;margin:0 0 var(--space-3);font-size:13px}
.info{padding:12px 15px;border-radius:var(--radius-sm);background:#f8fafb;border:1px solid var(--border-soft);color:#596575;margin:var(--space-3) 0}

.unread{display:inline-block;padding:3px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-weight:650;font-size:11px}
.blocked{display:inline-block;padding:3px 8px;border-radius:999px;background:#fff0f0;color:#a33b3b;font-weight:650;font-size:11px}
.ok{color:#4d8b13;font-weight:650}
.failed{color:#a33b3b;font-weight:650}

.btn{display:inline-block;border:0;border-radius:var(--radius-sm);padding:11px 17px;cursor:pointer;font-size:14px;font-weight:650;text-decoration:none;line-height:1.2;transition:background .15s ease,box-shadow .15s ease,border-color .15s ease,color .15s ease}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.btn-primary:hover{background:var(--brand-dark);box-shadow:0 4px 10px rgba(0,0,0,.12)}
.btn-secondary{background:#fff;color:var(--ink);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-danger{background:#fff0f0;color:#a33b3b;border:1px solid #efc5c5}
.btn-danger:hover{background:#f9dddd;color:#922f2f;border-color:#e7b5b5}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:7px}

.footer{text-align:center;color:var(--muted);font-size:11px;line-height:1.8;margin:var(--space-6) 0}
.footer a{color:#707784;text-decoration:none}
.footer a:hover{text-decoration:underline}
.legal-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:var(--space-2)}
.legal-button{display:inline-block;padding:8px 14px;border:1px solid var(--border);border-radius:7px;background:#fff;color:#4e5966;text-decoration:none;font-size:12px;font-weight:650;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s ease,color .15s ease,background .15s ease}
.legal-button:hover{border-color:var(--brand);color:var(--brand);background:#f8fafb}
.hosted-by a{color:#707784;text-decoration:none}
.hosted-by a:hover{text-decoration:underline}

.app-nav{display:inline-flex;align-items:center;gap:3px;padding:5px;background:#eef1f5;border:1px solid var(--border-soft);border-radius:12px;flex-wrap:wrap;justify-content:center}
.app-nav a{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:8px;text-decoration:none;border:0;background:transparent;color:#4c5563;cursor:pointer;font:inherit;font-weight:600;font-size:13.5px;transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.app-nav a svg{width:16px;height:16px;flex:0 0 16px}
.app-nav a:hover{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(20,30,45,.1)}
.app-nav a.active{background:var(--brand);color:#fff;box-shadow:0 2px 8px var(--brand-soft)}
.app-nav a.active:hover{background:var(--brand);color:#fff}
.app-nav a.logout{margin-left:7px;position:relative;color:#a33b3b}
.app-nav a.logout::before{content:"";position:absolute;left:-6px;top:22%;bottom:22%;width:1px;background:var(--border)}
.app-nav a.logout:hover{background:#fff0f0;color:#922f2f;box-shadow:none}

@media(max-width:800px){
  .app-nav{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px;border-radius:14px}
  .app-nav a{width:100%;justify-content:center;padding:11px 10px}
  .app-nav a.logout{grid-column:1/-1;margin-left:0;margin-top:5px;padding-top:13px}
  .app-nav a.logout::before{content:"";position:absolute;left:12px;right:12px;top:-3px;bottom:auto;width:auto;height:1px}
  header{padding:18px 16px}
  .brand img{width:180px;max-height:68px}
  main{margin:22px auto;padding:0 14px}
  .card{padding:var(--space-4)}
  table{display:block;overflow:auto;white-space:nowrap}
}