:root{
  --ink:#111;
  --paper:#ffffff;
  --paper2:#f6f7f9;
  --line:rgba(0,0,0,.12);
  --muted:rgba(0,0,0,.60);
  --shadow: 0 20px 40px rgba(0,0,0,.10);
  --shadow2: 0 12px 28px rgba(0,0,0,.10);
  --btn:#3a3a3a;
  --btn2:#ffffff;
  color-scheme: light;
}

*{ box-sizing:border-box; }
html, body{ height:100%; background:#fff; color:var(--ink); }
body{ margin:0; font-family: Arial, Helvetica, sans-serif; }

.app-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(0,0,0,.08), transparent 60%),
    radial-gradient(900px 500px at 80% 40%, rgba(0,0,0,.06), transparent 55%),
    linear-gradient(var(--paper2), var(--paper));
}

@media (prefers-color-scheme: dark){
  html, body{ background:#fff !important; color:var(--ink) !important; }
  .app-page{
    background:
      radial-gradient(900px 500px at 20% 20%, rgba(0,0,0,.08), transparent 60%),
      radial-gradient(900px 500px at 80% 40%, rgba(0,0,0,.06), transparent 55%),
      linear-gradient(var(--paper2), var(--paper)) !important;
  }
}

.page-main{ flex:1; width:100%; }

.container{ max-width:1100px; margin:0 auto; padding:24px 16px; width:100%; }
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  box-shadow:var(--shadow2);
}
.card + .card{ margin-top:16px; }
.card-title{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 12px; }
.card-title h2{ margin:0; font-size:18px; letter-spacing:.2px; }
.small-link{ font-size:13px; color:#111; opacity:.65; text-decoration:none; }
.small-link:hover{ opacity:1; text-decoration:underline; }

/* Header */
.app-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background:rgba(255,255,255,.95);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line);
}
.header-left{ display:flex; align-items:center; gap:14px; }
.menu-btn{
  border:1px solid var(--line); background:transparent; color:var(--ink);
  border-radius:12px; padding:8px 10px; font-size:18px; cursor:pointer;
}
.brand-logo{ height:64px; width:auto; display:block; }
.user-pill{
  border:1px solid var(--line); padding:6px 10px; border-radius:999px;
  color:var(--muted); font-size:13px; background:rgba(255,255,255,.65);
}

/* Side menu */
.side-menu{
  position:fixed; top:0; left:-320px; width:300px; height:100vh; z-index:20;
  background:var(--paper); border-right:1px solid var(--line);
  padding:12px; transition:left .2s ease;
  box-shadow: 20px 0 35px rgba(0,0,0,.10);
}
.side-menu.open{ left:0; }
.side-menu-top{ display:flex; align-items:center; justify-content:space-between; padding:6px 4px 12px; }
.side-menu-title{ font-weight:700; letter-spacing:.3px; }
.close-btn{
  border:1px solid var(--line); background:transparent; color:var(--ink);
  border-radius:12px; padding:6px 10px; cursor:pointer;
}
.side-link{
  display:block; padding:12px 10px; border-radius:12px; color:var(--ink);
  text-decoration:none; border:1px solid transparent;
}
.side-link:hover{ border-color:var(--line); background:#f2f3f6; }
.side-sep{ height:1px; background:rgba(0,0,0,.08); margin:10px 2px; }
.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  z-index:15; display:none;
}
.backdrop.open{ display:block; }

/* Buttons */
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.18);
  background:var(--btn);
  color:#fff;
  cursor:pointer;
  font-weight:800;
  text-decoration:none;
}
.btn:hover{ filter:brightness(0.95); }
.btn-secondary{
  background:var(--btn2);
  color:var(--ink);
}
.btn-secondary:hover{ background:#f2f3f6; }

/* Lists */
.list{ display:flex; flex-direction:column; gap:10px; }
.list-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 12px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:#fff;
  text-decoration:none;
  color:var(--ink);
}
.list-item:hover{ background:#f7f8fa; }
.li-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.li-title{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.li-sub{ font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.badge{
  font-size:12px; font-weight:800;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  flex:0 0 auto;
}
.badge.N{ }
.badge.I{ background:#f2f3f6; }
.badge.C{ background:#e9f7ee; border-color:#cfe9d9; }

/* Key/value grid */
.kv{ display:grid; grid-template-columns: 180px 1fr; gap:10px 14px; }
.kv .k{ color:var(--muted); font-size:13px; }
.kv .v{ font-weight:700; word-break:break-word; }

/* Forms */
label{ display:block; margin:14px 0 6px; color:var(--muted); font-size:13px; }
input[type=text], input[type=password], textarea, select{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  color:#111;
  outline:none;
  font-family:inherit;
}
textarea{ min-height:110px; resize:vertical; }
.row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.msg{ margin-top:10px; color:#b00020; font-size:13px; }

/* Login */
.login-wrap{ width:100%; display:flex; align-items:center; justify-content:center; padding:32px 16px; }
.login-card{
  width:min(420px, 100%);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px 22px;
  box-shadow: var(--shadow);
}
.login-logo{ display:flex; justify-content:center; margin-bottom:18px; }
.login-logo img{ height:100px; width:auto; }
.login-title{ text-align:center; font-weight:800; margin:4px 0 2px; }
.login-sub{ text-align:center; color:var(--muted); font-size:13px; margin:0 0 16px; }

@media (max-width: 560px){
  .brand-logo{ height:54px; }
  .kv{ grid-template-columns: 1fr; }
  .kv .k{ margin-top:6px; }
}