:root{--background:#f7f7f8;--foreground:#18181b;--card:#fff;--card-foreground:#18181b;--muted:#f4f4f5;--muted-foreground:#71717a;--border:#e4e4e7;--input:#d4d4d8;--primary:#ec4899;--primary-hover:#db2777;--primary-foreground:#fff;--destructive:#dc2626;--destructive-foreground:#fff;--ring:rgba(236,72,153,.3);--radius:14px;--shadow:0 1px 2px rgba(0,0,0,.03),0 10px 30px rgba(24,24,27,.035)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--background);color:var(--foreground);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ring);outline-offset:2px}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}.container{width:min(100% - 40px,1200px);margin-inline:auto}.main-stack{display:grid;gap:24px;padding-block:32px 64px}.topbar{position:sticky;z-index:20;top:0;border-bottom:1px solid rgba(228,228,231,.85);background:rgba(255,255,255,.92);backdrop-filter:blur(12px)}.topbar-inner{min-height:66px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:780;letter-spacing:-.04em}.brand img{width:32px;height:32px}.brand-context{margin-left:4px;padding-left:14px;border-left:1px solid var(--border);color:var(--muted-foreground)!important;font-size:13px;font-weight:550;letter-spacing:0}.brand-large{justify-content:center;font-size:28px;margin-bottom:22px}.brand-large img{width:45px;height:45px}.card{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}.creation-card,.list-card{padding:28px}.card-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px}.card-heading.centered{display:block;text-align:center}.card-heading h1,.card-heading h2{margin:1px 0 5px;font-size:23px;line-height:1.25;letter-spacing:-.025em}.card-heading p{margin:0;color:var(--muted-foreground)}.eyebrow{color:var(--primary)!important;font-size:11px;font-weight:750;letter-spacing:.11em;text-transform:uppercase}.button{display:inline-flex;min-height:38px;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:10px;padding:8px 14px;background:transparent;font-weight:650;cursor:pointer;transition:background .15s,border-color .15s,opacity .15s,transform .1s}.button:active{transform:translateY(1px)}.button:disabled{cursor:not-allowed;opacity:.58;transform:none}.button-primary{background:var(--primary);color:var(--primary-foreground);box-shadow:0 5px 14px rgba(236,72,153,.18)}.button-primary:hover:not(:disabled){background:var(--primary-hover)}.button-secondary{border-color:var(--border);background:#fff}.button-secondary:hover:not(:disabled),.button-ghost:hover:not(:disabled){background:var(--muted)}.button-ghost{color:var(--muted-foreground)}.button-destructive{background:var(--destructive);color:var(--destructive-foreground)}.button-destructive:hover{background:#b91c1c}.button-lg{min-height:48px;border-radius:11px}.full{width:100%}.button-link{border:0;padding:0;background:none;color:var(--primary);font-size:12px;font-weight:700;cursor:pointer}.button-link.muted{color:var(--muted-foreground)}.icon-button{display:inline-grid;width:36px;height:36px;flex:none;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--muted-foreground);font-size:24px;cursor:pointer}.icon-button:hover{background:var(--muted)}.spinner{display:none;width:17px;height:17px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .65s linear infinite}.is-loading .spinner{display:block}.is-loading .button-label{display:none}@keyframes spin{to{transform:rotate(360deg)}}
.editor-grid{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(380px,1.18fr);gap:52px;align-items:start}.preview-column{display:flex;flex-direction:column;align-items:center}.preview-column>.section-label{align-self:flex-start}.section-label,.field>span{display:block;margin-bottom:8px;color:#3f3f46;font-size:13px;font-style:normal;font-weight:680}.phone-frame{width:min(100%,310px);padding:9px;border:1px solid #d4d4d8;border-radius:30px;background:#18181b;box-shadow:0 20px 45px rgba(24,24,27,.16)}.phone-preview{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:9/16;border-radius:22px;background:#e4e4e7 center/cover no-repeat}.preview-overlay{position:absolute;z-index:-1;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.02) 35%,rgba(0,0,0,.68) 100%)}.preview-content{position:absolute;inset:auto 18px 22px;text-align:center;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}.preview-content p{margin:0 0 4px;font-size:18px;font-weight:750}.preview-content span{display:block;margin-bottom:14px;font-size:11px;opacity:.9}.preview-content button{width:100%;min-height:42px;border:0;border-radius:10px;background:#ec4899;color:#fff;font-size:12px;font-weight:750;cursor:pointer}.phone-preview.picking{cursor:crosshair}.phone-preview.picking:after{content:"";position:absolute;inset:0;border:3px solid var(--primary);border-radius:22px;pointer-events:none}.preview-help{margin:10px 0 0;color:var(--primary);font-size:12px;font-weight:650}.form-column{display:grid;gap:20px}.field{display:block}.field input:not([type=color]),.hex-field,select,.search-box{width:100%;min-height:43px;border:1px solid var(--input);border-radius:10px;background:#fff;color:var(--foreground);transition:border-color .15s,box-shadow .15s}.field input:not([type=color]){padding:10px 12px}.field input:focus,.hex-field:focus-within,select:focus,.search-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring);outline:0}.field small{display:block;margin-top:6px;color:var(--muted-foreground);font-size:12px}.field-error{display:block;min-height:0;margin:5px 0 0;color:#dc2626;font-size:12px;font-style:normal}.field-error:empty{display:none}.field.has-error input{border-color:#ef4444}.uploader{position:relative;min-height:148px;border:1.5px dashed #d4d4d8;border-radius:12px;background:#fafafa;cursor:pointer;transition:.15s}.uploader:hover,.uploader.dragging{border-color:var(--primary);background:#fff7fb}.upload-empty{display:flex;min-height:148px;align-items:center;justify-content:center;flex-direction:column;padding:20px;text-align:center}.upload-empty strong{margin:8px 0 3px;font-size:13px}.upload-empty>span:last-child{color:var(--muted-foreground);font-size:12px}.upload-icon{display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--primary)}.upload-selected{display:flex;min-height:148px;align-items:center;gap:14px;padding:14px}.upload-selected img{width:86px;height:112px;border-radius:9px;object-fit:cover}.upload-selected>div{min-width:0;flex:1}.upload-selected strong,.upload-selected span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-selected span{margin-top:4px;color:var(--muted-foreground);font-size:12px}.trim-warning{display:flex;align-items:center;gap:10px;margin-top:-12px;padding:9px 11px;border:1px solid #fde68a;border-radius:9px;background:#fffbeb;color:#92400e;font-size:12px}.trim-warning span{flex:1}.color-row{display:grid;grid-template-columns:44px 112px 1fr;gap:9px}.color-row>input[type=color]{width:44px;height:43px;padding:3px;border:1px solid var(--input);border-radius:10px;background:#fff;cursor:pointer}.hex-field{display:flex;align-items:center;padding:0 10px}.hex-field span{color:var(--muted-foreground)}.hex-field input{width:100%;border:0;outline:0;background:transparent;text-transform:uppercase}.alert{margin-bottom:18px;padding:11px 13px;border-radius:9px;font-size:13px}.alert-error{border:1px solid #fecaca;background:#fef2f2;color:#991b1b}
.list-heading{align-items:center}.toolbar{display:grid;grid-template-columns:1fr 190px;gap:12px;margin-bottom:18px}.search-box{display:flex;align-items:center;gap:8px;padding:0 11px}.search-box svg{color:var(--muted-foreground)}.search-box input{width:100%;border:0;outline:0;background:transparent}select{padding:0 12px}.pages-list{min-height:180px;border-top:1px solid var(--border)}.page-row{position:relative;display:grid;grid-template-columns:1fr auto;gap:12px;padding:17px 4px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}.page-row:hover{background:#fafafa}.page-main{min-width:0}.page-title-line{display:flex;align-items:center;gap:9px}.page-title{overflow:hidden;margin:0;font-size:14px;font-weight:720;text-overflow:ellipsis;white-space:nowrap}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:750}.badge-active{background:#dcfce7;color:#166534}.badge-inactive{background:#f4f4f5;color:#52525b}.badge-error{background:#fee2e2;color:#991b1b}.badge-creating,.badge-deleting{background:#fef3c7;color:#92400e}.page-url{display:inline-block;overflow:hidden;max-width:100%;margin-top:5px;color:var(--muted-foreground);font-size:12px;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.page-url:hover{color:var(--primary);text-decoration:underline}.page-side{display:flex;align-items:center;gap:10px}.page-date{color:var(--muted-foreground);font-size:11px;white-space:nowrap}.menu-wrap{position:relative}.dropdown{position:absolute;z-index:10;top:40px;right:0;width:150px;padding:5px;border:1px solid var(--border);border-radius:10px;background:#fff;box-shadow:0 15px 35px rgba(0,0,0,.12)}.dropdown button{display:flex;width:100%;align-items:center;gap:8px;border:0;border-radius:7px;padding:8px 9px;background:transparent;text-align:left;font-size:12px;cursor:pointer}.dropdown button:hover{background:var(--muted)}.dropdown .danger{color:var(--destructive)}.pagination{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding-top:18px}.pagination span{color:var(--muted-foreground);font-size:12px}.empty-state{display:grid;min-height:220px;place-items:center;text-align:center;color:var(--muted-foreground)}.empty-state strong{display:block;color:var(--foreground);font-size:14px}.empty-state p{margin:4px 0;font-size:12px}.page-skeleton{padding:19px 4px;border-bottom:1px solid var(--border)}.page-skeleton span{display:block;height:12px;border-radius:5px;background:linear-gradient(90deg,#f4f4f5,#e4e4e7,#f4f4f5);background-size:200% 100%;animation:shimmer 1.2s infinite}.page-skeleton span:first-child{width:34%;margin-bottom:10px}.page-skeleton span:last-child{width:56%;height:9px}@keyframes shimmer{to{background-position:-200% 0}}
.toast-region{position:fixed;z-index:100;right:20px;bottom:20px;display:grid;width:min(380px,calc(100% - 40px));gap:10px}.toast{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border:1px solid var(--border);border-radius:11px;background:#fff;box-shadow:0 16px 40px rgba(0,0,0,.15);animation:toast-in .2s ease}.toast:before{content:"✓";display:grid;width:22px;height:22px;flex:none;place-items:center;border-radius:50%;background:#dcfce7;color:#166534;font-weight:800}.toast.error:before{content:"!";background:#fee2e2;color:#991b1b}.toast strong{display:block;font-size:13px}.toast span{display:block;color:var(--muted-foreground);font-size:12px}@keyframes toast-in{from{opacity:0;transform:translateY(8px)}}
.dialog-layer{position:fixed;z-index:60;inset:0;display:grid;place-items:center;padding:24px}.dialog-overlay{position:absolute;inset:0;background:rgba(24,24,27,.55);animation:fade-in .15s}.dialog{position:relative;display:flex;overflow:hidden;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);flex-direction:column;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.22);animation:dialog-in .2s ease}.dialog-wide{width:min(980px,100%)}.dialog-small{width:min(430px,100%)}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--border)}.dialog-header h2{margin:1px 0 0;font-size:19px}.dialog-header p{margin:0}.dialog-body{overflow:auto;padding:22px}.dialog-small .dialog-body{text-align:center;padding:30px}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}.confirm-icon{display:grid;width:44px;height:44px;place-items:center;margin:0 auto 15px;border-radius:50%;background:#fee2e2;color:var(--destructive)}.dialog-small h2{margin:0 0 7px;font-size:19px}.dialog-small p{margin:0;color:var(--muted-foreground);font-size:13px}.confirm-detail{margin-top:16px;padding:11px;border-radius:9px;background:var(--muted);font-size:12px;word-break:break-word}.edit-grid{display:grid;grid-template-columns:290px 1fr;gap:30px}.edit-form{display:grid;gap:17px}.edit-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border:1px solid var(--border);border-radius:10px;background:#fafafa}.edit-meta div{min-width:0}.edit-meta span{display:block;color:var(--muted-foreground);font-size:10px;text-transform:uppercase}.edit-meta strong,.edit-meta a{display:block;overflow:hidden;margin-top:2px;color:var(--foreground);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.url-row{display:flex;gap:8px}.url-row input{flex:1}.stack{display:grid;gap:18px}
.login-body{display:grid;min-height:100vh;min-height:100dvh;place-items:center;padding:24px;background:var(--background)}.login-shell{width:min(100%,420px)}.login-card{padding:30px}.login-card h1{margin:2px 0 5px;font-size:24px}.login-card .card-heading{margin-bottom:24px}
@keyframes fade-in{from{opacity:0}}@keyframes dialog-in{from{opacity:0;transform:scale(.98) translateY(5px)}}
@media(max-width:820px){.editor-grid{grid-template-columns:1fr;gap:34px}.preview-column>.section-label{align-self:center}.phone-frame{width:min(75vw,290px)}.edit-grid{grid-template-columns:1fr}.edit-grid .phone-frame{width:min(60vw,260px)}.toolbar{grid-template-columns:1fr}.page-date{display:none}}
@media(max-width:560px){.container{width:min(100% - 24px,1200px)}.main-stack{padding-block:18px 40px}.creation-card,.list-card{padding:20px 16px}.card-heading{margin-bottom:22px}.topbar-inner{min-height:60px}.brand-context{display:none}.button-ghost{padding-inline:9px}.color-row{grid-template-columns:44px 1fr}.color-row .button{grid-column:1/-1}.list-heading{align-items:flex-start}.list-heading>.button{padding:8px}.list-heading>.button svg{margin:0}.page-row{grid-template-columns:minmax(0,1fr) auto}.page-side{gap:2px}.dialog-layer{padding:10px}.dialog{max-height:calc(100dvh - 20px);border-radius:13px}.dialog-body{padding:16px}.dialog-header{padding:16px}.edit-meta{grid-template-columns:1fr}.trim-warning{align-items:flex-start;flex-wrap:wrap}.trim-warning span{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}