/* NEXUS PRO 10.0 - BLACK & BRONZE LUXURY */

:root {
 --bg:#0C0D10;
 --surface:#191B20;
 --surface2:#22242B;
 --bronze:#D1A56B;
 --bronze-light:#F0D0A0;
 --bronze-dark:#876440;
 --text:#F5F1EA;
 --muted:#9D9DA5;
 --border:rgba(209,165,107,.17);
 --shadow:0 14px 36px rgba(0,0,0,.25);
}

* {
 box-sizing:border-box;
}

html {
 background:var(--bg);
 color-scheme:dark;
}

body {
 margin:0;
 background:
  radial-gradient(
   ellipse at 85% 0%,
   rgba(209,165,107,.075),
   transparent 38%
  ),
  var(--bg);
 color:var(--text);
 font-family:-apple-system,BlinkMacSystemFont,
 "Segoe UI",sans-serif;
 -webkit-font-smoothing:antialiased;
}

header {
 background:rgba(12,13,16,.94);
 border-bottom:1px solid var(--border);
 backdrop-filter:blur(20px);
 -webkit-backdrop-filter:blur(20px);
 box-shadow:0 4px 25px rgba(0,0,0,.15);
}

main {
 max-width:760px;
 margin:auto;
 padding:24px 16px calc(120px + env(safe-area-inset-bottom));
 animation:nexusAppear .25s ease-out;
}

h1,h2,h3 {
 letter-spacing:-.4px;
}

h1 {
 color:var(--bronze-light);
}

h2 {
 font-size:24px;
 font-weight:750;
 color:var(--bronze-light);
 margin-bottom:18px;
}

h3 {
 color:var(--text);
 font-weight:650;
}

p {
 line-height:1.55;
}

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

.card {
 position:relative;
 background:linear-gradient(
  145deg,
  rgba(36,38,45,.98),
  rgba(22,23,28,.98)
 );
 border:1px solid var(--border);
 border-radius:22px;
 padding:20px;
 margin-bottom:15px;
 box-shadow:var(--shadow);
 overflow:hidden;
}

.card h3 {
 margin-top:0;
}

.card p:last-child {
 margin-bottom:0;
}

.nexus-dashboard-grid {
 gap:12px;
}

.nexus-dashboard-grid .card {
 background:linear-gradient(
  150deg,
  #292620,
  #1A1B20 70%
 );
 border-color:rgba(209,165,107,.26);
}

button {
 font-family:inherit;
 font-weight:650;
 letter-spacing:.1px;
 border-radius:13px;
 min-height:45px;
 cursor:pointer;
 transition:
  transform .15s ease,
  background .15s ease,
  border-color .15s ease;
}

button:active {
 transform:scale(.97);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
 outline:2px solid var(--bronze);
 outline-offset:2px;
}

main button:not(.danger) {
 border:1px solid rgba(209,165,107,.32);
 background:linear-gradient(
  135deg,
  #D8AE76,
  #A77B4B
 );
 color:#14100D;
 padding:11px 16px;
}

main button.danger {
 background:#392025;
 color:#FFB7BC;
 border:1px solid #75414A;
}

input,
select,
textarea {
 background:#111217;
 color:var(--text);
 border:1px solid #3A3735;
 border-radius:13px;
 padding:12px 13px;
 font-size:16px!important;
 max-width:100%;
 accent-color:var(--bronze);
}

input::placeholder,
textarea::placeholder {
 color:#85858C;
}

input:focus,
select:focus,
textarea:focus {
 border-color:var(--bronze);
 background:#17181E;
}

label {
 color:#D7D0C7;
 font-weight:550;
}

.grid {
 gap:12px;
}

.grid button {
 background:linear-gradient(
  145deg,
  #292A30,
  #1B1C22
 )!important;
 color:var(--bronze-light)!important;
 border:1px solid var(--border)!important;
 padding:17px 12px;
 border-radius:18px;
 box-shadow:0 6px 18px rgba(0,0,0,.16);
}

nav {
 background:rgba(19,20,25,.97);
 border-top:1px solid rgba(209,165,107,.28);
 box-shadow:0 -10px 32px rgba(0,0,0,.35);
 backdrop-filter:blur(24px);
 -webkit-backdrop-filter:blur(24px);
}

nav button {
 background:transparent!important;
 border:0!important;
 color:#9B9AA0;
 border-radius:14px;
 box-shadow:none!important;
}

nav button.active {
 color:var(--bronze-light);
 background:rgba(209,165,107,.09)!important;
}

nav button .nav-icon {
 font-size:23px;
}

nav button.nav-add .nav-icon {
 background:linear-gradient(
  135deg,
  #E6BD83,
  #A77A47
 );
 color:#17120D;
 box-shadow:0 4px 16px rgba(209,165,107,.3);
}

.n6-track {
 background:#37302A;
 border-radius:100px;
 overflow:hidden;
}

.n6-fill {
 background:linear-gradient(
  90deg,
  #956C40,
  #E4B77D
 );
 border-radius:100px;
}

a {
 color:var(--bronze-light);
}

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

@keyframes nexusAppear {
 from {
  opacity:0;
  transform:translateY(5px);
 }
 to {
  opacity:1;
  transform:translateY(0);
 }
}

@media(max-width:390px) {
 main {
  padding-left:12px;
  padding-right:12px;
 }
 .card {
  padding:16px;
  border-radius:18px;
 }
 h2 {
  font-size:22px;
 }
}

@media(prefers-reduced-motion:reduce) {
 *,
 *::before,
 *::after {
  animation:none!important;
  transition:none!important;
 }
}

@media print {
 html,body,main {
  background:white!important;
  color:black!important;
 }
 .card {
  background:white!important;
  color:black!important;
  border:1px solid #aaa;
  box-shadow:none;
 }
 nav,header {
  display:none!important;
 }
}