@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --bg:#f5f3ed;
  --paper:#fffdf7;
  --ink:#111111;
  --muted:#5f5f5f;
  --line:#111111;
  --yellow:#ffe44d;
  --pink:#ff6fb5;
  --cyan:#67e8f9;
  --lime:#b7f34a;
  --orange:#ff9f43;
  --red:#ff5c5c;
  --white:#ffffff;
  --shadow:6px 6px 0 #111111;
  --shadow-sm:4px 4px 0 #111111;
  --radius:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100%;
  background-color:var(--bg);
  background-image:linear-gradient(#11111112 1px,transparent 1px),linear-gradient(90deg,#11111112 1px,transparent 1px);
  background-size:24px 24px;
  color:var(--ink);
  font-family:'Space Grotesk',Inter,ui-sans-serif,system-ui,sans-serif;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 10%,#ffe44d55,transparent 24%),radial-gradient(circle at 90% 80%,#ff6fb533,transparent 22%);z-index:-1}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;font-weight:700}
.mono,code,pre{font-family:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
.muted{color:var(--muted)}
.hidden{display:none!important}

.card{
  background:var(--paper);
  border:3px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:3px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  border-radius:10px;
  padding:10px 15px;
  font-weight:800;
  text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.btn:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:none}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-danger{background:var(--red);color:var(--ink);border-color:var(--ink)}

.input{
  width:100%;
  border:3px solid var(--ink);
  background:#fff;
  color:var(--ink);
  border-radius:9px;
  padding:11px 12px;
  outline:none;
  box-shadow:3px 3px 0 var(--ink);
}
.input:focus{background:#fffde2;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
textarea.input{min-height:110px;resize:vertical}

.badge{
  display:inline-flex;align-items:center;gap:5px;
  border:2px solid var(--ink);border-radius:999px;
  padding:4px 9px;font-size:11px;font-weight:900;
  box-shadow:2px 2px 0 var(--ink);background:var(--yellow);
}
.badge-free{background:var(--lime)}
.badge-premium{background:var(--cyan)}
.badge-vip{background:var(--pink)}
.badge-admin{background:var(--ink);color:#fff}

.method{display:inline-flex;align-items:center;border:2px solid var(--ink);font-size:10px;font-weight:900;border-radius:6px;padding:4px 7px;letter-spacing:.04em;box-shadow:2px 2px 0 var(--ink)}
.method-get{background:var(--lime)}
.method-post{background:var(--cyan)}
.method-put,.method-patch{background:var(--yellow)}
.method-delete{background:var(--red)}

.topbar{
  position:sticky;top:0;z-index:30;min-height:68px;
  background:var(--yellow);
  border-bottom:3px solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 24px;
}
.topbar .btn{box-shadow:3px 3px 0 var(--ink);padding:8px 12px;background:#fff}

.logo-box{
  width:48px;height:48px;display:grid;place-items:center;
  border:3px solid var(--ink);border-radius:10px;
  background:var(--pink);color:var(--ink);font-weight:900;
  box-shadow:4px 4px 0 var(--ink);
}
.side-logo .logo-box{background:var(--cyan)}

.sidebar{
  width:270px;position:fixed;inset:0 auto 0 0;z-index:40;
  background:#fff;
  border-right:3px solid var(--ink);
  overflow:auto;
}
.content{margin-left:270px;min-height:100vh}
.side-logo{padding:18px;border-bottom:3px solid var(--ink);background:var(--cyan)}
.nav-section{padding:17px 12px 6px;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.14em}
.nav-item{
  display:flex;gap:10px;align-items:center;width:calc(100% - 20px);margin:5px 10px;
  padding:10px 12px;border:2px solid transparent;background:transparent;color:#303030;
  border-radius:8px;text-align:left;font-size:13px;font-weight:800;
}
.nav-item:hover{background:var(--yellow);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.nav-item.active{background:var(--pink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);color:var(--ink)}
.nav-folder{display:flex;align-items:center;gap:8px;width:calc(100% - 28px);margin:2px 14px;border:2px solid transparent;background:#fff;padding:8px 9px;color:#333;border-radius:7px;font-size:12px;font-weight:800;text-align:left}
.nav-folder:hover{background:var(--lime);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.sidebar-key{margin:12px;padding:12px;background:var(--paper);border:3px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--ink)}
.sidebar-key code{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;margin-top:7px}

.topbar+main,.page{max-width:1500px;margin:0 auto}
.page{padding:30px}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.hero{padding:92px 24px 58px;text-align:center;max-width:1000px;margin:auto}
.hero h1{font-size:clamp(42px,8vw,84px);line-height:.9;margin:20px auto;letter-spacing:-.06em;text-transform:uppercase;text-shadow:4px 4px 0 var(--pink)}
.hero p{max-width:720px;margin:0 auto;color:#333;line-height:1.7;font-size:15px}
.hero .btn-dark{background:var(--ink)}

.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{width:min(460px,100%);padding:30px;background:var(--paper)}
.auth-card h1{text-transform:uppercase;letter-spacing:-.04em}
.auth-card label{font-size:12px;font-weight:900;text-transform:uppercase}

.price{padding:24px;background:var(--paper);position:relative;overflow:hidden}
.price:after{content:"";position:absolute;width:85px;height:85px;right:-35px;top:-35px;border:3px solid var(--ink);background:var(--pink);transform:rotate(20deg)}
.price .amount{font-size:36px;font-weight:900;letter-spacing:-.04em;margin:14px 0 4px}

.endpoint-card{padding:18px;background:#fff}
.folder-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.request-list{display:grid;gap:18px}
.param-row{display:grid;grid-template-columns:170px 1fr 90px;gap:10px;align-items:center;padding:10px 0;border-bottom:2px dashed #1114}
.codebox{background:#111;color:#f7f7f7;border:3px solid #111;border-radius:9px;padding:15px;overflow:auto;font-size:12px;line-height:1.65;white-space:pre-wrap;word-break:break-word;box-shadow:4px 4px 0 var(--pink)}
.tab{border:2px solid var(--ink);background:#fff;color:var(--ink);padding:7px 10px;font-size:11px;font-weight:900;box-shadow:2px 2px 0 var(--ink);border-radius:5px}
.tab.active{background:var(--yellow)}

.table-wrap{overflow:auto;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:#fff}
.table{width:100%;border-collapse:collapse;font-size:12px}
.table th,.table td{text-align:left;padding:12px;border-bottom:2px solid var(--ink);white-space:nowrap}
.table th{background:var(--yellow);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.table tr:nth-child(even) td{background:#fffde9}

.modal{position:fixed;inset:0;background:#111b;display:none;align-items:center;justify-content:center;padding:20px;z-index:80}
.modal.show{display:flex}
.mobile-menu{display:none}
.toast{position:fixed;right:18px;bottom:18px;background:var(--yellow);color:var(--ink);border:3px solid var(--ink);padding:12px 15px;border-radius:8px;z-index:100;box-shadow:5px 5px 0 var(--ink);font-size:13px;font-weight:800;max-width:min(420px,calc(100vw - 36px))}

/* Small utility classes already used by the existing dashboard. */
.section-title{font-size:28px;letter-spacing:-.04em;margin:0 0 7px;font-weight:900}
.stat-card{padding:18px;background:var(--cyan);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:10px}

@media(max-width:1000px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .sidebar{transform:translateX(-105%);transition:transform .18s ease;box-shadow:7px 0 0 #111}
  .sidebar.open{transform:translateX(0)}
  .content{margin-left:0}
  .mobile-menu{display:inline-flex}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .page{padding:18px}
  .topbar{padding:9px 12px}
  .param-row{grid-template-columns:1fr}
  .hero{padding:62px 18px 40px}
  .hero h1{text-shadow:3px 3px 0 var(--pink)}
}