@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200;400;700;900&family=Martian+Mono:wght@300;400;500&display=swap');

:root{--bg:#f5f4ef;--bg2:#eceae2;--bg3:#e2e0d6;--fg:#0a0a08;--fg2:#5a5950;--fg3:#9a9890;--card:#ffffff;--border:rgba(10,10,8,.1);--border2:rgba(10,10,8,.2);--gold:#c8a84b;--purple:#6b5ce7;--coral:#e85a4f;--teal:#2d9e8a;--nav-h:52px;--radius:4px;--shadow:0 2px 16px rgba(0,0,0,.06)}
[data-theme="dark"]{--bg:#0d0d0b;--bg2:#161613;--bg3:#1e1e1a;--fg:#f0efe8;--fg2:#7a796e;--fg3:#4a4940;--card:#1a1a16;--border:rgba(240,239,232,.08);--border2:rgba(240,239,232,.15);--shadow:0 2px 16px rgba(0,0,0,.3)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:'Martian Mono',monospace;font-size:13px;line-height:1.6;min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit}img{max-width:100%;display:block}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:500;height:var(--nav-h);display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--bg);border-bottom:0.5px solid var(--border);overflow:hidden}
.nav-logo{font-family:'Unbounded',sans-serif;font-weight:900;font-size:12px;letter-spacing:.12em;cursor:pointer;flex-shrink:0}
.nav-spacer{flex:1;min-width:0}
.nav-btn{padding:5px 12px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;transition:all .2s;white-space:nowrap;flex-shrink:0}
.nav-btn-outline{border:0.5px solid var(--border2);color:var(--fg2)}.nav-btn-outline:hover{border-color:var(--fg);color:var(--fg)}
.nav-btn-fill{background:var(--fg);color:var(--bg)}.nav-btn-fill:hover{opacity:.8}
.nav-balance{font-size:10px;color:var(--teal);border:0.5px solid rgba(45,158,138,.3);padding:3px 8px;white-space:nowrap;flex-shrink:0}
.lang-btn{font-size:10px;color:var(--fg2);border:0.5px solid var(--border);padding:3px 7px;transition:all .2s;flex-shrink:0}
.lang-btn:hover{color:var(--fg);border-color:var(--fg2)}
.theme-toggle{width:30px;height:16px;border-radius:8px;background:var(--bg2);border:0.5px solid var(--border2);position:relative;cursor:pointer;flex-shrink:0}
.theme-dot{position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:var(--fg);transition:transform .3s}
[data-theme="dark"] .theme-dot{transform:translateX(13px)}
.nav-burger{display:none;flex-direction:column;gap:4px;padding:6px;flex-shrink:0}
.nav-burger span{display:block;width:18px;height:1.5px;background:var(--fg)}
.nav-mobile{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:var(--bg);border-bottom:0.5px solid var(--border);padding:16px 20px;z-index:499;flex-direction:column;gap:12px}
.nav-mobile.open{display:flex}

/* Pages */
.page{display:none;padding-top:var(--nav-h);min-height:100vh}.page.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeUp .3s ease}

/* Hero */
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:40vh;max-height:400px;padding:0 24px;overflow:hidden;position:relative}
.hero-word{font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(48px,8vw,140px);line-height:.95;letter-spacing:-.02em;transition:font-family .8s ease,opacity .5s;user-select:none;white-space:nowrap;max-width:100%;overflow:hidden}
.hero-sub{font-size:11px;color:var(--fg2);letter-spacing:.1em;text-transform:uppercase;margin-top:16px;opacity:.7}
.hero-scroll{position:absolute;bottom:12px;font-size:10px;color:var(--fg3);letter-spacing:.1em;animation:bounce 2s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.section{padding:48px 20px}
.section-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg2);margin-bottom:24px;padding-bottom:12px;border-bottom:0.5px solid var(--border)}

/* ═══ Carousel Feed ═══ */
.carousel-wrap{position:relative;height:480px;overflow:hidden;border:0.5px solid var(--border);background:var(--bg2)}
.carousel-viewport{position:relative;width:100%;height:100%}
.carousel-slide{position:absolute;inset:0;display:flex;flex-direction:column;cursor:pointer;
  opacity:0;transition:opacity .6s ease;pointer-events:none}
