:root{
  --bg:#f3f7f3;
  --bg2:#e9f0ea;
  --card:rgba(255,255,255,.82);
  --card-solid:#ffffff;
  --sidebar:rgba(255,255,255,.68);
  --text:#101713;
  --muted:#66756b;
  --line:rgba(16,23,19,.08);

  --accent:#9cfb38;
  --accent-strong:#86e91d;
  --accent-soft:rgba(156,251,56,.12);
  --accent-border:rgba(156,251,56,.24);
  --accent-text:#0b1207;

  --danger:#ef4444;
  --danger-soft:rgba(239,68,68,.12);
  --danger-border:rgba(239,68,68,.22);

  --success:#22c55e;
  --success-soft:rgba(34,197,94,.12);
  --success-border:rgba(34,197,94,.22);

  --warning:#f59e0b;

  --input-bg:rgba(255,255,255,.92);

  --shadow:0 18px 45px rgba(16,23,19,.10);
  --shadow-soft:0 10px 26px rgba(16,23,19,.08);

  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:12px;
}

html[data-theme="dark"]{
  --bg:#07110a;
  --bg2:#0d1610;
  --card:rgba(13,19,16,.84);
  --card-solid:#101712;
  --sidebar:rgba(9,14,11,.88);
  --text:#edf6ef;
  --muted:#93a297;
  --line:rgba(255,255,255,.08);

  --accent:#9cff2e;
  --accent-strong:#84f01b;
  --accent-soft:rgba(156,255,46,.12);
  --accent-border:rgba(156,255,46,.22);
  --accent-text:#081005;

  --danger:#f87171;
  --danger-soft:rgba(248,113,113,.14);
  --danger-border:rgba(248,113,113,.22);

  --success:#4ade80;
  --success-soft:rgba(74,222,128,.14);
  --success-border:rgba(74,222,128,.24);

  --warning:#fbbf24;

  --input-bg:rgba(16,23,18,.92);

  --shadow:0 20px 60px rgba(0,0,0,.34);
  --shadow-soft:0 12px 28px rgba(0,0,0,.22);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  min-height:100%;
}

body{
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(156,251,56,.16), transparent 26%),
    radial-gradient(circle at top right, rgba(22,197,94,.10), transparent 20%),
    radial-gradient(circle at bottom right, rgba(156,251,56,.10), transparent 24%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  background-attachment:fixed;
  background-repeat:no-repeat;
  min-height:100vh;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

.app-shell{
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:100vh;
  gap:20px;
  padding:20px;
}

.sidebar{
  padding:20px;
  border:1px solid var(--line);
  border-radius:28px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  background:var(--sidebar);
  box-shadow:var(--shadow);
  position:sticky;
  top:20px;
  height:calc(100vh - 40px);
  overflow:auto;
}

.brand{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:26px;
}

.brand-mark{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  font-weight:800;
  color:var(--accent-text);
  box-shadow:0 10px 26px rgba(156,251,56,.24);
}

.brand-title{
  font-size:1.08rem;
  font-weight:800;
  letter-spacing:-0.02em;
}

.brand-sub{
  font-size:.88rem;
  color:var(--muted);
}

.nav-links{
  display:grid;
  gap:10px;
}

.nav-links a,
.theme-toggle,
.btn{
  border:1px solid var(--line);
  background:var(--card);
  padding:12px 14px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  cursor:pointer;
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.nav-links a:hover,
.btn:hover,
.theme-toggle:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}

.nav-links a.active{
  background:var(--accent);
  color:var(--accent-text);
  border-color:transparent;
  box-shadow:0 10px 28px rgba(156,251,56,.22);
}

.theme-toggle{
  margin-top:18px;
  width:100%;
  justify-content:center;
}

.main-content{
  min-width:0;
  padding:4px 0;
}

.topbar{
  margin-bottom:18px;
}

.topbar h1{
  margin:0;
  font-size:clamp(1.55rem,3vw,2.25rem);
  letter-spacing:-0.03em;
}

.topbar p{
  margin:6px 0 0;
  color:var(--muted);
}

.alert{
  padding:14px 16px;
  border-radius:16px;
  margin-bottom:16px;
  border:1px solid var(--line);
  background:var(--card);
}

.alert.success,
.alert-success{
  background:var(--success-soft);
  border-color:var(--success-border);
  color:var(--text);
}

.alert.error,
.alert-error{
  background:var(--danger-soft);
  border-color:var(--danger-border);
  color:var(--text);
}

.grid{
  display:grid;
  gap:18px;
}

.grid.cols-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.grid.cols-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.card{
  background:var(--card);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:20px;
  box-shadow:var(--shadow);
}

.card h2,
.card h3{
  margin-top:0;
  letter-spacing:-0.02em;
}

.muted{
  color:var(--muted);
}

.stack{
  display:grid;
  gap:14px;
}

.inline{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  background:var(--accent-soft);
  border:1px solid var(--accent-border);
  color:var(--text);
  font-size:.82rem;
  font-weight:700;
}

.pill.locked{
  background:var(--danger-soft);
  border-color:var(--danger-border);
}

label{
  display:grid;
  gap:8px;
  font-weight:600;
}

input,
select,
textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--input-bg);
  color:var(--text);
  box-shadow:none;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--accent-border);
  box-shadow:0 0 0 4px rgba(156,251,56,.10);
}

