/* ===== Midnight OS — Browser ===== */
.br { height: 100%; display: flex; flex-direction: column; background: #090b11; color: #e9edf5; }
.br [hidden] { display: none !important; }

.br-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(255,255,255,0.035); border-bottom: 1px solid rgba(255,255,255,0.06); }
.br-ic, .br-go { appearance: none; flex: none; width: 36px; height: 36px; border: 0; border-radius: 11px; background: transparent; color: #aeb8d0;
  display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.br-ic:hover { background: rgba(255,255,255,0.08); color: #fff; }
.br-ic:active, .br-go:active { transform: scale(.94); }
.br-ic svg, .br-go svg { width: 18px; height: 18px; }
.br-go { background: linear-gradient(180deg, #7d9cff, #5a78e6); color: #0a0d16; }
.br-go:hover { filter: brightness(1.08); }

.br-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 8px 0 14px; border-radius: 19px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); transition: border-color .2s, background .2s; }
.br-field:focus-within { border-color: rgba(140,165,255,0.6); background: rgba(255,255,255,0.09); }
.br-field > svg { width: 16px; height: 16px; flex: none; color: #7c869d; }
.br-field input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #eef1f8; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
.br-field input::placeholder { color: #7c869d; }
.br-clear { appearance: none; border: 0; background: rgba(255,255,255,0.12); color: #cfd6e8; width: 22px; height: 22px; border-radius: 50%; font-size: 14px; line-height: 1; cursor: pointer; flex: none; }

.br-prog { height: 2px; opacity: 0; overflow: hidden; transition: opacity .25s; background: rgba(255,255,255,0.05); }
.br-prog.on { opacity: 1; }
.br-prog i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, #7d9cff, #c58bff); animation: brSlide 1.1s ease-in-out infinite; }
@keyframes brSlide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

.br-view { position: relative; flex: 1; min-height: 0; }
.br-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.br-frame[hidden] { display: none !important; }

.br-start { position: absolute; inset: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 26px 20px;
  background: radial-gradient(560px 340px at 15% -10%, rgba(110,135,255,0.18), transparent 70%),
              radial-gradient(480px 320px at 100% 0%, rgba(168,100,255,0.13), transparent 70%), #090b11; }
.br-sf { width: min(540px, 100%); display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px; border-radius: 26px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); transition: border-color .2s, box-shadow .2s; }
.br-sf:focus-within { border-color: rgba(140,165,255,0.65); box-shadow: 0 10px 34px -10px rgba(110,135,255,.4); }
.br-sf svg { width: 18px; height: 18px; color: #8b95ad; flex: none; }
.br-sf input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #f1f4fa; font: inherit; font-size: 17px; -webkit-appearance: none; appearance: none; }
.br-sf input::placeholder { color: #7c869d; }

.br-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 88px)); gap: 18px 20px; justify-content: center; }
.br-tile { appearance: none; background: transparent; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: #cfd6e8; font: inherit; font-size: 12.5px; }
.br-tile b { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 21px; font-weight: 700; color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .2s cubic-bezier(.16,1,.3,1); }
.br-tile:hover b { transform: translateY(-3px); }
.br-tile:active b { transform: scale(.95); }
.br-tile:focus-visible b { outline: 2px solid rgba(255,255,255,.7); outline-offset: 2px; }
@media (max-width: 420px) { .br-tiles { grid-template-columns: repeat(4, 1fr); gap: 14px 8px; } .br-logo { font-size: 44px; } }

/* ===== tabs ===== */
.br-tabs { display: flex; align-items: flex-end; gap: 6px; padding: 8px 8px 0 10px; background: rgba(0,0,0,0.32); }
.br-tabs-list { position: relative; display: flex; gap: 3px; min-width: 0; flex: 0 1 auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-top: 2px; }
.br-tabs-list::-webkit-scrollbar { display: none; }
.br-tab { position: relative; flex: 1 1 176px; min-width: 88px; max-width: 200px; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px;
  border-radius: 11px 11px 0 0; color: #8e99b4; font-size: 12.5px; cursor: pointer; overflow: hidden; outline: 0; user-select: none; -webkit-user-select: none;
  transition: background .22s, color .22s, box-shadow .22s; animation: tabIn .38s cubic-bezier(.16,1,.3,1); }
.br-tab:hover { background: rgba(255,255,255,0.06); color: #d4dbed; }
.br-tab:focus-visible { box-shadow: inset 0 0 0 2px rgba(142,176,255,.6); }
.br-tab.on { color: #f3f5fc; background: linear-gradient(180deg, rgba(125,156,255,0.22), rgba(255,255,255,0.055)); box-shadow: 0 -6px 22px -8px rgba(125,150,255,.55); }
.br-tab::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 2px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #7d9cff, #c58bff, #7fd9ff);
  background-size: 200% 100%; transform: scaleX(0); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.br-tab.on::before { transform: scaleX(1); animation: tabLine 3s linear infinite; }
.br-tab .ti { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25); }
.br-tab .ti.nw { background: rgba(255,255,255,.1); color: #b7c3ee; font-size: 11px; box-shadow: none; }
.br-tab.load .ti::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent; border-top-color: #9db4ff; animation: spin .7s linear infinite; }
.br-tab .tt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-tab .tx { appearance: none; flex: none; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; opacity: .6; transition: background .15s, opacity .15s, transform .15s; }
.br-tab .tx svg { width: 10px; height: 10px; }
.br-tab:hover .tx, .br-tab.on .tx { opacity: 1; }
.br-tab .tx:hover { background: rgba(255,255,255,0.14); transform: rotate(90deg); }
.br-tab.out { pointer-events: none; animation: tabOut .23s ease forwards; }
@keyframes tabIn { from { opacity: 0; max-width: 0; min-width: 0; padding: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; max-width: 200px; transform: none; } }
@keyframes tabOut { to { opacity: 0; max-width: 0; min-width: 0; flex-basis: 0; padding: 0; transform: scale(.85); } }
@keyframes tabLine { to { background-position: 200% 0; } }

.br-newtab { appearance: none; flex: none; width: 30px; height: 30px; margin-bottom: 3px; border: 0; border-radius: 10px; background: transparent; color: #9fabc8; display: grid; place-items: center; cursor: pointer;
  transition: background .18s, color .18s, transform .3s cubic-bezier(.16,1,.3,1); }
.br-newtab svg { width: 15px; height: 15px; }
.br-newtab:hover { background: rgba(255,255,255,0.09); color: #fff; transform: rotate(90deg); }
.br-newtab:active { transform: rotate(90deg) scale(.88); }
.br-newtab.nope { animation: nope .35s; }
@keyframes nope { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }

/* ===== animated start page ===== */
.br-start::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 40%), rgba(135,155,255,0.16), transparent 70%); }
.br-start.glow::before { opacity: 1; }
.br-start.off { visibility: hidden; opacity: 0; pointer-events: none; }
.br-start.off * { animation-play-state: paused !important; }
.br-start > .br-logo, .br-start > .br-sf, .br-start > .br-tiles { position: relative; z-index: 1; }

.br-orb { position: absolute; border-radius: 50%; pointer-events: none; opacity: .75; }
.br-orb.o1 { width: 300px; height: 300px; left: 4%; top: 2%; background: radial-gradient(closest-side, rgba(110,135,255,.38), transparent); animation: orbA 15s ease-in-out infinite alternate; }
.br-orb.o2 { width: 340px; height: 340px; right: 0; top: 24%; background: radial-gradient(closest-side, rgba(180,100,255,.30), transparent); animation: orbB 18s ease-in-out infinite alternate; }
.br-orb.o3 { width: 320px; height: 320px; left: 34%; bottom: -120px; background: radial-gradient(closest-side, rgba(40,200,190,.22), transparent); animation: orbA 21s ease-in-out infinite alternate-reverse; }
@keyframes orbA { from { transform: translate(0,0) scale(1); } to { transform: translate(70px, 46px) scale(1.25); } }
@keyframes orbB { from { transform: translate(0,0) scale(1.15); } to { transform: translate(-80px, -30px) scale(.9); } }

.br-spk { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #dfe7ff; pointer-events: none; box-shadow: 0 0 8px 1px rgba(160,180,255,.8);
  opacity: 0; animation: spk var(--t) var(--d) ease-in-out infinite; }
@keyframes spk { 0%,100% { opacity: 0; transform: translateY(8px) scale(.5); } 50% { opacity: .9; transform: translateY(-12px) scale(1); } }

.br-logo { font-size: 62px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; text-align: center; perspective: 600px; filter: drop-shadow(0 0 22px rgba(120,140,255,.35)); }
.br-logo .l { display: inline-block; color: transparent; padding: 0 .01em;
  background: linear-gradient(100deg, #7f9bff 0%, #f6f8ff 22%, #c58bff 46%, #7fdcff 72%, #7f9bff 100%); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: transform .3s cubic-bezier(.16,1,.3,1); cursor: default; }
.br-logo .l:hover { transform: translateY(-8px) scale(1.16) rotate(-3deg); }
.br-logo::after { content: ""; display: block; height: 2px; width: 0; margin: 12px auto 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #9db4ff, #c58bff, transparent); }

.br-start.in .br-logo { animation: logoGlow 4.5s ease-in-out infinite alternate; }
.br-start.in .br-logo .l { animation: lIn 1.1s calc(var(--i) * 75ms + .1s) cubic-bezier(.16,1,.3,1) backwards,
  lFlow 7s calc(var(--i) * -.45s) linear infinite, lFloat 3.8s calc(var(--i) * -.33s) ease-in-out infinite; }
.br-start.in .br-logo::after { animation: lineGrow 1.3s 1s cubic-bezier(.16,1,.3,1) forwards; }
.br-start.in .br-sf { animation: rise .8s .4s cubic-bezier(.16,1,.3,1) backwards; }
.br-start.in .br-tile { animation: tileIn .65s calc(.6s + var(--i, 0) * 70ms) cubic-bezier(.16,1,.3,1) backwards; }
.br-tile b { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; }
.br-tile:hover b { transform: translateY(-5px) scale(1.06); box-shadow: 0 16px 28px -8px rgba(125,150,255,.5), inset 0 1px 0 rgba(255,255,255,.2); }

@keyframes lIn { from { opacity: 0; transform: translateY(40px) scale(.55) rotateX(-80deg); filter: blur(14px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes lFlow { to { background-position: 300% 0; } }
@keyframes lFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes logoGlow { from { filter: drop-shadow(0 0 14px rgba(120,140,255,.28)); } to { filter: drop-shadow(0 0 34px rgba(180,120,255,.55)); } }
@keyframes lineGrow { from { width: 0; opacity: 0; } to { width: 62%; opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes tileIn { from { opacity: 0; transform: translateY(20px) scale(.78); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .br-start *, .br-tab, .br-tab::before { animation: none !important; }
  .br-start .br-logo::after { width: 62%; }
}
@media (max-width: 520px) { .br-logo { font-size: 46px; } .br-tab { flex-basis: 130px; min-width: 76px; } }