:root {
    --bg:#0a0a0f; --surface:#13131a; --surface2:#1c1c28; --border:#2a2a3d;
    --accent:#7c3aed; --accent2:#06d6a0; --accent3:#f72585; --warn:#f59e0b;
    --text:#e8e8f0; --text-muted:#6b6b8a; --text-dim:#3d3d55;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{font-family:Instrument Sans,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
  body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0.35;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");}

  .screen{display:none;min-height:100vh;}
  .screen.active{display:block;}
  #landing{display:none;flex-direction:column;}
  #landing.active{display:flex;}
  #auth{display:none;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(ellipse at 30% 50%,rgba(124,58,237,0.08),transparent 60%);}
  #auth.active{display:flex;}
  #app{display:none;}
  #app.active{display:flex;}

  .btn-primary{background:var(--accent);color:white;border:none;font-family:'Syne',sans-serif;font-weight:600;font-size:0.9rem;padding:0.6rem 1.4rem;border-radius:10px;cursor:pointer;transition:all 0.2s;}
  .btn-primary:hover{background:#6d28d9;transform:translateY(-1px);box-shadow:0 8px 25px rgba(124,58,237,0.4);}
  .btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border);font-family:'Syne',sans-serif;font-weight:600;font-size:0.9rem;padding:0.6rem 1.4rem;border-radius:10px;cursor:pointer;transition:all 0.2s;}
  .btn-secondary:hover{border-color:var(--accent);color:var(--accent);}
  .btn-ghost{background:none;border:none;color:var(--text-muted);font-family:inherit;font-size:0.9rem;cursor:pointer;padding:0.5rem 1rem;border-radius:8px;transition:all 0.2s;}
  .btn-ghost:hover{color:var(--text);background:var(--surface);}
  .btn-full{width:100%;padding:0.85rem;font-size:1rem;border-radius:12px;margin-top:0.5rem;}
  .btn-warn{background:rgba(245,158,11,0.15);color:var(--warn);border:1px solid rgba(245,158,11,0.3);font-family:'Syne',sans-serif;font-weight:600;font-size:0.85rem;padding:0.55rem 1.1rem;border-radius:10px;cursor:pointer;transition:all 0.2s;}
  .btn-warn:hover{background:rgba(245,158,11,0.25);}

  /* NAV */
  .nav{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 3rem;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;background:rgba(10,10,15,0.85);backdrop-filter:blur(20px);}
  .logo{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-0.03em;background:linear-gradient(135deg,#7c3aed,#06d6a0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
  .logo span{-webkit-text-fill-color:var(--accent3);}
  .nav-actions{display:flex;gap:1rem;align-items:center;}

  /* HERO */
  .hero{flex:1;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4rem;padding:6rem 3rem 4rem;max-width:1200px;margin:0 auto;width:100%;}
  .badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(124,58,237,0.15);border:1px solid rgba(124,58,237,0.3);color:#a78bfa;font-size:0.75rem;font-family:'DM Mono',monospace;padding:0.3rem 0.8rem;border-radius:100px;margin-bottom:1.5rem;}
  .badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent2);animation:pulse 2s infinite;}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
  .hero h1{font-family:'Syne',sans-serif;font-size:3.8rem;font-weight:800;line-height:1.0;letter-spacing:-0.04em;margin-bottom:1.5rem;}
  .hero h1 .hl{background:linear-gradient(135deg,#7c3aed 0%,#06d6a0 60%,#f72585 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 200%;animation:grad 5s ease infinite;}
  @keyframes grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
  .hero p{color:var(--text-muted);font-size:1.05rem;line-height:1.7;margin-bottom:2rem;max-width:440px;}
  .hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3rem;}
  .hero-stats{display:flex;gap:2.5rem;}
  .stat-num{font-family:'Syne',sans-serif;font-size:1.8rem;font-weight:800;background:linear-gradient(135deg,var(--accent2),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
  .stat-label{font-size:0.8rem;color:var(--text-muted);}

  .hero-visual{display:flex;align-items:center;justify-content:center;position:relative;}
  .qr-showcase{position:relative;}
  .qr-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2rem;position:relative;overflow:hidden;}
  .qr-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top left,rgba(124,58,237,0.1),transparent 60%);}
  .qr-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;font-family:'DM Mono',monospace;font-size:0.75rem;color:var(--text-muted);}
  .qr-demo-img{width:200px;height:200px;background:white;border-radius:12px;padding:1rem;display:flex;align-items:center;justify-content:center;margin:0 auto;}
  .qr-card-footer{margin-top:1.5rem;display:flex;align-items:center;justify-content:space-between;font-size:0.8rem;}
  .scan-badge{display:flex;align-items:center;gap:0.4rem;background:rgba(6,214,160,0.1);border:1px solid rgba(6,214,160,0.2);color:var(--accent2);padding:0.3rem 0.8rem;border-radius:100px;font-family:'DM Mono',monospace;font-size:0.75rem;}
  .floating-pill{position:absolute;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:0.7rem 1rem;font-size:0.8rem;font-family:'DM Mono',monospace;display:flex;align-items:center;gap:0.5rem;box-shadow:0 8px 30px rgba(0,0,0,0.5);animation:float 3s ease-in-out infinite;}
  .floating-pill:nth-child(2){animation-delay:1s}.floating-pill:nth-child(3){animation-delay:2s}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  .fp1{top:-20px;right:-60px;color:var(--accent2)}.fp2{bottom:40px;right:-70px;color:var(--accent3)}.fp3{top:80px;left:-80px;color:#a78bfa}

  /* SECTIONS */
  .features,.pricing-section{padding:5rem 3rem;max-width:1200px;margin:0 auto;width:100%;}
  .section-label{font-family:'DM Mono',monospace;font-size:0.75rem;color:var(--accent2);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:1rem;}
  .section-title{font-family:'Syne',sans-serif;font-size:2.5rem;font-weight:800;letter-spacing:-0.03em;margin-bottom:3rem;}
  .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
  .feature-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.8rem;transition:all 0.3s;position:relative;overflow:hidden;}
  .feature-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 20px 50px rgba(124,58,237,0.15);}
  .feature-icon{width:44px;height:44px;border-radius:12px;background:rgba(124,58,237,0.15);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1rem;}
  .feature-card h3{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:700;margin-bottom:0.5rem;}
  .feature-card p{color:var(--text-muted);font-size:0.9rem;line-height:1.6;}

  /* PRICING TABLE */
  .pricing-table{width:100%;border-collapse:collapse;margin-bottom:3rem;background:var(--surface);border-radius:16px;overflow:hidden;border:1px solid var(--border);}
  .pricing-table th{font-family:'DM Mono',monospace;font-size:0.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;padding:1rem 1.4rem;text-align:left;border-bottom:1px solid var(--border);}
  .pricing-table td{padding:1rem 1.4rem;border-bottom:1px solid rgba(42,42,61,0.5);font-size:0.92rem;}
  .pricing-table tr:last-child td{border-bottom:none;}
  .pricing-table tr:hover td{background:rgba(124,58,237,0.04);}
  .tier-free{color:var(--accent2);font-family:'Syne',sans-serif;font-weight:700;}
  .tier-price{font-family:'DM Mono',monospace;font-size:1rem;}
  .tier-badge{display:inline-block;font-size:0.7rem;font-family:'DM Mono',monospace;padding:0.15rem 0.5rem;border-radius:4px;margin-left:0.5rem;}
  .tb-free{background:rgba(6,214,160,0.1);color:var(--accent2);}
  .tb-scale{background:rgba(247,37,133,0.1);color:#f472b6;}

  /* CALCULATOR */
  .calc-box{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2.5rem;position:relative;overflow:hidden;}
  .calc-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3));}
  .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;margin-top:1.5rem;}
  .calc-label{font-family:'DM Mono',monospace;font-size:0.75rem;color:var(--text-muted);margin-bottom:0.4rem;}
  .calc-input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:'DM Mono',monospace;font-size:1rem;padding:0.75rem 1rem;border-radius:10px;outline:none;transition:all 0.2s;}
  .calc-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,58,237,0.15);}
  input[type=range]{width:100%;accent-color:var(--accent);margin-top:0.8rem;}
  .calc-result{background:var(--bg);border-radius:14px;padding:1.5rem;}
  .calc-row{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0;border-bottom:1px solid rgba(42,42,61,0.5);font-size:0.87rem;}
  .calc-row:last-child{border-bottom:none;padding-top:0.8rem;}
  .calc-row .v{font-family:'DM Mono',monospace;}
  .calc-total{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:800;color:var(--accent2);}

  /* AUTH */
  .auth-box{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:3rem;width:420px;max-width:95vw;box-shadow:0 40px 100px rgba(0,0,0,0.5);position:relative;overflow:hidden;}
  .auth-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3));}
  .auth-logo{text-align:center;margin-bottom:0.5rem;font-family:'Syne',sans-serif;font-size:1.8rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
  .auth-subtitle{text-align:center;color:var(--text-muted);font-size:0.9rem;margin-bottom:2rem;}
  .auth-tabs{display:flex;margin-bottom:1.8rem;background:var(--bg);border-radius:10px;padding:4px;}
  .auth-tab{flex:1;padding:0.6rem;border:none;background:none;font-family:'Syne',sans-serif;font-size:0.85rem;font-weight:600;color:var(--text-muted);cursor:pointer;border-radius:7px;transition:all 0.2s;}
  .auth-tab.active{background:var(--surface2);color:var(--text);}
  .form-group{margin-bottom:1.2rem;}
  .form-label{display:block;font-size:0.8rem;color:var(--text-muted);margin-bottom:0.4rem;font-family:'DM Mono',monospace;}
  .form-input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:Instrument Sans,sans-serif;font-size:0.95rem;padding:0.75rem 1rem;border-radius:10px;outline:none;transition:all 0.2s;}
  .form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,58,237,0.15);}
  .auth-footer{text-align:center;font-size:0.82rem;color:var(--text-muted);margin-top:1.5rem;}
  .auth-footer a{color:var(--accent);text-decoration:none;cursor:pointer;}

  /* SIDEBAR */
  .sidebar{width:265px;min-height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:1.5rem;position:sticky;top:0;height:100vh;flex-shrink:0;}
  .sidebar-logo{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:800;background:linear-gradient(135deg,#7c3aed,#06d6a0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1.5rem;}

  /* WALLET WIDGET */
  .wallet-widget{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:1rem;margin-bottom:0.7rem;}
  .wallet-label{font-family:'DM Mono',monospace;font-size:0.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.3rem;}
  .wallet-amount{font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:800;line-height:1;}
  .wallet-amount.low{color:var(--warn);}
  .wallet-amount.ok{color:var(--accent2);}
  .wallet-sub{font-size:0.72rem;color:var(--text-muted);margin-top:0.2rem;font-family:'DM Mono',monospace;}
  .wallet-bar{height:4px;background:var(--surface2);border-radius:2px;margin-top:0.6rem;overflow:hidden;}
  .wallet-bar-fill{height:100%;border-radius:2px;transition:width 0.5s;}

  .sidebar-nav{flex:1;display:flex;flex-direction:column;gap:0.3rem;margin-top:0.5rem;}
  .nav-item{display:flex;align-items:center;gap:0.75rem;padding:0.7rem 1rem;border-radius:10px;font-size:0.9rem;cursor:pointer;transition:all 0.2s;color:var(--text-muted);border:none;background:none;font-family:Instrument Sans,sans-serif;text-align:left;width:100%;}
  .nav-item:hover{background:var(--surface2);color:var(--text);}
  .nav-item.active{background:rgba(124,58,237,0.15);color:var(--accent);}
  .nav-item .icon{font-size:1.1rem;width:22px;text-align:center;}
  .sidebar-divider{height:1px;background:var(--border);margin:0.8rem 0;}
  .sidebar-user{display:flex;align-items:center;gap:0.75rem;padding:0.8rem;background:var(--surface2);border-radius:12px;cursor:pointer;}
  .user-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent3));display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:700;font-size:0.9rem;flex-shrink:0;}
  .user-name{font-size:0.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .user-plan{font-size:0.72rem;color:var(--text-muted);font-family:'DM Mono',monospace;}

  /* MAIN */
  .main-content{flex:1;padding:2rem;overflow-y:auto;}
  .page{display:none;max-width:960px;}
  .page.active{display:block;}
  .page-header{margin-bottom:2rem;}
  .page-title{font-family:'Syne',sans-serif;font-size:1.8rem;font-weight:800;margin-bottom:0.3rem;}
  .page-subtitle{color:var(--text-muted);font-size:0.9rem;}
  .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;}
  .section-heading{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:700;}

  /* STATS */
  .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem;}
  .stat-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.3rem;position:relative;overflow:hidden;}
  .stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
  .stat-card:nth-child(1)::before{background:var(--accent)}.stat-card:nth-child(2)::before{background:var(--accent2)}.stat-card:nth-child(3)::before{background:var(--accent3)}.stat-card:nth-child(4)::before{background:var(--warn)}
  .stat-card-label{font-size:0.72rem;color:var(--text-muted);font-family:'DM Mono',monospace;margin-bottom:0.5rem;}
  .stat-card-value{font-family:'Syne',sans-serif;font-size:1.7rem;font-weight:800;}
  .stat-card-sub{font-size:0.72rem;color:var(--accent2);margin-top:0.2rem;}

  /* QR GRID */
  .qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;}
  .qr-item{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:all 0.2s;cursor:pointer;}
  .qr-item:hover{border-color:var(--accent);box-shadow:0 8px 25px rgba(124,58,237,0.15);transform:translateY(-2px);}
  .qr-item-preview{background:white;padding:1.2rem;display:flex;align-items:center;justify-content:center;min-height:110px;width:100%;box-sizing:border-box;}
  .qr-item-info{padding:0.9rem;}
  .qr-item-name{font-weight:600;font-size:0.88rem;margin-bottom:0.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .qr-item-type{font-family:'DM Mono',monospace;font-size:0.68rem;color:var(--text-muted);background:var(--surface2);display:inline-block;padding:0.15rem 0.5rem;border-radius:4px;margin-bottom:0.5rem;}
  .qr-item-footer{display:flex;align-items:center;justify-content:space-between;}
  .qr-item-scans{font-size:0.78rem;color:var(--accent2);}
  .qr-item-cost{font-family:'DM Mono',monospace;font-size:0.72rem;color:var(--text-muted);}

  /* EMPTY */
  .empty-state{text-align:center;padding:4rem 2rem;color:var(--text-muted);}
  .empty-state .es-icon{font-size:3rem;margin-bottom:1rem;}
  .empty-state h3{font-family:'Syne',sans-serif;font-weight:700;font-size:1.1rem;color:var(--text);margin-bottom:0.5rem;}

  /* MODAL */
  .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);z-index:1000;align-items:center;justify-content:center;}
  .modal-overlay.active{display:flex;}
  .modal{background:var(--surface);border:1px solid var(--border);border-radius:24px;width:760px;max-width:96vw;max-height:92vh;overflow-y:auto;box-shadow:0 40px 100px rgba(0,0,0,0.6);}
  .modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1;}
  .modal-title{font-family:'Syne',sans-serif;font-size:1.2rem;font-weight:700;}
  .modal-close{background:var(--surface2);border:none;color:var(--text);width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:1rem;}
  .modal-body{padding:2rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
  .qr-types{display:grid;grid-template-columns:repeat(3,1fr);gap:0.6rem;margin-bottom:1.5rem;}
  .qr-type-btn{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:0.8rem 0.5rem;text-align:center;cursor:pointer;transition:all 0.2s;font-size:0.8rem;font-weight:500;color:var(--text-muted);}
  .qr-type-btn .t-icon{font-size:1.3rem;display:block;margin-bottom:0.3rem;}
  .qr-type-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(124,58,237,0.1);}
  .qr-preview-box{background:var(--bg);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem;}
  .qr-preview-canvas{background:white;border-radius:12px;padding:1rem;display:flex;align-items:center;justify-content:center;min-height:180px;width:100%;}
  .color-row{display:flex;gap:0.8rem;align-items:center;margin-top:0.5rem;}
  .color-input-wrap{display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;color:var(--text-muted);}
  input[type=color]{width:32px;height:32px;border:none;border-radius:6px;cursor:pointer;background:none;}
  .download-row{display:flex;gap:0.6rem;width:100%;}

  /* CREATE MODAL GRID — desktop: preview in col 2 */
  .create-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 1.5rem 2rem 2rem 2rem; }
  .create-modal-right { grid-column: 2; grid-row: 1; }
  .create-modal-left  { grid-column: 1; grid-row: 1; }

  /* MODAL TABS */
  .modal-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 2rem;margin-bottom:0;}
  .modal-tab{padding:0.9rem 1.2rem;font-size:0.82rem;font-family:'DM Mono',monospace;cursor:pointer;color:var(--text-muted);border-bottom:2px solid transparent;transition:all 0.2s;white-space:nowrap;}
  .modal-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
  .modal-tab-content{display:none;}
  .modal-tab-content.active{display:block;}

  /* DESIGN EDITOR */
  .design-section{margin-bottom:1.2rem;}
  .design-section-title{font-size:0.72rem;font-family:'DM Mono',monospace;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.6rem;}
  .shape-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0.4rem;}
  .shape-opt{background:var(--surface2);border:1.5px solid var(--border);border-radius:8px;padding:0.5rem 0.2rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0.3rem;transition:all 0.15s;}
  .shape-opt:hover{border-color:var(--accent);}
  .shape-opt.active{border-color:var(--accent);background:rgba(124,58,237,0.12);}
  .shape-opt canvas{display:block;}
  .shape-opt span{font-size:0.58rem;color:var(--text-muted);}
  .frame-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0.4rem;margin-bottom:0.6rem;}
  .frame-opt{background:var(--surface2);border:1.5px solid var(--border);border-radius:8px;padding:0.5rem 0.3rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0.3rem;transition:all 0.15s;}
  .frame-opt:hover{border-color:var(--accent);}
  .frame-opt.active{border-color:var(--accent);background:rgba(124,58,237,0.12);}
  .frame-opt span{font-size:0.58rem;color:var(--text-muted);}
  .logo-presets{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:0.6rem;}
  .logo-preset-btn{width:36px;height:36px;border-radius:8px;background:var(--surface2);border:1.5px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all 0.15s;}
  .logo-preset-btn:hover{border-color:var(--accent);}
  .logo-preset-btn.active{border-color:var(--accent);background:rgba(124,58,237,0.15);}
  .logo-upload-area{border:1.5px dashed var(--border);border-radius:10px;padding:0.8rem;text-align:center;cursor:pointer;font-size:0.78rem;color:var(--text-muted);transition:all 0.15s;}
  .logo-upload-area:hover{border-color:var(--accent);color:var(--text);}
  .btn-dl{flex:1;padding:0.6rem;font-size:0.8rem;border-radius:8px;background:var(--surface2);border:1px solid var(--border);color:var(--text);cursor:pointer;font-family:'DM Mono',monospace;transition:all 0.2s;}
  .btn-dl:hover{border-color:var(--accent);color:var(--accent);}

  /* WALLET MODAL */
  .wallet-modal{background:var(--surface);border:1px solid var(--border);border-radius:24px;width:460px;max-width:95vw;box-shadow:0 40px 100px rgba(0,0,0,0.6);overflow:hidden;}
  .wm-header{padding:1.5rem 2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
  .wm-body{padding:2rem;}
  .topup-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.7rem;margin-bottom:1.5rem;}
  .topup-btn{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:0.8rem 0.4rem;text-align:center;cursor:pointer;transition:all 0.2s;font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;color:var(--text);}
  .topup-btn:hover,.topup-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(124,58,237,0.1);}
  .topup-sub{font-size:0.65rem;font-family:'DM Mono',monospace;color:var(--text-muted);font-weight:400;display:block;margin-top:0.2rem;}
  .card-form{background:var(--bg);border-radius:14px;padding:1.2rem;margin-bottom:1rem;}
  .card-row{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;}
  .info-box{background:rgba(6,214,160,0.06);border:1px solid rgba(6,214,160,0.15);border-radius:10px;padding:0.9rem 1rem;font-size:0.81rem;color:var(--accent2);margin-bottom:1.2rem;line-height:1.5;}

  /* BILLING */
  .billing-top{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2rem;margin-bottom:1.5rem;position:relative;overflow:hidden;}
  .billing-top::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));}
  .btier-table{width:100%;border-collapse:collapse;}
  .btier-table th{font-family:'DM Mono',monospace;font-size:0.72rem;color:var(--text-muted);text-transform:uppercase;padding:0.7rem 1rem;text-align:left;border-bottom:1px solid var(--border);}
  .btier-table td{padding:0.9rem 1rem;border-bottom:1px solid rgba(42,42,61,0.4);font-size:0.88rem;}
  .btier-table tr:last-child td{border-bottom:none;}
  .active-tier td{background:rgba(124,58,237,0.07);}
  .active-badge{display:inline-flex;align-items:center;gap:0.3rem;background:rgba(124,58,237,0.15);color:#a78bfa;font-family:'DM Mono',monospace;font-size:0.7rem;padding:0.2rem 0.5rem;border-radius:4px;}

  /* ANALYTICS */
  .analytics-chart{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.5rem;margin-bottom:1.5rem;}
  .chart-bars{display:flex;align-items:flex-end;gap:6px;height:100px;}
  .chart-bar{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(to top,var(--accent),rgba(124,58,237,0.3));min-height:4px;transition:height 0.5s;}
  .chart-labels{display:flex;gap:6px;margin-top:0.5rem;}
  .chart-label{flex:1;text-align:center;font-size:0.65rem;color:var(--text-dim);font-family:'DM Mono',monospace;}

  /* LOW CREDIT BANNER */
  .low-credit-banner{background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.25);border-radius:12px;padding:0.9rem 1.2rem;margin-bottom:1.5rem;display:none;align-items:center;gap:0.8rem;font-size:0.87rem;}
  .low-credit-banner.show{display:flex;}

  /* TOAST */
  .toast{position:fixed;bottom:2rem;right:2rem;z-index:9999;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:0.8rem 1.2rem;display:none;align-items:center;gap:0.6rem;font-size:0.9rem;box-shadow:0 8px 30px rgba(0,0,0,0.4);}
  .toast.show{display:flex;animation:slideIn 0.3s ease;}

  /* ══════════════════════════════════
     BOTTOM NAV (mobile only, hidden on desktop)
  ══════════════════════════════════ */
  .bottom-nav{display:none;}

  /* ══════════════════════════════════
     MOBILE RESPONSIVE — < 640px
  ══════════════════════════════════ */
  @media (max-width: 640px) {

    /* Layout */
    #app { flex-direction: column; }
    .sidebar { display: none; }
    .main-content { padding: 1rem 0.9rem 80px 0.9rem; overflow-y: auto; min-height: 100vh; }

    /* Page titles */
    .page-title { font-size: 1.3rem; }
    .page-header { margin-bottom: 1.2rem; }

    /* Stats grid — 2 col pe mobile */
    .stats-row { grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.2rem; }
    .stat-card { padding: 0.9rem; }
    .stat-card-value { font-size: 1.3rem; }

    /* QR grid — 2 col pe mobile */
    .qr-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .qr-item-preview { min-height: 90px; padding: 0.8rem; }
    .qr-item-info { padding: 0.6rem; }
    .qr-item-name { font-size: 0.78rem; }
    .qr-actions { gap: 0.25rem; }
    .qr-action-btn { font-size: 0.6rem; padding: 0.25rem 0.2rem; }

    /* Folder tabs — scroll horizontal */
    #folderTabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.3rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    #folderTabs::-webkit-scrollbar { display: none; }
    .folder-tab { white-space: nowrap; flex-shrink: 0; }

    /* Toolbar QR-urile mele */
    #qrToolbar { flex-wrap: wrap; gap: 0.5rem; }
    #qrToolbar .btn-primary { order: -1; width: 100%; }

    /* Modal — fullscreen */
    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal {
      width: 100% !important;
      max-width: 100% !important;
      max-height: 95vh !important;
      border-radius: 24px 24px 0 0 !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
    }
    .modal-header { padding: 1rem 1.2rem; flex-shrink: 0; }
    .modal-tabs   { flex-shrink: 0; }

    /* ── Create modal mobile ── */
    .create-modal-grid {
      display: flex !important;
      flex-direction: column !important;
      padding: 0 !important;
      gap: 0 !important;
    }
    .create-modal-right {
      grid-column: unset; grid-row: unset;
      flex-shrink: 0;
      padding: 1rem;
      border-bottom: 1px solid var(--border);
      background: var(--bg);
    }
    /* Preview box: coloana, centrat */
    .create-modal-right .qr-preview-box {
      flex-direction: column !important;
      align-items: center !important;
      padding: 0 !important;
      background: transparent !important;
      gap: 0.7rem !important;
    }
    /* QR mai mare */
    .create-modal-right .qr-preview-canvas {
      width: 170px !important;
      min-height: unset !important;
      padding: 0.6rem !important;
    }
    /* Ascunde label "PREVIZUALIZARE" */
    .create-modal-right .qr-preview-box > div:first-child { display: none !important; }
    /* Ascunde folder si salvare din preview - sunt in form */
    .create-modal-right .qr-preview-box > div:nth-last-child(1),
    .create-modal-right .qr-preview-box > div:nth-last-child(2) { display: none !important; }

    .create-modal-left {
      grid-column: unset; grid-row: unset;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 1rem;
      max-height: 45vh;
    }
    .mobile-save-wrap { display: block !important; }
    .mobile-save-btn  { display: block !important; }

    /* ── Edit modal mobile ── */
    #editModal .modal-body {
      display: flex !important;
      flex-direction: column !important;
      padding: 0 !important;
    }
    #editModal .modal-body > div:last-child {
      flex-shrink: 0;
      padding: 1rem;
      border-bottom: 1px solid var(--border);
      background: var(--bg);
    }
    #editModal .modal-body > div:first-child {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 1rem;
    }

    /* Modal tabs */
    .modal-tabs { padding: 0 1rem; }
    .modal-tab { padding: 0.7rem 0.9rem; font-size: 0.78rem; }

    /* QR preview box in modal */
    .qr-preview-box { padding: 1rem; }

    /* Wallet modal */
    .wallet-modal { width: 100% !important; max-width: 100% !important; border-radius: 24px 24px 0 0 !important; }
    .topup-grid { grid-template-columns: repeat(2,1fr); }

    /* Edit modal body */
    #editModal .modal-body { display: block !important; padding: 1rem !important; }

    /* Analytics */
    .analytics-chart { padding: 1rem; }

    /* Billing table — scroll */
    .billing-top { padding: 1.2rem; }
    .btier-table { font-size: 0.78rem; }
    .btier-table th, .btier-table td { padding: 0.5rem 0.6rem; }

    /* Auth screen */
    .auth-box { padding: 1.5rem; margin: 1rem; }

    /* Toast */
    .toast { bottom: 90px; right: 0.8rem; left: 0.8rem; right: 0.8rem; font-size: 0.82rem; }

    /* Shape grid in design tab */
    .shape-grid { grid-template-columns: repeat(3,1fr); }
    .frame-grid { grid-template-columns: repeat(3,1fr); }

    /* ── LANDING PAGE ── */
    .nav { padding: 1rem 1.2rem; }
    .nav-actions .btn-ghost { display: none; }

    .hero {
      grid-template-columns: 1fr !important;
      padding: 2rem 1.2rem 3rem !important;
      gap: 2.5rem !important;
      text-align: center;
    }
    .hero h1 { font-size: 2.4rem !important; }
    .hero p { font-size: 0.95rem; max-width: 100%; margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; flex-direction: column; gap: 0.7rem; }
    .hero-actions button { width: 100%; }
    .hero-stats { justify-content: center; gap: 1.5rem; }
    .stat-num { font-size: 1.4rem !important; }

    .hero-visual { order: -1; }
    .qr-showcase { transform: scale(0.85); transform-origin: center top; }
    .fp1, .fp2, .fp3 { display: none; }

    .features { padding: 3rem 1.2rem !important; }
    .section-title { font-size: 1.7rem !important; }
    .features-grid { grid-template-columns: 1fr !important; gap: 0.8rem; }
    .feature-card { padding: 1.2rem; }

    .pricing-section { padding: 3rem 1.2rem !important; }
    .pricing-table th, .pricing-table td { padding: 0.7rem 0.8rem; font-size: 0.82rem; }
    .tier-badge { display: none; }

    .calc-box { padding: 1.5rem 1rem; }
    .calc-grid { grid-template-columns: 1fr !important; gap: 1rem; }

    /* Bottom nav */
    .bottom-nav {
      display: flex;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      height: 64px;
      background: var(--surface);
      border-top: 1px solid var(--border);
      z-index: 500;
      align-items: stretch;
    }
    .bn-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.2rem;
      cursor: pointer;
      color: var(--text-muted);
      font-size: 0.58rem;
      font-family: 'DM Mono', monospace;
      border: none;
      background: none;
      transition: color 0.15s;
      padding: 0.4rem 0;
      -webkit-tap-highlight-color: transparent;
    }
    .bn-item .bn-icon { font-size: 1.3rem; line-height: 1; }
    .bn-item.active { color: var(--accent); }
    .bn-item.bn-wallet { position: relative; }
    .bn-wallet-badge {
      position: absolute;
      top: 6px; right: calc(50% - 18px);
      background: var(--accent2);
      color: #000;
      font-size: 0.52rem;
      font-family: 'DM Mono', monospace;
      font-weight: 700;
      padding: 0.1rem 0.3rem;
      border-radius: 6px;
      white-space: nowrap;
    }
  }
.folder-color-opt{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all 0.15s;}
.folder-color-opt.active{border-color:var(--text);transform:scale(1.1);}
.folder-tab{display:inline-flex;align-items:center;gap:0.4rem;padding:0.35rem 0.8rem;border-radius:20px;font-size:0.78rem;cursor:pointer;border:1px solid var(--border);color:var(--text-muted);transition:all 0.15s;}
.folder-tab:hover{border-color:var(--accent);color:var(--text);}
.folder-tab.active{color:#fff;border-color:transparent;}
.qr-actions{display:flex;gap:0.4rem;margin-top:0.5rem;flex-wrap:wrap;}
.qr-action-btn{flex:1;background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);padding:0.3rem 0.4rem;border-radius:6px;font-size:0.68rem;cursor:pointer;text-align:center;transition:all 0.15s;}
.qr-action-btn:hover{border-color:var(--accent);color:var(--text);}
.qr-action-btn.danger:hover{border-color:var(--accent3);color:var(--accent3);}
.qr-action-btn.warn:hover{border-color:var(--warn);color:var(--warn);}
  @keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}