:root {
  --bg: #05030f;
  --bg-soft: #0b0618;
  --bg-deep: #120824;
  --hanni-bg: #05030f;
  --hanni-bg-soft: #0b0618;
  --hanni-surface: rgba(255, 255, 255, .07);
  --hanni-surface-strong: rgba(255, 255, 255, .11);
  --hanni-surface-hover: rgba(255, 255, 255, .15);
  --hanni-border: rgba(255, 255, 255, .14);
  --hanni-text: #ffffff;
  --hanni-text-muted: rgba(255, 255, 255, .72);
  --hanni-purple: #7b4dff;
  --hanni-purple-soft: #a77cff;
  --purple: #7b4dff;
  --purple-soft: #a77cff;
  --accent: #d9c8ff;
  --text: #ffffff;
  --text-soft: #ede7ff;
  --text-muted: rgba(255, 255, 255, .68);
  --glass: rgba(255, 255, 255, .07);
  --glass-strong: rgba(255, 255, 255, .11);
  --glass-border: rgba(255, 255, 255, .14);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-glow: 0 0 60px rgba(123, 77, 255, .30);
  --shadow-card: 0 28px 90px rgba(0, 0, 0, .38);
  --container: 1210px;
  --card: var(--hanni-surface);
  --ink: var(--hanni-text);
  --muted: var(--hanni-text-muted);
  --line: var(--hanni-border);
  --soft: rgba(255, 255, 255, .055);
}

body.public-body,
body {
  color: var(--text);
  background:
    radial-gradient(circle at 18% 0%, rgba(123, 77, 255, .22), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(167, 124, 255, .24), transparent 26%),
    linear-gradient(135deg, var(--bg) 0%, var(--bg-soft) 50%, var(--bg-deep) 100%);
}

body.public-body::before,
body:not(.frame-body)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 34%, rgba(167, 124, 255, .13) 44%, transparent 58%),
    linear-gradient(156deg, transparent 0 52%, rgba(123, 77, 255, .14) 64%, transparent 76%);
  filter: blur(1px);
}

body.public-body::after,
body:not(.frame-body)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 22% 22%, rgba(255, 255, 255, .18) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 18%, rgba(217, 200, 255, .18) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 58%, rgba(255, 255, 255, .13) 0 1px, transparent 2px);
}

.public-page {
  min-height: 100vh;
  overflow: hidden;
}

.hanni-public-nav.public-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 180px 1fr auto auto;
  gap: 18px;
  align-items: center;
  max-width: var(--container);
  min-height: 76px;
  margin: 0 auto;
  padding: 18px 24px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background: rgba(5, 3, 15, .72);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .26);
  backdrop-filter: blur(22px);
}

.public-brand,
.public-brand img,
.login-logo-wide {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.public-brand img {
  width: 154px !important;
}

.public-center-nav {
  display: flex;
  justify-content: center;
  gap: 26px;
}

.public-center-nav a,
.public-login-link,
.public-footer a {
  color: var(--text-soft) !important;
  text-decoration: none;
}

.public-center-nav a {
  font-size: 14px;
  font-weight: 760;
  opacity: .88;
}

.public-center-nav a:hover,
.public-login-link:hover,
.public-footer a:hover {
  color: #fff !important;
  text-shadow: 0 0 18px rgba(217, 200, 255, .55);
}

.public-login-link {
  min-height: 42px;
  padding: 10px 17px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
}

.public-nav-cta {
  min-height: 42px;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--purple), var(--purple-soft)) !important;
  box-shadow: 0 16px 38px rgba(123, 77, 255, .36) !important;
}

.hanni-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass);
  cursor: pointer;
}

.hanni-menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  border-radius: 99px;
  background: #fff;
}

.public-flash,
.flash {
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .08) !important;
  box-shadow: var(--shadow-card);
}

.public-flash.error,
.flash.error {
  border-color: rgba(255, 94, 130, .45) !important;
  background: rgba(255, 94, 130, .13) !important;
}

.public-flash.success,
.flash.success {
  border-color: rgba(93, 255, 178, .35) !important;
  background: rgba(93, 255, 178, .12) !important;
}

.hanni-universe {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

.hanni-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr);
  gap: 28px;
  min-height: calc(100vh - 78px);
  padding: 64px 0 42px;
  align-items: center;
}

.hanni-hero::before {
  content: "";
  position: absolute;
  inset: 8% -10% 0 36%;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(123, 77, 255, .30), transparent 62%);
  filter: blur(24px);
}

