:root{
  --bg:#0a0b0d;
  --panel:#0f1115;
  --panel2:#13161b;
  --panel3:#171b21;
  --editor:#0b0d10;
  --border:#232832;
  --border2:#323844;
  --text:#f4f6f8;
  --soft:#d8dde4;
  --muted:#89919c;
  --dim:#58606b;
  --accent:#7df5b3;
  --accent2:#79a7ff;
  --green:#7df5b3;
  --danger:#ff5c6f;
  --shadow:0 18px 50px rgba(0,0,0,.34);
  --sans:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

html{background:var(--bg)}
body{
  background:
    radial-gradient(900px 500px at 14% -10%,rgba(121,167,255,.10),transparent 55%),
    radial-gradient(760px 460px at 88% 102%,rgba(125,245,179,.08),transparent 58%),
    var(--bg);
  font:15px/1.65 var(--sans);
  letter-spacing:-.015em;
}
body:before{
  inset:0;
  height:auto;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom,black,transparent 78%);
  z-index:-1;
}

.shell{width:min(1180px,calc(100% - 40px))}
.card{
  background:rgba(15,17,21,.92);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
}

.topbar{
  position:sticky;
  top:0;
  min-height:82px;
  gap:24px;
  border-bottom:1px solid var(--border);
  background:rgba(10,11,13,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.brand{gap:12px;font-weight:800;letter-spacing:-.04em}
.brand-mark{
  width:34px;
  height:34px;
  border:1px solid var(--border2);
  border-radius:10px;
  background:linear-gradient(145deg,#181b21,#0d0f12);
  color:var(--green);
  box-shadow:inset 0 1px rgba(255,255,255,.04);
  font-size:12px;
}
.brand-copy b{font-size:17px}
.brand-copy small{color:var(--dim);font-size:11px;letter-spacing:.02em}
.main-nav{gap:6px}
.main-nav a{
  padding:10px 12px;
  border-radius:9px;
  color:var(--muted);
  font-size:13px;
  font-weight:650;
  transition:color .18s ease,background .18s ease,transform .18s ease;
}
.main-nav a:hover,.main-nav a.active{
  color:var(--text);
  background:rgba(255,255,255,.045);
  transform:translateY(-1px);
}
.login-link{color:var(--muted);font-size:13px}
.signup-link,.account-chip{
  min-height:42px;
  border:1px solid var(--border2);
  border-radius:10px;
  background:#111318;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.signup-link:hover,.account-chip:hover{transform:translateY(-1px);border-color:#485160;background:#171b21}
.account-avatar{
  background:rgba(125,245,179,.08);
  color:var(--green);
  border:1px solid rgba(125,245,179,.14);
}

.page-kicker,.eyebrow,.mini-kicker{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
}
.page-kicker:before,.eyebrow:before,.mini-kicker:before{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 5px rgba(125,245,179,.06);
}

.primary,.ghost,.danger,.link-button{
  min-height:46px;
  border-radius:10px;
  padding:0 17px;
  font-size:13px;
  font-weight:700;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.primary{
  border:1px solid var(--text);
  background:var(--text);
  color:#0c0d0f;
  box-shadow:none;
}
.primary:hover{transform:translateY(-2px);background:#dfe4ea;border-color:#dfe4ea;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.primary:disabled{opacity:.58;transform:none}
.ghost{
  border:1px solid var(--border2);
  background:var(--panel2);
  color:var(--text);
}
.ghost:hover{transform:translateY(-1px);border-color:#485160;background:#171b21}
.danger{border:1px solid rgba(255,92,111,.3);background:rgba(255,92,111,.08);color:#ff9fab}
.danger:hover{border-color:rgba(255,92,111,.52);background:rgba(255,92,111,.13)}

.workspace-main,.dashboard-main,.settings-main,.token-main,.list-main,.paste-main,.manage-main,.docs-main{padding:64px 0 72px}
.workspace-head{align-items:center;margin-bottom:28px}
.workspace-head h1,.dashboard-head h1,.settings-head h1,.paste-header h1,.manage-head h1{
  margin:8px 0 12px;
  font-size:clamp(38px,5vw,64px);
  line-height:.98;
  letter-spacing:-.065em;
}
.workspace-head p,.dashboard-head p,.settings-head p{max-width:720px;color:var(--muted);font-size:14px;line-height:1.75}
.workspace-status{
  min-width:310px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(15,17,21,.88);
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
.workspace-status small{font-size:11px;color:var(--muted)}
.workspace-status a{color:var(--green);font-size:12px}
.signed-dot{background:var(--green);box-shadow:0 0 0 5px rgba(125,245,179,.06)}

.composer{
  overflow:hidden;
  border-color:var(--border2);
  transform:perspective(1200px) rotateX(.15deg);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.composer:hover{transform:none;border-color:#414a58;box-shadow:0 24px 64px rgba(0,0,0,.38)}
.composer-head{
  min-height:48px;
  padding:0 14px;
  background:#111318;
  border-bottom:1px solid var(--border);
}
.window-dots{gap:7px}
.window-dots i{width:8px;height:8px;background:#3c424d}
.window-dots i:first-child{background:#e15c68}
.window-dots i:nth-child(2){background:#e2b35d}
.window-dots i:nth-child(3){background:#58bf85}
.title-field input{font:13px var(--mono);letter-spacing:-.02em;color:var(--text)}
.editor-wrap{height:540px;background:#0b0d10;border-bottom:1px solid var(--border)}
.editor-rail{border-right:1px solid #1d2229;color:#4f5966}
.editor-wrap textarea{padding:22px 22px 46px;color:#eef2f6;font:14px/1.7 var(--mono)}
.editor-wrap textarea::placeholder{color:#4f5966}
.editor-status{background:rgba(11,13,16,.94);border-top:1px solid #1d2229;color:var(--dim)}
.editor-unlimited{color:#6d7784}

.controls-grid{background:rgba(15,17,21,.94)}
.controls-grid label{padding:16px;border-color:var(--border)}
.controls-grid label>span,.auth-form label>span,.manage-form label>span{font-size:11px;color:var(--muted);letter-spacing:.02em}
.controls-grid select,.controls-grid input,.auth-form input,.auth-form select,.manage-form input,.manage-form select,.manage-form textarea,.report-card input,.report-card select,.report-card textarea{
  min-height:46px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#0b0d10;
  box-shadow:inset 0 1px rgba(255,255,255,.02);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.controls-grid select:focus,.controls-grid input:focus,.auth-form input:focus,.auth-form select:focus,.manage-form input:focus,.manage-form select:focus,.manage-form textarea:focus,.report-card input:focus,.report-card select:focus,.report-card textarea:focus{
  border-color:#485160;
  box-shadow:0 0 0 3px rgba(121,167,255,.08);
  background:#0d1014;
}
.submit-row{padding:16px 18px;background:#0f1115}
.privacy-note{font-size:12px;color:var(--dim)}

.result-panel{border-color:rgba(125,245,179,.26);background:rgba(125,245,179,.045);border-radius:11px}
.result-url{color:var(--green)}
.result-actions a,.result-actions button{border-color:var(--border);background:#111318}

.stat-card,.auth-card,.settings-card,.token-create-card,.token-list-card,.docs-card,.report-card,.api-auth-box{
  background:rgba(15,17,21,.9);
  border-color:var(--border);
  border-radius:13px;
}
.stat-card{transition:transform .2s ease,border-color .2s ease}
.stat-card:hover{transform:translateY(-3px);border-color:#3c4450}
.stat-card span,.stat-card small{color:var(--dim)}
.stat-card strong{letter-spacing:-.05em}

.library-card,.paste-list,.code-card{border-radius:14px}
.library-tools{border-color:var(--border)}
.search-box{border-color:var(--border);background:#0b0d10}
.filter-tabs button{border-color:var(--border);background:#111318;color:var(--muted)}
.filter-tabs button:hover,.filter-tabs button.active{color:var(--text);border-color:#414957;background:#171b21}
.paste-tile{border-color:#1d2229;transition:background .18s ease,transform .18s ease}
.paste-tile:hover{background:rgba(255,255,255,.018);transform:translateY(-1px)}
.tile-actions{border-color:#1d2229}
.lang-badge,.visibility-badge,.token-state,.verified-badge{border-color:var(--border2);border-radius:6px}
.token-state.live,.verified-badge{color:var(--green);border-color:rgba(125,245,179,.25)}

.auth-layout{gap:70px}
.auth-copy h1{font-size:clamp(48px,7vw,84px);line-height:.94;letter-spacing:-.075em}
.auth-copy p{line-height:1.8}
.auth-card{box-shadow:var(--shadow)}
.auth-card-head h1,.auth-card-head h2,.settings-card-head h2{letter-spacing:-.045em}
.auth-switch a{color:var(--green)}
.alert.error{border-color:rgba(255,92,111,.28);background:rgba(255,92,111,.07);color:#ff9fab}
.alert.success{border-color:rgba(125,245,179,.24);background:rgba(125,245,179,.055);color:#a5efc6}
.profile-avatar{background:rgba(125,245,179,.08);color:var(--green);border:1px solid rgba(125,245,179,.12)}

.token-secret-card{border-color:rgba(125,245,179,.22)}
.token-secret-row code,.api-code{background:#0b0d10;border-color:var(--border);font-family:var(--mono)}
.token-row{border-color:#1d2229}
.code-toolbar{background:#111318;border-color:var(--border)}
.code-toolbar>span{color:var(--dim)}
.text-button{color:var(--muted)}
.text-button:hover{color:var(--text);background:rgba(255,255,255,.04)}
.code-scroll{background:#0b0d10}
.line-numbers{border-color:#1d2229;color:#4f5966}
.code-pre{font-family:var(--mono)}
.paste-bottom{border-top:1px solid #1d2229}

.qr-backdrop,.ui-confirm-backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.qr-box,.ui-confirm-panel{
  border:1px solid var(--border2);
  border-radius:14px;
  background:#0f1115;
  box-shadow:0 28px 80px rgba(0,0,0,.48);
  animation:panelEnter .22s cubic-bezier(.2,.75,.25,1) both;
}
.ui-toast{border-color:var(--border2);border-radius:11px;background:rgba(15,17,21,.98)}
.footer{border-color:var(--border);color:var(--dim)}

.workspace-head,.dashboard-head,.settings-head,.token-head,.list-head,.paste-header,.manage-head,.composer,.stats-grid,.library-card,.auth-card,.settings-card,.token-create-card,.token-list-card,.docs-card,.code-card{
  animation:enter .5s cubic-bezier(.2,.75,.25,1) both;
}
.composer,.library-card,.code-card{animation-delay:.05s}

@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes panelEnter{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .workspace-head{align-items:flex-start}
  .workspace-status{min-width:0;width:100%}
  .composer{transform:none}
}
@media(max-width:700px){
  .shell{width:min(100% - 26px,1180px)}
  .topbar{min-height:72px}
  .workspace-main,.dashboard-main,.settings-main,.token-main,.list-main,.paste-main,.manage-main,.docs-main{padding-top:46px}
  .workspace-head h1,.dashboard-head h1,.settings-head h1,.paste-header h1,.manage-head h1{font-size:clamp(36px,12vw,58px)}
  .editor-wrap{height:470px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}