:root {
  --cream: #f7f0e9;
  --cream-2: #efe3d8;
  --ivory: #fffaf4;
  --choco: #704134;
  --choco-2: #5a3022;
  --brown: #8b5a45;
  --muted: #856f64;
  --line: rgba(112, 65, 52, .16);
  --glass: rgba(255, 250, 244, .58);
  --glass-2: rgba(255, 252, 248, .74);
  --white-line: rgba(255,255,255,.72);
  --green: #3e9b63;
  --gold: #dfb47e;
  --shadow: 0 26px 80px rgba(70, 36, 24, .12);
  --soft-shadow: 0 16px 45px rgba(70, 36, 24, .08);
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--choco-2);
  background:
    radial-gradient(circle at 10% 16%, rgba(255,255,255,.95), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.75), transparent 25%),
    radial-gradient(circle at 52% 112%, rgba(216, 169, 122, .28), transparent 36%),
    linear-gradient(135deg, #fbf7f2 0%, var(--cream) 40%, var(--cream-2) 100%);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.boot-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.92), rgba(246,238,230,.94) 38%, rgba(231,216,204,.98) 100%);
  transition: opacity .75s ease, visibility .75s ease;
}
.boot-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-core {
  position: absolute; width: 240px; height: 240px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle, rgba(255,255,255,.86), rgba(255,249,242,.24));
  border: 1px solid rgba(112,65,52,.12);
  box-shadow: 0 0 80px rgba(211,166,120,.28), inset 0 0 60px rgba(255,255,255,.8);
  animation: bootPulse 2.8s ease-in-out infinite;
}
.boot-core img { width: 178px; max-width: 75%; object-fit: contain; }
.boot-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(112,65,52,.14); }
.orbit-a { width: 360px; height: 360px; animation: spin 14s linear infinite; }
.orbit-b { width: 500px; height: 500px; border-style: dashed; animation: spinReverse 22s linear infinite; }
.orbit-c { width: 660px; height: 260px; transform: rotate(-12deg); animation: breathe 3.6s ease-in-out infinite; }
.boot-copy { position: relative; z-index: 2; margin-top: 470px; text-align: center; }
.boot-kicker { color: var(--choco); font-weight: 800; letter-spacing: 7px; font-size: 13px; }
.boot-title { margin-top: 10px; font-family: "Cormorant Garamond", serif; font-size: 34px; color: var(--choco-2); }
.boot-meta { margin-top: 8px; color: var(--muted); font-size: 14px; }
.boot-progress { width: 320px; height: 9px; margin: 18px auto 0; border-radius: 999px; background: rgba(112,65,52,.09); overflow: hidden; border: 1px solid rgba(112,65,52,.11); }
.boot-progress span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ead0ab, var(--choco)); box-shadow: 0 0 24px rgba(191,139,91,.45); transition: width .18s linear; }