.hanni-kicker {
  display: inline-flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid rgba(217, 200, 255, .26);
  border-radius: 999px;
  color: var(--accent);
  background: rgba(217, 200, 255, .08);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.hanni-hero h1,
.hanni-section-head h2,
.hanni-portal-copy h2 {
  margin: 20px 0 18px;
  max-width: 680px;
  color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: clamp(46px, 6vw, 82px);
  line-height: .98;
  letter-spacing: 0;
}

.hanni-hero h1::first-line {
  color: #fff;
}

.hanni-hero h1 {
  text-wrap: balance;
}

.hanni-hero-copy p,
.hanni-section-head p,
.hanni-portal-copy p {
  max-width: 620px;
  margin: 0;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.7;
}

.hanni-actions,
.hanni-footer-cta div {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.hanni-btn,
.primary-btn,
.secondary-btn,
.ghost-btn,
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 20px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  text-decoration: none !important;
  font-weight: 900;
  line-height: 1.1;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.hanni-btn-primary,
.primary-btn,
button,
.btn {
  color: #fff !important;
  border-color: rgba(217, 200, 255, .30);
  background: linear-gradient(135deg, var(--purple), var(--purple-soft)) !important;
  box-shadow: 0 18px 42px rgba(123, 77, 255, .36);
}

.hanni-btn-secondary,
.secondary-btn,
.ghost-btn {
  color: #fff !important;
  background: rgba(255, 255, 255, .07) !important;
}

.hanni-btn:hover,
.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover,
button:hover,
.btn:hover {
  transform: translateY(-2px);
  border-color: rgba(217, 200, 255, .42);
  box-shadow: 0 0 36px rgba(123, 77, 255, .26);
}

.hanni-platforms {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 48px;
}

.hanni-platforms span {
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .045);
  font-size: 13px;
}

.hanni-hero-stage {
  position: relative;
  min-height: 620px;
}

.hanni-orbit {
  position: absolute;
  border: 1px solid rgba(167, 124, 255, .28);
  border-radius: 50%;
  filter: drop-shadow(0 0 22px rgba(123, 77, 255, .42));
  transform: rotate(-12deg);
}

.hanni-orbit-one {
  inset: 16% 3% 15% 0;
}

.hanni-orbit-two {
  inset: 26% 12% 23% 13%;
}

.hanni-tv-card,
.hanni-floating-card,
.hanni-mobile-preview,
.hanni-universe-card,
.hanni-platform-core,
.hanni-proof-stack article,
.hanni-connect-card,
.hanni-login-card,
.metric-card,
.panel.dark-panel,
.quick-actions-panel,
.light-card,
.business-overview,
.pro-card {
  border: 1px solid var(--glass-border) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(167, 124, 255, .13), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .045)) !important;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(20px);
}

.hanni-tv-card {
  position: absolute;
  left: 11%;
  top: 10%;
  width: 58%;
  aspect-ratio: 16 / 9;
  padding: 12px;
  border-radius: 18px;
  transform: rotate(2deg);
}

