.app-body{background:#f8f3f1;min-height:100vh;color:var(--ink)}.app-layout{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}.app-sidebar{background:#2a1a21;color:white;padding:27px 16px 23px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.app-brand{display:flex;gap:10px;align-items:center;margin:0 8px 55px;font-family:Outfit,sans-serif;font-size:20px;font-weight:900;line-height:1}.app-brand b{font-weight:500}.app-brand small{display:block;font-family:"DM Sans",sans-serif;font-size:8px;letter-spacing:.16em;color:#d7bdc4;margin-top:5px;font-weight:700}.app-brand-mark{position:relative;width:39px;height:39px;display:grid;place-items:center;background:var(--scarlet);border-radius:12px;font-size:23px}.app-brand-mark span{position:absolute;right:-5px;top:-6px;font-size:12px}.sidebar-caption{color:#8e7880;font-size:9px;letter-spacing:.18em;font-weight:800;padding:0 17px;margin-bottom:12px}.app-nav{display:grid;gap:5px}.app-nav button{border:0;text-align:left;background:transparent;color:#bfaeb4;font-weight:700;font-size:12px;display:flex;align-items:center;gap:14px;border-radius:13px;padding:11px 12px;width:100%}.app-nav button.active,.app-nav button:hover{background:var(--scarlet);color:white}.nav-icon{font-size:20px;font-weight:400;display:grid;place-items:center;width:22px}.nav-count{margin-left:auto;background:#62434e;color:white;border-radius:100px;padding:2px 7px;font-size:10px}.app-nav button.active .nav-count{background:#e65e72}.sidebar-bottom{margin-top:auto;background:#37242d;border:1px solid #523843;border-radius:18px;padding:16px}.sidebar-kes{font-family:Outfit,sans-serif;font-weight:900;font-size:36px;line-height:1}.sidebar-kes span{color:var(--scarlet-bright);font-size:24px}.sidebar-kes small{display:block;font-family:"DM Sans",sans-serif;font-size:8px;letter-spacing:.15em;color:#d3bfc6;margin-top:8px}.sidebar-bottom p{font-size:11px;color:#bdaeb5;line-height:1.5;margin:15px 0}.sidebar-bottom a{font-size:11px;font-weight:800;color:#ff9dac}.app-content{min-width:0;display:flex;flex-direction:column}.app-top{height:76px;padding:0 33px;display:flex;align-items:center;justify-content:space-between;background:#fffaf8;border-bottom:1px solid #eee1df}.app-crumb{font-size:10px;font-weight:800;letter-spacing:.15em;color:#a7949b}.app-crumb span{margin:0 7px;color:#d9c5c8}.app-crumb strong{color:var(--scarlet)}.top-actions{display:flex;align-items:center;gap:13px}.demo-pill{display:inline-flex;align-items:center;gap:7px;background:#ffe7e9;color:#a6283b;border-radius:100px;padding:8px 11px;font-size:9px;font-weight:900;letter-spacing:.08em}.demo-pill i{width:6px;height:6px;background:var(--scarlet);border-radius:50%}.icon-btn,.profile-btn{width:33px;height:33px;border:1px solid #eadedb;background:#fff;border-radius:50%;display:grid;place-items:center;color:var(--scarlet);font-weight:800}.profile-btn{background:var(--scarlet);color:white;border:0}.mobile-brand{display:none}.app-view{display:none;width:min(100% - 64px,1220px);margin:0 auto;padding:40px 0 70px;flex:1}.app-view.active{display:block}.app-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin:0 0 28px}.app-kicker{color:var(--scarlet);font-size:9px;font-weight:900;letter-spacing:.19em;margin:0 0 13px}.app-title-row h1{font-family:Outfit,sans-serif;line-height:1.02;letter-spacing:-.05em;font-size:clamp(35px,4vw,51px);font-weight:800;margin:0}.app-title-row h1 em{color:var(--scarlet);font-style:normal;font-weight:500}.app-title-row>div>p:last-child{color:var(--muted);font-size:13px;margin:13px 0 0}.title-symbol{font-size:92px;line-height:.8;color:#f2d8d8;transform:rotate(15deg);font-family:Outfit,sans-serif}.app-grid{display:grid;grid-template-columns:minmax(0,1.07fr) minmax(300px,.93fr);gap:17px;align-items:start}.creator-column{display:grid;gap:16px}.app-panel{background:#fff;border:1px solid #eee3e0;border-radius:21px;box-shadow:0 12px 38px rgba(80,29,40,.04)}.mode-panel,.editor-panel{padding:23px}.panel-top{display:flex;align-items:flex-start;gap:13px;margin-bottom:22px}.panel-step{width:30px;height:30px;border-radius:9px;background:#ffeaed;color:var(--scarlet);display:grid;place-items:center;font-size:11px;font-weight:900;flex:none}.panel-top h2{font-family:Outfit,sans-serif;font-size:21px;letter-spacing:-.035em;margin:0}.panel-top p{font-size:11px;color:#8c7a7d;margin:3px 0 0}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:9px}.mode-switch button{border:1px solid #e6d9d8;background:#fff;border-radius:13px;padding:12px 14px;color:#66575d;text-align:left;font-size:12px;font-weight:800}.mode-switch button.active{background:var(--scarlet);border-color:var(--scarlet);color:white}.mode-switch small{display:block;font-size:10px;font-weight:500;margin-top:2px;color:inherit;opacity:.75}.mode-info{font-size:10px;color:#8d777b;margin:13px 0 0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid .full{grid-column:1/-1}.form-field{display:grid;gap:7px;align-content:start;font-size:11px;font-weight:800;color:#5b4d52}.form-field input,.form-field select,.form-field textarea{width:100%;min-height:42px;border:1px solid #e8dcda;border-radius:10px;padding:10px 11px;background:#fffdfa;color:var(--ink);font-weight:500;font-size:12px;outline:none}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--scarlet);box-shadow:0 0 0 3px #fde4e8}.form-field input[type=color]{padding:4px;width:100%;cursor:pointer}.form-field input[type=file]{font-size:10px;padding:8px}.form-field textarea{min-height:88px;resize:vertical}.form-help{font-size:10px;color:#97878b;line-height:1.5;margin:9px 0 0}.design-details{border:1px solid #eedfdd;border-radius:12px;margin-top:18px}.design-details summary{list-style:none;display:flex;justify-content:space-between;padding:13px 15px;cursor:pointer;font-size:11px;font-weight:800;color:var(--scarlet)}.design-details summary::-webkit-details-marker{display:none}.design-details[open] summary span{transform:rotate(45deg)}.design-content{border-top:1px solid #f2e8e5;padding:15px}.preset-row{display:flex;gap:7px;margin-bottom:16px}.preset-row button{border:1px solid #edd8d8;background:#fff6f6;color:var(--scarlet);border-radius:100px;padding:7px 11px;font-size:10px;font-weight:800}.preset-row button:hover{background:#fde3e7}.app-primary{border:0;background:var(--scarlet);color:#fff;border-radius:12px;padding:14px 17px;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:20px;box-shadow:0 9px 20px rgba(197,31,55,.18)}.app-primary:hover{background:var(--scarlet-dark)}.app-primary:disabled{opacity:.55;cursor:not-allowed}.form-error{font-size:11px;color:#ae1b31;min-height:16px;line-height:1.5;margin:8px 0 0}
.preview-column{position:sticky;top:20px}.preview-panel{padding:22px}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:9px}.preview-heading .app-kicker{margin:0}.preview-badge{font-size:8px;color:#ad737d;font-weight:900;letter-spacing:.1em}.preview-stage{background:radial-gradient(circle at 45% 35%,#fff 0,#fff2f0 70%,#f9e6e5 100%);border-radius:17px;min-height:418px;display:grid;place-items:center;margin:20px 0 14px;padding:25px}.preview-card{width:280px;max-width:100%;background:white;border-radius:18px;padding:15px;box-shadow:0 20px 38px rgba(86,30,44,.16);transform:rotate(2deg)}.preview-card-head,.preview-card-foot{display:flex;align-items:center;justify-content:space-between;font-family:Outfit,sans-serif;font-size:12px;font-weight:900;color:var(--scarlet)}.preview-card-head b{font-weight:500}.preview-card-head>span:last-child{font-size:20px}.qr-output{height:236px;display:grid;place-items:center;border-radius:12px;background:#fffaf8;margin-top:11px;padding:12px;overflow:hidden}.qr-output svg{width:100%;height:100%}.qr-placeholder{display:flex;flex-direction:column;align-items:center;text-align:center}.qr-placeholder span{font-size:42px;color:var(--scarlet)}.qr-placeholder strong{font-family:Outfit,sans-serif;font-size:16px;margin:7px 0}.qr-placeholder small{font-size:10px;color:var(--muted)}.preview-card-foot{display:block;margin-top:12px;color:#2d1b22}.preview-card-foot strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-card-foot small{display:block;font-family:"DM Sans",sans-serif;font-weight:500;font-size:9px;color:#9d8a90;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.preview-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.preview-actions button{background:#fff;border:1px solid #e8d9d7;border-radius:9px;padding:10px 4px;font-size:10px;font-weight:800;color:var(--scarlet)}.preview-actions button:hover:not(:disabled){background:#fff0f1}.preview-actions button:disabled{opacity:.4;cursor:not-allowed}.preview-note{display:flex;gap:9px;border-top:1px solid #efe3e0;margin-top:18px;padding-top:15px}.preview-note span{color:var(--scarlet);font-size:16px}.preview-note p{font-size:10px;color:#98888b;line-height:1.55;margin:0}
.app-footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #e9ddda;padding:18px 33px;color:#a18d91;font-size:9px;font-weight:800;letter-spacing:.05em}.app-footer a{color:var(--scarlet)}.mobile-nav{display:none}.toast{position:fixed;z-index:50;bottom:25px;left:50%;transform:translate(-50%,20px);background:#2c1a23;color:white;padding:11px 16px;border-radius:10px;box-shadow:var(--shadow);font-size:11px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.title-action{width:auto;white-space:nowrap;padding:13px 18px;margin:0}.library-toolbar{display:flex;justify-content:space-between;gap:13px;margin:22px 0}.search-field{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #ebdddc;padding:0 12px;border-radius:11px;width:min(100%,330px)}.search-field span{font-size:22px;color:#b09ba0}.search-field input{height:43px;border:0;outline:0;width:100%;font-size:11px;background:none}.library-toolbar>div{display:flex;gap:8px}.library-toolbar button,.import-button{border:1px solid #e4d5d4;background:#fff;border-radius:10px;color:var(--scarlet);padding:12px;font-size:10px;font-weight:800;cursor:pointer}.library-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.library-card{background:white;border:1px solid #ecdedd;border-radius:17px;padding:18px;min-width:0}.library-card-icon{display:grid;place-items:center;width:42px;height:42px;background:#ffe9ec;color:var(--scarlet);border-radius:12px;font-size:24px;margin-bottom:15px}.library-card h3{font-family:Outfit,sans-serif;font-size:17px;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-card small{font-size:10px;color:#a38e93}.library-card p{font-size:10px;color:#806d73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px solid #f0e6e4;padding-top:12px;margin:15px 0}.library-card-actions{display:flex;gap:6px;flex-wrap:wrap}.library-card-actions button{border:0;background:#fff0f2;color:var(--scarlet);font-size:10px;font-weight:800;padding:8px 9px;border-radius:8px}.library-empty{grid-column:1/-1;min-height:240px;border:1px dashed #dfc6ca;border-radius:18px;display:grid;place-items:center;text-align:center;padding:30px;background:#fffaf8}.library-empty span{font-size:45px;color:var(--scarlet)}.library-empty h3{font-family:Outfit,sans-serif;margin:8px 0 0;font-size:22px}.library-empty p{font-size:12px;color:var(--muted);margin:3px 0}.library-empty button{border:0;background:var(--scarlet);color:white;padding:11px 15px;border-radius:9px;font-size:11px;font-weight:800}
.insight-banner{background:linear-gradient(120deg,#ad1a34,#d92c45);color:white;border-radius:23px;padding:40px;margin-top:25px;min-height:290px}.insight-banner .demo-pill{background:rgba(255,255,255,.16);color:white}.insight-banner .demo-pill i{background:white}.insight-banner h2{font-family:Outfit,sans-serif;font-size:29px;letter-spacing:-.04em;margin:23px 0 8px}.insight-banner p{font-size:13px;line-height:1.7;color:#ffe1e5;max-width:600px}.insight-banner .button{font-size:10px;margin-top:8px}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:16px}.metric-grid article{background:white;border:1px solid #ecdedb;border-radius:16px;padding:22px}.metric-grid span,.metric-grid small{display:block;font-size:10px;color:#9a878c}.metric-grid strong{display:block;font-family:Outfit,sans-serif;font-size:40px;color:var(--scarlet);margin:5px 0}.account-card{display:flex;gap:24px;align-items:center;background:#fff;border:1px solid #ebdddd;border-radius:22px;padding:32px;margin-top:25px}.account-avatar{width:80px;height:80px;flex:none;border-radius:24px;display:grid;place-items:center;background:var(--scarlet);color:white;font-family:Outfit,sans-serif;font-size:48px;font-weight:800}.account-card h2{font-family:Outfit,sans-serif;font-size:25px;margin:0 0 7px}.account-card p{color:var(--muted);font-size:12px;line-height:1.7;max-width:610px}.account-status{display:inline-flex;gap:7px;border-radius:100px;background:#fff0f2;color:var(--scarlet);padding:8px 11px;font-size:10px;font-weight:800}.account-info{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:15px}.account-info article{background:#fff;border:1px solid #ebdddd;border-radius:17px;padding:24px}.account-info h3{font-family:Outfit,sans-serif;font-size:18px;margin:0 0 8px}.account-info p{color:var(--muted);font-size:11px;line-height:1.7;margin:0}
.app-body.dark{--ink:#f9edf0;--muted:#ceb7bf;--line:#5d414d;background:#20151c;color:#f9edf0}.app-body.dark .app-content,.app-body.dark .app-view{background:#20151c}.app-body.dark .app-top,.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:#30212b;border-color:#4c3741}.app-body.dark .form-field input,.app-body.dark .form-field select,.app-body.dark .form-field textarea,.app-body.dark .library-toolbar button,.app-body.dark .import-button,.app-body.dark .preview-actions button{background:#392832;color:#f9edf0;border-color:#5a424d}.app-body.dark .preview-stage{background:#462a34}.app-body.dark .preview-card,.app-body.dark .qr-output{background:#fff;color:#241720}.app-body.dark .mode-switch button:not(.active){background:#392832;color:#f9edf0;border-color:#5a424d}.app-body.dark .design-details{border-color:#5a424d}.app-body.dark .library-empty{background:#30212b}.app-body.dark .search-field input{color:white}
@media(max-width:1100px){.app-layout{grid-template-columns:202px minmax(0,1fr)}.app-sidebar{padding-inline:11px}.app-view{width:min(100% - 40px,1220px)}.app-top{padding-inline:20px}.app-grid{grid-template-columns:1fr}.preview-column{position:static}.preview-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.preview-heading,.preview-actions,.preview-note{grid-column:1/-1}.preview-stage{min-height:370px;grid-column:1/-1}.library-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app-layout{display:block}.app-sidebar{display:none}.app-top{height:63px;position:sticky;top:0;z-index:20;padding:0 17px;box-shadow:0 4px 15px rgba(56,18,30,.05)}.mobile-brand{display:block;font-family:Outfit,sans-serif;font-size:18px;font-weight:900;color:var(--scarlet)}.mobile-brand b{font-weight:500}.mobile-brand span{font-size:14px;margin-left:6px}.app-crumb{display:none}.top-actions{margin-left:auto}.demo-pill{font-size:8px}.app-view{width:min(100% - 34px,650px);padding:26px 0 110px}.app-title-row h1{font-size:40px}.title-symbol{display:none}.app-grid{gap:13px}.app-panel{border-radius:17px}.mode-panel,.editor-panel,.preview-panel{padding:18px}.preview-panel{display:block}.preview-stage{min-height:360px}.app-footer{display:none}.mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;z-index:30;bottom:0;left:0;right:0;height:calc(66px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid #eadcda;box-shadow:0 -5px 20px rgba(39,10,20,.06)}.mobile-nav button{border:0;background:transparent;color:#93818a;font-size:9px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.mobile-nav button span{font-size:21px;line-height:1}.mobile-nav button.active{color:var(--scarlet)}.app-body.dark .mobile-nav{background:#30212b;border-color:#4c3741}.toast{bottom:calc(78px + env(safe-area-inset-bottom));white-space:nowrap;max-width:90%;text-align:center}.library-list{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.app-title-row{align-items:start}.app-title-row h1{font-size:35px}.app-title-row>div>p:last-child{font-size:12px}.title-action{font-size:10px;padding:10px;max-width:115px}.mode-switch button{padding:10px;font-size:11px}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.preview-card{width:260px}.preview-stage{min-height:375px}.library-toolbar{display:block}.search-field{width:100%;max-width:none}.library-toolbar>div{margin-top:8px}.library-list,.metric-grid,.account-info{grid-template-columns:1fr}.insight-banner{padding:27px}.account-card{display:block;padding:24px}.account-avatar{margin-bottom:22px}.top-actions .demo-pill{display:none}}