.route-loader {
  position: fixed; inset: 0; z-index: 900; display: grid; place-items: center;
  background: rgba(247,240,233,.64); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease;
}
.route-loader.is-visible { opacity: 1; visibility: visible; }
.route-loader-card {
  width: min(520px, calc(100vw - 40px)); min-height: 310px; border-radius: 36px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 38px;
  background: rgba(255,252,248,.78); border: 1px solid rgba(255,255,255,.75); box-shadow: var(--shadow);
}
.route-loader-card:before { content:""; position:absolute; inset:-40%; background: conic-gradient(from 90deg, transparent, rgba(223,180,126,.48), transparent, rgba(112,65,52,.13), transparent); animation: spin 3s linear infinite; opacity: .65; }
.route-loader-card:after { content:""; position:absolute; inset:1px; border-radius: 35px; background: rgba(255,252,248,.82); }
.route-logo, .route-ring, .route-text, .route-progress { position: relative; z-index: 2; }
.route-logo { width: 176px; margin-bottom: 28px; }
.route-ring { width: 86px; height: 86px; border-radius: 50%; border: 2px solid rgba(112,65,52,.1); border-top-color: var(--choco); animation: spin .9s linear infinite; margin-bottom: 20px; }
.route-text strong { display:block; font-family:"Cormorant Garamond", serif; font-size: 31px; color: var(--choco-2); }
.route-text span { display:block; margin-top: 8px; color: var(--muted); }
.route-progress { width: 260px; height: 7px; border-radius: 999px; background: rgba(112,65,52,.1); margin-top: 24px; overflow:hidden; }
.route-progress span { display:block; width: 45%; height:100%; border-radius: inherit; background: linear-gradient(90deg, #eac99e, var(--choco)); animation: loadLine 1.2s ease-in-out infinite; }

.cursor-glow { position: fixed; left: 50%; top: 50%; width: 420px; height: 420px; transform: translate(-50%,-50%); pointer-events:none; z-index:1; border-radius:50%; background: radial-gradient(circle, rgba(223,180,126,.26), rgba(223,180,126,.11) 38%, transparent 72%); filter: blur(16px); }
.ambient { position: fixed; border-radius:50%; pointer-events:none; z-index:0; filter: blur(25px); }
.ambient-one { width: 420px; height: 420px; left: -130px; bottom: 10%; background: rgba(255,255,255,.65); }
.ambient-two { width: 520px; height: 520px; right: -160px; top: 2%; background: rgba(224,181,130,.16); }
.mesh-grid { position: fixed; inset:0; z-index:0; opacity:.32; background-image: linear-gradient(rgba(112,65,52,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(112,65,52,.055) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(circle at 50% 46%, black 30%, transparent 82%); }
.orbit-line { position: fixed; z-index:0; border: 1px solid rgba(112,65,52,.09); border-radius:50%; pointer-events:none; }
.orbit-line-one { width: 1000px; height: 1000px; left: 18%; top: 7%; }
.orbit-line-two { width: 1220px; height: 520px; left: 20%; top: 10%; transform: rotate(-9deg); }
.city-line { position: fixed; bottom: 0; z-index:0; width: 340px; height: 205px; opacity: .28; background: linear-gradient(to top, rgba(112,65,52,.2), transparent); clip-path: polygon(0 100%,0 55%,6% 55%,6% 28%,9% 28%,10% 55%,16% 55%,16% 40%,22% 40%,22% 100%,30% 100%,30% 62%,36% 62%,36% 48%,42% 48%,42% 100%,52% 100%,52% 26%,55% 20%,58% 26%,58% 100%,70% 100%,70% 55%,78% 55%,78% 100%,100% 100%); }
.city-left { left: 0; }
.city-right { right: 0; transform: scaleX(-1); }

.hub { position: relative; z-index:2; width:100vw; height:100vh; display:grid; grid-template-rows: auto auto 1fr auto; gap: 18px; padding: 26px 38px 24px; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.brand { display:block; padding: 4px 0 0 4px; }
.brand img { width: 190px; height:auto; display:block; }
.top-status { display:flex; align-items:stretch; justify-content:flex-end; gap:12px; flex-wrap:wrap; max-width: 1180px; }
.info-chip, .profile-chip, .mini-card {
  position: relative; overflow: hidden; border: 1px solid var(--white-line); background: var(--glass); box-shadow: var(--soft-shadow);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.info-chip:before, .profile-chip:before, .app-card:before, .mini-card:before { content:""; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,.7), transparent 48%); pointer-events:none; }
.info-chip { min-width: 180px; min-height: 74px; border-radius:24px; padding: 13px 16px; display:flex; align-items:center; gap:12px; }
.info-chip.compact { min-width: 150px; }
.weather-chip { min-width: 200px; }
.chip-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:var(--choco); background:rgba(255,255,255,.56); border:1px solid rgba(112,65,52,.1); flex:none; }
.info-chip small, .profile-text small { display:block; font-size:12px; color:var(--muted); white-space: nowrap; }
.info-chip strong { display:block; margin-top:2px; font-size:22px; line-height:1; color:var(--choco-2); white-space: nowrap; }
.profile-chip { min-width: 245px; min-height:74px; border-radius:24px; padding:12px 14px; display:flex; align-items:center; gap:12px; }
.avatar { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background: linear-gradient(135deg, #a16a4b, var(--choco-2)); color:#fff; font-weight:800; box-shadow:0 12px 28px rgba(112,65,52,.24); }
.profile-text { flex:1; min-width:0; }
.profile-text strong { display:block; color:var(--choco-2); font-size:18px; }
.profile-text span { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.profile-text i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px rgba(62,155,99,.7); }
.profile-menu { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:20px; padding:4px; }

.hero { text-align:center; align-self:center; }
.hero-badge { display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 14px; border-radius:999px; background:rgba(255,255,255,.42); border:1px solid rgba(255,255,255,.65); color:var(--muted); font-size:11px; letter-spacing:2px; font-weight:700; margin-bottom: 8px; }
.hero h1 { margin:0; font-family:"Cormorant Garamond", serif; color:var(--choco-2); font-size: clamp(58px, 5.5vw, 100px); line-height:.95; font-weight:600; letter-spacing:-.035em; text-shadow:0 10px 35px rgba(112,65,52,.07); }
.subtitle-row { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:10px; }
.subtitle-row span { width: 100px; height:1px; background: linear-gradient(90deg, transparent, rgba(112,65,52,.34), transparent); }
.subtitle-row p { margin:0; font-family:"Cormorant Garamond", serif; font-size:30px; color:var(--choco); }
.meta-row { margin-top: 20px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:15px; color:var(--muted); font-size:14px; }
.meta-row > i { width:5px; height:5px; border-radius:50%; background:rgba(112,65,52,.28); }
.meta-item { display:flex; align-items:center; gap:8px; }
.meta-item.positive { color:var(--green); }

.apps { display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:18px; align-items:center; min-height:0; }
.app-card { height: min(390px, 42vh); min-height: 326px; position:relative; overflow:hidden; border-radius:34px; background:var(--glass-2); border:1px solid rgba(255,255,255,.7); box-shadow: var(--soft-shadow); backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); padding: 24px 20px 20px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); transform-style: preserve-3d; }
.app-card:hover { box-shadow: var(--shadow); border-color: rgba(183,128,79,.32); }
.app-card.is-featured { background: linear-gradient(180deg, rgba(255,252,247,.86), rgba(255,246,234,.78)); border-color: rgba(223,180,126,.48); box-shadow: var(--shadow), 0 0 44px rgba(223,180,126,.32); }
.app-card.is-locked { filter: saturate(.75); opacity: .78; }
.app-card .shine { position:absolute; inset:-40%; background: radial-gradient(circle at var(--mx,50%) var(--my,40%), rgba(255,255,255,.85), transparent 30%); opacity:0; transition: opacity .25s ease; pointer-events:none; }
.app-card:hover .shine { opacity:.42; }
.app-icon { width:112px; height:112px; border-radius:50%; display:grid; place-items:center; margin:18px auto 24px; background:rgba(255,255,255,.62); border:1px solid rgba(183,128,79,.22); box-shadow: inset 0 0 0 9px rgba(255,255,255,.32), 0 12px 30px rgba(70,36,24,.08); color:var(--choco); }
.app-icon svg { width: 52px; height:52px; stroke: currentColor; stroke-width:1.65; fill: none; stroke-linecap:round; stroke-linejoin:round; }
.app-title { margin:0; min-height:64px; display:grid; place-items:center; text-align:center; font-family:"Cormorant Garamond", serif; font-size:30px; line-height:1.05; color:var(--choco-2); }
.app-desc { margin: 0 auto; max-width: 215px; text-align:center; color:var(--muted); font-size:14px; line-height:1.55; }
.app-bottom { position:absolute; left:20px; right:20px; bottom:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.badge { height:30px; display:inline-flex; align-items:center; border-radius:999px; padding:0 11px; font-size:11px; font-weight:700; color:var(--green); background:rgba(62,155,99,.09); border:1px solid rgba(62,155,99,.16); }
.is-locked .badge { color:var(--muted); background:rgba(112,65,52,.07); border-color:rgba(112,65,52,.1); }
.app-arrow { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; flex:none; color:var(--choco); background:rgba(255,255,255,.66); border:1px solid rgba(112,65,52,.12); transition: .25s var(--ease); }
.app-card:hover .app-arrow { transform: translateX(4px); color:#fff; background:var(--choco); }
.app-card.is-locked:hover .app-arrow { transform: none; color:var(--muted); background:rgba(255,255,255,.55); }

.bottom-bar { display:grid; grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr); gap:18px; align-items:center; }
.mini-card { min-height:56px; border-radius:22px; padding: 12px 16px; display:flex; align-items:center; gap:11px; color:var(--muted); }
.notification { cursor:pointer; border-color:var(--white-line); }
.notification b, .system-ok b { font-weight:600; font-size:14px; color:var(--choco-2); }
.notification em { margin-left:auto; font-size:28px; font-style:normal; }
.motto { text-align:center; font-family:"Cormorant Garamond", serif; letter-spacing:2px; color:var(--choco); font-size:20px; white-space:nowrap; }
.motto span { color:rgba(112,65,52,.45); margin:0 12px; }
.system-ok { justify-self:end; min-width: 340px; justify-content:space-between; }
.system-ok small { display:block; margin-top:3px; color:var(--muted); }
.system-ok em { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:800; color:var(--green); background:rgba(62,155,99,.1); border:1px solid rgba(62,155,99,.18); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinReverse { to { transform: rotate(-360deg); } }
@keyframes breathe { 50% { opacity:.55; transform: rotate(-12deg) scale(1.04); } }
@keyframes bootPulse { 50% { transform: scale(1.035); } }
@keyframes loadLine { 0% { transform: translateX(-130%); } 100% { transform: translateX(250%); } }

@media (max-width: 1580px) {
  body { overflow:auto; }
  .hub { height:auto; min-height:100vh; }
  .apps { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .app-card { height: 340px; }
}
@media (max-width: 1100px) {
  .topbar { flex-direction:column; }
  .top-status { justify-content:flex-start; max-width:none; width:100%; }
  .apps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bottom-bar { grid-template-columns: 1fr; }
  .system-ok { justify-self:stretch; min-width:0; }
  .motto { white-space:normal; }
}
@media (max-width: 700px) {
  .hub { padding:18px; gap:18px; }
  .brand img { width:145px; }
  .top-status { display:grid; grid-template-columns:1fr; }
  .info-chip, .profile-chip { width:100%; }
  .hero h1 { font-size: 46px; }
  .subtitle-row p { font-size:22px; }
  .subtitle-row span { width:42px; }
  .apps { grid-template-columns:1fr; }
  .app-card { height: 320px; }
  .city-line { display:none; }
}