.hanni-tv-photo {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  background:
    radial-gradient(circle at 44% 34%, #ffd7b8 0 7%, transparent 8%),
    radial-gradient(circle at 56% 34%, #f4bda7 0 7%, transparent 8%),
    radial-gradient(circle at 50% 40%, #ffd6ae 0 5%, transparent 6%),
    linear-gradient(180deg, rgba(255, 210, 170, .92), rgba(115, 77, 145, .68) 55%, #19112a);
}

.hanni-tv-photo::after {
  content: "";
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 18%;
  height: 30%;
  border-radius: 999px 999px 30px 30px;
  background: linear-gradient(90deg, #3d2535, #6f4269, #382136);
}

.hanni-tv-photo span,
.hanni-tv-photo strong {
  position: absolute;
  left: 18px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .48);
}

.hanni-tv-photo span {
  top: 16px;
  font-weight: 900;
}

.hanni-tv-photo strong {
  bottom: 16px;
}

.hanni-floating-card {
  position: absolute;
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 16px;
  color: #fff;
}

.hanni-floating-card small {
  color: var(--text-muted);
}

.hanni-card-calendar {
  left: 1%;
  top: 18%;
  width: 160px;
  transform: rotate(-5deg);
}

.hanni-card-dashboard {
  right: 15%;
  top: 42%;
  width: 220px;
}

.hanni-card-dashboard strong {
  font-size: 28px;
}

.hanni-card-message {
  left: 28%;
  bottom: 13%;
  width: 210px;
  transform: rotate(-8deg);
}

.hanni-bars {
  display: flex;
  align-items: end;
  gap: 7px;
  height: 52px;
}

.hanni-bars span {
  flex: 1;
  border-radius: 99px 99px 0 0;
  background: linear-gradient(180deg, var(--purple-soft), var(--purple));
}

.hanni-bars span:nth-child(1) { height: 34%; }
.hanni-bars span:nth-child(2) { height: 62%; }
.hanni-bars span:nth-child(3) { height: 86%; }
.hanni-bars span:nth-child(4) { height: 50%; }

.hanni-mobile-preview {
  position: absolute;
  right: 0;
  bottom: 2%;
  width: 230px;
  min-height: 350px;
  padding: 18px;
  border: 8px solid rgba(8, 6, 18, .94) !important;
  border-radius: 32px;
  color: #fff;
  background-color: rgba(5, 3, 15, .88) !important;
}

.hanni-mobile-preview div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.hanni-mobile-preview img {
  width: 94px;
}

.hanni-mobile-preview div span {
  width: 18px;
  height: 12px;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.hanni-mobile-preview strong {
  display: block;
  margin-bottom: 24px;
  font-size: 22px;
  line-height: 1.12;
}

.hanni-mobile-preview a {
  display: flex;
  min-height: 46px;
  align-items: center;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(123, 77, 255, .20);
  color: #fff;
}

.hanni-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 30px 0 38px;
}

.hanni-universe-card {
  position: relative;
  min-height: 450px;
  overflow: hidden;
  padding: 34px;
  border-radius: var(--radius-xl);
}

.hanni-universe-card::before {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  opacity: .58;
  background:
    linear-gradient(180deg, transparent, rgba(5, 3, 15, .84)),
    radial-gradient(circle at 72% 42%, rgba(255, 205, 166, .30), transparent 22%);
}

.hanni-home-card {
  background:
    linear-gradient(145deg, rgba(73, 35, 82, .70), rgba(15, 8, 28, .82)),
    radial-gradient(circle at 72% 54%, rgba(255, 186, 147, .32), transparent 30%) !important;
}

.hanni-business-card {
  background:
    linear-gradient(145deg, rgba(25, 24, 70, .76), rgba(9, 6, 24, .86)),
    radial-gradient(circle at 78% 48%, rgba(123, 77, 255, .32), transparent 30%) !important;
}

.hanni-card-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--purple-soft));
  box-shadow: var(--shadow-glow);
  font-weight: 950;
}

.hanni-universe-card h2 {
  position: relative;
  margin: 22px 0 8px;
  color: #fff;
  font-size: clamp(32px, 4vw, 46px);
}

.hanni-universe-card p,
.hanni-universe-card ul,
.hanni-universe-card a,
.hanni-card-icon {
  position: relative;
}

.hanni-universe-card p {
  margin: 0 0 22px;
  color: var(--text-soft);
}

.hanni-universe-card ul {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0 0 28px;
  list-style: none;
  color: var(--text-muted);
}

.hanni-universe-card li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(217, 200, 255, .8);
}

.hanni-platform-core {
  margin: 4px 0 46px;
  padding: 34px;
  border-radius: var(--radius-xl);
}

.hanni-section-head {
  text-align: center;
}

.hanni-section-head .hanni-kicker,
.hanni-section-head p {
  margin-left: auto;
  margin-right: auto;
}

.hanni-section-head h2,
.hanni-portal-copy h2 {
  font-size: clamp(34px, 4vw, 54px);
}

.hanni-core-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 240px;
  gap: 22px;
  align-items: center;
  margin-top: 34px;
}

.hanni-proof-stack {
  display: grid;
  gap: 14px;
}

.hanni-proof-stack article,
.hanni-connect-card {
  padding: 18px;
  border-radius: var(--radius-lg);
}

.hanni-proof-stack strong,
.hanni-proof-stack span,
.hanni-footer-col strong,
.hanni-footer-col a,
.hanni-footer-brand span,
.hanni-connect-card span,
.hanni-connect-card p {
  display: block;
}

.hanni-proof-stack span,
.hanni-connect-card p {
  margin-top: 6px;
  color: var(--text-muted);
  line-height: 1.5;
}

.hanni-network {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 76px);
  align-items: center;
  justify-items: center;
  min-height: 440px;
}

.hanni-network::before {
  content: "";
  position: absolute;
  inset: 12% 10%;
  border: 1px solid rgba(167, 124, 255, .26);
  border-radius: 50%;
  box-shadow: inset 0 0 70px rgba(123, 77, 255, .16), 0 0 80px rgba(123, 77, 255, .20);
}

.hanni-network::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 200, 255, .62), transparent);
}

.hanni-core-logo {
  z-index: 2;
  grid-column: 3;
  grid-row: 3;
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(217, 200, 255, .28);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(123, 77, 255, .22), rgba(5, 3, 15, .92) 70%);
  box-shadow: var(--shadow-glow);
}

