/* Hallmark · shape: app screen · genre: modern-minimal · theme: brand · redesign: full · nav: existing · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: R, inherited illustration retained; login comes first on narrow screens */
:root:root{--bg:var(--hm-bg);--surface:var(--hm-surface);--soft:var(--hm-soft);--ink:var(--hm-ink);--muted:var(--hm-muted);--line:var(--hm-line);--action:var(--hm-accent);--selected:var(--hm-selected);--glass:var(--hm-surface);--glass-edge:var(--hm-line);--shadow:none;font-family:var(--hm-font);background:var(--hm-bg);color:var(--hm-ink)}
html,body{overflow-x:clip}
:root:root body.login-visible{background:var(--hm-bg);color:var(--hm-ink)}
:root body.login-visible .media-login{max-width:1440px;padding:var(--space-lg) var(--space-xl)}
:root body.login-visible .media-login-header{padding-bottom:var(--space-lg);border-bottom:1px solid var(--hm-line)}
:root body.login-visible .media-brand{color:var(--hm-ink);text-decoration:none}
:root body.login-visible .media-brand img{background:var(--hm-surface)}
:root body.login-visible .media-login-grid{gap:var(--space-2xl);padding:var(--space-xl) 0}
:root body.login-visible .creative-intro h1{color:var(--hm-ink);font-size:2.25rem;line-height:1.4;letter-spacing:0;text-wrap:balance;overflow-wrap:break-word;min-width:0}
:root body.login-visible .media-login-form.login{background:var(--hm-surface);border:1px solid var(--hm-line);border-radius:var(--hm-radius);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:var(--space-xl);min-width:0}
:root body.login-visible .media-login-form :is(h1,h2,h3){color:var(--hm-ink);font-family:var(--hm-font);letter-spacing:0;text-wrap:balance;overflow-wrap:break-word;min-width:0}
:root body.login-visible .media-login-form label{color:var(--hm-ink);font-size:.875rem;gap:var(--space-xs)}
:root body.login-visible .media-login-form form{gap:var(--space-md)}
:root body.login-visible .media-login-form :is(input,select){background:var(--hm-surface);color:var(--hm-ink);border:1px solid var(--hm-control);border-radius:var(--hm-radius-sm);min-height:48px;box-shadow:none;caret-color:var(--hm-accent);transition:border-color 150ms ease}
:root body.login-visible .media-login-form input::placeholder{color:var(--hm-muted);opacity:1}
:root body.login-visible .media-login-form input:hover{border-color:var(--hm-accent)}
:root body.login-visible .media-login-form button.primary{color:var(--hm-on-accent);background:var(--hm-accent);border-color:var(--hm-accent);border-radius:var(--hm-radius-sm);box-shadow:none;min-height:48px;transition:background-color 150ms ease,transform 150ms ease}
:root body.login-visible .media-login-form button.primary:hover{background:var(--hm-accent-hover);border-color:var(--hm-accent-hover)}
:root body.login-visible .media-login-form button.primary:active{transform:translateY(1px)}
:root body.login-visible .media-login-form button.primary:disabled{background:var(--hm-soft);border-color:var(--hm-line);color:var(--hm-muted);cursor:not-allowed;opacity:1;transform:none}
:root body.login-visible .media-login-form a,:root body.login-visible .media-login-form .password-toggle{color:var(--hm-accent)}
:root body.login-visible .media-login-form .password-toggle{min-height:44px;padding:var(--space-xs) 0;margin:calc(-1 * var(--space-sm)) 0 0 auto;font-size:.8125rem;background:transparent;border-color:transparent}
:root body.login-visible .media-login-form .password-toggle:hover{color:var(--hm-accent-hover);text-decoration:underline;text-underline-offset:3px}
:root body.login-visible .media-login-form .password-toggle:active{color:var(--hm-ink)}
:root body.login-visible :is(input,select,button,a):focus-visible{outline:2px solid var(--hm-focus);outline-offset:3px}
:root body.login-visible :is(.muted,.media-login-footer,.media-brand small,.login-help,.platform-names){color:var(--hm-muted)}
:root body.login-visible .media-login-form .login-form-wrap>p.muted{margin:var(--space-sm) 0 var(--space-lg)}
:root body.login-visible .media-login-form .login-help{border-color:var(--hm-line);font-size:.75rem;padding-top:var(--space-md)}
:root body.login-visible .media-login-form .login-form-wrap>p.login-help{margin-bottom:0}
:root body.login-visible .media-login-form #message:empty{min-height:0;margin:0}
:root body.login-visible .media-login-footer{border-color:var(--hm-line);font-size:.75rem;line-height:1.7}
/* Keep the existing four-stage illustration and timing; recolor its surfaces without altering its geometry. */
:root body.login-visible :is(.stage-aura,.stage-grid){background:none;mask-image:none}
:root body.login-visible :is(.topic-paper,.mini-article,.mini-image,.chart-window,.assembly-frame){background:var(--hm-surface);border-color:var(--hm-line);box-shadow:none;color:var(--hm-accent)}
:root body.login-visible :is(.ai-core,.mini-video,.publish-core){background:var(--hm-accent);border-color:var(--hm-accent);color:var(--hm-on-accent);box-shadow:none}
:root body.login-visible :is(.topic-satellite,.paper-icon,.stat-orbit,.publish-destination){background:var(--hm-selected);border-color:var(--hm-line);color:var(--hm-accent);box-shadow:none}
:root body.login-visible .publish-destination span{color:var(--hm-ink)}
:root body.login-visible :is(.topic-signal,.video-orbit,.video-orbit i){border-color:var(--hm-control)}
:root body.login-visible .mini-play{background:var(--hm-surface);border-color:var(--hm-line);color:var(--hm-accent)}
:root body.login-visible :is(.paper-lines i,.mini-lines i,.mini-image .mini-lines i,.publish-route,.chart-guides i){background:var(--hm-line)}
:root body.login-visible :is(.video-lines i,.publish-route:after,.chart-columns span,.chart-columns span:nth-child(2n),.chart-columns span:nth-child(3n),.chart-toolbar i,.assembly-frame>span){background:var(--hm-accent)}
:root body.login-visible .video-lines i{background:var(--hm-on-accent)}
:root body.login-visible :is(.article-art,.image-landscape){background:var(--hm-soft)}
:root body.login-visible :is(.image-landscape i,.image-landscape span){background:var(--hm-control)}
:root body.login-visible :is(.paper-check,.make-spark,.chart-toolbar svg){color:var(--hm-accent)}
:root body.login-visible .chart-toolbar{border-color:var(--hm-line)}
:root body.login-visible .flow-options:before{background:var(--hm-line)}
:root body.login-visible .flow-options .flow-label{color:var(--hm-muted)}
:root body.login-visible .flow-options .flow-label:is([data-state=active],[data-state=done]){color:var(--hm-ink)}
:root body.login-visible .flow-options .flow-label .flow-node{background:var(--hm-soft);border-color:var(--hm-line);color:var(--hm-muted);border-radius:var(--hm-radius)}
:root body.login-visible .flow-options .flow-label:is([data-state=active],[data-state=done]) .flow-node{background:var(--hm-selected);border-color:var(--hm-control);color:var(--hm-accent)}
@media(max-width:1100px){:root body.login-visible .media-login-grid{gap:var(--space-xl)}:root body.login-visible .media-login-form.login{padding:var(--space-lg)}}
@media(max-width:850px){:root body.login-visible .media-login{padding:var(--space-lg)}:root body.login-visible .media-login-grid{display:flex;flex-direction:column;align-items:stretch;max-width:560px;gap:var(--space-xl);padding:var(--space-lg) 0}:root body.login-visible .media-login-form.login{order:0;width:100%}:root body.login-visible .media-login-story{order:1;width:100%;padding-top:var(--space-lg);border-top:1px solid var(--hm-line)}:root body.login-visible .creative-intro h1{font-size:1.75rem;text-align:center}:root body.login-visible .creative-intro h1 br{display:none}:root body.login-visible .creative-stage{height:245px;max-height:none}:root body.login-visible .media-login-footer{justify-content:center}}
@media(max-width:600px){:root body.login-visible .media-login{padding:var(--space-md)}:root body.login-visible .media-login-header{padding-bottom:var(--space-md)}:root body.login-visible .media-login-grid{gap:var(--space-lg);padding:var(--space-lg) 0}:root body.login-visible .media-login-form.login{padding:var(--space-lg)}:root body.login-visible .media-login-form h2{font-size:1.5rem}:root body.login-visible .media-login-form input{font-size:1rem}:root body.login-visible .creative-intro h1{font-size:1.5rem}:root body.login-visible .creative-stage{margin:var(--space-xs) calc(-1 * var(--space-xs)) 0}:root body.login-visible .media-brand small{font-size:.75rem}:root body.login-visible .platform-names{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){:root body.login-visible *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

:root:not([data-theme=dark]) body.login-visible .media-login-form.login{box-shadow:var(--hm-card-shadow);border-color:var(--hm-rule-strong)}
:root:not([data-theme=dark]) body.login-visible .media-login-form button.primary{box-shadow:var(--hm-key-primary-shadow);border-color:var(--hm-edge)}
:root:not([data-theme=dark]) body.login-visible .media-login-form button.primary:active{box-shadow:var(--hm-key-pressed)}
:root:not([data-theme=dark]) body.login-visible .media-login-form button.primary:disabled{box-shadow:none;border-color:var(--hm-line)}

:root body.login-visible .media-login-form :is(input,select,button){font-family:var(--hm-font);font-size:var(--hm-text-md);line-height:1.5}
:root body.login-visible .media-login-form button{font-weight:var(--hm-weight-label)}
:root body.login-visible .media-login-form :is(h2,h3){font-size:var(--hm-title);font-weight:var(--hm-weight-label);line-height:var(--hm-line-heading)}
