/* Q-One v0.1 — Design-first prototype */
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

/* Landing */
.landing-body { background: #090b12; color: #f8f9fb; overflow-x: hidden; }
.noise { position: fixed; inset: 0; pointer-events:none; opacity:.12; z-index:20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.landing-nav { height: 86px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:30; }
.landing-nav .brand-word { color:#fff; }
.desktop-nav { display:flex; gap:28px; color:#a8adba; font-size:14px; }
.desktop-nav a:hover { color:#fff; }
.nav-actions { display:flex; align-items:center; gap:8px; }
.landing-nav .btn-ghost { color:#c7cad3; }
.hero { min-height: 700px; display:grid; grid-template-columns: .93fr 1.07fr; align-items:center; gap:48px; padding-block: 50px 80px; }
.hero-copy { position:relative; z-index:2; }
.eyebrow,.section-kicker { display:inline-flex; align-items:center; gap:9px; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:800; color:#9da3b3; }
.pulse { width:8px; height:8px; border-radius:50%; background:#2ee6a6; box-shadow:0 0 0 6px rgba(46,230,166,.08); }
.hero h1 { font-size:clamp(52px,6.2vw,88px); line-height:.98; margin:22px 0; letter-spacing:-.055em; font-weight:850; }
.hero h1 span { color:#9c8cff; }
.hero-lead { font-size:18px; line-height:1.9; color:#a9adba; max-width:610px; margin:0; }
.hero-actions { display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.trust-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:30px; font-size:11px; color:#707582; text-transform:uppercase; letter-spacing:.08em; direction:ltr; justify-content:flex-end; }
.trust-row i { width:3px; height:3px; background:#4a4e58; border-radius:50%; }
.hero-visual { position:relative; min-height:620px; display:grid; place-items:center; direction:ltr; }
.glow { position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; }
.glow-one { width:330px; height:330px; background:#6d4dff; top:80px; left:60px; }
.glow-two { width:260px; height:260px; background:#18c999; bottom:40px; right:30px; opacity:.22; }
.phone { direction:rtl; position:relative; }
.phone-bezel { width:330px; height:660px; background:#06070a; border:1px solid rgba(255,255,255,.16); border-radius:54px; padding:9px; box-shadow:0 40px 100px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06); overflow:hidden; position:relative; }
.phone-island { position:absolute; width:94px; height:25px; background:#050608; top:17px; left:50%; transform:translateX(-50%); border-radius:20px; z-index:8; }
.profile-screen { --accent:#7557ff; --radius:22px; --glow:.72; width:100%; height:100%; border-radius:46px; overflow:auto; scrollbar-width:none; color:#fff; padding:58px 19px 22px; position:relative; background:
 radial-gradient(circle at 18% 10%, color-mix(in srgb,var(--accent) calc(var(--glow) * 100%), transparent) 0, transparent 34%),
 radial-gradient(circle at 90% 70%, rgba(44,220,174,.18) 0, transparent 35%),
 linear-gradient(180deg,#1b1834 0%,#10111a 62%,#0b0c12 100%); }
.profile-screen::-webkit-scrollbar { display:none; }
.profile-screen:before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(130deg,rgba(255,255,255,.08),transparent 35%,transparent 65%,rgba(255,255,255,.035)); }
.profile-top-actions { position:absolute; top:49px; left:16px; right:16px; display:flex; justify-content:space-between; z-index:2; }
.profile-top-actions button { width:31px; height:31px; border:1px solid rgba(255,255,255,.16); border-radius:50%; background:rgba(8,9,14,.24); color:#fff; backdrop-filter:blur(12px); }
.avatar-orbit { width:86px; height:86px; border-radius:50%; margin:12px auto 12px; display:grid; place-items:center; background:conic-gradient(from 40deg,var(--accent),#2ee6a6,var(--accent)); padding:2px; box-shadow:0 12px 34px color-mix(in srgb,var(--accent) 25%,transparent); position:relative; z-index:2; }
.avatar { width:100%; height:100%; border:4px solid #171823; border-radius:50%; display:grid; place-items:center; background:linear-gradient(145deg,var(--accent),#15161f); color:#fff; font-size:31px; font-weight:900; }
.profile-screen h2 { text-align:center; font-size:20px; margin:0 0 5px; position:relative; z-index:2; }
.profile-screen > p { text-align:center; font-size:12px; color:rgba(255,255,255,.65); margin:0 auto 15px; position:relative; z-index:2; }
.micro-stats { display:flex; justify-content:center; gap:7px; margin:12px 0 16px; position:relative; z-index:2; }
.micro-stats span { font-size:9px; padding:7px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); color:rgba(255,255,255,.6); backdrop-filter:blur(12px); }
.micro-stats b { color:#fff; font-size:10px; margin-inline-end:3px; }
.profile-links { display:grid; gap:9px; position:relative; z-index:2; }
.profile-link { min-height:61px; border:1px solid rgba(255,255,255,.11); border-radius:var(--radius); background:rgba(255,255,255,.075); backdrop-filter:blur(18px); display:grid; grid-template-columns:40px 1fr 22px; align-items:center; gap:9px; padding:9px 12px; transition:.2s var(--ease); }
.profile-link:hover { transform:translateY(-2px); background:rgba(255,255,255,.11); }
.profile-link.featured { border-color:color-mix(in srgb,var(--accent) 52%,rgba(255,255,255,.14)); background:color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.055)); }
.social-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.11); font-size:12px; font-weight:800; }
.profile-link b { display:block; font-size:11px; }
.profile-link small { display:block; font-size:8px; color:rgba(255,255,255,.48); margin-top:2px; }
.profile-link em { font-style:normal; color:rgba(255,255,255,.55); font-size:12px; }
.powered { text-align:center; font-size:9px; color:rgba(255,255,255,.34); margin-top:17px; position:relative; z-index:2; direction:ltr; }
.phone-hero { transform:rotate(-3deg); z-index:3; }
.floating-chip { position:absolute; z-index:5; border:1px solid rgba(255,255,255,.13); background:rgba(18,20,29,.7); backdrop-filter:blur(20px); box-shadow:0 22px 60px rgba(0,0,0,.28); border-radius:18px; padding:13px 15px; color:#fff; }
.floating-chip span { display:block; color:#8f95a4; font-size:10px; }
.floating-chip b { font-size:15px; }
.chip-a { left:5px; top:135px; }
.chip-b { right:-2px; bottom:130px; display:flex; align-items:center; gap:10px; min-width:190px; }
.mini-avatar { width:34px; height:34px; display:grid!important; place-items:center; background:linear-gradient(145deg,#8b6dff,#5740c8); color:#fff!important; border-radius:11px; font-weight:900; }
.metric-strip { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid rgba(255,255,255,.08); padding-block:28px; }
.metric-strip > div { display:flex; gap:15px; align-items:center; justify-content:center; border-inline-start:1px solid rgba(255,255,255,.07); }
.metric-strip > div:last-child { border-inline-start:0; }
.metric-strip strong { font-size:29px; color:#fff; letter-spacing:-.04em; }
.metric-strip span { color:#777d8b; font-size:11px; line-height:1.6; }
.section { padding-block:120px; }
.section-heading { max-width:760px; margin-bottom:45px; }
.section-heading h2,.design-copy h2,.cta h2 { font-size:clamp(34px,4vw,56px); line-height:1.15; letter-spacing:-.04em; margin:14px 0 16px; }
.section-heading p,.design-copy > p { color:#8d92a0; font-size:16px; line-height:1.9; }
.feature-grid { display:grid; grid-template-columns:1.1fr .9fr .9fr; grid-template-rows:auto auto; gap:14px; }
.feature-card { min-height:260px; border:1px solid rgba(255,255,255,.08); border-radius:28px; padding:28px; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); position:relative; overflow:hidden; }
.feature-card:after { content:""; position:absolute; width:180px; height:180px; border-radius:50%; background:#6f51ff; filter:blur(90px); opacity:.08; left:-50px; bottom:-70px; }
.feature-card h3 { font-size:21px; margin:20px 0 8px; }
.feature-card p { color:#8c919f; font-size:13px; line-height:1.8; margin:0; max-width:460px; }
.feature-icon { width:42px; height:42px; border:1px solid rgba(255,255,255,.12); border-radius:14px; display:grid; place-items:center; color:#c4baff; background:rgba(255,255,255,.04); font-weight:800; }
.large-card { grid-row:span 2; min-height:535px; }
.wide-card { grid-column:2 / 4; display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:30px; }
.block-stack { display:grid; gap:8px; margin-top:38px; }
.block-stack span { height:48px; display:flex; align-items:center; padding:0 14px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.045); color:#d7d9e0; font-size:12px; transform:translateX(calc(var(--i,0)*-5px)); }
.block-stack span:nth-child(2){margin-inline-start:16px}.block-stack span:nth-child(3){margin-inline-start:32px}.block-stack span:nth-child(4){margin-inline-start:48px}
.mini-chart { height:120px; display:flex; align-items:end; gap:8px; padding:10px 0; }
.mini-chart i { flex:1; min-width:10px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,#8d74ff,#5840ca); opacity:.85; }
.design-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; }
.clean-list { list-style:none; padding:0; margin:28px 0 34px; display:grid; gap:13px; }
.clean-list li { color:#c4c7d0; font-size:13px; display:flex; gap:12px; align-items:center; }
.clean-list span { color:#6d7280; font-size:10px; border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:4px 7px; }
.design-canvas { min-height:520px; border:1px solid rgba(255,255,255,.08); border-radius:36px; background:linear-gradient(145deg,#131621,#0c0e15); position:relative; overflow:hidden; }
.design-canvas:before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom,black,transparent 80%); }
.palette-card,.radius-card,.typography-card,.glass-card { position:absolute; border:1px solid rgba(255,255,255,.11); border-radius:22px; background:rgba(255,255,255,.055); backdrop-filter:blur(20px); box-shadow:0 20px 60px rgba(0,0,0,.24); }
.palette-card { top:55px; right:42px; padding:18px; width:220px; display:flex; gap:7px; flex-wrap:wrap; }
.palette-card span { width:34px; height:34px; border-radius:10px; background:var(--swatch); }
.palette-card b { width:100%; font-size:11px; color:#a9aeba; margin-top:8px; }
.radius-card { top:118px; left:44px; width:210px; padding:20px; }
.radius-card div { height:38px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); margin-bottom:8px; }
.radius-card div:nth-child(1){border-radius:8px}.radius-card div:nth-child(2){border-radius:18px}.radius-card div:nth-child(3){border-radius:999px}
.radius-card small,.typography-card small { color:#777d8b; font-size:10px; }
.typography-card { bottom:52px; right:64px; width:285px; padding:21px; }
.typography-card strong { font-size:46px; line-height:1; display:block; letter-spacing:-.06em; }.typography-card span{display:block;font-size:20px;font-weight:800;margin:8px 0}
.glass-card { bottom:88px; left:42px; width:180px; padding:20px; font-size:13px; }.glass-card span{color:#8c92a0;font-size:10px}
.cta { margin-block:20px 110px; border-radius:34px; padding:52px; background:linear-gradient(135deg,#7557ff,#3d2ca1 62%,#20175b); display:flex; align-items:center; justify-content:space-between; gap:30px; overflow:hidden; position:relative; }
.cta:after { content:"Q"; position:absolute; left:3%; top:50%; transform:translateY(-50%); font-size:210px; font-weight:900; color:rgba(255,255,255,.045); }
.cta .section-kicker { color:rgba(255,255,255,.62); }.cta h2{margin-bottom:0;position:relative;z-index:2}.cta .btn{position:relative;z-index:2}
.landing-footer { min-height:130px; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; color:#717684; font-size:11px; }.landing-footer .brand-word{color:#fff}.landing-footer p{letter-spacing:.08em;text-transform:uppercase}

/* Dashboard */
.dashboard-body { background:#f5f6f9; color:#15171e; overflow:hidden; }
.dashboard-shell { min-height:100vh; display:grid; grid-template-columns:230px 1fr; direction:ltr; }
.sidebar { direction:rtl; background:#0d0f14; color:#fff; padding:22px 16px; display:flex; flex-direction:column; position:relative; z-index:20; height:100vh; }
.brand-dashboard { padding:0 8px 24px; border-bottom:1px solid rgba(255,255,255,.08); }.brand-dashboard .brand-badge{font-size:8px;color:#9ca1ae;border:1px solid rgba(255,255,255,.1);padding:3px 6px;border-radius:999px;margin-inline-start:3px;font-weight:700}
.side-nav { display:grid; gap:5px; margin-top:20px; }.side-nav a{height:44px;padding:0 12px;border-radius:12px;display:flex;align-items:center;gap:11px;color:#888e9b;font-size:13px;transition:.18s}.side-nav a span{width:22px;text-align:center;color:#666c78}.side-nav a:hover{color:#fff;background:rgba(255,255,255,.04)}.side-nav a.active{background:rgba(117,87,255,.15);color:#fff}.side-nav a.active span{color:#a994ff}.side-bottom{margin-top:auto;display:grid;gap:12px}.plan-card{border:1px solid rgba(255,255,255,.09);background:linear-gradient(150deg,rgba(117,87,255,.19),rgba(255,255,255,.025));border-radius:17px;padding:14px;display:grid;gap:8px}.plan-card span{font-size:10px;color:#a997ff}.plan-card b{font-size:11px;line-height:1.6}.profile-chip{width:100%;border:0;background:transparent;color:#fff;display:grid;grid-template-columns:34px 1fr 20px;gap:9px;align-items:center;text-align:right;padding:7px;border-radius:12px}.profile-chip:hover{background:rgba(255,255,255,.04)}.profile-chip b{display:block;font-size:11px}.profile-chip small{display:block;color:#757b87;font-size:9px;margin-top:2px}.profile-chip em{font-style:normal;color:#686e79}
.dashboard-main { direction:rtl; min-width:0; height:100vh; display:grid; grid-template-rows:68px 1fr; }
.topbar { background:rgba(255,255,255,.86); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:relative; z-index:10; }
.topbar-title{display:flex;align-items:center;gap:12px}.menu-btn{display:none}.breadcrumb{font-size:10px;color:#9a9eaa;margin-bottom:2px}.breadcrumb b{color:#555a67}.topbar h1{font-size:17px;margin:0}.topbar-actions{display:flex;align-items:center;gap:8px}.save-state{font-size:10px;color:#777c88;display:flex;align-items:center;gap:7px;margin-inline-end:5px}.save-state i{width:6px;height:6px;background:#19b77c;border-radius:50%}
.workspace { min-height:0; display:grid; grid-template-columns:minmax(560px,1fr) 430px; direction:ltr; }
.editor-column { direction:rtl; overflow:auto; padding:28px max(28px,5vw) 80px; scrollbar-width:thin; }
.preview-column { direction:rtl; background:#eceef3; border-left:1px solid #e0e3ea; display:grid; grid-template-rows:52px 1fr; min-width:0; }
.preview-toolbar { padding:0 20px; display:flex; align-items:center; justify-content:space-between; color:#777c88; font-size:10px; border-bottom:1px solid #dfe2e8; }.device-toggle{display:flex;background:#e1e4ea;border-radius:9px;padding:3px}.device-toggle button{width:28px;height:24px;border:0;background:transparent;border-radius:7px;color:#7b808c}.device-toggle button.active{background:#fff;color:#1c1f27;box-shadow:0 1px 4px rgba(15,23,42,.08)}
.preview-stage { display:grid; place-items:center; padding:24px; overflow:auto; }
.phone-editor { transform:scale(.78); transform-origin:center; }.phone-editor .phone-bezel{box-shadow:0 30px 70px rgba(30,35,50,.28);}
.panel { display:none; animation:panelIn .2s ease; }.panel.active{display:block}@keyframes panelIn{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}
.panel-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:16px; }.panel-head h2{font-size:18px;margin:0 0 4px}.panel-head p{font-size:11px;color:#858a96;margin:0}.section-space{margin-top:30px}
.card { background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 1px 2px rgba(15,23,42,.025); }
.form-card { padding:20px; }.avatar-row{display:flex;align-items:center;gap:14px;padding-bottom:20px;border-bottom:1px solid #eff0f4;margin-bottom:20px}.editor-avatar{width:62px;height:62px;border-radius:19px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#8b6cff,#5d46cc);font-size:24px;font-weight:900;box-shadow:0 10px 24px rgba(117,87,255,.18)}.avatar-row p{font-size:9px;color:#9a9eaa;margin:6px 0 0}
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.field{display:grid;gap:7px;position:relative}.field span{font-size:10px;font-weight:800;color:#484c58}.field input,.field textarea,.select{width:100%;border:1px solid #e0e3e9;background:#fbfbfc;border-radius:12px;padding:11px 12px;outline:0;color:#20232c;transition:.18s}.field input:focus,.field textarea:focus,.select:focus{border-color:#a999ff;box-shadow:0 0 0 3px rgba(117,87,255,.08);background:#fff}.field textarea{resize:vertical;min-height:82px;line-height:1.6}.field-full{grid-column:1/-1}.counter{position:absolute;left:10px;bottom:8px;font-size:8px;color:#a1a5af}.slug-input{display:flex;align-items:center;border:1px solid #e0e3e9;background:#fbfbfc;border-radius:12px;overflow:hidden}.slug-input:focus-within{border-color:#a999ff;box-shadow:0 0 0 3px rgba(117,87,255,.08)}.slug-input small{font-size:9px;color:#9297a3;padding:0 11px;border-left:1px solid #e6e8ed;height:38px;display:flex;align-items:center;direction:ltr}.slug-input input{border:0;background:transparent;border-radius:0;padding-inline:8px;box-shadow:none!important}
.link-editor-list { display:grid; gap:9px; }.link-editor-item{background:#fff;border:1px solid var(--line);border-radius:17px;padding:11px;display:grid;grid-template-columns:24px 40px minmax(0,1fr) auto;align-items:center;gap:10px;transition:.18s}.link-editor-item.dragging{opacity:.45;transform:scale(.99)}.drag-handle{color:#b0b4be;cursor:grab;font-size:15px;text-align:center}.drag-handle:active{cursor:grabbing}.link-type-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#f1f2f6;font-size:11px;font-weight:900;color:#515664}.link-editor-item b{font-size:11px;display:block}.link-editor-item small{font-size:9px;color:#959aa6;display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:right}.item-actions{display:flex;gap:5px;align-items:center}.mini-action{width:30px;height:30px;border:1px solid #e7e9ee;background:#fff;border-radius:9px;color:#7b808b}.mini-action:hover{background:#f6f7f9;color:#252830}.link-editor-item.disabled{opacity:.5}.link-editor-item.disabled .link-type-icon{filter:grayscale(1)}
.design-controls { padding:4px 20px; }.control-section{padding:19px 0;border-bottom:1px solid #eff0f4}.control-section:last-child{border-bottom:0}.control-section h3{font-size:11px;margin:0 0 12px}.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.theme-option{border:1px solid #e4e6eb;background:#fff;border-radius:14px;padding:7px;text-align:center;color:#555a66}.theme-option.active{border-color:#8d78ff;box-shadow:0 0 0 2px rgba(117,87,255,.07)}.theme-thumb{height:66px;border-radius:10px;display:block;margin-bottom:7px}.theme-option b{font-size:9px}.theme-thumb.aurora{background:radial-gradient(circle at 20% 15%,#7758ff,transparent 45%),linear-gradient(160deg,#1a1830,#0d0f15)}.theme-thumb.midnight{background:radial-gradient(circle at 80% 20%,#1457bb,transparent 40%),linear-gradient(160deg,#07101f,#05080e)}.theme-thumb.paper{background:radial-gradient(circle at 25% 20%,#d9d0ff,transparent 30%),linear-gradient(160deg,#fff,#ececf1)}.theme-thumb.sunset{background:radial-gradient(circle at 30% 20%,#ff7a5c,transparent 40%),linear-gradient(160deg,#351b34,#160e1c)}
.color-row{display:flex;gap:9px;align-items:center}.color-row button,.custom-color{width:31px;height:31px;border-radius:50%;border:2px solid #fff;outline:1px solid #e2e4e9;background:var(--c);position:relative}.color-row button.active:after{content:"✓";color:#fff;font-size:10px;position:absolute;inset:0;display:grid;place-items:center}.custom-color{display:grid;place-items:center;background:#f5f6f9;color:#7a7f8b;overflow:hidden}.custom-color input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}.custom-color span{font-size:16px}.segmented{display:flex;background:#f0f1f5;padding:4px;border-radius:12px;width:max-content}.segmented button{height:30px;padding:0 13px;border:0;border-radius:9px;background:transparent;color:#797e89;font-size:9px;font-weight:700}.segmented button.active{background:#fff;color:#20232b;box-shadow:0 1px 4px rgba(15,23,42,.08)}.range-title{display:flex;justify-content:space-between;align-items:center}.range-title output{font-size:9px;color:#8d929d}.range{width:100%;accent-color:var(--primary)}.toggle-line{display:flex;justify-content:space-between;align-items:center}.toggle-line h3{margin-bottom:4px}.toggle-line p{font-size:9px;color:#9297a3;margin:0}.switch{position:relative;width:39px;height:23px;display:inline-block}.switch input{display:none}.switch span{position:absolute;inset:0;border-radius:999px;background:#d4d7dd;transition:.18s}.switch span:after{content:"";position:absolute;width:17px;height:17px;top:3px;right:3px;background:#fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.14);transition:.18s}.switch input:checked + span{background:var(--primary)}.switch input:checked + span:after{transform:translateX(-16px)}
.qr-layout{padding:24px;display:grid;grid-template-columns:240px 1fr;gap:30px}.qr-demo-card{background:#f6f6f9;border:1px solid #eceef2;border-radius:18px;padding:18px;text-align:center}.qr-demo-card b{display:block;font-size:11px;direction:ltr;margin-top:10px}.qr-demo-card small{font-size:8px;color:#989ca7}.qr-mock{width:170px;aspect-ratio:1;margin:auto;background:#fff;padding:14px;border-radius:15px;box-shadow:0 8px 24px rgba(15,23,42,.05);display:grid;grid-template-columns:repeat(11,1fr);gap:2px}.qr-mock i{background:#11131a;border-radius:1px}.qr-controls h3{font-size:14px;margin:0 0 7px}.qr-controls>p{font-size:10px;color:#858a96;line-height:1.8;margin-bottom:20px}.inline-actions{display:flex;gap:8px;margin-top:16px}
.analytics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.metric-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:17px}.metric-card span{display:block;font-size:9px;color:#8b909b}.metric-card strong{display:block;font-size:24px;margin:5px 0}.metric-card small{font-size:8px;color:#989da7}.metric-card .up{color:#12a873}.analytics-card{padding:20px}.chart-title{display:flex;justify-content:space-between;align-items:start}.chart-title h3{font-size:12px;margin:0}.chart-title p{font-size:8px;color:#969aa5;margin:4px 0}.legend{display:flex;gap:10px;font-size:8px;color:#858a95}.legend span{display:flex;align-items:center;gap:4px}.legend i{width:6px;height:6px;border-radius:2px;background:#7557ff}.legend span:last-child i{background:#d9d5ff}.chart-bars{height:210px;display:flex;align-items:end;gap:8px;padding-top:24px;background-image:linear-gradient(#eff0f3 1px,transparent 1px);background-size:100% 25%;}.chart-bars i{flex:1;height:var(--h);border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#8f78ff,#684de5);min-width:8px}.settings-list{overflow:hidden}.settings-list>div{min-height:68px;padding:14px 18px;border-bottom:1px solid #eff0f4;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:15px}.settings-list>div:last-child{border-bottom:0}.settings-list span{font-size:10px;color:#7d828e}.settings-list b{font-size:11px}
/* live preview theme states */
.profile-screen.theme-midnight{background:radial-gradient(circle at 80% 10%,rgba(0,102,255,.46),transparent 34%),linear-gradient(180deg,#07162a,#060a12 65%,#030508)}
.profile-screen.theme-paper{color:#191b22;background:radial-gradient(circle at 20% 10%,rgba(117,87,255,.20),transparent 34%),linear-gradient(180deg,#faf9ff,#f2f1f7 65%,#ececf2)}.profile-screen.theme-paper .profile-top-actions button,.profile-screen.theme-paper .micro-stats span,.profile-screen.theme-paper .profile-link{color:#171922;border-color:rgba(17,19,26,.09);background:rgba(255,255,255,.7)}.profile-screen.theme-paper>p,.profile-screen.theme-paper .profile-link small,.profile-screen.theme-paper .micro-stats span,.profile-screen.theme-paper .profile-link em{color:#6e7280}.profile-screen.theme-paper .micro-stats b{color:#171922}.profile-screen.theme-paper .avatar{border-color:#f4f3f8}.profile-screen.theme-paper .powered{color:#9397a2}.profile-screen.theme-sunset{background:radial-gradient(circle at 20% 10%,rgba(255,104,80,.6),transparent 34%),radial-gradient(circle at 90% 60%,rgba(225,68,146,.18),transparent 30%),linear-gradient(180deg,#34192e,#1b0f1a 65%,#100b12)}
.profile-screen.style-solid .profile-link{background:color-mix(in srgb,var(--accent) 88%,#0f1118);border-color:transparent}.profile-screen.style-outline .profile-link{background:transparent;border-color:color-mix(in srgb,var(--accent) 45%,rgba(255,255,255,.14));}.profile-screen.theme-paper.style-solid .profile-link{background:color-mix(in srgb,var(--accent) 15%,#fff)}
.toast{position:fixed;bottom:24px;left:24px;background:#101219;color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:11px 14px;display:flex;gap:8px;align-items:center;font-size:10px;box-shadow:0 16px 46px rgba(0,0,0,.18);transform:translateY(20px);opacity:0;pointer-events:none;transition:.25s;z-index:100}.toast.show{transform:none;opacity:1}.toast b{width:20px;height:20px;border-radius:50%;background:#18a975;display:grid;place-items:center;font-size:9px}

/* Public page */
.public-body{min-height:100vh;background:#0a0b10;color:#fff}.public-shell{min-height:100vh;display:grid;place-items:center;padding:0}.public-profile{--accent:#7557ff;--radius:22px;--glow:.72;width:100%;min-height:100vh;position:relative;overflow:hidden;padding:28px max(20px,calc((100vw - 650px)/2));background:radial-gradient(circle at 22% 0%,rgba(117,87,255,.62),transparent 33%),radial-gradient(circle at 88% 70%,rgba(46,230,166,.13),transparent 32%),linear-gradient(180deg,#1b1834,#10111a 60%,#0b0c12)}.public-profile:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(130deg,rgba(255,255,255,.055),transparent 35%,transparent 70%,rgba(255,255,255,.025))}.public-top{height:46px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.public-brand{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:900;direction:ltr;color:rgba(255,255,255,.72)}.public-brand span{width:28px;height:28px;border-radius:9px;background:linear-gradient(145deg,#8b6dff,#5e45d2);display:grid;place-items:center;color:#fff}.public-action{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff;backdrop-filter:blur(16px)}.public-identity{text-align:center;position:relative;z-index:2;padding:30px 0 24px}.public-avatar{width:102px;height:102px}.public-avatar .avatar{font-size:38px}.public-identity h1{font-size:28px;margin:14px 0 7px}.public-identity>p{font-size:13px;color:rgba(255,255,255,.6);margin:0}.public-links{display:grid;gap:11px;position:relative;z-index:2}.public-link{min-height:72px;border:1px solid rgba(255,255,255,.11);border-radius:var(--radius);background:rgba(255,255,255,.075);backdrop-filter:blur(20px);display:grid;grid-template-columns:44px 1fr 24px;align-items:center;gap:11px;padding:10px 14px;transition:.22s}.public-link:hover{transform:translateY(-2px) scale(1.005);background:rgba(255,255,255,.11)}.public-link.featured{background:color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.055));border-color:color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.12))}.public-link .social-icon{width:42px;height:42px;border-radius:14px}.public-link b{display:block;font-size:13px}.public-link small{display:block;font-size:10px;color:rgba(255,255,255,.48);margin-top:2px}.public-link em{font-style:normal;color:rgba(255,255,255,.5)}.public-footer{text-align:center;padding:30px 0 10px;position:relative;z-index:2;font-size:10px;color:rgba(255,255,255,.34)}

@media (max-width: 1100px) {
  .hero{grid-template-columns:1fr 1fr}.workspace{grid-template-columns:minmax(520px,1fr) 350px}.phone-editor{transform:scale(.7)}.preview-stage{padding:10px}.design-section{gap:45px}.feature-grid{grid-template-columns:1fr 1fr}.large-card{grid-row:auto}.wide-card{grid-column:1/-1}.feature-card{min-height:260px}.large-card{min-height:420px}
}
@media (max-width: 900px) {
  .landing-nav .desktop-nav{display:none}.hero{grid-template-columns:1fr;padding-top:70px;text-align:center}.hero-lead{margin-inline:auto}.hero-actions,.trust-row{justify-content:center}.hero-visual{min-height:610px}.metric-strip{grid-template-columns:1fr 1fr}.metric-strip>div{padding:14px;border-bottom:1px solid rgba(255,255,255,.06)}.design-section{grid-template-columns:1fr}.design-canvas{min-height:460px}.dashboard-shell{grid-template-columns:78px 1fr}.brand-dashboard .brand-word,.brand-dashboard .brand-badge,.side-nav b,.plan-card,.profile-chip div,.profile-chip em{display:none}.sidebar{padding-inline:12px}.brand-dashboard{justify-content:center;padding-inline:0}.side-nav a{justify-content:center;padding:0}.side-nav a span{font-size:17px}.profile-chip{grid-template-columns:1fr;justify-items:center}.workspace{grid-template-columns:1fr 330px}.editor-column{padding-inline:24px}
}
@media (max-width: 760px) {
  .shell{width:min(100% - 28px,1180px)}.landing-nav{height:72px}.landing-nav .nav-actions .btn-ghost{display:none}.hero{padding-top:42px}.hero h1{font-size:48px}.hero-lead{font-size:15px}.phone-hero{transform:scale(.86) rotate(-3deg)}.hero-visual{min-height:560px}.floating-chip{display:none}.section{padding-block:82px}.feature-grid{grid-template-columns:1fr}.wide-card{grid-column:auto;grid-template-columns:1fr}.metric-strip{width:100%;padding-inline:14px}.design-canvas{min-height:430px}.palette-card{right:22px}.radius-card{left:22px}.cta{width:calc(100% - 28px);padding:34px 24px;display:grid}.landing-footer{flex-wrap:wrap;gap:16px;padding-block:30px}.landing-footer p{display:none}
  .dashboard-body{overflow:auto}.dashboard-shell{grid-template-columns:1fr}.sidebar{position:fixed;right:0;top:0;width:230px;height:100dvh;transform:translateX(100%);transition:.25s;z-index:50}.sidebar.open{transform:none}.brand-dashboard .brand-word,.brand-dashboard .brand-badge,.side-nav b,.profile-chip div,.profile-chip em{display:initial}.side-nav a{justify-content:flex-start;padding:0 12px}.plan-card{display:grid}.profile-chip{grid-template-columns:34px 1fr 20px;justify-items:stretch}.dashboard-main{height:auto;min-height:100dvh;grid-template-rows:64px 1fr}.menu-btn{display:inline-grid;place-items:center}.topbar{padding-inline:14px}.topbar-actions .save-state,.topbar-actions .btn-outline{display:none}.workspace{display:block}.editor-column{padding:22px 14px 70px;overflow:visible}.preview-column{display:none}.form-grid{grid-template-columns:1fr}.field-full{grid-column:auto}.theme-grid{grid-template-columns:1fr 1fr}.qr-layout{grid-template-columns:1fr}.analytics-grid{grid-template-columns:1fr}.settings-list>div{grid-template-columns:1fr auto}.settings-list>div b{display:none}.panel-head{align-items:center}.link-editor-item{grid-template-columns:20px 38px minmax(0,1fr) auto}.item-actions .edit-btn{display:none}
}
@media (max-width: 420px) {
  .hero h1{font-size:41px}.hero-actions{display:grid}.hero-actions .btn{width:100%}.phone-hero{transform:scale(.76) rotate(-2deg)}.hero-visual{min-height:500px}.metric-strip strong{font-size:23px}.metric-strip span{font-size:9px}.feature-card{padding:22px}.section-heading h2,.design-copy h2,.cta h2{font-size:33px}.design-canvas{transform:none;min-height:390px}.palette-card{width:190px;top:30px}.radius-card{width:175px;top:130px}.typography-card{width:230px;right:25px}.glass-card{display:none}.topbar-title h1{font-size:15px}.breadcrumb{display:none}.panel-head .btn{padding:0 10px}.form-card{padding:15px}.design-controls{padding-inline:15px}
}


/* Official Q-One logo assets */
.avatar>img{width:72%;height:72%;object-fit:contain;display:block}