.hanni-core-logo img {
  width: 132px;
}

.hanni-core-logo em {
  position: absolute;
  bottom: 36px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(123, 77, 255, .20);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.hanni-node,
.hanni-device {
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .07);
}

.hanni-node {
  color: var(--accent);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 900;
}

.hanni-home-node { grid-column: 1; grid-row: 1; }
.device-tablet { grid-column: 2; grid-row: 1; }
.device-tv { grid-column: 1; grid-row: 2; }
.device-mobile { grid-column: 1; grid-row: 4; }
.device-frame { grid-column: 2; grid-row: 5; }
.hanni-business-node { grid-column: 5; grid-row: 1; }
.device-signage { grid-column: 4; grid-row: 1; }
.device-reception { grid-column: 5; grid-row: 2; }
.device-shop { grid-column: 5; grid-row: 4; }
.device-canteen { grid-column: 4; grid-row: 5; }

.hanni-connect-card {
  min-height: 340px;
}

.hanni-connect-card > span {
  color: #fff;
  font-size: 24px;
  line-height: 1.16;
  font-weight: 900;
}

.hanni-dongle {
  position: relative;
  width: 170px;
  height: 84px;
  margin: 36px auto 28px;
  border-radius: 22px;
  background: linear-gradient(145deg, #30175a, #8b5cf6 55%, #1c0c36);
  box-shadow: 0 20px 44px rgba(123, 77, 255, .30), inset 0 0 0 1px rgba(255, 255, 255, .20);
  transform: rotate(-12deg);
}

.hanni-dongle::after {
  content: "";
  position: absolute;
  right: -42px;
  top: 22px;
  width: 48px;
  height: 35px;
  border-radius: 6px;
  background: linear-gradient(90deg, #cfc2ff, #6a5b94);
}

.hanni-connect-card h3 {
  margin: 0;
  color: #fff;
}

.hanni-login-portal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  gap: 28px;
  align-items: center;
  padding: 14px 0 56px;
}

.hanni-login-card.public-login-card {
  color: #fff !important;
  border-radius: var(--radius-xl) !important;
  padding: 30px !important;
}

.hanni-login-card .login-logo-wide {
  width: 148px;
  margin: 0 0 22px;
  padding: 0;
}

.hanni-context-switch,
.mode-switch {
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
}

.hanni-context-switch span,
.mode-switch span {
  flex: 1;
  min-height: 38px;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--text-muted);
  text-align: center;
  font-weight: 850;
}

.hanni-context-switch .active,
.mode-switch .active {
  color: #fff;
  background: linear-gradient(135deg, rgba(123, 77, 255, .88), rgba(167, 124, 255, .58));
}

.hanni-login-card h2 {
  margin-top: 22px !important;
}

.public-login-card label,
label {
  color: var(--text-soft) !important;
}

.public-login-card input,
.public-login-card select,
input,
select,
textarea {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .07) !important;
}

.public-login-card input::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, .42);
}

.public-login-card input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(217, 200, 255, .64) !important;
  box-shadow: 0 0 0 4px rgba(123, 77, 255, .18), 0 0 28px rgba(123, 77, 255, .18) !important;
}

.form-help-link,
.auth-small a,
.panel-head a,
a {
  color: var(--accent);
}

.auth-small,
.public-login-card p {
  color: var(--text-muted) !important;
}

.hanni-footer.public-footer {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(110px, .55fr)) 1.5fr;
  gap: 28px;
  align-items: start;
  max-width: none;
  margin: 0;
  padding: 38px max(24px, calc((100vw - var(--container)) / 2)) 42px;
  border-top: 1px solid var(--glass-border);
  background:
    radial-gradient(circle at 80% 0%, rgba(123, 77, 255, .18), transparent 30%),
    rgba(5, 3, 15, .70);
}

.hanni-footer-brand img {
  width: 150px;
}

.hanni-footer-brand span,
.hanni-footer-col a,
.hanni-footer-cta span {
  margin-top: 8px;
  color: var(--text-muted);
}

.hanni-footer-col {
  display: grid;
  gap: 8px;
}

.hanni-footer-col strong,
.hanni-footer-cta strong {
  color: #fff;
}

.hanni-footer-cta {
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .07);
}

/* Logged-in platform shell */
.app-shell {
  background:
    radial-gradient(circle at 36% 0%, rgba(123, 77, 255, .20), transparent 26%),
    linear-gradient(135deg, var(--bg) 0%, var(--bg-soft) 52%, var(--bg-deep) 100%) !important;
}