.carousel-slide.carousel-active{opacity:1;pointer-events:auto;z-index:1}
.carousel-img{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg2);min-height:0}
.carousel-img img{width:100%;height:100%;object-fit:cover}
.carousel-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-family:'Unbounded',sans-serif;font-weight:900;font-size:24px;color:var(--border2)}
.carousel-meta{padding:12px 16px;display:flex;flex-direction:column;gap:2px;background:var(--bg);flex-shrink:0}
.carousel-arrows{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;z-index:3}
.carousel-arrow{width:34px;height:34px;background:var(--card);border:0.5px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--fg2);cursor:pointer;transition:all .2s;border-radius:var(--radius)}
.carousel-arrow:hover{color:var(--fg);border-color:var(--fg);background:var(--bg)}
.carousel-dots{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;z-index:3}
.carousel-dot{width:6px;height:6px;border-radius:50%;background:var(--border2);cursor:pointer;transition:background .3s,transform .3s}
.carousel-dot.active{background:var(--fg);transform:scale(1.4)}
.carousel-enter{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:3;padding:8px 20px;background:rgba(0,0,0,.65);color:#fff;font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:none;cursor:pointer;transition:background .2s;backdrop-filter:blur(6px);border-radius:var(--radius)}
.carousel-enter:hover{background:rgba(0,0,0,.9)}
.tiktok-type{font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.tiktok-key{font-size:10px;color:var(--fg2);letter-spacing:.04em}

/* ═══ Toggle Switch ═══ */
.toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle-track{display:block;width:38px;height:20px;background:var(--bg3);border:0.5px solid var(--border2);border-radius:10px;transition:background .3s,border-color .3s;position:relative}
.toggle-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--fg2);border-radius:50%;transition:transform .3s,background .3s}
.toggle input:checked+.toggle-track{background:var(--teal);border-color:var(--teal)}
.toggle input:checked+.toggle-track .toggle-thumb{transform:translateX(18px);background:#fff}

/* Feed items (list mode) */
.feed-item{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:0.5px solid var(--border);cursor:pointer;transition:background .2s}
.feed-item:hover{background:var(--bg2);padding-left:8px;padding-right:8px;margin:0 -8px}
.feed-item-img{width:48px;height:48px;flex-shrink:0;background:var(--bg2);overflow:hidden;display:flex;align-items:center;justify-content:center}
.feed-item-img img{width:100%;height:100%;object-fit:cover}
.feed-item-info{flex:1;min-width:0}
.feed-item-type{font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.feed-item-key{font-size:10px;color:var(--fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-item-arrow{font-size:14px;color:var(--fg3);flex-shrink:0}
.feed-empty{text-align:center;padding:64px 20px;color:var(--fg2);font-size:12px}

/* Catalog */
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--border)}
.cat-card{background:var(--bg);padding:20px;cursor:pointer;transition:background .2s}.cat-card:hover{background:var(--bg2)}
.cat-card-top{height:3px;margin-bottom:16px}
.cat-card-img{aspect-ratio:1;background:var(--bg2);display:flex;align-items:center;justify-content:center;margin-bottom:12px;overflow:hidden}
.cat-card-name{font-family:'Unbounded',sans-serif;font-weight:700;font-size:15px;margin-bottom:4px}
.cat-card-price{font-size:22px;margin-bottom:4px}.cat-card-price small{font-size:11px;color:var(--fg2)}
.cat-card-limit{font-size:10px;color:var(--fg2);margin-bottom:8px}
.cat-card-bar-wrap{height:2px;background:var(--border);margin-bottom:4px}
.cat-card-bar{height:100%;transition:width 1s ease}
.cat-card-btn{display:inline-block;margin-top:12px;padding:8px 16px;border:0.5px solid currentColor;font-size:10px;letter-spacing:.08em;text-transform:uppercase;transition:all .2s}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;transition:all .2s;gap:8px}
.btn-primary{background:var(--fg);color:var(--bg)}.btn-primary:hover{opacity:.8}
.btn-outline{border:0.5px solid var(--fg);color:var(--fg)}.btn-outline:hover{background:var(--fg);color:var(--bg)}
.btn-ghost{border:0.5px solid var(--border2);color:var(--fg2)}.btn-ghost:hover{border-color:var(--fg);color:var(--fg)}
.btn:disabled{opacity:.4;pointer-events:none}.btn-full{width:100%}

/* Forms */
.form-group{margin-bottom:16px}
.input-label{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg2);margin-bottom:6px}
.input{width:100%;padding:10px 14px;background:var(--card);border:0.5px solid var(--border2);color:var(--fg);font-family:inherit;font-size:13px;outline:none;transition:border .2s;border-radius:var(--radius)}
.input:focus{border-color:var(--fg)}.input::placeholder{color:var(--fg3);font-size:11px}

