:root{
  --bg:#0d0d0e; --bg-2:#121213; --panel:#161617; --panel-2:#1d1d1e;
  --line:#262627; --line-soft:#1d1d1e;
  --text:#d6d6d2; --dim:#8a8a82; --faint:#54544f;
  --accent:#fe7200; --accent-dim:#7a3a10; --ok:#84935f; --err:#c2553f;
  --disp:'Archivo',sans-serif; --body:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--body);letter-spacing:.3px;
  overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
.disp{font-family:var(--disp)}

/* top bar */
.top{display:flex;align-items:center;gap:20px;padding:0 22px;height:54px;
  background:var(--bg-2);border-bottom:1px solid var(--line);flex-shrink:0}
.brand{font-family:var(--disp);font-weight:600;letter-spacing:4px;font-size:14px;
  text-transform:uppercase;display:flex;align-items:center;gap:10px}
.brand .m{width:9px;height:18px;background:var(--accent);transform:skewX(-12deg)}
.brand span{color:var(--faint);font-weight:300;letter-spacing:3px}
.grow{flex:1}
.navlink{font-family:var(--disp);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.navlink:hover{color:var(--text)}

.seg{display:flex;border:1px solid var(--line)}
.seg button{font-family:var(--disp);font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;
  padding:7px 16px;color:var(--dim);cursor:pointer;border:0;border-right:1px solid var(--line);background:none;transition:.12s}
.seg button:last-child{border-right:0}
.seg button.on{color:var(--accent);background:none;box-shadow:inset 0 -2px 0 var(--accent);font-weight:600}

/* buttons */
.btn{font-family:var(--disp);font-weight:500;letter-spacing:2px;text-transform:uppercase;font-size:12px;
  padding:11px 20px;border:0;cursor:pointer;background:var(--accent);color:var(--bg)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--dim)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn.sm{padding:7px 13px;font-size:11px}
.btn.danger{background:transparent;border:1px solid var(--err);color:var(--err)}

/* form fields */
label.f{display:block;font-family:var(--disp);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--faint);margin:10px 0 4px}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);
  font-family:var(--body);font-size:14px;padding:8px 10px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
.rowf{display:flex;gap:8px}
.rowf>div{flex:1}

/* generic */
.muted{color:var(--dim)}
.tag{font-family:var(--disp);font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-dim);padding:2px 7px}
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:var(--line)}
::-webkit-scrollbar-track{background:transparent}