.happ-theme-preview-panel, .happ-theme-controls { background: var(--theme-color-background-content); border-radius: 28px; min-width: 0px; padding: 26px; }
.happ-theme-preview-panel { position: sticky; top: 20px; }
.happ-theme-preview-panel > p { color: var(--home-muted); margin-top: 15px; font-size: 13px; line-height: 1.4; }
.happ-theme-preview { height: calc(748px * var(--happ-phone-scale,1) + 24px); isolation: isolate; background: rgb(11, 13, 19); border-radius: 22px; position: relative; overflow: hidden; }
.happ-theme-preview__glow { background: radial-gradient(circle at 30% 40%, var(--happ-ellipse-1), transparent 35%), radial-gradient(circle at 70% 70%, var(--happ-ellipse-2), transparent 40%), radial-gradient(circle at 50% 8%, var(--happ-ellipse-3), transparent 28%); filter: blur(38px); opacity: 0.22; position: absolute; inset: 3%; }
.happ-theme-phone { z-index: 1; width: 358px; height: 748px; transform: translateX(-50%) scale(var(--happ-phone-scale,1)); transform-origin: center top; background: rgb(5, 5, 6); border: 2px solid rgb(52, 54, 62); border-radius: 42px; padding: 5px; position: absolute; top: 12px; left: 50%; box-shadow: rgba(0, 0, 0, 0.5) 0px 25px 45px; }
.happ-theme-phone svg { fill: none; }
.happ-theme-phone__screen { background: var(--happ-bg-1); height: 100%; color: var(--happ-row-title); isolation: isolate; border-radius: 35px; position: relative; overflow: hidden; }
.happ-theme-phone__screen::before { z-index: -1; background: linear-gradient(var(--happ-angle), var(--happ-bg-1), var(--happ-bg-2) 55%, var(--happ-bg-3)); opacity: var(--happ-intensity); content: ""; position: absolute; inset: 0px; }
.happ-theme-phone__status, .happ-theme-phone__top, .happ-theme-phone__quick-actions, .happ-theme-phone__subscription-head, .happ-theme-phone__subscription-info { justify-content: space-between; align-items: center; display: flex; }
.happ-theme-phone__status { color: var(--happ-row-title); padding: 14px 21px 0px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 600; }
.happ-theme-phone__status-icons { align-items: center; gap: 5px; display: inline-flex; }
.happ-theme-phone__signal { align-items: end; gap: 2px; height: 13px; display: inline-flex; }
.happ-theme-phone__signal i { background: currentcolor; border-radius: 1px 1px 0px 0px; width: 3px; }
.happ-theme-phone__signal i:first-child { height: 4px; }
.happ-theme-phone__signal i:nth-child(2) { height: 7px; }
.happ-theme-phone__signal i:nth-child(3) { height: 10px; }
.happ-theme-phone__signal i:nth-child(4) { height: 13px; }
.happ-theme-phone__network { letter-spacing: -0.03em; font-size: 11px; }
.happ-theme-phone__battery { background: currentcolor; border-radius: 5px; place-items: center; width: 25px; height: 14px; display: grid; position: relative; }
.happ-theme-phone__battery::after { content: ""; background: currentcolor; border-radius: 0px 2px 2px 0px; width: 2px; height: 6px; position: absolute; top: 4px; right: -3px; }
.happ-theme-phone__battery span { color: var(--happ-bg-1); font-size: 9px; font-weight: 700; line-height: 1; }
.happ-theme-phone__top { color: var(--happ-top-icon); padding: 31px 19px 0px; }
.happ-theme-phone__power-area { place-items: center; height: 232px; display: grid; position: relative; }
.happ-theme-phone__power-ring { border: 1px solid color-mix(in srgb, var(--happ-accent) 35%, transparent); border-radius: 50%; width: 204px; height: 204px; position: absolute; }
.happ-theme-phone__power { border: 13px solid color-mix(in srgb, var(--happ-accent) 49%, var(--happ-bg-1)); background: var(--happ-accent); width: 148px; height: 148px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--happ-accent) 35%, transparent); border-radius: 50%; flex-direction: column; justify-content: center; align-items: center; display: flex; }
.happ-theme-phone__power svg { color: var(--happ-power-icon); }
.happ-theme-phone__quick-actions { color: var(--happ-section-title); padding: 0px 20px 9px; font-size: 11px; }
.happ-theme-phone__quick-actions span:last-child { color: var(--happ-section-subtitle); }
.happ-theme-phone__subscription { background: var(--happ-info); color: var(--happ-info-text); border-radius: 15px 15px 0px 0px; margin: 0px 12px; overflow: hidden; }
.happ-theme-phone__subscription-head { background: var(--happ-sub-header); min-height: 52px; color: var(--happ-sub-button); gap: 8px; padding: 7px 12px; }
.happ-theme-phone__subscription-head > div { flex: 1 1 0%; gap: 2px; min-width: 0px; display: grid; }
.happ-theme-phone__subscription-head strong { color: var(--happ-info-text); text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 500; overflow: hidden; }
.happ-theme-phone__subscription-head small { color: var(--happ-info-text); opacity: 0.7; font-size: 10px; }
.happ-theme-phone__subscription-head > svg:not(:first-child) { color: var(--happ-options); flex: 0 0 auto; }
.happ-theme-phone__subscription-info { border-bottom: 1px solid color-mix(in srgb, var(--happ-info-text) 12%, transparent); min-height: 34px; color: var(--happ-info-text); gap: 10px; padding: 4px 12px; font-size: 9px; }
.happ-theme-phone__subscription-info > svg { flex: 0 0 auto; }
.happ-theme-phone__traffic { background: var(--happ-traffic); border-radius: 8px; flex: 1 1 0%; place-items: center; min-width: 0px; height: 14px; display: grid; }
.happ-theme-phone__subscription-note { color: var(--happ-info-text); text-align: center; padding: 7px 12px; font-size: 10px; line-height: 1.25; }
.happ-theme-phone__servers { margin: 0px 12px; }
.happ-theme-phone__server { border-top: 1px solid color-mix(in srgb, var(--happ-row-title) 9%, transparent); background: var(--happ-row); align-items: center; gap: 10px; min-height: 55px; padding: 7px 12px; display: flex; }
.happ-theme-phone__server.is-selected { background: var(--happ-row-active); position: relative; }
.happ-theme-phone__server.is-selected::before { background: var(--happ-accent); content: ""; border-radius: 3px; width: 3px; position: absolute; top: 5px; bottom: 5px; left: 0px; }
.happ-theme-phone__flag { flex: 0 0 auto; font-size: 22px; }
.happ-theme-phone__server > div { flex: 1 1 0%; gap: 2px; min-width: 0px; display: grid; }
.happ-theme-phone__server strong { color: var(--happ-row-title); text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; overflow: hidden; }
.happ-theme-phone__server small { color: var(--happ-row-subtitle); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; overflow: hidden; }
.happ-theme-phone__server svg { color: var(--happ-chevron); flex: 0 0 auto; }
.happ-theme-phone__home-indicator { background: var(--happ-row-title); opacity: 0.8; border-radius: 4px; width: 92px; height: 4px; margin: auto; position: absolute; bottom: 6px; left: 0px; right: 0px; }
@media (max-width: 900px) {
  .happ-theme-presets__grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .happ-theme-workbench { grid-template-columns: 1fr; }
  .happ-theme-preview-panel { position: static; }
  .happ-themes-help { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 650px) {
  .happ-themes-content { padding: 34px 18px 64px; }
  .happ-themes-hero { margin-bottom: 34px; }
  .happ-themes-hero h1 { font-size: 38px; }
  .happ-themes-hero p { font-size: 15px; }
  .happ-theme-editor { gap: 24px; }
  .happ-theme-section-heading { flex-direction: column; align-items: flex-start; gap: 8px; }
  .happ-theme-section-heading h2, .happ-theme-export h2 { font-size: 25px; }
  .happ-theme-section-heading p { text-align: left; }
  .happ-theme-presets__grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .happ-theme-preset { min-height: 102px; padding: 15px; }
  .happ-theme-preview-panel, .happ-theme-controls { border-radius: 22px; padding: 20px; }
  .happ-theme-color-grid, .happ-theme-selects { grid-template-columns: 1fr; }
  .happ-theme-export { border-radius: 22px; grid-template-columns: 1fr; padding: 22px; }
  .happ-theme-copy { width: 100%; }
  .happ-theme-code { grid-column: auto; }
}
.happ-theme-preview{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;width:100%;max-width:420px;margin:auto}.happ-theme-phone__screen svg{flex-shrink:0}.happ-theme-phone__screen strong{font-family:inherit}.happ-theme-preview-panel{background:transparent}.happ-theme-phone__screen{color:var(--happ-row-title)}