.sidebar {
  border-right-color: var(--glass-border) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(123, 77, 255, .22), transparent 30%),
    rgba(5, 3, 15, .82) !important;
  backdrop-filter: blur(24px);
}

.brand img {
  width: 150px !important;
}

.side-nav a {
  border: 1px solid transparent;
  border-radius: 14px !important;
}

.side-nav a:hover,
.side-nav a.active {
  border-color: rgba(217, 200, 255, .20);
  background: rgba(255, 255, 255, .08) !important;
  box-shadow: 0 0 28px rgba(123, 77, 255, .18), inset 3px 0 0 var(--purple) !important;
}

.main-content {
  max-width: 1380px !important;
}

.dashboard-hero h2,
.panel h3,
.light-card h3,
.business-overview h3,
.metric-card strong {
  color: #fff !important;
}

.panel,
.card,
.surface-card,
.stat-card,
.frame-card,
.concept-panel,
.screen-list-panel,
.screen-settings-panel,
.create-screen-panel,
.preview-panel {
  border: 1px solid var(--hanni-border) !important;
  color: var(--hanni-text) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(167, 124, 255, .12), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .045)) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: blur(20px);
}

.panel h1,
.panel h2,
.panel h3,
.panel h4,
.card h1,
.card h2,
.card h3,
.card h4,
.stat-card strong,
.frame-card h3,
.concept-card-grid strong,
.screen-type-picker strong {
  color: var(--hanni-text) !important;
}

.dashboard-hero p,
.metric-card small,
.metric-card span,
.panel p,
.panel small,
.light-card p,
.light-card small,
.business-overview small,
.screen-row small,
.screen-row em {
  color: var(--text-muted) !important;
}

.panel p,
.panel small,
.card p,
.card small,
.soft-row small,
.fit-help-list,
.delete-note,
.muted {
  color: var(--hanni-text-muted) !important;
}

.metric-card,
.panel.dark-panel,
.quick-actions-panel,
.light-card,
.business-overview {
  border-radius: var(--radius-lg) !important;
}

.metric-card.highlight {
  border-color: rgba(217, 200, 255, .42) !important;
  box-shadow: var(--shadow-card), var(--shadow-glow) !important;
}

.quick-action-grid a,
.light-card-action,
.screen-row,
.business-metrics div {
  border-radius: var(--radius-md) !important;
}

.quick-action-grid a:hover,
.light-card-action:hover,
.screen-row:hover {
  border-color: rgba(217, 200, 255, .34);
  box-shadow: 0 0 24px rgba(123, 77, 255, .18);
}

.user-chip > span,
.wave-mark,
.metric-icon,
.quick-action-grid span,
.business-metrics span,
.pro-card a {
  background: linear-gradient(135deg, var(--purple), var(--purple-soft)) !important;
  color: #fff !important;
}

