/* shared.css — base styles for Vexr app pages */
:root{
  --bg:#0b0b0c;--surface-1:#121214;--surface-2:#17171a;--surface-3:#1d1d20;
  --border:#202024;--border-2:#2a2a2f;--fg:#f5f5f4;--fg-dim:#8a8a8e;--fg-dimmer:#56565a;
  --green:#52d273;--red:#e5544a;--amber:#d4a857;
  --display:'Bricolage Grotesque',serif;--body:'Geist',system-ui,sans-serif;--mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--fg);font-family:var(--body);-webkit-font-smoothing:antialiased;min-height:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;color:inherit;background:none;border:none;outline:none}
::selection{background:#f5f5f4;color:#0b0b0c}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:9px;font-size:13.5px;font-weight:500;transition:all .15s;white-space:nowrap;border:1px solid transparent;cursor:pointer}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{color:var(--fg);border-color:var(--border-2);background:var(--surface-1)}
.btn-ghost:hover:not(:disabled){background:var(--surface-2);border-color:#333}
.btn-primary{color:#0b0b0c;background:#f5f5f4;font-weight:600}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);background:#fff}
.btn-danger{color:var(--red);border-color:rgba(229,84,74,.3);background:rgba(229,84,74,.05)}
.btn-danger:hover:not(:disabled){background:rgba(229,84,74,.12)}
.btn-sm{height:32px;padding:0 12px;font-size:12.5px}
.btn-lg{height:46px;padding:0 22px;font-size:14.5px}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim)}
.field label .req{color:var(--red);margin-left:2px}
.field input,.field textarea,.field select{
  background:var(--surface-1);border:1px solid var(--border-2);border-radius:9px;
  padding:11px 14px;font-size:14px;transition:border-color .15s,background .15s;color:var(--fg)
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#3a3a3f;background:var(--surface-2)}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-dimmer)}
.field textarea{min-height:100px;resize:vertical;line-height:1.5;font-family:var(--mono);font-size:13px}
.field .hint{font-size:12px;color:var(--fg-dimmer);margin-top:2px;font-family:var(--mono);letter-spacing:.04em}
.field .err{font-size:12px;color:var(--red);margin-top:4px}

.card{background:var(--surface-1);border:1px solid var(--border);border-radius:14px;padding:24px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:14px}
.card-head h3{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-0.02em}
.card-head .sub{font-size:12.5px;color:var(--fg-dim);margin-top:2px}

.toast{position:fixed;bottom:24px;right:24px;background:var(--surface-2);border:1px solid var(--border-2);border-radius:10px;padding:14px 18px;font-size:13.5px;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);z-index:1000;animation:slideUp .3s ease;display:none}
.toast.show{display:block}
.toast.success{border-color:rgba(82,210,115,.3)}
.toast.error{border-color:rgba(229,84,74,.4);color:#f0a8a3}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

.spinner{width:14px;height:14px;border:2px solid var(--border-2);border-top-color:var(--fg);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.empty{text-align:center;padding:60px 20px;color:var(--fg-dim);font-size:14px}
.empty .icon{width:48px;height:48px;margin:0 auto 16px;background:var(--surface-2);border-radius:12px;display:grid;place-items:center;color:var(--fg-dimmer)}