/* KES shell for the existing Mika QR generator. QR behavior remains in app-demo.js. */
:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;--ink:#171926;--muted:#656b7c;--line:#e8e9ef;--scarlet:#c51f37;--scarlet-dark:#8f172b;--shadow:0 22px 60px rgba(36,39,67,.075);background:#f5f6f9}
.app-body{background:#f5f6f9;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif}
.app-body h1,.app-body h2,.app-body h3,.app-brand,.mobile-brand,.preview-card-head,.preview-card-foot,.sidebar-kes{font-family:inherit!important}
.app-layout{grid-template-columns:86px minmax(0,1fr);min-height:100dvh;gap:0 10px;padding:10px 12px 10px 10px}
.app-sidebar{width:76px;height:calc(100dvh - 20px);top:10px;padding:14px 7px 18px;background:#fff;color:#171926;border:1px solid #e6e8ee;border-radius:25px;box-shadow:var(--shadow);align-items:center;gap:25px}
.app-brand{margin:0;display:flex;flex-direction:column;gap:0;font-size:0}.app-brand>span:last-child{display:none}.app-brand-mark{width:45px;height:45px;border-radius:15px;font-size:22px;background:linear-gradient(145deg,#ef4b62,#a31631);color:white;box-shadow:0 8px 22px #ba233444}.app-brand-mark span{font-size:8px;right:7px;top:4px}.sidebar-caption,.sidebar-bottom{display:none}
.app-nav{width:100%;gap:6px}.app-nav button{height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:16px;color:#74798b;font-size:9px;padding:4px 2px;text-align:center}.app-nav button.active,.app-nav button:hover{background:#f9f9fb;color:#111522}.app-nav button.active:after{content:"";position:absolute;right:-7px;width:3px;height:20px;background:var(--scarlet);border-radius:3px}.app-nav button{position:relative}.nav-icon{font-size:20px;width:auto;line-height:1}.nav-count{display:none}
.app-content{min-width:0;background:#fff;border:1px solid #e6e8ee;border-radius:29px;box-shadow:var(--shadow);overflow:hidden}.app-top{position:sticky;top:10px;z-index:20;margin:0 0 8px;height:72px;padding:0 26px;background:#ffffffed;border-bottom:1px solid #e8e9ef;backdrop-filter:blur(15px)}.mobile-brand{display:block!important;font-size:25px;color:#171926;font-weight:800;letter-spacing:-.06em}.mobile-brand span{color:var(--scarlet);font-size:18px}.app-crumb{margin-right:auto;margin-left:35px;font-size:10px;color:#9da1ac}.app-crumb a{color:#555b6b}.app-crumb strong{color:var(--scarlet)}.top-actions .demo-pill{background:#fff2f4;color:var(--scarlet)}.profile-btn{background:#fff2f4;color:var(--scarlet);border:1px solid #f8d7de}.icon-btn{color:var(--scarlet)}
.app-view{width:min(100% - 60px,1220px);padding-top:28px}.app-title-row h1{font-weight:550;letter-spacing:-.06em}.app-title-row h1 em{font-weight:550}.app-title-row>div>p:last-child{color:#6d7280}.app-kicker{letter-spacing:.17em}.app-panel,.library-card,.metric-grid article,.account-card,.account-info article{border-color:#e8e9ef;box-shadow:none}.preview-stage{background:radial-gradient(circle,#fff 0,#faf6f8 65%,#f8eff2)}.preview-card{transform:rotate(1deg)}.app-primary{border-radius:99px}.mode-switch button.active{background:#171926;border-color:#171926}.insight-banner{background:linear-gradient(135deg,#7a1227,#c51f37)}.app-footer{background:#fff;border-color:#e8e9ef;color:#9a9eaa}.app-footer a{font-weight:800}
@media(max-width:760px){.app-layout{display:block;padding:6px}.app-sidebar{display:none}.app-content{border-radius:21px;min-height:calc(100dvh - 12px)}.app-top{top:6px;height:61px;padding:0 16px;border-radius:20px 20px 0 0}.mobile-brand{font-size:22px}.app-crumb{display:none}.app-view{width:min(100% - 30px,650px);padding:25px 0 112px}.mobile-nav{background:#fffefef5;border-color:#e7e8ed;backdrop-filter:blur(18px)}.mobile-nav button.active{color:var(--scarlet)}.app-title-row h1{font-size:clamp(35px,9vw,48px)}.app-footer{display:none}.preview-column{position:static}}

/* QR workspace: use the available canvas and keep every theme surface legible. */
.app-body{--app-surface:#fff;--app-soft:#f5f6f9;--app-field:#fff;--app-border:#e5e7ef;--app-muted:#5f6677;--app-accent:#b91732}
.app-layout{width:100%;grid-template-columns:86px minmax(0,1fr);gap:10px;padding:10px;overflow-x:clip}
.app-content{min-width:0;min-height:calc(100dvh - 20px)}
.app-view{width:calc(100% - clamp(36px,4vw,104px));max-width:none;padding-top:clamp(20px,2.4vw,36px)}
.app-title-row{margin-bottom:clamp(15px,2vw,25px)}
.app-title-row h1{font-size:clamp(34px,3.1vw,62px)}
.title-symbol{font-size:clamp(54px,5vw,90px)}
.app-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(12px,1.3vw,24px)}
.preview-column,.creator-column,.app-panel{min-width:0}
.preview-column{top:92px}
.preview-stage{min-height:clamp(330px,38vh,520px);margin:14px 0;padding:clamp(15px,2vw,32px)}
.preview-card{width:clamp(260px,23vw,370px);transform:none;transition:transform .2s ease,box-shadow .2s ease}
.preview-card:hover{transform:translateY(-3px)}
.qr-output{height:clamp(220px,24vw,305px)}
.preview-actions button,.icon-btn,.profile-btn{min-height:44px}
.icon-btn,.profile-btn{width:44px;height:44px}
.form-field input,.form-field select,.form-field textarea{min-height:48px;font-size:14px}
.app-primary{min-height:48px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.app-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 24px rgba(197,31,55,.23)}
.app-body.dark{--ink:#f6f1f5;--muted:#c8bfca;--line:#5b5260;--scarlet:#ff526d;--scarlet-dark:#d82e4a;--app-surface:#2b2630;--app-soft:#211d26;--app-field:#39323e;--app-border:#63596a;--app-muted:#c8bfca;--app-accent:#ff667f;background:#191720;color:var(--ink);color-scheme:dark}
.app-body.dark .app-layout{background:#191720}
.app-body.dark .app-sidebar,.app-body.dark .app-content,.app-body.dark .app-top,.app-body.dark .mobile-nav{background:#211d26;color:var(--ink);border-color:var(--app-border)}
.app-body.dark .app-panel,.app-body.dark .library-card,.app-body.dark .metric-grid article,.app-body.dark .account-card,.app-body.dark .account-info article,.app-body.dark .search-field{background:var(--app-surface);border-color:var(--app-border);color:var(--ink)}
.app-body.dark .app-view{background:transparent}
.app-body.dark .mobile-brand,.app-body.dark .app-crumb,.app-body.dark .app-crumb a,.app-body.dark .app-nav button.active,.app-body.dark .panel-top h2,.app-body.dark .library-card h3,.app-body.dark .library-empty h3{color:var(--ink)}
.app-body.dark .app-nav button{color:#c4bdc9}.app-body.dark .app-nav button.active,.app-body.dark .app-nav button:hover{background:#38313e}
.app-body.dark .app-kicker,.app-body.dark .app-crumb strong,.app-body.dark .design-details summary,.app-body.dark .preview-card-head,.app-body.dark .preview-badge{color:var(--app-accent)}
.app-body.dark .app-title-row>div>p:last-child,.app-body.dark .panel-top p,.app-body.dark .form-field,.app-body.dark .form-help,.app-body.dark .mode-info,.app-body.dark .preview-note p,.app-body.dark .library-card small,.app-body.dark .library-card p,.app-body.dark .metric-grid span,.app-body.dark .metric-grid small,.app-body.dark .account-card p,.app-body.dark .account-info p{color:var(--app-muted)}
.app-body.dark .form-field input,.app-body.dark .form-field select,.app-body.dark .form-field textarea,.app-body.dark .search-field input,.app-body.dark .library-toolbar button,.app-body.dark .import-button,.app-body.dark .preview-actions button,.app-body.dark .mode-switch button:not(.active){background:var(--app-field);color:var(--ink);border-color:var(--app-border)}
.app-body.dark input::placeholder,.app-body.dark textarea::placeholder{color:#b7afbc;opacity:1}
.app-body.dark .design-details,.app-body.dark .design-content,.app-body.dark .preview-note,.app-body.dark .library-card p{border-color:var(--app-border)}
.app-body.dark .preset-row button,.app-body.dark .library-card-actions button{background:#49313c;color:#ffd9df;border-color:#825562}
.app-body.dark .preview-stage{background:radial-gradient(circle at 50% 35%,#47303d,#352631 72%,#30232d)}
.app-body.dark .preview-card{background:#fff;color:#241720}
.app-body.dark .qr-output{background:#fffaf8;color:#241720}
.app-body.dark .qr-placeholder small,.app-body.dark .preview-card-foot small{color:#5f5360}
.app-body.dark .preview-card-foot strong{color:#241720}
.app-body.dark .mode-switch button.active{background:#f34a66;border-color:#f34a66;color:#1b1420}
.app-body.dark .app-primary{background:#e53d5c;color:#fff}
.app-body.dark .app-primary:hover:not(:disabled){background:#ff5270}
.app-body.dark .app-footer{background:#211d26;border-color:var(--app-border);color:var(--app-muted)}
.app-body.dark .demo-pill,.app-body.dark .profile-btn,.app-body.dark .icon-btn{background:#49313c;color:#ffd7de;border-color:#825562}
.app-body.dark .library-empty{background:#2b2630;border-color:var(--app-border)}
.app-body.dark .account-status{background:#49313c;color:#ffd7de}
.app-body.dark .toast{background:#f6f1f5;color:#211d26}
@media(max-width:1100px){.app-view{width:calc(100% - 36px)}.app-grid{grid-template-columns:1fr}.preview-column{position:static}.preview-panel{display:block}.preview-card{width:min(100%,330px)}}
@media(max-width:760px){.app-layout{display:block;padding:6px}.app-content{min-height:calc(100dvh - 12px)}.app-view{width:calc(100% - 28px);padding:20px 0 calc(94px + env(safe-area-inset-bottom))}.app-title-row{margin-bottom:16px}.app-title-row h1{font-size:clamp(31px,8vw,42px)}.app-title-row>div>p:last-child{line-height:1.45}.title-symbol{display:none}.app-grid{gap:12px}.mode-panel,.editor-panel,.preview-panel{padding:16px}.panel-top{margin-bottom:16px}.preview-stage{min-height:310px;padding:14px}.preview-card{width:min(100%,280px)}.qr-output{height:210px}.mobile-nav button{min-height:58px}.preview-actions button{min-height:44px}.app-body.dark .app-top{background:#211d26}.app-body.dark .mobile-nav{background:#211d26}}
@media(max-width:420px){.app-top{padding-inline:12px}.app-view{width:calc(100% - 20px)}.mode-switch{gap:7px}.mode-switch button{min-height:58px}.preview-heading{align-items:flex-start}.preview-badge{max-width:125px;text-align:right;line-height:1.3}.form-grid{gap:12px}.app-primary{font-size:13px}}
@media(max-height:720px) and (min-width:1101px){.app-view{padding-top:18px}.app-title-row h1{font-size:clamp(32px,2.6vw,48px)}.app-title-row{margin-bottom:16px}.preview-stage{min-height:300px}.qr-output{height:205px}}
@media(prefers-reduced-motion:reduce){.preview-card,.app-primary{transition:none}.app-primary:hover:not(:disabled),.preview-card:hover{transform:none}}