.screen-thumb {
  background: linear-gradient(135deg, #120824, #7b4dff 52%, #d9c8ff) !important;
}

.status-pill,
.pill,
.frame-meta span {
  border-color: var(--glass-border) !important;
  background: var(--glass) !important;
  color: var(--text-soft) !important;
}

select option {
  color: #fff;
  background: #0b0618;
}

.modal,
dialog,
.empty-state,
table {
  border-color: var(--glass-border);
}

@media (max-width: 1060px) {
  .hanni-public-nav.public-topbar {
    grid-template-columns: 1fr auto auto;
  }

  .hanni-menu-toggle {
    display: block;
  }

  .public-center-nav,
  .public-nav {
    display: none;
  }

  body.hanni-menu-open .public-center-nav,
  body.hanni-menu-open .public-nav {
    display: grid;
    grid-column: 1 / -1;
    justify-content: stretch;
    gap: 8px;
  }

  body.hanni-menu-open .public-center-nav a,
  body.hanni-menu-open .public-login-link {
    min-height: 44px;
    padding: 12px 14px;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
  }

  .hanni-hero,
  .hanni-login-portal,
  .hanni-core-grid,
  .hanni-footer.public-footer {
    grid-template-columns: 1fr;
  }

  .hanni-hero {
    min-height: auto;
    padding-top: 42px;
  }

  .hanni-hero-stage {
    min-height: 520px;
  }

  .hanni-core-grid {
    align-items: stretch;
  }
}

@media (max-width: 780px) {
  .hanni-universe {
    width: min(100% - 28px, var(--container));
  }

  .hanni-public-nav.public-topbar {
    min-height: 68px;
    padding: 12px 14px;
    border-radius: 0 0 18px 18px;
  }

  .public-brand img {
    width: 132px !important;
  }

  .public-cta-nav {
    display: none;
  }

  .hanni-hero {
    padding-top: 28px;
    gap: 18px;
  }

  .hanni-hero h1 {
    margin-top: 16px;
    font-size: 40px;
    line-height: 1.02;
  }

  .hanni-hero-copy p {
    font-size: 16px;
    line-height: 1.55;
  }

  .hanni-actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 22px;
  }

  .hanni-platforms {
    margin-top: 24px;
  }

  .hanni-platforms span:nth-child(n+5) {
    display: none;
  }

  .hanni-hero-stage {
    min-height: 360px;
  }

  .hanni-tv-card {
    left: 0;
    top: 10%;
    width: 72%;
  }

  .hanni-mobile-preview {
    width: 165px;
    min-height: 250px;
    padding: 12px;
    border-width: 6px !important;
    border-radius: 26px;
  }

  .hanni-mobile-preview strong {
    font-size: 16px;
  }

  .hanni-card-dashboard {
    right: 2%;
    top: 54%;
    width: 160px;
  }

  .hanni-card-calendar,
  .hanni-card-message {
    display: none;
  }

  .hanni-split {
    grid-template-columns: 1fr;
  }

  .hanni-universe-card,
  .hanni-platform-core,
  .hanni-login-card.public-login-card {
    padding: 22px !important;
    border-radius: 22px !important;
  }

  .hanni-universe-card {
    min-height: 410px;
  }

  .hanni-network {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 10px;
    min-height: 0;
  }

  .hanni-network::before,
  .hanni-network::after {
    display: none;
  }

  .hanni-core-logo,
  .hanni-home-node,
  .hanni-business-node,
  .hanni-device {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .hanni-core-logo {
    grid-column: 1 / -1 !important;
    width: 160px;
    height: 160px;
    margin: 10px auto;
  }

  .hanni-footer.public-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .topbar,
  .dashboard-hero {
    align-items: stretch !important;
  }

  .mode-switch {
    width: 100%;
  }
}

/* Integrated logged-in navigation */
.app-shell {
  grid-template-columns: minmax(232px, 264px) minmax(0, 1fr) !important;
  gap: 18px;
  align-items: start;
  padding: 18px;
}

.sidebar {
  top: 18px !important;
  height: calc(100vh - 36px) !important;
  overflow: hidden !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 26px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 22% 4%, rgba(217, 200, 255, .16), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
}

.brand {
  min-height: 64px;
  padding: 8px 10px !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 18px;
  background: rgba(255, 255, 255, .045) !important;
}

.side-nav {
  gap: 14px !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 200, 255, .28) transparent;
}

.side-nav::-webkit-scrollbar {
  width: 6px;
}

.side-nav::-webkit-scrollbar-track {
  background: transparent;
}

.side-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(217, 200, 255, .24);
}

.nav-group {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  background: rgba(255, 255, 255, .025);
}

.nav-group > span {
  padding: 0 5px 8px !important;
  color: rgba(237, 231, 255, .48) !important;
}

.side-nav a {
  min-height: 42px !important;
  padding: 10px 11px !important;
}

.sidebar-footer {
  flex: 0 0 auto;
  position: relative !important;
  padding-top: 0 !important;
  background: transparent !important;
}

.main-content {
  width: 100%;
  max-width: none !important;
  padding: 4px 0 28px !important;
}

.topbar {
  min-height: 70px;
  padding: 10px 12px 10px 16px !important;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: rgba(255, 255, 255, .045);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .18);
  backdrop-filter: blur(18px);
}

.dashboard-hero {
  padding: 4px 2px 0;
}

@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 1fr !important;
    gap: 14px;
    padding: 12px;
  }

  .sidebar {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    overflow: visible !important;
    border-radius: 22px;
  }

  .side-nav {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 10px;
  }

  .nav-group {
    padding: 8px;
  }

  .side-nav {
    grid-template-columns: 1fr !important;
  }

  .topbar {
    padding: 10px !important;
    border-radius: 20px;
  }
}

/* Dashboard IA and screen/device clarity */
.screen-admin-grid,
.edit-screen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
  gap: 18px;
  align-items: start;
}

.screen-list-panel,
.screen-settings-panel,
.create-screen-panel,
.preview-panel,
.concept-panel {
  color: var(--text);
}

.concept-panel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.concept-panel p,
.gallery-toolbar p,
.fit-help-list,
.technical-details,
.delete-note {
  color: var(--text-muted);
}

.concept-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.concept-card-grid article,
.screen-type-picker label,
.technical-details,
.fit-help-list,
.display-device-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .06);
}

.concept-card-grid article {
  padding: 16px;
}

.concept-card-grid strong,
.concept-card-grid span,
.screen-type-picker strong,
.screen-type-picker span {
  display: block;
}

