*{-webkit-tap-highlight-color:transparent}
: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{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}
a.brand{color:inherit;text-decoration:none}
.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);padding:8px 18px;border:1px solid var(--line,#26262b);border-radius:999px;
  background:transparent;display:inline-flex;align-items:center;gap:6px;line-height:1;
  transition:color .18s,border-color .18s,background .18s,box-shadow .18s;text-decoration:none}
.navlink:hover{color:var(--accent,#ff6a00);border-color:var(--accent,#ff6a00);
  background:rgba(255,106,0,.06);box-shadow:0 0 0 3px rgba(255,106,0,.07)}
.navlink:active{transform:translateY(1px)}
.navlink:focus-visible{outline:2px solid var(--accent,#ff6a00);outline-offset:2px}

.seg{display:inline-flex;gap:2px;padding:3px;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.035)}
.seg button{font-family:var(--disp);font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;
  padding:7px 15px;color:var(--dim);cursor:pointer;border:0;border-radius:999px;background:none;
  white-space:nowrap;flex-shrink:0;
  transition:color .18s,background-color .18s,box-shadow .18s}
.seg button:hover{color:var(--text)}
.seg button.on{color:var(--accent);font-weight:600;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent)}

.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.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)}

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)}

input[type=checkbox],input[type=radio]{width:auto}
.rowf{display:flex;gap:8px}
.rowf>div{flex:1}

.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}

html:not(.settings-ready) [data-setting-show]{visibility:hidden}

[data-nav]{display:none}

html:not(.settings-ready) [data-setting],
html:not(.settings-ready) [data-setting-html]{visibility:hidden}

input[type=number]{-moz-appearance:textfield;appearance:textfield}
@supports selector(::-webkit-inner-spin-button){
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
}

.logo-img{height:var(--logo-h,40px);max-height:var(--logo-h,40px);width:auto;
  max-width:220px;object-fit:contain;
  margin-right:4px;flex-shrink:0;display:block}

html.has-logo .site-top .logo .m,
html.has-logo .top .brand .m,
html.has-logo .auth-brand .m,

html.has-logo .site-foot .logo .m,
html.has-logo .login-card .logo .m{display:none}

@media (max-width:700px){
  .logo-img{height:min(calc(var(--logo-h,40px) * .81), 46px);
            max-height:min(calc(var(--logo-h,40px) * .81), 46px);max-width:170px}
  .site-foot .logo-img{height:calc(var(--logo-h,40px) * .81);
            max-height:calc(var(--logo-h,40px) * .81);max-width:210px}
}
@media (max-width:400px){
  .logo-img{height:min(calc(var(--logo-h,40px) * .72), 42px);
            max-height:min(calc(var(--logo-h,40px) * .72), 42px);max-width:150px}
  .site-foot .logo-img{height:calc(var(--logo-h,40px) * .72);
            max-height:calc(var(--logo-h,40px) * .72);max-width:190px}
}

.brand{font-size:13px;letter-spacing:2.5px;gap:8px;white-space:nowrap}
.brand .m{width:7px;height:15px}
.brand span{letter-spacing:2px}
@media (max-width:700px){
  .brand{font-size:11.5px;letter-spacing:1.5px;gap:6px}
  .brand .m{width:6px;height:13px}
}