/* ===== App Núcleo Video ===== */
.view.hidden, .hidden { display: none !important; }
.office-wrap { max-width: 640px; padding: 70px 24px; text-align: center; }
.brand.big { font-size: 24px; margin-bottom: 26px; }
.offices { display: grid; gap: 14px; margin-top: 30px; text-align: left; }
.office { display: flex; gap: 16px; align-items: center; background: var(--blanco); border: 2px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; cursor: pointer; font-size: 16px; text-align: left; transition: border-color .15s, transform .15s; }
.office.on:hover { border-color: var(--rojo); transform: translateY(-2px); }
.office.off { opacity: .45; cursor: default; }
.off-ic { font-size: 30px; }
.office b { display: block; font-size: 17px; }
.office span { color: var(--gris); font-size: 13px; }

#v-app { display: flex; flex-direction: column; min-height: 100vh; }
/* ===== Header de plataforma (mismo aire que la landing) ===== */
.appheader { display: flex; align-items: center; gap: 16px; background: #141210; color: #fff;
  min-height: 60px; padding: 10px 22px; position: sticky; top: 0; z-index: 55; }
.appheader .brand { color: #fff; flex: none; }
.appheader .brand .sub { color: #b9b2ae; }
.appheader-nav { display: flex; gap: 2px; }
.appheader-nav a { color: #cfc8c4; text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 8px 12px; border-radius: 8px; white-space: nowrap; }
.appheader-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.appheader .off-pill { margin: 0 0 0 auto; flex: none; }
.appbody { display: flex; flex: 1; align-items: stretch; }
.sidebar { width: 260px; background: #171412; color: #fff; padding: 26px 18px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 60px; height: calc(100vh - 60px); }
.sidebar nav { display: flex; flex-direction: column; gap: 8px; }
#burger { display: none; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; flex: none; }
.nav-it { display: block; width: 100%; text-align: left; background: none; border: none; color: #cfc8c4; font-size: 15px; font-weight: 500; padding: 12px 14px; border-radius: 10px; cursor: pointer; }
.nav-it:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-it.on { background: var(--rojo); color: #fff; }
.nav-it.out { margin-top: auto; color: #8d857f; }

.main { flex: 1; background: var(--fondo); min-width: 0; }
.off-pill { background: rgba(228,60,47,.16); color: #ffb4ab; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 10px; white-space: nowrap; }
.page { max-width: 880px; padding: 34px 28px 70px; }
.page h2 { margin-bottom: 20px; }

.wizard { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 28px; }
.wsteps { display: flex; gap: 6px; margin-bottom: 28px; }
.ws { flex: 1; text-align: center; font-size: 12px; color: #6b6563; padding-top: 26px; position: relative; }
.ws i { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: #e8e2e0; color: #5f5a58; font-style: normal; font-size: 12px; font-weight: 700; line-height: 22px; }
.ws.on { color: var(--tinta); font-weight: 700; }
.ws.on i { background: var(--rojo); color: #fff; }
.wpage h3 { font-size: 19px; margin-bottom: 6px; }
.hint { color: var(--gris); font-size: 14px; margin-bottom: 14px; }
.row { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
input { width: 100%; padding: 13px 15px; border: 1.5px solid #e5ddd9; border-radius: 12px; font-size: 16px; -webkit-appearance: none; appearance: none; }
input:focus { outline: 2px solid var(--rojo); outline-offset: 2px; border-color: var(--rojo); }
.btn.ghost { color: var(--rojo-d); }
.office, .nav-it, #burger { -webkit-appearance: none; appearance: none; }
.office:focus-visible, .nav-it:focus-visible, #burger:focus-visible, .upload:focus-visible, .phcard-del:focus-visible, .phcard-kinds button:focus-visible, .after-up:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.msg { border-radius: 10px; padding: 12px 16px; margin-top: 14px; font-size: 14px; display: none; }
.msg.show { display: block; background: #fef6f4; border: 1px solid #f3d9d4; color: #8c3a30; }
.msg.ok { background: #f2f9f1; border-color: #cfe6cd; color: #2f6b2d; }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.thumbs img { width: 100%; height: 90px; object-fit: cover; border-radius: 10px; }
.upload { display: inline-block; border: 2px dashed #d8cfca; border-radius: 12px; padding: 14px 22px; color: var(--gris); cursor: pointer; font-weight: 600; }
.upload:hover { border-color: var(--rojo); color: var(--rojo); }

.preview { background: #111; border-radius: 12px; min-height: 300px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; overflow: hidden; }
.preview.filled { display: block; padding: 16px; }
.preview .ph { color: #9a9a9a; }
.preview img, .preview video { width: 100%; display: block; }
.preview.filled video { border-radius: 8px; }
.formats { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 6px; font-size: 14px; }
.formats label { display: flex; gap: 8px; align-items: center; cursor: pointer; }

.bar { height: 12px; background: #f3ecea; border-radius: 6px; overflow: hidden; margin: 14px 0; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--rojo), #f06655); border-radius: 6px; transition: width .5s; }
.log { background: #1d1d1f; color: #b9e6b7; font-family: ui-monospace, monospace; font-size: 12px; padding: 14px 16px; border-radius: 10px; height: 190px; overflow-y: auto; white-space: pre-wrap; }

.card { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 26px; margin-bottom: 18px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--gris); font-size: 14.5px; }
.card label { display: block; font-size: 14px; font-weight: 600; margin: 12px 0 4px; }
.card input { margin-bottom: 6px; }
.tag { background: #fef0ec; color: var(--rojo-d); font-size: 11px; padding: 3px 10px; border-radius: 12px; vertical-align: middle; }
.vlist { display: grid; gap: 14px; }
.vitem { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 16px 18px; display: flex; gap: 14px; align-items: center; }
.vitem video { width: 160px; border-radius: 8px; background: #000; }
.vitem b { display: block; }
.vitem span { color: var(--gris); font-size: 13px; }
.vitem a { margin-left: auto; }

@media (max-width: 860px) {
  .sidebar { position: fixed; left: -280px; top: 0; z-index: 60; height: 100vh; transition: left .25s; }
  body.menu-open .sidebar { left: 0; }
  #burger { display: block; }
  .appheader { gap: 12px; padding: 10px 16px; }
  .appheader-nav { display: none; }
  .wsteps { overflow-x: auto; }
  .ws { font-size: 10px; min-width: 70px; }
  .vitem { flex-wrap: wrap; }
  .vitem video { width: 100%; max-width: 220px; }
}

/* ============================================================
   Flujo por foto — tarjetas, tipos y plan (pasos 2-3 del wizard)
   Contrato: .phcard (+ .ph-kind + .ph-del), .ph-after,
   .pair, #planBox, #wMsg2.msg
   ============================================================ */

/* --- Grid de tarjetas de foto del paso 2 --- */
#thumbs { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.phcard { position: relative; background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.phcard > img, .phcard .ph-img { width: 100%; height: 150px; object-fit: cover; display: block; background: #efe9e6; }
.phcard-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.phcard-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.phcard-top b, .ph-name { font-size: 15px; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- ✕ eliminar: visible y con contraste AA (blanco sobre #c93326 ≈ 5.3:1) --- */
.phcard-del, .ph-del { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--rojo-d); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; -webkit-appearance: none; appearance: none; }
.phcard-del:hover, .ph-del:hover { background: #a82a20; }

/* --- Tipos de vídeo por foto: botones táctiles --- */
.phcard-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.phcard-kinds button { font-size: 13px; font-weight: 600; padding: 8px 10px; min-height: 40px; border: 1.5px solid var(--linea); background: #faf8f7; color: var(--tinta); border-radius: 10px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.phcard-kinds button.sel { border-color: var(--rojo); background: #fef0ec; color: var(--rojo-d); font-weight: 700; }

/* --- Variante con <select> del tipo (contrato): usable en móvil --- */
.ph-kind { width: 100%; font-size: 16px; min-height: 44px; padding: 10px 34px 10px 12px; border: 1.5px solid #e5ddd9; border-radius: 10px; background-color: var(--blanco); color: var(--tinta); cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6563' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.ph-kind:focus { outline: 2px solid var(--rojo); outline-offset: 2px; border-color: var(--rojo); }

/* --- Slot "📷 Foto final" / subir el "después" --- */
.after-up, .ph-after { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border: 2px dashed #d8cfca; border-radius: 12px; background: #fdfbfa; color: var(--gris); font-weight: 600; font-size: 14px; text-align: center; padding: 10px 14px; cursor: pointer; }
.after-up:hover, .ph-after:hover { border-color: var(--rojo-d); color: var(--rojo-d); }
.ph-after { flex-direction: column; min-height: 190px; font-size: 15px; }

/* --- #planBox: resumen agrupado por tipo, con conteo --- */
#planBox { display: grid; gap: 12px; margin-bottom: 16px; }
.plancard { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px; min-width: 0; }
.plan-head { display: flex; align-items: center; gap: 10px; }
.plan-head .ic { font-size: 22px; }
.plan-head b { font-size: 16px; color: var(--tinta); }
.plan-head .tag { margin-left: auto; }
.plan-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }

/* --- Par antes/después: miniaturas lado a lado con flecha --- */
.pair { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.pair img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: block; background: #efe9e6; }
.pair i { font-style: normal; color: var(--gris); font-weight: 700; }
@media (max-width: 480px) {
  .pair img { width: 64px; height: 64px; }
}

/* --- #wMsg2: mensaje del paso 2 (usa la base .msg; .show controla el display) --- */
#wMsg2.msg { margin-top: 14px; }

/* ============================================================
   Accesibilidad de formularios (anti-zoom iOS + contraste AA)
   ============================================================ */

/* Ningún campo de texto baja de 16px: evita el zoom automático en iOS */
select, textarea { font-size: 16px; }
textarea { width: 100%; padding: 13px 15px; border: 1.5px solid #e5ddd9; border-radius: 12px; font-family: inherit; color: var(--tinta); background: var(--blanco); }
textarea:focus { outline: 2px solid var(--rojo); outline-offset: 2px; border-color: var(--rojo); }
select:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

/* Checkbox/radio nativos: la regla `input` global (appearance:none) los volvía invisibles */
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; margin: 0; border: 0; border-radius: 0; -webkit-appearance: auto; appearance: auto; accent-color: var(--rojo); }

/* hooks generados por JS (estilos base; el inline de app.js los complementa) */
.done-card{margin-top:12px}
.done-card video{width:100%;max-width:100%;display:block;border-radius:12px;background:#000}
.prevcard{margin-bottom:14px}
.msg.save{display:none}
.msg.save.show{display:block}

/* Opciones de generación (paso 4): duración, formatos, coste */
.genopts { margin: 18px 0; padding: 16px; background: rgba(255,255,255,.04); border-radius: 12px; }
.opt-row { margin-bottom: 16px; }
.opt-row:last-child { margin-bottom: 0; }
.opt-row > label, .opt-row > b { display: block; margin-bottom: 8px; font-size: 15px; }
#durRange { width: 100%; accent-color: #e43c2f; }
.dur-scale { display: flex; justify-content: space-between; font-size: 12px; opacity: .6; margin-top: 2px; }
#durVal { color: #e43c2f; font-weight: 700; }
.est-card { margin-top: 12px; padding: 12px 14px; background: rgba(228,60,47,.08); border: 1px solid rgba(228,60,47,.25); border-radius: 10px; }
.est-card p { margin: 4px 0; }

/* ============================================================
   Proceso en negro (estilo /versiones/) — pedido de Rodri 13-oct
   ============================================================ */
#p-nuevo .wizard { background: #141210; border-color: #2b2522; color: #f2edea; }
#p-nuevo .wpage h3 { color: #fff; }
#p-nuevo .hint { color: #b9b2ae; }
#p-nuevo .ws { color: #8d857f; }
#p-nuevo .ws.on { color: #fff; }
#p-nuevo .ws i { background: #2b2522; color: #b9b2ae; }
#p-nuevo label { color: #e8e2e0; }
#p-nuevo input[type="url"], #p-nuevo input[type="text"], #p-nuevo textarea {
  background: #1e1a18; border-color: #3a3330; color: #fff; }
#p-nuevo input::placeholder { color: #6e6863; }
#p-nuevo .phcard { background: #1e1a18; border-color: #3a3330; }
#p-nuevo .phcard-top b { color: #fff; }
#p-nuevo .phcard-kinds button { background: #2b2522; border-color: #3a3330; color: #e8e2e0; }
#p-nuevo .phcard-kinds button.sel { background: rgba(228,60,47,.16); border-color: var(--rojo); color: #ffb4ab; }
#p-nuevo .after-up { background: transparent; border-color: #3a3330; color: #b9b2ae; }
#p-nuevo .after-up:hover { border-color: var(--rojo); color: #ff8d80; }
#p-nuevo .plancard { background: #1e1a18; border-color: #3a3330; }
#p-nuevo .plan-head b { color: #fff; }
#p-nuevo .plan-head .tag { background: rgba(228,60,47,.16); color: #ffb4ab; }
#p-nuevo .upload { border-color: #3a3330; color: #b9b2ae; }
#p-nuevo .upload:hover { border-color: var(--rojo); color: #ff8d80; }
#p-nuevo .genopts { background: rgba(255,255,255,.04); }
#p-nuevo .opt-row > label, #p-nuevo .opt-row > b { color: #fff; }
#p-nuevo .formats label { color: #e8e2e0; }
#p-nuevo .dur-scale { color: #b9b2ae; }
#p-nuevo .msg.show { background: #2b211e; border-color: #5a3a34; color: #f0b9b0; }
#p-nuevo .msg.ok { background: #1e2b1e; border-color: #3a5a3a; color: #b7e0b5; }
#p-nuevo .btn.ghost { color: #ff8d80; border-color: #5a3a34; }
#p-nuevo .bar { background: #2b2522; }
#p-nuevo .est-card { background: rgba(228,60,47,.1); border-color: rgba(228,60,47,.3); }
#p-nuevo .est-card p, #p-nuevo .est-card b { color: #f2edea; }
#p-nuevo .done-card p, #p-nuevo .done-card b { color: #f2edea; }
#p-nuevo .done-card .hint { color: #b9b2ae; }
/* CTA de resultados: enlace a la página de versiones */
.results-card { margin-top: 16px; padding: 20px; background: #1e1a18; border: 1px solid #3a3330;
  border-radius: 14px; text-align: center; }
.results-card p { color: #f2edea; margin-bottom: 6px; }
.results-card .hint { color: #b9b2ae; margin-bottom: 14px; }
.btn.results-cta { display: inline-block; font-size: 17px; padding: 14px 30px; }

/* ============================================================
   Proceso a PANTALLA COMPLETA en negro — pedido de Rodri 13-oct
   Sin huecos claros: negro de borde a borde, pasos grandes.
   ============================================================ */
.main:has(#p-nuevo:not(.hidden)) { background: #141210; }
#p-nuevo {
  max-width: none;
  padding: 0 0 90px;
  margin: 0;
  background: #141210;
  min-height: calc(100vh - 60px);
  color: #f2edea;
}
#p-nuevo > h2 {
  max-width: 920px; margin: 0 auto; padding: 38px 24px 6px;
  color: #fff; font-size: 30px; letter-spacing: 3px; font-weight: 900;
}
#p-nuevo > h2::after {
  content: ''; display: block; width: 64px; height: 4px; border-radius: 2px;
  background: #e43c2f; margin-top: 12px;
}
#p-nuevo .wizard {
  background: transparent; border: none; border-radius: 0;
  max-width: 920px; margin: 0 auto; padding: 10px 24px 0;
}
/* --- Stepper grande con línea de progreso --- */
#p-nuevo .wsteps {
  position: relative; gap: 4px; margin: 26px 0 34px; padding: 0 8px;
}
#p-nuevo .wsteps::before {
  content: ''; position: absolute; top: 19px; left: 56px; right: 56px;
  height: 2px; background: #2b2522; border-radius: 1px;
}
#p-nuevo .ws {
  font-size: 14px; font-weight: 600; color: #8d857f;
  padding-top: 52px; min-width: 0;
}
#p-nuevo .ws i {
  width: 40px; height: 40px; line-height: 40px; font-size: 17px;
  background: #2b2522; color: #b9b2ae;
  border: 2px solid #3a3330;
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 1; font-style: normal; border-radius: 50%; font-weight: 800;
}
#p-nuevo .ws.on { color: #fff; font-size: 15px; }
#p-nuevo .ws.on i {
  background: #e43c2f; border-color: #e43c2f; color: #fff;
  box-shadow: 0 0 0 8px rgba(228,60,47,.16), 0 6px 18px rgba(228,60,47,.35);
}
#p-nuevo .ws.done { color: #b9b2ae; }
#p-nuevo .ws.done i { background: #1e2b1e; border-color: #3a5a3a; color: #7fd67f; }
/* --- Contenido del paso: aire y jerarquía --- */
#p-nuevo .wpage h3 { font-size: 24px; margin-bottom: 8px; letter-spacing: .5px; }
#p-nuevo .wpage .hint { font-size: 15px; margin-bottom: 20px; }
#p-nuevo .wpage label { font-size: 15px; }
#p-nuevo .row { margin-top: 26px; }
#p-nuevo .btn { font-size: 16px; padding: 14px 26px; }
#p-nuevo .preview { margin: 6px 0 20px; }
#p-nuevo .genopts { padding: 22px; }
#p-nuevo .log { height: 220px; }
@media (max-width: 860px) {
  #p-nuevo > h2 { font-size: 24px; padding: 28px 20px 4px; }
  #p-nuevo .wizard { padding: 6px 20px 0; }
  /* Pasos sin scroller anidado: encogen en vez de capturar el gesto vertical en iOS */
  #p-nuevo .wsteps { overflow: visible; padding-bottom: 4px; }
  #p-nuevo .ws { min-width: 0; flex: 1 1 0; font-size: 11px; }
  #p-nuevo .wsteps::before { left: 40px; right: 40px; }
  #p-nuevo .ws { font-size: 12px; min-width: 86px; }
  #p-nuevo .ws.on { font-size: 13px; }
}

/* ============================================================
   Toda la app en negro — pedido de Rodri 13-oct
   (oficinas + resto de páginas: vídeos, oficina, ayuda)
   ============================================================ */
#v-office { background: #141210; min-height: 100vh; color: #f2edea; }
#v-office .office-wrap h2 { color: #fff; font-size: 30px; letter-spacing: 3px; font-weight: 900; }
#v-office .office-wrap h2::after {
  content: ''; display: block; width: 64px; height: 4px; border-radius: 2px;
  background: #e43c2f; margin: 12px auto 0;
}
#v-office .lead { color: #b9b2ae; }
#v-office .office { background: #1e1a18; border-color: #3a3330; color: #f2edea; }
#v-office .office b { color: #fff; }
#v-office .office span { color: #b9b2ae; }
#v-office .office.off { opacity: .38; }
#v-office .office.on:hover { border-color: #e43c2f; }

.main { background: #141210; }
.page h2 { color: #fff; }
.card, .vitem { background: #1e1a18; border-color: #3a3330; color: #f2edea; }
.card h3 { color: #fff; }
.card p { color: #b9b2ae; }
.card label { color: #e8e2e0; }
.card input[type="text"] { background: #141210; border-color: #3a3330; color: #fff; }
.card input::placeholder { color: #6e6863; }
.card .tag { background: rgba(228,60,47,.16); color: #ffb4ab; }
.vitem b { color: #fff; }
.vitem span { color: #b9b2ae; }
.vitem .btn.ghost { color: #ff8d80; border-color: #5a3a34; }
#p-videos .hint, #p-oficina .hint, #p-ayuda .hint { color: #b9b2ae; }

/* Filas de coste: etiqueta a la izquierda, precio a la derecha sin cortes */
.cost-row { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin: 6px 0; font-size: 14px; color: #b9b2ae; }
.cost-row b { white-space: nowrap; color: #f2edea; }

/* --- Chips de duración (sustituyen al slider) --- */
.dur-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dur-chips button {
  -webkit-appearance: none; appearance: none;
  background: #141210; border: 1px solid #3a3330; color: #b9b2ae;
  border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.dur-chips button.sel { background: #e43c2f; border-color: #e43c2f; color: #fff; }

/* --- Sin franja blanca: body negro en la vista de oficinas + footer de la app en negro --- */
body:has(#v-office:not(.hidden)) { background: #141210; }
.appfooter { background: #141210; border-top-color: #2b2522; color: #8d857f; }

/* --- Fotos con hueco reservado: sin saltos de layout al hacer scroll --- */
.phcard img { aspect-ratio: 16/9; width: 100%; object-fit: cover; display: block; background: #000; }

/* --- #v-app: fondo negro propio + layout que estira (sin franja blanca abajo) --- */
#v-app { background: #141210; }
#v-app .layout { flex: 1; display: flex; align-items: stretch; }

/* --- Blanco imposible: html y body siempre en negro en la app (cubre overscroll de iOS) --- */
html, body { background: #141210; }

/* --- Sin scroll suave en la app: el smooth de main.css luchaba con el dedo en iOS (autoscroll) --- */
html { scroll-behavior: auto; }

/* --- Auth: chip de usuario y login --- */
#userChip, #userChipApp { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
#userChip.hidden, #userChipApp.hidden { display: none; }
.uchip { background: rgba(255,255,255,.08); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 10px; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff; }