.alert{padding:10px 14px;font-size:11px;border:0.5px solid;border-radius:var(--radius);display:none;margin-bottom:12px}
.alert.show{display:block}
.alert-error{border-color:rgba(232,90,79,.4);color:var(--coral);background:rgba(232,90,79,.06)}
.alert-success{border-color:rgba(45,158,138,.4);color:var(--teal);background:rgba(45,158,138,.06)}
.alert-warn{border-color:rgba(200,168,75,.4);color:var(--gold);background:rgba(200,168,75,.06)}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:600;display:none;align-items:center;justify-content:center;padding:16px}
.modal-overlay.open{display:flex}
.modal{background:var(--card);border:0.5px solid var(--border);width:100%;max-width:460px;max-height:92vh;overflow-y:auto;padding:28px;position:relative;animation:fadeUp .25s ease;border-radius:var(--radius)}
.modal-close{position:absolute;top:14px;right:16px;font-size:20px;color:var(--fg2);cursor:pointer}.modal-close:hover{color:var(--fg)}
.modal-title{font-family:'Unbounded',sans-serif;font-weight:700;font-size:18px;margin-bottom:20px}

/* Keys */
.key-row{padding:10px 0;border-top:0.5px solid var(--border)}
.key-row-label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2);margin-bottom:4px}
.key-row-val{font-size:11px;word-break:break-all;display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.copy-btn{font-size:9px;padding:3px 10px;border:0.5px solid var(--border);color:var(--fg2);white-space:nowrap;transition:all .2s;flex-shrink:0}
.copy-btn:hover{color:var(--fg);border-color:var(--fg)}

/* Token page */
.token-layout{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - var(--nav-h))}
.token-img-side{background:var(--bg2);position:sticky;top:var(--nav-h);align-self:start;height:calc(100vh - var(--nav-h));display:flex;align-items:center;justify-content:center;overflow:hidden}
.token-img-side img{width:100%;height:100%;object-fit:cover}
.token-img-placeholder{font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(40px,8vw,100px);color:var(--border2)}
.token-info-side{padding:40px 32px;border-left:0.5px solid var(--border)}
.token-type-badge{font-size:9px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;display:inline-block}
.token-big-name{font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(32px,5vw,56px);line-height:.95;margin-bottom:20px}

/* Profile */
.profile-header{display:flex;align-items:center;gap:16px;padding:24px 20px;border-bottom:0.5px solid var(--border);flex-wrap:wrap}
.avatar{width:56px;height:56px;border-radius:50%;background:var(--bg2);border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-weight:700;font-size:20px;flex-shrink:0}
.profile-name{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(18px,4vw,24px)}
.profile-meta{font-size:11px;color:var(--fg2);margin-top:2px}
.owned-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.owned-card{background:var(--bg2);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;border:0.5px solid transparent;transition:border .2s;padding:12px;text-align:center;overflow:hidden;position:relative}
.owned-card:hover{border-color:var(--fg)}

/* Editor — desktop: panel left, canvas right. Mobile: canvas top, panel bottom */
.editor-layout{display:grid;grid-template-columns:240px 1fr;max-width:850px;margin:0 auto;min-height:calc(100vh - var(--nav-h))}
.editor-panel{padding:16px;border-left:0.5px solid var(--border);overflow-y:auto;display:flex;flex-direction:column;gap:10px;font-size:12px}
.editor-canvas-side{padding:16px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:flex-start}
.editor-canvas-wrap{background:var(--bg2);border:0.5px solid var(--border);position:relative;overflow:hidden;cursor:crosshair;max-width:380px;width:100%}
.editor-canvas-wrap canvas{display:block;width:100%;height:auto}
.panel-group{display:flex;flex-direction:column;gap:6px}
.panel-label{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg2)}
.range-row{display:flex;align-items:center;gap:8px}
.range-row input[type=range]{flex:1;accent-color:var(--fg);height:2px}
.range-val{font-size:10px;color:var(--fg2);min-width:28px;text-align:right}
.swatches{display:flex;gap:5px;flex-wrap:wrap}
.swatch{width:24px;height:24px;cursor:pointer;border:2px solid transparent;transition:border .15s;border-radius:2px}
.swatch.active{border-color:var(--fg)}
.font-opts{display:flex;flex-direction:column;gap:3px}
.font-opt{padding:5px 8px;border:0.5px solid var(--border);cursor:pointer;font-size:11px;text-align:center;transition:all .2s}
.font-opt:hover,.font-opt.active{border-color:var(--fg);background:var(--bg2)}

