:root{--spacing-xs: 8px;--spacing-sm: 16px;--spacing-md: 24px;--spacing-lg: 32px;--spacing-xl: 48px;--spacing: var(--spacing-sm);--font-display: "Dosis Variable", sans-serif;--font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-size-3xl: 3rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-bold: 700;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 16px;--border-radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .2);--z-base: 0;--z-dropdown: 10;--z-overlay: 20;--z-modal: 30;--z-notification: 40;--color-primary: var(--theme-primary, #004bb6);--color-primary-hover: var(--theme-primary-hover, #003a8c);--background-color: var(--theme-background-color, #004bb6);--background-image: var(--theme-background-image);--color-surface-1: var(--theme-surface-1, #ffffff);--color-surface-2: var(--theme-surface-2, #f8f9fa);--color-surface-3: var(--theme-surface-3, #f1f3f5);--color-text-primary: var(--theme-text-primary, #000000);--color-text-secondary: var(--theme-text-secondary, #76777a);--color-text-on-primary: var(--theme-text-on-primary, #ffffff);--color-accent-purple: var(--theme-accent-purple, #bd77ce);--color-accent-orange: var(--theme-accent-orange, #ff8136);--color-accent-green: var(--theme-accent-green, #2ad03d);--color-accent-yellow: var(--theme-accent-yellow, #ffbb4e);--color-accent-cyan: var(--theme-accent-cyan, #3cb4e6);--color-error: var(--theme-error, #d32f2f);--color-border: var(--theme-border, #e6e6e6);--color-focus: var(--theme-focus, #004bb6)}*,*:before,*:after{box-sizing:border-box}*{margin:0}@media (prefers-reduced-motion: no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#app{isolation:isolate}@font-face{font-family:Dosis Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/_build/assets/dosis-vietnamese-wght-normal-DD5t4dbF.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Dosis Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/_build/assets/dosis-latin-ext-wght-normal-CWB30aBi.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Dosis Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/_build/assets/dosis-latin-wght-normal-CvOn4Vwj.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}body{font-family:var(--font-body)}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--color-primary)}.theme-default{--theme-primary: #004bb6;--theme-primary-hover: #003a8c;--theme-primary-light: #1a5fc4;--theme-background-color: var(--theme-primary);--theme-background-image: url(/_build/assets/steam-shapes-B7mW9TVF.svg);--theme-surface-1: #ffffff;--theme-surface-2: #f8f9fa;--theme-surface-3: #f1f3f5;--theme-text-primary: #000000;--theme-text-secondary: #76777a;--theme-text-on-primary: #ffffff;--theme-accent-purple: #bd77ce;--theme-accent-orange: #ff8136;--theme-accent-green: #2ad03d;--theme-accent-yellow: #ffbb4e;--theme-accent-cyan: #3cb4e6;--theme-border: #e6e6e6;--theme-focus: #004bb6;--theme-success: #2ad03d;--theme-warning: #ffbb4e;--theme-error: #d32f2f;--theme-info: #3cb4e6}main#display{--shadow-card: 0 0 10px 5px rgb(0 0 0 / .2);padding:0 var(--spacing-lg);display:grid;grid-template-rows:10vh auto;grid-template-areas:"header" "content";gap:var(--spacing-xl);height:100vh;overflow:hidden;background-color:var(--background-color);background-image:var(--background-image);background-size:80vw;&:has(footer){grid-template-rows:10vh auto 12vh;grid-template-areas:"header" "content" "footer"}header{--radius: var(--spacing-lg);grid-area:header;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing) var(--radius);background-color:var(--color-surface-1);color:var(--color-text-primary);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-card);svg{height:80%}}#content-area{grid-area:content;display:flex;justify-content:space-around;align-items:center;min-height:0;min-width:0;gap:var(--spacing-lg)}#content-wrapper{--radius: var(--spacing-xl);--padding: var(--spacing-md);border-radius:var(--radius);padding:var(--padding);box-shadow:var(--shadow-card);background-color:var(--color-surface-2);aspect-ratio:16 / 9.25;flex-grow:1;max-height:100%;overflow:hidden;#content{width:100%;height:100%;border-radius:calc(var(--radius) - calc(var(--padding) / 2));pointer-events:none;&.demo{background-color:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-3xl)}}}aside{--radius: var(--spacing-lg);display:flex;width:25vw;flex-direction:column;justify-content:stretch;gap:var(--spacing-md);.card{background-color:var(--color-surface-1);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:var(--spacing)}}footer{--radius: var(--spacing-lg);grid-area:footer;background-color:var(--color-surface-3);color:var(--color-text-secondary);border-radius:var(--radius) var(--radius) 0 0;box-shadow:var(--shadow-card)}}main#not-found{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:var(--background-color);background-image:var(--background-image);background-size:110vw;background-position:center;>div{text-align:center;padding:var(--spacing-xl);background-color:var(--color-surface-1);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);max-width:500px;h1{font-size:clamp(4rem,15vw,8rem);font-weight:var(--font-weight-bold);color:var(--color-primary);margin:0;line-height:var(--line-height-tight)}.message{font-size:var(--font-size-2xl);font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin:var(--spacing-sm) 0}.description{font-size:var(--font-size-base);color:var(--color-text-secondary);margin:var(--spacing-md) 0;line-height:var(--line-height-normal)}}}main#login{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:var(--background-color);background-image:var(--background-image);background-size:110vw;background-position:center;@media (orientation: portrait){background-size:110vh}>div{text-align:center;padding:var(--spacing-xl);background-color:var(--color-surface-1);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);max-width:500px;min-width:300px;h1{font-size:clamp(2rem,6vw,3rem);font-weight:var(--font-weight-bold);color:var(--color-primary);margin-bottom:var(--spacing-xl);line-height:var(--line-height-tight)}.login-button{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:#fff;background-color:var(--color-primary);border:1px solid var(--color-primary);border-radius:var(--border-radius-md);cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm);&:active{transform:translateY(0);box-shadow:var(--shadow-sm);filter:brightness(.95)}svg{flex-shrink:0}}}}#admin{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background-color:var(--background-color);background-image:var(--background-image);background-size:110vw;background-position:center;gap:var(--spacing);padding:var(--spacing-xl);nav,main{max-width:50vw;width:100%;background-color:var(--color-surface-1);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg)}.btn{--bg: var(--color-primary);background-color:var(--bg);color:var(--color-text-on-primary);padding:var(--spacing-xs) var(--spacing-sm);border:none;border-radius:var(--border-radius-md);font-weight:700;cursor:pointer;transition:background-color .2s ease-in-out;&:hover:not(:disabled){background-color:color-mix(in srgb,var(--bg),#000 25%)}&:active:not(:disabled){background-color:color-mix(in srgb,var(--bg),#000 50%)}&.error{--bg: var(--color-error)}&:disabled{opacity:.5;cursor:not-allowed}}nav{padding:var(--spacing);display:flex;gap:var(--spacing);a{text-decoration:none;background-color:var(--color-primary);color:var(--color-text-on-primary);padding:var(--spacing-xs) var(--spacing-sm);flex:1;text-align:center;border-radius:calc(var(--border-radius-lg) - calc(var(--spacing) / 2));font-weight:700;transition:all .2s ease-in-out;&[aria-current=page]{background-color:var(--color-primary-hover)}}}main{padding:var(--spacing-sm) var(--spacing-md)}.field{display:flex;flex-direction:column;gap:.5rem}.field label,.fieldLabel{font-size:.9rem;font-weight:600;color:#333}.field input,.field textarea{width:100%;padding:.625rem;font-family:inherit;font-size:.95rem;border:1px solid #ddd;border-radius:4px}.field input:focus,.field textarea:focus{outline:none;border-color:#007bff}.field small{font-size:.85rem;color:#666;margin-top:-.25rem}@media screen and (max-width: 768px){padding:var(--spacing);nav,main{max-width:100%}}@media screen and (max-width: 1200px){nav,main{max-width:75vw}}}