.concept-card-grid span,
.screen-type-picker span {
  margin-top: 6px;
  color: var(--text-muted);
  line-height: 1.45;
}

.screen-card {
  padding: 0;
  overflow: hidden;
}

.screen-card-layout {
  display: grid;
  grid-template-columns: minmax(160px, 230px) minmax(0, 1fr) minmax(170px, auto);
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.screen-preview {
  position: relative;
  align-self: start;
  display: grid;
  place-items: end center;
  min-height: 132px;
  overflow: hidden;
  border: 8px solid rgba(10, 6, 24, .92);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(123, 77, 255, .22), rgba(217, 200, 255, .10)),
    #090617 center / cover no-repeat;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .34), 0 0 30px rgba(123, 77, 255, .18);
}

.screen-preview.is-landscape {
  aspect-ratio: 16 / 9;
}

.screen-preview.is-auto {
  aspect-ratio: 1 / 1;
}

.screen-preview.is-portrait {
  width: min(148px, 100%);
  aspect-ratio: 9 / 16;
  justify-self: center;
}

.screen-preview.is-empty {
  background:
    radial-gradient(circle at 50% 28%, rgba(167, 124, 255, .24), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)),
    #090617;
}

.screen-preview.large {
  width: 100%;
  max-width: 330px;
  margin: 16px auto;
}

.screen-preview.large.is-portrait {
  max-width: 210px;
}

.screen-preview.fit-contain,
.screen-preview.fit-center,
.screen-preview.fit-original {
  background-size: contain;
  background-color: rgba(7, 4, 18, .95);
}

.screen-preview.fit-blur::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: inherit;
  background-size: cover;
  filter: blur(18px);
  opacity: .58;
}

.screen-preview.fit-blur::after,
.screen-preview.fit-contain::after,
.screen-preview.fit-center::after,
.screen-preview.fit-original::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 10px;
  background: inherit;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}

.screen-preview-glow {
  position: absolute;
  inset: auto 12% 8% 12%;
  height: 22%;
  border-radius: 50%;
  background: rgba(167, 124, 255, .28);
  filter: blur(20px);
}

.preview-empty {
  position: relative;
  z-index: 2;
  max-width: 130px;
  margin: auto;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}

.preview-indicators {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.preview-indicator {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(217, 200, 255, .24);
  border-radius: 999px;
  color: #fff;
  background: rgba(5, 3, 15, .70);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 850;
}

.orientation-badge,
.rotation-badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(217, 200, 255, .30);
  border-radius: 999px;
  color: #fff;
  background: rgba(5, 3, 15, .72);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .26), 0 0 18px rgba(123, 77, 255, .20);
  backdrop-filter: blur(12px);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.orientation-badge {
  left: 10px;
  bottom: 10px;
}

.rotation-badge {
  top: 10px;
  right: 10px;
  color: var(--accent);
}

.orientation-badge i {
  display: inline-block;
  width: 16px;
  height: 10px;
  border: 2px solid var(--accent);
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(217, 200, 255, .35);
}

.orientation-badge.portrait i {
  width: 10px;
  height: 16px;
}

.screen-type-pill {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(217, 200, 255, .25);
  border-radius: 999px;
  color: var(--accent);
  background: rgba(123, 77, 255, .16);
  font-size: 12px;
  font-weight: 900;
}

.screen-card-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.screen-human-head h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 23px;
  line-height: 1.12;
}

.screen-status-line {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .52);
}

.status-pill.online::before {
  background: #46e68a;
  box-shadow: 0 0 14px rgba(70, 230, 138, .68);
}

.status-pill.idle::before {
  background: #ffcc66;
  box-shadow: 0 0 14px rgba(255, 204, 102, .38);
}

.orientation-mini {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(217, 200, 255, .18);
  border-radius: 999px;
  color: var(--text-soft);
  background: rgba(255, 255, 255, .055);
  font-size: 12px;
  font-weight: 850;
}

.screen-summary {
  display: grid;
  gap: 10px;
}