/* Payment */
.pay-layout{max-width:520px;margin:0 auto;padding:40px 20px}
.pay-summary{background:var(--bg2);border:0.5px solid var(--border);padding:16px;margin-bottom:20px}
.pay-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;font-weight:500}
.balance-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:0.5px solid rgba(45,158,138,.3);color:var(--teal);font-size:11px;margin-bottom:16px}

/* Verify */
.verify-wrap{max-width:580px;margin:0 auto;padding:64px 20px}
.certificate{border:0.5px solid var(--border);padding:32px 24px;background:var(--card);position:relative;overflow:hidden;margin-top:24px;display:none}
.certificate.show{display:block}
.cert-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-weight:900;font-size:100px;color:var(--border);pointer-events:none;opacity:.2}
.cert-body{position:relative}
.cert-header{font-size:9px;letter-spacing:.25em;color:var(--fg2);text-transform:uppercase;margin-bottom:16px}
.cert-main{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(16px,3vw,22px);line-height:1.3;margin-bottom:12px}
.cert-text{font-size:11px;color:var(--fg2);line-height:1.9;border-top:0.5px solid var(--border);padding-top:12px}

/* Gift page */
.gift-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - var(--nav-h));padding:40px 24px;text-align:center}
.gift-icon{font-size:64px;margin-bottom:24px}
.gift-heading{font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(24px,6vw,40px);margin-bottom:12px;line-height:1.1}
.gift-sub{font-size:12px;color:var(--fg2);max-width:400px;line-height:1.8}
.gift-message{font-style:italic;color:var(--fg2);margin-top:16px;font-size:14px}
.gift-token-img{width:200px;height:200px;margin:24px auto 0;overflow:hidden;border:0.5px solid var(--border)}
.gift-token-img img{width:100%;height:100%;object-fit:cover}

/* Page close */
.page-close{position:fixed;top:calc(var(--nav-h) + 10px);right:14px;z-index:300;width:32px;height:32px;background:var(--card);border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--fg2);cursor:pointer;transition:all .2s}
.page-close:hover{color:var(--fg);border-color:var(--fg)}

::-webkit-scrollbar{width:3px}::-webkit-scrollbar-thumb{background:var(--border2)}

/* ═══ MOBILE ═══ */
@media(max-width:900px){
  .token-layout{grid-template-columns:1fr}
  .token-img-side{position:static;height:280px}
  .token-info-side{padding:24px 20px;border-left:none;border-top:0.5px solid var(--border)}
  /* Editor: on mobile, canvas top, panel bottom */
  .editor-layout{grid-template-columns:1fr;max-width:100%}
  .editor-canvas-side{order:-1}
  .editor-canvas-wrap{max-width:100%}
  .editor-panel{border-left:none;border-top:0.5px solid var(--border)}
}
@media(max-width:768px){
  .nav-balance{display:none !important}.nav-btn{display:none !important}
  .lang-btn{display:none !important}.theme-toggle{display:none !important}
  .nav-burger{display:flex}
  .hero{height:30vh;max-height:260px}.hero-word{font-size:clamp(36px,12vw,80px)}
  .section{padding:32px 16px}
  .catalog-grid{grid-template-columns:1fr 1fr}
  .carousel-arrows{display:none}
  .carousel-wrap{height:400px}.carousel-slide{height:400px}
  .profile-header{padding:16px}
}
@media(max-width:480px){
  .catalog-grid{grid-template-columns:1fr}
  .nav{padding:0 12px;gap:6px}
  .carousel-wrap{height:360px}.carousel-slide{height:360px}
}