@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&family=Nunito:wght@600;700;800;900&display=swap');:root{--bg-overlay:#2d2638;--panel-bg:#ffffff;--tab-bar-bg:#eedfca;--tab-active-bg:#bd9767;--tab-active-text:#ffffff;--tab-inactive-text:#a88d72;--content-box-bg:#fdf8f0;--item-bg:#f2e6d5;--item-border-active:#3fb4f7;--text-dark:#6e4f35;--text-muted:#a38c74;--btn-orange:#ff9029;--btn-orange-hover:#e87e1a;--btn-gray:#b8a693;--shadow-soft:0 10px 30px rgba(0,0,0,0.25);--border-radius-lg:24px;--border-radius-md:16px;--border-radius-sm:12px;}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;}body{font-family:'Be Vietnam Pro','Nunito',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:radial-gradient(circle at center,#3b3149 0%,#1e1828 100%);min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:10px 20px 20px 20px;color:var(--text-dark);}.modal-window{width:100%;max-width:900px;background:var(--panel-bg);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-soft);overflow:hidden;display:flex;flex-direction:column;border:4px solid #fff;animation:popIn 0.3s ease-out;}@keyframes popIn{from{transform:scale(0.92);opacity:0;}to{transform:scale(1);opacity:1;}}.modal-header{background:var(--tab-bar-bg);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;position:relative;}.tabs-container{display:flex;gap:12px;}.tab-button{padding:8px 24px;border-radius:20px;font-weight:800;font-size:1.1rem;border:none;cursor:pointer;transition:all 0.2s ease;color:var(--tab-inactive-text);background:transparent;display:flex;align-items:center;gap:8px;}.tab-button.active{background:var(--tab-active-bg);color:var(--tab-active-text);box-shadow:0 4px 10px rgba(189,151,103,0.4);}.tab-count{font-size:0.85rem;opacity:0.9;font-weight:700;}.btn-close{background:transparent;border:none;font-size:28px;color:#bfa58a;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background 0.2s;}.btn-close:hover{background:rgba(0,0,0,0.05);color:var(--text-dark);}.modal-body{padding:24px;display:grid;grid-template-columns:1.2fr 1fr;gap:24px;background:#ffffff;}.frame-selector-box{background:var(--content-box-bg);border-radius:var(--border-radius-md);padding:20px;min-height:420px;border:2px solid #f3e6d3;display:flex;flex-direction:column;}.section-title{font-size:1rem;font-weight:800;color:var(--text-dark);margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;}.frames-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:16px;max-height:360px;overflow-y:auto;padding-right:6px;}.frames-grid::-webkit-scrollbar{width:8px;}.frames-grid::-webkit-scrollbar-track{background:#f2e5d4;border-radius:4px;}.frames-grid::-webkit-scrollbar-thumb{background:#d8be9f;border-radius:4px;}.frame-card{width:90px;height:90px;background:var(--item-bg);border-radius:20px;border:3px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:all 0.2s cubic-bezier(0.175,0.885,0.32,1.275);padding:8px;}.frame-card:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 6px 15px rgba(0,0,0,0.08);}.frame-card.active{background:#ffffff;border-color:var(--item-border-active);box-shadow:0 0 0 3px rgba(63,180,247,0.3);}.frame-card img{width:100%;height:100%;object-fit:contain;}.frame-card .checkmark{position:absolute;top:4px;right:4px;width:24px;height:24px;background:#39cc57;border:2px solid #ffffff;border-radius:50%;display:none;align-items:center;justify-content:center;color:white;font-size:14px;font-weight:bold;box-shadow:0 2px 5px rgba(0,0,0,0.2);}.frame-card.active .checkmark{display:flex;}.none-icon{font-size:28px;color:var(--text-muted);}.preview-panel{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 0;min-width:0;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box;}.calibrated-status-badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,#e8f5e9 0%,#c8e6c9 100%);color:#2e7d32;border:1.5px solid #a5d6a7;padding:6px 16px;border-radius:20px;font-size:0.85rem;font-weight:800;box-shadow:0 3px 10px rgba(46,125,50,0.12);margin-top:8px;}.canvas-wrapper{position:relative;width:240px;height:240px;border-radius:50%;box-shadow:0 8px 25px rgba(110,79,53,0.15);background:#e6ded5;overflow:hidden;cursor:grab;border:4px solid #fff;touch-action:none;}.canvas-wrapper::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient( 135deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0.65) 50%,rgba(255,255,255,0) 62%,rgba(255,255,255,0) 100% );transform:translate(-100%,-100%) rotate(25deg);animation:sheenSweep 4.2s infinite ease-in-out;pointer-events:none;z-index:10;}@keyframes sheenSweep{0%{transform:translate(-100%,-100%) rotate(25deg);}55%{transform:translate(100%,100%) rotate(25deg);}100%{transform:translate(100%,100%) rotate(25deg);}}.canvas-wrapper:active{cursor:grabbing;}.btn-primary:active,.btn-secondary:active,.btn-mode:active,.btn-icon:active,.frame-card:active{transform:scale(0.96);}@media (max-width:768px){body{padding:10px;align-items:flex-start;}.modal-window{border-radius:18px;border-width:2px;}.modal-header{padding:10px 16px;}.tab-button{padding:6px 16px;font-size:0.95rem;}.modal-body{grid-template-columns:1fr;padding:16px;gap:16px;display:flex;flex-direction:column;}.frame-selector-box{order:1;min-height:auto;padding:14px;}.preview-panel{order:2;padding:0;}.canvas-wrapper{width:210px;height:210px;}.frames-grid{grid-template-columns:repeat(auto-fill,minmax(75px,1fr));gap:10px;max-height:180px;}.frame-card{width:75px;height:75px;border-radius:14px;padding:6px;}.mode-toggle-group{width:100%;}.btn-mode{padding:10px 8px;font-size:0.82rem;min-height:42px;}.btn-icon{min-height:42px;padding:8px 14px;font-size:0.85rem;}.btn-primary{padding:16px 20px;font-size:1.1rem;min-height:50px;}.slider-container input[type="range"]{height:12px;}.frame-info{margin:8px 0 6px 0;}}canvas#avatarCanvas{width:100%;height:100%;display:block;}.canvas-hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.55);color:#fff;padding:4px 12px;border-radius:12px;font-size:0.75rem;font-weight:700;pointer-events:none;white-space:nowrap;backdrop-filter:blur(4px);opacity:0.85;transition:opacity 0.3s;}.canvas-wrapper:hover .canvas-hint{opacity:1;}.frame-info{text-align:center;margin:14px 0 10px 0;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box;}.frame-info h3{font-size:1.15rem;font-weight:900;color:var(--text-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block;box-sizing:border-box;padding:0 10px;}.frame-info p{font-size:0.9rem;color:var(--text-muted);font-weight:700;margin-top:2px;}.mode-toggle-group{display:flex;background:#eae0d0;padding:4px;border-radius:14px;gap:4px;margin-bottom:8px;}.btn-mode{flex:1;padding:8px 10px;border:none;background:transparent;border-radius:10px;font-size:0.85rem;font-weight:800;color:var(--text-dark);cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;gap:4px;}.btn-mode.active{background:#ffffff;color:var(--btn-orange);box-shadow:0 2px 8px rgba(0,0,0,0.1);}.controls-bar{width:100%;background:var(--content-box-bg);border-radius:var(--border-radius-sm);padding:12px 16px;display:flex;flex-direction:column;gap:10px;border:1.5px solid #f3e6d3;margin-bottom:16px;}.control-group{display:flex;align-items:center;gap:12px;}.control-group label{font-size:0.85rem;font-weight:800;color:var(--text-dark);min-width:65px;}.slider-container{flex:1;display:flex;align-items:center;gap:8px;}.slider-container input[type="range"]{flex:1;-webkit-appearance:none;appearance:none;height:8px;border-radius:6px;background:#eedfca;outline:none;cursor:pointer;transition:background 0.15s ease-in-out;}.slider-container input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--btn-orange);cursor:pointer;transition:transform 0.1s ease,background-color 0.1s ease;box-shadow:0 2px 6px rgba(255,144,41,0.35);border:none;}.slider-container input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.25);background:var(--btn-orange-hover);}.slider-container input[type="range"]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--btn-orange);cursor:pointer;transition:transform 0.1s ease,background-color 0.1s ease;box-shadow:0 2px 6px rgba(255,144,41,0.35);}.slider-container input[type="range"]::-moz-range-thumb:hover{transform:scale(1.25);background:var(--btn-orange-hover);}.btn-icon{background:#fff;border:1.5px solid #e2d2be;border-radius:10px;padding:6px 12px;font-size:0.85rem;font-weight:800;color:var(--text-dark);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:4px;}.btn-icon:hover{background:#fdf5ea;border-color:var(--btn-orange);color:var(--btn-orange);}.action-buttons{width:100%;display:flex;flex-direction:column;gap:10px;}.btn-grid-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;}.btn-primary{width:100%;padding:13px 20px;background:linear-gradient(135deg,#ff9029,#ff5e3a);color:#ffffff;border:none;border-radius:25px;font-size:1.2rem;font-weight:900;cursor:pointer;box-shadow:0 5px 16px rgba(255,94,58,0.35);transition:all 0.25s cubic-bezier(0.175,0.885,0.32,1.275);display:flex;align-items:center;justify-content:center;gap:8px;text-shadow:0 1px 2px rgba(0,0,0,0.15);position:relative;overflow:hidden;}.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);transition:none;}.btn-primary:hover::after{left:100%;transition:all 0.75s ease-in-out;}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(255,94,58,0.45);}.btn-secondary{width:100%;padding:10px 16px;background:#ffffff;color:var(--text-dark);border:1.5px solid #e2d2be;border-radius:18px;font-size:0.88rem;font-weight:800;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 2px 5px rgba(0,0,0,0.02);}.btn-secondary:hover{background:#fffdfb;border-color:var(--btn-orange);color:var(--btn-orange);transform:translateY(-1px);box-shadow:0 4px 10px rgba(255,144,41,0.08);}input[type="file"]#imageUploader{display:none;}@media (max-width:768px){.modal-body{grid-template-columns:1fr;}.frame-selector-box{min-height:auto;}.frames-grid{max-height:220px;}}#canvasWrapper.expanded{position:fixed !important;top:40% !important;left:50% !important;transform:translate(-50%,-50%) scale(1.1) !important;z-index:99999 !important;width:78vw !important;max-width:380px !important;height:78vw !important;max-height:380px !important;box-shadow:0 0 0 9999px rgba(0,0,0,0.85),0 10px 30px rgba(0,0,0,0.4) !important;border-radius:16px !important;border:4px solid #fff !important;overflow:visible !important;background:#e6ded5 !important;}#canvasWrapper.expanded ~ #btnToggleExpand{display:none !important;}#canvasWrapper.expanded::after{display:none !important;animation:none !important;}#btnToggleExpandCloseTop{display:none !important;}#canvasWrapper.expanded #btnToggleExpandCloseTop{display:flex !important;}@media screen and (max-height:740px){#canvasWrapper.expanded{top:36% !important;width:70vw !important;height:70vw !important;max-width:320px !important;max-height:320px !important;}#expandedToolbar{bottom:8px !important;padding:10px 14px !important;gap:8px !important;}}
/* Shota frontend refresh */
.safety-hero{max-width:900px;width:100%;padding:8px 12px 2px;text-align:left;color:#fff}.safety-kicker,.modal-kicker{display:inline-block;color:#ffbe5e;font-size:.72rem;font-weight:900;letter-spacing:.14em}.safety-hero h1{margin-top:7px;font-size:clamp(1.55rem,4.4vw,2.7rem);line-height:1.08;font-weight:900;letter-spacing:-.035em;text-wrap:balance}.safety-hero h1 span{color:#ff9029}.safety-copy{flex-grow:1;text-shadow:0 1px 2px rgba(0,0,0,.5);white-space:normal}.safety-copy strong{display:inline-block;color:#ffbe5e;font-size:1rem;margin-bottom:5px}.compact-header{min-height:58px;justify-content:flex-start!important;gap:6px;font-size:.9rem}.community-panels{max-width:900px;width:100%;display:grid;gap:14px;margin-top:10px}.info-card{overflow:hidden;background:rgba(255,255,255,.05);border:1.5px solid rgba(224,208,188,.22);border-radius:18px;color:#eedfca;pointer-events:auto!important}.info-card summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 20px;cursor:pointer;font-weight:900;color:#ffbe5e;list-style:none}.info-card summary::-webkit-details-marker{display:none}.summary-hint{color:#bfa58a;font-size:.75rem;font-weight:700}.info-card-body,.privacy-scroll{border-top:1px solid rgba(224,208,188,.16);padding:18px}.create-letter-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;background:rgba(255,144,41,.1);border:1.5px dashed #ff9029;border-radius:12px;color:#ffbe5e;font-weight:900;cursor:pointer}.stack-form{display:flex;flex-direction:column;gap:13px;width:100%}.stack-form[hidden]{display:none}.stack-form label{display:flex;flex-direction:column;gap:6px;color:#6e4f35;font-size:.82rem;font-weight:900;text-align:left}.info-card .stack-form{margin-top:14px;padding:16px;border:1px solid rgba(255,144,41,.24);border-radius:14px;background:rgba(255,255,255,.04)}.info-card .stack-form label{color:#eedfca}.stack-form input,.stack-form textarea,.stack-form select{width:100%;padding:11px 12px;border:1.5px solid #dcd1be;border-radius:10px;background:#fff;color:#6e4f35;font:inherit;user-select:text;-webkit-user-select:text}.form-actions{display:flex;gap:9px}.form-actions>*{flex:1;margin:0!important}.form-status{min-height:1.3em;font-size:.78rem;font-weight:800;line-height:1.45}.form-status.error{color:#e74c3c}.form-status.success{color:#27ae60}.form-status.notice{color:#d35400;background:#fff4e8;border-radius:9px;padding:9px}.empty-state{margin-top:14px;padding:20px;border:1px dashed rgba(224,208,188,.35);border-radius:12px;color:#bfa58a;text-align:center;font-size:.84rem;font-weight:700}.privacy-scroll{max-height:260px;overflow-y:auto;line-height:1.65;color:#d4c2ab;user-select:text;-webkit-user-select:text}.privacy-scroll p+p{margin-top:12px}.privacy-note{padding:10px;border-left:3px solid #ff9029;background:rgba(255,144,41,.08)}.tiktok-footer{flex-direction:column;gap:8px;padding:16px!important}.tiktok-footer img{display:block;width:min(180px,52vw);height:auto;max-height:86px;object-fit:contain}.tiktok-footer>a:first-child{margin:0!important}.tiktok-cta{display:inline-flex!important;margin:0!important;padding:7px 15px;border-radius:999px;background:#ff9029;color:#fff!important}.shota-modal[hidden]{display:none!important}.shota-modal{align-items:center;justify-content:center;background:rgba(30,24,40,.84);padding:16px}.shota-modal .preview-modal-content{width:min(94vw,720px);max-width:720px;max-height:92vh;display:flex;flex-direction:column;background:#fff8e7;border:4px solid #ff9029}.shota-modal .preview-modal-header{gap:16px;text-align:left}.shota-modal h2{margin:2px 0 0;color:#6e4f35;font-size:1.14rem}.library-header{align-items:center!important}.library-actions{display:flex;gap:8px;margin-left:auto}.library-actions button{width:auto;margin:0;padding:9px 14px;font-size:.78rem;white-space:nowrap}.library-dialog .preview-modal-body{overflow-y:auto}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}.library-empty{grid-column:1/-1;margin:0;padding:42px 18px;background:#fff}.library-empty span{display:block;font-size:2rem}.library-empty strong{display:block;margin:7px 0;color:#6e4f35;font-size:1rem}.library-card{padding:10px;border:1.5px solid #e0d0bc;border-radius:14px;background:#fff}.library-card>img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:10px;background:#fdf8f0}.library-card h3{margin-top:8px;color:#6e4f35;font-size:.9rem}.library-card p{margin:3px 0 9px;color:#a38c74;font-size:.75rem}.library-card-actions{display:grid;grid-template-columns:1fr auto;gap:6px}.library-card-actions button{margin:0;padding:7px;font-size:.72rem}.report-btn{border:1px solid #ff4757;border-radius:9px;background:#fff;color:#ff4757;font-weight:900;cursor:pointer}.upload-dialog{max-width:560px!important}.upload-notice{padding:11px 13px;border-left:4px solid #ff9029;border-radius:10px;background:#fff3df;color:#7e634e;font-size:.8rem;font-weight:700;text-align:left}.drop-zone{min-height:138px!important;align-items:center!important;justify-content:center;border:2px dashed #ff9029!important;border-radius:14px;background:#fffdf8;cursor:pointer;text-align:center!important}.drop-zone.dragging{background:#fff0d8;transform:scale(1.01)}.drop-zone input{position:absolute;width:1px;height:1px;opacity:0}.drop-zone small{color:#a38c74}.drop-icon{color:#ff9029;font-size:2rem}.upload-preview{min-height:110px;display:flex;align-items:center;justify-content:center;border:1px solid #eedfca;border-radius:12px;background:#fff;color:#a38c74;font-size:.78rem}.upload-preview img{max-width:100%;max-height:220px;object-fit:contain}.two-column-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.consent-row{flex-direction:row!important;align-items:flex-start!important}.consent-row input{width:18px!important;flex:0 0 18px;margin-top:1px}.report-dialog{max-width:440px!important}
@media(max-width:600px){.safety-hero{text-align:center}.compact-header{font-size:.75rem}.library-header{align-items:flex-start!important;flex-direction:column}.library-actions{width:100%;margin:0}.library-actions button{flex:1}.library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.two-column-fields{grid-template-columns:1fr}.form-actions{flex-direction:column}.shota-modal .preview-modal-body{padding:15px}.summary-hint{display:none}}