/* Modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(15,23,42,0.55); backdrop-filter: blur(6px) saturate(120%); z-index:40}
.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:50}
.modal-card{width:min(480px, 92vw); background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow: 0 20px 40px rgba(15,23,42,0.16), var(--shadow); padding:20px}
.modal-card h2{margin:0 0 6px 0; font-size:18px; color:#0f172a}
.modal-card .muted{color:var(--muted); margin:0 0 14px 0}
.modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:12px}
.modal .modal-actions button:hover{transform:none}
.ghost{background:#ffffff; border:1px solid var(--border); color:#0f172a}
.ghost:hover{background:var(--soft)}
/* Support button row */
.user-support-row{display:flex; justify-content:flex-end; margin-top:6px}
.support-btn{background:#fff; border:1px solid var(--border); box-shadow:none; padding:6px 10px; border-radius:8px; font-weight:600}
.support-btn:hover{background:#f8fafc}

/* Undo-delete toast */
.undo-toast{position:fixed; bottom:100px; left:50%; transform:translateX(-50%); z-index:70; animation:toastIn .25s ease}
.undo-toast-inner{display:flex; align-items:center; gap:12px; background:#1e293b; color:#f1f5f9; padding:12px 16px; border-radius:12px; box-shadow:0 8px 24px rgba(15,23,42,.22); position:relative; overflow:hidden; min-width:240px}
.undo-toast-text{flex:1; font-size:14px; font-weight:500}
.undo-btn{background:transparent; border:none; color:#a78bfa; font-weight:700; font-size:14px; cursor:pointer; padding:4px 8px; border-radius:6px; box-shadow:none; transition:background .15s ease}
.undo-btn:hover{background:rgba(167,139,250,.15); transform:none}
.undo-timer-bar{position:absolute; bottom:0; left:0; height:3px; background:#a78bfa; border-radius:0 0 12px 12px; animation:timerShrink 5s linear forwards}
@keyframes toastIn{from{opacity:0; transform:translateX(-50%) translateY(12px)} to{opacity:1; transform:translateX(-50%) translateY(0)}}
@keyframes timerShrink{from{width:100%} to{width:0%}}

/* Auth overlay */
.auth-overlay{position:fixed; inset:0; background:radial-gradient(1200px 600px at 10% -10%, rgba(139,92,246,0.20), transparent 60%), radial-gradient(1200px 600px at 100% 0%, rgba(34,211,238,0.15), transparent 60%), linear-gradient(180deg, rgba(248,250,252,0.9), rgba(248,250,252,0.96)); display:flex; align-items:center; justify-content:center; z-index:60; padding:28px}
.hero-page{min-height:100vh; background:radial-gradient(1200px 600px at 10% -10%, rgba(139,92,246,0.20), transparent 60%), radial-gradient(1200px 600px at 100% 0%, rgba(34,211,238,0.15), transparent 60%), linear-gradient(180deg, rgba(248,250,252,0.9), rgba(248,250,252,0.96)); display:flex; align-items:center; justify-content:center; padding:28px}
.site-header{position:sticky; top:0; z-index:30; background:rgba(255,255,255,0.8); backdrop-filter: blur(8px); border-bottom:1px solid var(--border)}
.site-header-inner{max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px 16px; gap:12px}
.site-brand{font-weight:800; color:#0b1220; text-decoration:none}
.site-header .brand{padding:4px}
.site-nav{display:flex; gap:14px}
.site-nav a{color:#475569; text-decoration:none; padding:6px 8px; border-radius:8px}
.site-nav a:hover{background:#f1f5f9}
.site-actions{display:flex; gap:8px}
.lang-picker{position:relative}
.lang-btn{border:1px solid var(--border); background:#fff; box-shadow: var(--shadow); padding:8px 10px; border-radius:8px; cursor:pointer}
.lang-btn:hover{background:#f8fafc}
.lang-menu{position:absolute; top:calc(100% + 6px); left:0; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(15,23,42,.12); padding:6px; display:flex; flex-direction:column; gap:4px; min-width:140px; z-index:40}
.lang-item{background:#fff; border:1px solid transparent; text-align:left; padding:8px 10px; border-radius:8px; cursor:pointer}
.lang-item:hover{background:#f8fafc}
.site-footer{border-top:1px solid var(--border); background:#fff}
.site-footer-inner{max-width:1100px; margin:0 auto; padding:16px; display:flex; align-items:center; justify-content:space-between; color:#64748b}
.features{background:#fff; padding:60px 16px}
.features-pro{border-top:1px solid var(--border)}
.features-pro .features-head{max-width:1100px; margin:0 auto 20px; text-align:center}
.features-pro .features-title{margin:0; font-size:32px; letter-spacing:-0.02em; color:#0b1220}
.features-pro .features-sub{margin:6px 0 0 0; color:#64748b}
.features-pro .features-grid{max-width:1100px; margin:20px auto 0; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px}
.features-pro .feat-card{border:1px solid var(--border); border-radius:16px; padding:18px; background:#fff; box-shadow: var(--shadow); transition: border-color .18s ease, transform .08s ease}
.features-pro .feat-card:hover{border-color:#d6d3f9; transform: translateY(-1px)}
.features-pro .feat-icon{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #8b5cf6, #22d3ee); color:#fff; font-size:18px; margin-bottom:8px}
.features-pro .feat-title{margin:0 0 6px 0; font-size:18px; color:#0b1220}
.features-pro .feat-desc{margin:0; color:#475569}
@media (max-width: 1100px){ .features-pro .features-grid{grid-template-columns: repeat(2, minmax(0,1fr));} }
@media (max-width: 640px){ .features-pro .features-grid{grid-template-columns: 1fr;} }
.pricing{padding:40px 16px}
.pricing-inner{max-width:1100px; margin:0 auto}
.pricing-card{border:1px solid var(--border); border-radius:16px; padding:16px; background:#fff; width: fit-content}

/* Pricing (dark style) */
.pricing-dark{background:#0b1220; color:#e5e7eb; padding:80px 16px}
.pricing-dark .pricing-wrap{max-width:1200px; margin:0 auto}
.pricing-dark .pricing-title{font-size:48px; line-height:1.1; text-align:center; color:#fff; margin:0 0 8px}
.pricing-dark .pricing-sub{text-align:center; color:#94a3b8; margin:0 0 28px}
.pricing-dark .pricing-grid{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:20px}
.pricing-dark .price-card{background:#171a22; border:1px solid #2a3342; border-radius:24px; padding:24px; display:flex; flex-direction:column; gap:12px; box-shadow: 0 10px 30px rgba(2,6,23,0.35)}
.pricing-dark .tier-name{font-weight:800; font-size:20px; color:#f8fafc}
.pricing-dark .price{display:flex; align-items:baseline; gap:6px; color:#fff}
.pricing-dark .price .amount{font-size:44px; font-weight:900}
.pricing-dark .price .currency{font-size:32px; font-weight:800}
.pricing-dark .price .per{font-size:14px; color:#94a3b8}
.pricing-dark .meta{color:#94a3b8}
.pricing-dark .price-features{list-style:none; margin:12px 0 18px; padding:0; display:flex; flex-direction:column; gap:10px; background:transparent}
.pricing-dark .price-features li{display:flex; align-items:center; gap:10px; color:#e5e7eb; background:transparent}
.pricing-dark .price-features li::before{content:"✓"; color:#a7f3d0; font-weight:900}
.pricing-dark .btn-cta{border:1px solid #394150; background:#2a3342; color:#f8fafc; padding:14px; border-radius:14px; font-weight:800; cursor:pointer}
.pricing-dark .btn-cta:hover{background:#333c4e}
.pricing-dark .btn-cta.primary{background:#ffffff; border-color:#ffffff; color:#3b2ac6}
.pricing-dark .tier-highlight{background:#5b5cf6; border-color:#5b5cf6; color:#fff}
.pricing-dark .tier-highlight .price-features li{color:#f3f4f6}
.pricing-dark .tier-highlight .price-features li::before{color:#fff}
.pricing-dark .tier-highlight .meta{color:#e2e8f0}

@media (max-width: 1100px){
  .pricing-dark .pricing-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 680px){
  .pricing-dark{padding:60px 14px}
  .pricing-dark .pricing-title{font-size:36px}
  .pricing-dark .pricing-grid{grid-template-columns: 1fr}
}

/* Why people use section */
.why{background:#ffffff; padding:80px 16px}
.why-head{max-width:1100px; margin:0 auto 32px}
.why-title{margin:0; font-size:32px; letter-spacing:-0.01em; color:#0b1220}
.why-grid{max-width:1100px; margin:0 auto; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:24px}
.why-card{background:#fff; border:1px solid var(--border); border-radius:22px; padding:26px; box-shadow: var(--shadow); display:flex; flex-direction:column; gap:12px}
.why-icon{width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px}
.why-item-title{margin:0; font-size:22px; color:#0b1220}
.why-item-desc{margin:0; color:#475569}
.bg-blue{background:#e0f2fe}
.bg-indigo{background:#ede9fe}
.bg-green{background:#dcfce7}
.bg-orange{background:#ffedd5}
.bg-purple{background:#f3e8ff}
.bg-pink{background:#ffe4e6}
@media (max-width: 1100px){ .why-grid{grid-template-columns: repeat(2, minmax(0,1fr));} }
@media (max-width: 640px){ .why-grid{grid-template-columns: 1fr;} }
.auth-card .brand-mark.big{width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #8b5cf6, #22d3ee); color:#fff; font-weight:800}
.hero{width:min(1100px, 94vw); display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem, 6vw, 7rem); align-items:center}
.hero-left{display:flex; flex-direction:column; gap:14px}
.hero-title{margin:0; font-size:36px; line-height:1.15; letter-spacing:-0.02em; color:#0b1220}
.hero-sub{margin:0; font-size:16px; color:#475569}
.beta-badge{display:inline-block; margin-top:6px; padding:6px 10px; border-radius:999px; background:#eef2ff; color:#3730a3; font-weight:700; font-size:12px; letter-spacing:.02em}
.hero-features{list-style:none; margin:6px 0 0 0; padding:0; display:flex; flex-direction:column; gap:6px; color:#334155}
.hero-cta{margin-top:8px; padding:12px 16px; font-size:16px; border-radius:12px}
.hero-right{display:flex; align-items:center; justify-content:center}
.hero-device{width:100%; max-width:520px; aspect-ratio: 16/10; border-radius:20px; border:1px solid var(--border); background:#fff; box-shadow:0 30px 60px rgba(2,6,23,0.12), var(--shadow); padding:14px; position:relative; overflow:hidden}
.hero-ui.topbar{height:14px; border-radius:8px; background:linear-gradient(90deg, #f1f5f9, #e2e8f0); margin-bottom:12px}
.hero-ui.row{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:12px}
.hero-ui.card{height:120px; border-radius:14px; background:linear-gradient(180deg, #fafafa, #f1f5f9)}
.hero-ui.card.tall{height:160px}
.hero-ui.prompt{height:42px; border-radius:12px; background:linear-gradient(90deg, #ede9fe, #e0f2fe)}
.hero-img{width:100%; max-width:720px; border-radius:20px; border:1px solid var(--border); box-shadow:0 30px 60px rgba(2,6,23,0.12), var(--shadow); display:block}
.auth-error{margin-top:6px; color:#b91c1c; font-size:13px}

/* Settings form */
.settings-body{display:flex; flex-direction:column; gap:12px; margin:10px 0 6px}
.field{display:flex; flex-direction:column; gap:6px}
.field.row{flex-direction:row; align-items:center; gap:10px}
.label{font-weight:600; color:#0f172a}
.label-inline{color:#0f172a}
.textarea{min-height:96px; border:1px solid var(--border); border-radius:12px; padding:10px; font: inherit; color: #0b1220; background:#fff}
.textarea:focus{outline:none; border-color:var(--accent); box-shadow: 0 0 0 3px rgba(124,58,237,.15)}
.select{border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:#fff; color:#0b1220}
.select:focus{outline:none; border-color:var(--accent); box-shadow: 0 0 0 3px rgba(124,58,237,.15)}