.screen-summary div {
  display: grid;
  gap: 3px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.screen-summary div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.screen-summary span {
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.screen-summary strong {
  color: #fff;
  font-size: 15px;
  line-height: 1.35;
}

.screen-summary small {
  color: var(--text-muted);
  font-size: 13px;
}

.screen-card-actions {
  display: grid;
  gap: 10px;
  align-self: stretch;
  align-content: center;
}

.screen-card-actions .primary-btn,
.screen-card-actions .secondary-btn,
.screen-card-actions .ghost-btn {
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
}

.screen-technical {
  margin: 0;
  padding: 11px 12px;
}

.technical-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.technical-list div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.technical-list span {
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
  font-weight: 850;
}

.technical-list strong {
  color: #fff;
  font-size: 13px;
}

.technical-list code {
  display: block;
  max-width: 100%;
  overflow: auto;
  white-space: nowrap;
  border: 1px solid rgba(217, 200, 255, .16);
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--text-soft);
  background: rgba(0, 0, 0, .24);
  font-size: 12px;
}

.technical-list form {
  margin: 0;
}

.technical-list .delete-note {
  display: block;
  line-height: 1.45;
}

.technical-details {
  margin: 14px 0;
  padding: 12px 14px;
}

.technical-details summary {
  cursor: pointer;
  color: var(--text-soft);
  font-weight: 850;
}

.compact-token code,
.token-box code {
  display: block;
  max-width: 100%;
  overflow: auto;
  white-space: nowrap;
  border: 1px solid rgba(217, 200, 255, .16);
  border-radius: 12px;
  padding: 11px 12px;
  color: var(--text-soft);
  background: rgba(0, 0, 0, .24);
}

.screen-type-picker {
  display: grid;
  gap: 10px;
}

.screen-type-picker label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 0;
  padding: 14px;
  cursor: pointer;
  color: var(--hanni-text) !important;
}

.screen-type-picker label.is-active,
.screen-type-picker label:has(input:checked) {
  border-color: rgba(217, 200, 255, .56) !important;
  background: rgba(123, 77, 255, .18) !important;
  box-shadow: 0 0 28px rgba(123, 77, 255, .22);
}

.screen-type-picker input {
  grid-row: span 2;
  width: auto;
  margin-top: 3px;
}

.orientation-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.orientation-form-grid label {
  display: grid;
  gap: 7px;
  margin: 13px 0 7px;
}

.fit-help-list {
  display: grid;
  gap: 7px;
  margin: 10px 0 14px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.45;
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.options,
.advanced-panel,
.content-block-card,
.action-list a,
.link-item,
.soft-row,
.calendar-item,
.invite-box,
.member-card,
.family-card,
.album-photo-card,
.frame-card {
  border-color: var(--glass-border) !important;
  background: rgba(255, 255, 255, .06) !important;
  color: var(--text) !important;
}

.options *,
.advanced-panel *,
.content-block-card *,
.soft-row *,
.member-card *,
.family-card *,
.album-photo-card * {
  color: inherit;
}

.options small,
.advanced-panel p,
.content-block-card small,
.soft-row small,
.member-card small,
.family-card small {
  color: var(--text-muted) !important;
}

input[readonly],
input:disabled,
select:disabled,
textarea:disabled {
  color: rgba(255, 255, 255, .58) !important;
  background: rgba(255, 255, 255, .045) !important;
  border-color: rgba(255, 255, 255, .10) !important;
}

hr {
  border: 0;
  border-top: 1px solid var(--hanni-border);
}

.technical-details,
.fit-help-list,
.options,
.advanced-panel,
.soft-row,
.content-block-card,
.display-device-card,
.concept-card-grid article,
.screen-type-picker label {
  border-color: var(--hanni-border) !important;
  background: var(--hanni-surface) !important;
}

.display-device-list {
  display: grid;
  gap: 14px;
}

.display-device-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.display-device-main {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.display-device-main strong,
.display-device-main small {
  display: block;
}

.display-device-main small,
.display-device-actions label,
.display-device-schedule label {
  color: var(--text-muted) !important;
}

.display-device-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.display-device-meta span {
  padding: 7px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .055);
  color: var(--text-soft);
  font-size: 13px;
}

.display-device-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.display-device-actions form:first-child {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(200px, 1.2fr) auto;
  gap: 10px;
  align-items: end;
}

.display-device-schedule {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(90px, .7fr)) auto;
  gap: 10px;
  align-items: end;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
}

.display-device-schedule label {
  display: grid;
  gap: 5px;
  margin: 0;
  font-size: 13px;
}

@media (max-width: 1020px) {
  .screen-admin-grid,
  .edit-screen-grid,
  .concept-panel,
  .screen-card-layout {
    grid-template-columns: 1fr;
  }

  .concept-card-grid {
    grid-template-columns: 1fr;
  }

  .screen-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }

  .screen-technical {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .orientation-form-grid,
  .display-device-main,
  .display-device-actions,
  .display-device-actions form:first-child,
  .display-device-schedule {
    grid-template-columns: 1fr;
    display: grid;
  }

  .screen-preview.is-portrait {
    width: 150px;
  }

  .screen-card-actions {
    grid-template-columns: 1fr;
  }
}