/* base.css — extraído de index.html (líneas 41-89). Orden preservado: NO reordenar los <link>. */
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:'DM Sans',sans-serif;
    background:#e9e9e3;
    color:var(--cream);
    display:flex;align-items:center;justify-content:center;
    min-height:100dvh;padding:0;overflow:hidden;
  }
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.02;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .device{
    position:relative;width:100%;max-width:412px;height:100dvh;max-height:880px;
    background:var(--bg);border-radius:46px;overflow:hidden;
    box-shadow:0 50px 90px -30px rgba(0,0,0,.9), inset 0 0 0 1.5px #21251f;
    display:flex;flex-direction:column;
  }
  @media (max-width:440px){ .device{max-height:none;border-radius:0;box-shadow:none} }

  .statusbar{height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
    padding:8px 26px 0;font-size:13px;font-weight:700;color:var(--cream);letter-spacing:.3px}
  .statusbar .icons{display:flex;gap:6px;align-items:center}
  .statusbar svg{display:block}

  .topbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:6px 20px 12px}
  .brand{display:flex;align-items:center;gap:10px}
  .brand .mark{
    width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
    background:#1b1f17;border:1px solid #323c25;box-shadow:0 6px 18px -8px var(--accent);
  }
  .brand .mark svg{width:20px;height:20px;fill:var(--accent)}
  .brand b{font-family:'DM Sans';font-weight:700;font-size:18px;letter-spacing:.4px}
  .brand small{display:block;font-size:9.5px;letter-spacing:3px;color:var(--muted-2);text-transform:uppercase;margin-top:-2px}
  .avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
    background:var(--card-2);border:1px solid var(--line);font-weight:800;font-size:15px;color:var(--cream)}

  .demobar{position:absolute;bottom:96px;left:50%;transform:translateX(-50%);z-index:60;
    display:flex;align-items:center;gap:8px;background:rgba(16,18,17,.82);
    backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;
    padding:5px 6px 5px 13px;box-shadow:var(--shadow)}
  .demobar span{font-size:10.5px;color:var(--muted-2);letter-spacing:.6px;text-transform:uppercase;font-weight:700}
  .demobar .seg{display:flex;background:var(--bg);border-radius:999px;padding:3px}
  .demobar button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:700;
    padding:6px 14px;border-radius:999px;cursor:pointer;transition:.25s}
  .demobar button.on{background:var(--accent);color:#14180c}