:root{--color-bg: #f5f5f7;--color-surface: #ffffff;--color-surface-hover: #fafafa;--color-border: #e5e5ea;--color-border-light: #f0f0f5;--color-text-primary: #1d1d1f;--color-text-secondary: #6e6e73;--color-text-tertiary: #aeaeb2;--color-accent: #0071e3;--color-accent-hover: #0077ed;--color-accent-light: #e8f4fd;--color-success: #34c759;--color-warning: #ff9f0a;--color-danger: #ff3b30;--color-purple: #af52de;--color-folder: #007aff;--color-folder-bg: linear-gradient(135deg, #e3f0ff 0%, #cde4ff 100%);--color-bluehouse: #5856d6;--color-bluehouse-bg: linear-gradient(135deg, #ededff 0%, #dcdcff 100%);--color-scheduler: #ff9500;--color-scheduler-bg: linear-gradient(135deg, #fff5e0 0%, #ffe8c0 100%);--color-prison: #ff3b30;--color-prison-bg: linear-gradient(135deg, #ffe5e3 0%, #ffd4d1 100%);--font-primary: "Inter", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-size-3xl: 2.5rem;--font-size-4xl: 3.5rem;--font-size-hero: 5rem;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 4px 12px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .04);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .04);--shadow-xl: 0 20px 50px rgba(0, 0, 0, .12), 0 8px 20px rgba(0, 0, 0, .06);--shadow-glow: 0 0 40px rgba(0, 113, 227, .15);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--transition-spring: .5s cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-primary);background-color:var(--color-bg);color:var(--color-text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;min-height:100vh}#app{min-height:100vh;position:relative}.screen{min-height:100vh;animation:screenFadeIn .6s ease-out}@keyframes screenFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.intro-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(180deg,#fff,#f5f5f7,#e8ecf1);position:relative;overflow:hidden}.intro-screen:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 40%,rgba(0,113,227,.04) 0%,transparent 50%),radial-gradient(circle at 70% 60%,rgba(88,86,214,.04) 0%,transparent 50%),radial-gradient(circle at 50% 50%,rgba(175,82,222,.03) 0%,transparent 50%);animation:bgFloat 20s ease-in-out infinite}@keyframes bgFloat{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(2%,-2%) rotate(1deg)}66%{transform:translate(-1%,1%) rotate(-.5deg)}}.intro-content{position:relative;z-index:1;text-align:center;padding:var(--space-xl)}.intro-globe{width:160px;height:160px;margin:0 auto var(--space-2xl);position:relative}.globe-sphere{width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#e3f0ff,#a8d4ff,#5ba3e6 60%,#2d7dd2);box-shadow:inset -20px -20px 40px #0000001a,inset 10px 10px 30px #ffffff4d,0 0 60px #0071e326;animation:globeRotate 8s linear infinite;position:relative;overflow:hidden}.globe-sphere:before{content:"";position:absolute;top:10%;left:15%;width:35%;height:30%;background:#228b224d;border-radius:40% 60% 50% 70%;filter:blur(3px)}.globe-sphere:after{content:"";position:absolute;bottom:20%;right:10%;width:25%;height:20%;background:#228b2240;border-radius:50% 40% 60%;filter:blur(3px)}@keyframes globeRotate{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}.globe-ring{position:absolute;top:50%;left:50%;width:200px;height:200px;border:2px solid rgba(0,113,227,.15);border-radius:50%;transform:translate(-50%,-50%) rotateX(60deg);animation:ringPulse 3s ease-in-out infinite}@keyframes ringPulse{0%,to{opacity:.3;transform:translate(-50%,-50%) rotateX(60deg) scale(1)}50%{opacity:.8;transform:translate(-50%,-50%) rotateX(60deg) scale(1.1)}}.intro-title{font-size:var(--font-size-hero);font-weight:900;letter-spacing:-.03em;line-height:1;margin-bottom:var(--space-md);background:linear-gradient(135deg,var(--color-text-primary) 0%,#4a4a4f 50%,var(--color-accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.intro-subtitle{font-size:var(--font-size-xl);font-weight:300;color:var(--color-text-secondary);margin-bottom:var(--space-3xl);letter-spacing:-.01em}.intro-enter-btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-2xl);background:var(--color-text-primary);color:#fff;border:none;border-radius:var(--radius-full);font-family:var(--font-primary);font-size:var(--font-size-lg);font-weight:600;cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden}.intro-enter-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .6s ease}.intro-enter-btn:hover{transform:scale(1.05);box-shadow:var(--shadow-xl)}.intro-enter-btn:hover:before{left:100%}.intro-enter-btn:active{transform:scale(.98)}.intro-enter-btn .btn-arrow{transition:transform var(--transition-fast)}.intro-enter-btn:hover .btn-arrow{transform:translate(4px)}.intro-particles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.particle{position:absolute;width:4px;height:4px;background:var(--color-accent);border-radius:50%;opacity:0;animation:particleFloat 6s ease-in-out infinite}@keyframes particleFloat{0%{opacity:0;transform:translateY(100vh) scale(0)}20%{opacity:.6}80%{opacity:.3}to{opacity:0;transform:translateY(-100px) scale(1)}}.role-screen{min-height:100vh;padding:var(--space-3xl) var(--space-xl);background:var(--color-bg)}.role-header{text-align:center;margin-bottom:var(--space-3xl)}.role-header h1{font-size:var(--font-size-3xl);font-weight:800;margin-bottom:var(--space-sm);letter-spacing:-.02em}.role-header p{font-size:var(--font-size-lg);color:var(--color-text-secondary);font-weight:300}.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-lg);max-width:1100px;margin:0 auto}.role-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl) var(--space-lg);text-align:center;cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden}.role-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--color-accent);transform:scaleX(0);transition:transform var(--transition-normal)}.role-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--color-accent)}.role-card:hover:before{transform:scaleX(1)}.role-card:active{transform:translateY(-2px)}.role-icon{font-size:3rem;margin-bottom:var(--space-md);display:block;transition:transform var(--transition-spring)}.role-card:hover .role-icon{transform:scale(1.15)}.role-name{font-size:var(--font-size-lg);font-weight:700;margin-bottom:var(--space-xs)}.role-desc{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.5}.role-card.selected{border-color:var(--color-accent);box-shadow:var(--shadow-glow);animation:roleSelected .6s ease-out}@keyframes roleSelected{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(.97)}to{transform:scale(1)}}.dashboard-screen{min-height:100vh;background:var(--color-bg)}.dashboard-topbar{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:var(--space-md) var(--space-xl);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffffd9}.topbar-brand{display:flex;align-items:center;gap:var(--space-sm)}.topbar-logo{width:32px;height:32px;background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-purple) 100%);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:var(--font-size-sm)}.topbar-title{font-size:var(--font-size-lg);font-weight:700;letter-spacing:-.02em}.topbar-user{display:flex;align-items:center;gap:var(--space-md)}.user-role-badge{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:var(--color-accent-light);color:var(--color-accent);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:600}.user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:var(--font-size-sm)}.dashboard-body{padding:var(--space-xl);max-width:1400px;margin:0 auto}.dashboard-welcome{margin-bottom:var(--space-2xl)}.dashboard-welcome h2{font-size:var(--font-size-2xl);font-weight:800;margin-bottom:var(--space-xs);letter-spacing:-.02em}.dashboard-welcome p{color:var(--color-text-secondary);font-size:var(--font-size-md)}.module-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}@media(max-width:768px){.module-grid{grid-template-columns:1fr}}.module-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--transition-normal);cursor:pointer;position:relative}.module-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.module-card:active{transform:translateY(-1px)}.module-card-header{padding:var(--space-lg) var(--space-xl);display:flex;align-items:center;gap:var(--space-md)}.module-icon-wrapper{width:52px;height:52px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0;transition:transform var(--transition-spring)}.module-card:hover .module-icon-wrapper{transform:scale(1.1) rotate(-3deg)}.module-card-header-text h3{font-size:var(--font-size-lg);font-weight:700;margin-bottom:2px}.module-card-header-text p{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.module-card-body{padding:0 var(--space-xl) var(--space-xl)}.module-card.folder .module-icon-wrapper{background:var(--color-folder-bg);color:var(--color-folder)}.module-card.folder:hover{border-color:var(--color-folder)}.module-card.bluehouse .module-icon-wrapper{background:var(--color-bluehouse-bg);color:var(--color-bluehouse)}.module-card.bluehouse:hover{border-color:var(--color-bluehouse)}.module-card.scheduler .module-icon-wrapper{background:var(--color-scheduler-bg);color:var(--color-scheduler)}.module-card.scheduler:hover{border-color:var(--color-scheduler)}.module-card.prison .module-icon-wrapper{background:var(--color-prison-bg);color:var(--color-prison)}.module-card.prison:hover{border-color:var(--color-prison)}.folder-list{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.folder-item{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:var(--color-bg);border-radius:var(--radius-sm);font-size:var(--font-size-sm);transition:all var(--transition-fast);border:1px solid transparent}.folder-item:hover{background:var(--color-folder-bg);border-color:#007aff33}.folder-item-icon{font-size:1rem}.news-list{display:flex;flex-direction:column;gap:var(--space-sm)}.news-item{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm);border-radius:var(--radius-sm);transition:background var(--transition-fast)}.news-item:hover{background:var(--color-bg)}.news-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0}.news-dot.urgent{background:var(--color-danger)}.news-dot.normal{background:var(--color-accent)}.news-dot.info{background:var(--color-success)}.news-text{font-size:var(--font-size-sm);line-height:1.5}.news-time{font-size:var(--font-size-xs);color:var(--color-text-tertiary);margin-top:2px}.schedule-list{display:flex;flex-direction:column;gap:var(--space-sm)}.schedule-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-bg);border-radius:var(--radius-sm);border-left:3px solid var(--color-scheduler);transition:all var(--transition-fast)}.schedule-item:hover{background:var(--color-scheduler-bg)}.schedule-time{font-size:var(--font-size-sm);font-weight:600;color:var(--color-scheduler);min-width:50px}.schedule-text{font-size:var(--font-size-sm)}.prison-status{display:flex;flex-direction:column;gap:var(--space-md)}.prison-meter{background:var(--color-bg);border-radius:var(--radius-full);height:10px;overflow:hidden}.prison-meter-fill{height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--color-success),var(--color-warning),var(--color-danger));transition:width var(--transition-slow)}.prison-rules{display:flex;flex-direction:column;gap:var(--space-xs)}.prison-rule{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-sm);padding:var(--space-xs) 0}.prison-rule-status{font-size:var(--font-size-xs);padding:2px 8px;border-radius:var(--radius-full);font-weight:600}.prison-rule-status.ok{background:#34c7591a;color:var(--color-success)}.prison-rule-status.warning{background:#ff9f0a1a;color:var(--color-warning)}.prison-rule-status.danger{background:#ff3b301a;color:var(--color-danger)}.module-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:200;display:flex;align-items:center;justify-content:center;animation:overlayIn .3s ease-out}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}.module-modal{background:var(--color-surface);border-radius:var(--radius-xl);width:90%;max-width:700px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:modalIn .4s var(--transition-spring)}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.module-modal-header{padding:var(--space-xl);border-bottom:1px solid var(--color-border-light);display:flex;align-items:center;justify-content:space-between}.module-modal-header h2{font-size:var(--font-size-xl);font-weight:700}.modal-close-btn{width:32px;height:32px;border:none;background:var(--color-bg);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-lg);color:var(--color-text-secondary);transition:all var(--transition-fast)}.modal-close-btn:hover{background:var(--color-border);color:var(--color-text-primary)}.module-modal-body{padding:var(--space-xl)}.topbar-center{display:flex;align-items:center;gap:var(--space-md)}.game-clock{display:flex;align-items:center;gap:var(--space-sm);background:var(--color-bg);padding:6px 16px;border-radius:var(--radius-full);font-weight:600}.clock-day{font-size:var(--font-size-xs);color:var(--color-text-tertiary);padding-right:var(--space-sm);border-right:1px solid var(--color-border)}.clock-time{font-size:var(--font-size-lg);font-weight:800;font-variant-numeric:tabular-nums;color:var(--color-text-primary);min-width:52px;text-align:center}.clock-period{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.clock-controls{display:flex;gap:4px}.clock-btn{width:32px;height:32px;border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-sm);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.clock-btn:hover{background:var(--color-bg);border-color:var(--color-accent)}.clock-btn.active{background:var(--color-accent-light);border-color:var(--color-accent)}.world-status-bar{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-sm) var(--space-xl);background:var(--color-surface);border-bottom:1px solid var(--color-border-light);overflow-x:auto}.status-item{display:flex;align-items:center;gap:var(--space-xs);white-space:nowrap}.status-label{font-size:var(--font-size-xs);color:var(--color-text-secondary);font-weight:500}.status-bar{width:60px;height:6px;background:var(--color-bg);border-radius:var(--radius-full);overflow:hidden}.status-fill{height:100%;border-radius:var(--radius-full);transition:width var(--transition-normal)}.status-fill.economy{background:linear-gradient(90deg,#ff9500,#34c759)}.status-fill.safety{background:linear-gradient(90deg,#ff3b30,#007aff)}.status-fill.approval{background:linear-gradient(90deg,#ff3b30,#5856d6)}.status-fill.health{background:linear-gradient(90deg,#ff3b30,#34c759)}.status-value{font-size:var(--font-size-xs);font-weight:700;min-width:20px;text-align:right;font-variant-numeric:tabular-nums}.event-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:250;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.event-modal-overlay.active{opacity:1}.event-modal{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-2xl);width:90%;max-width:520px;text-align:center;box-shadow:var(--shadow-xl);transform:scale(.9) translateY(20px);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.event-modal-overlay.active .event-modal{transform:scale(1) translateY(0)}.event-modal-badge{display:inline-block;padding:4px 14px;background:var(--color-bg);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-secondary);margin-bottom:var(--space-md)}.event-modal-title{font-size:var(--font-size-xl);font-weight:800;margin-bottom:var(--space-md);letter-spacing:-.02em}.event-modal-desc{font-size:var(--font-size-md);color:var(--color-text-secondary);line-height:1.7;margin-bottom:var(--space-2xl)}.event-modal-choices{display:flex;flex-direction:column;gap:var(--space-sm)}.event-choice-btn{display:flex;flex-direction:column;gap:4px;padding:var(--space-md) var(--space-lg);background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-align:left;font-family:var(--font-primary)}.event-choice-btn:hover{border-color:var(--color-accent);background:var(--color-accent-light);transform:translate(4px)}.event-choice-btn:active{transform:translate(2px)}.choice-text{font-size:var(--font-size-md);font-weight:600;color:var(--color-text-primary)}.choice-effects{font-size:var(--font-size-xs);color:var(--color-text-tertiary);display:flex;flex-wrap:wrap;gap:4px}@keyframes toastIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeUp{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-20px)}}.module-card.lab .module-icon-wrapper{background:linear-gradient(135deg,#af52de22,#5856d622)}.module-card.lab:hover{border-color:#af52de}.event-log-panel{margin-top:var(--space-2xl);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-xl)}.event-log-panel h3{font-size:var(--font-size-lg);font-weight:700;margin-bottom:var(--space-md)}.event-log-list{display:flex;flex-direction:column;gap:var(--space-sm);max-height:300px;overflow-y:auto}.event-log-empty{font-size:var(--font-size-sm);color:var(--color-text-tertiary);text-align:center;padding:var(--space-xl) 0}.event-log-item{padding:var(--space-sm) var(--space-md);background:var(--color-bg);border-radius:var(--radius-sm);border-left:3px solid var(--color-accent)}.event-log-title{font-size:var(--font-size-sm);font-weight:600}.event-log-action{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:2px}.login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(180deg,#fff,#f5f5f7,#e8ecf1);position:relative}.login-container{width:100%;max-width:420px;padding:var(--space-xl);animation:screenFadeIn .6s ease-out}.login-header{text-align:center;margin-bottom:var(--space-2xl)}.login-icon{font-size:4rem;margin-bottom:var(--space-md);animation:globeRotate 8s linear infinite;display:inline-block}.login-title{font-size:var(--font-size-3xl);font-weight:900;letter-spacing:-.03em;background:linear-gradient(135deg,var(--color-text-primary) 0%,var(--color-accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-xs)}.login-subtitle{font-size:var(--font-size-md);color:var(--color-text-secondary);font-weight:300}.login-form{display:flex;flex-direction:column;gap:var(--space-lg)}.login-field{display:flex;flex-direction:column;gap:var(--space-xs)}.login-field label{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary)}.login-field input{width:100%;padding:14px 16px;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-primary);font-size:var(--font-size-md);color:var(--color-text-primary);transition:all var(--transition-fast);outline:none}.login-field input:focus{border-color:var(--color-accent);box-shadow:0 0 0 4px #0071e31a}.login-field input::placeholder{color:var(--color-text-tertiary)}.login-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:16px;background:var(--color-text-primary);color:#fff;border:none;border-radius:var(--radius-md);font-family:var(--font-primary);font-size:var(--font-size-lg);font-weight:600;cursor:pointer;transition:all var(--transition-normal);margin-top:var(--space-sm)}.login-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.login-btn:active{transform:translateY(0)}.login-btn .btn-arrow{transition:transform var(--transition-fast)}.login-btn:hover .btn-arrow{transform:translate(4px)}.login-hint{text-align:center;font-size:var(--font-size-xs);color:var(--color-text-tertiary);margin-top:calc(-1 * var(--space-sm))}.login-message{text-align:center;font-size:var(--font-size-sm);font-weight:600;padding:var(--space-md);border-radius:var(--radius-md);margin-top:var(--space-lg);opacity:0;transform:translateY(10px);transition:all var(--transition-normal)}.login-message.show{opacity:1;transform:translateY(0)}.login-message.new{background:var(--color-accent-light);color:var(--color-accent)}.login-message.returning{background:#34c7591a;color:var(--color-success)}.logout-btn{width:36px;height:36px;border:1px solid var(--color-border);background:var(--color-surface);border-radius:50%;cursor:pointer;font-size:var(--font-size-md);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);color:var(--color-text-secondary)}.logout-btn:hover{background:#ff3b3014;border-color:var(--color-danger);color:var(--color-danger)}@media(max-width:640px){.intro-title{font-size:var(--font-size-3xl)}.intro-subtitle{font-size:var(--font-size-md)}.role-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-md)}.dashboard-topbar{padding:var(--space-sm) var(--space-md)}.dashboard-body{padding:var(--space-md)}.login-container{padding:var(--space-lg)}}