textarea{
  min-height:110px;
  resize:vertical;
}

.btn{
  justify-content:center;
  font-weight:700;
}

.btn-primary{
  background:var(--accent);
  color:var(--accent-text);
  border-color:transparent;
  box-shadow:0 10px 28px rgba(156,251,56,.22);
}

.btn-primary:hover{
  background:var(--accent-strong);
}

.btn-danger{
  background:var(--danger-soft);
  color:var(--danger);
  border:1px solid var(--danger-border);
  border-radius:14px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:700;
}

.btn-danger:hover{
  background:rgba(239,68,68,.18);
}

.table-wrap{
  overflow:auto;
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--card-solid);
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:840px;
  background:transparent;
}

th,
td{
  padding:13px 14px;
  text-align:left;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}

th{
  font-size:.82rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}

.mobile-cards{
  display:none;
}

.mobile-card{
  padding:16px;
  border-radius:20px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.auth-shell{
  display:grid;
  place-items:center;
  min-height:100vh;
  padding:24px;
}

.auth-card{
  width:min(100%,560px);
}

.center{
  text-align:center;
}

.hero{
  padding:18px 0 8px;
}

.hero p{
  color:var(--muted);
  max-width:70ch;
  margin-inline:auto;
}

.page-footer{
  margin-top:26px;
  color:var(--muted);
  font-size:.9rem;
}

.danger{
  color:var(--danger);
}

hr{
  border:0;
  border-top:1px solid var(--line);
  margin:16px 0;
}

/* Mobil + tablet */
@media (max-width:1080px){
  .app-shell{
    grid-template-columns:1fr;
    padding:14px;
    gap:14px;
  }

  .sidebar{
    position:static;
    top:auto;
    height:auto;
    border-radius:22px;
    padding:16px;
  }

  .nav-links{
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  }

  .main-content{
    padding:0;
  }
}

@media (max-width:720px){
  .grid.cols-2,
  .grid.cols-3{
    grid-template-columns:1fr;
  }

  .card{
    padding:16px;
    border-radius:20px;
  }

  .sidebar{
    padding:14px;
  }

  .brand{
    margin-bottom:18px;
  }

  .table-wrap{
    display:none;
  }

  .mobile-cards{
    display:grid;
    gap:14px;
  }

  .inline.mobile-stack,
  .mobile-stack{
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
  }

  .btn,
  .theme-toggle{
    width:100%;
  }

  input,
  select,
  textarea{
    font-size:16px;
  }
}