:root{--blue:#176bff;--blue-dark:#0954d8;--navy:#10233f;--ink:#17243b;--muted:#73829a;--line:#e5ebf4;--soft:#f4f8ff;--white:#fff;--green:#16a36a;--red:#e34d59;--shadow:0 16px 50px rgba(32,84,145,.1);--radius:18px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}.container{width:min(1180px,calc(100% - 40px));margin:auto}.site-header{height:74px;border-bottom:1px solid rgba(224,233,246,.8);background:rgba(255,255,255,.88);backdrop-filter:blur(14px);position:sticky;top:0;z-index:30}.nav{height:100%;display:flex;align-items:center;gap:48px}.brand{display:inline-flex;align-items:center;gap:11px;font-size:18px;font-weight:800;letter-spacing:-.3px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(140deg,#3e91ff,#0b5bea);box-shadow:0 7px 17px rgba(23,107,255,.28);color:#fff;font-size:18px;font-weight:900;font-style:italic}.brand-light{color:#fff}.nav nav{display:flex;gap:32px;margin-right:auto}.nav nav a{font-size:14px;color:#5e6d84;transition:.2s}.nav nav a:hover{color:var(--blue)}.nav-user{display:flex;align-items:center;gap:10px;font-size:13px}.nav-user img{width:32px;height:32px;border-radius:50%;object-fit:cover}.link-muted{color:#91a0b4;margin-left:5px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:45px;padding:0 21px;border:1px solid transparent;border-radius:11px;font-weight:700;font-size:14px;transition:.2s;background:none}.btn:hover{transform:translateY(-1px)}.btn-primary{color:#fff;background:linear-gradient(135deg,#2580ff,#0959df);box-shadow:0 10px 24px rgba(23,107,255,.22)}.btn-primary:hover{box-shadow:0 13px 28px rgba(23,107,255,.3)}.btn-outline{border-color:#d9e3f1;background:#fff;color:#39506f}.btn-outline:hover{border-color:#a7c3ec;color:var(--blue)}.btn-small{min-height:38px;padding:0 16px}.btn-block{width:100%}.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f4f9ff 0%,#fff 100%);border-bottom:1px solid #eff4fa}.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(74,131,216,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(74,131,216,.05) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to right,#000,transparent 88%)}.hero-inner{min-height:535px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;position:relative;z-index:2}.eyebrow{display:inline-block;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:2.2px;margin-bottom:17px}.eyebrow.light{color:#a9ccff}.hero h1{font-size:54px;line-height:1.12;letter-spacing:-2.4px;margin:0 0 20px;color:#112440}.hero-copy>p{font-size:18px;line-height:1.8;color:#687b96;margin:0 0 30px;max-width:520px}.trust-row{display:flex;gap:24px;color:#7c8ba0;font-size:13px;margin-top:25px}.trust-row span:first-letter{color:var(--blue)}.hero-art{position:relative;height:390px}.glass-card{position:absolute;background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.92);box-shadow:0 35px 80px rgba(35,100,190,.18);backdrop-filter:blur(12px)}.main-card{width:350px;height:265px;left:75px;top:50px;border-radius:28px;padding:35px;transform:rotate(-2deg)}.float-icon{display:grid;place-items:center;width:68px;height:68px;border-radius:20px;color:white;font-size:36px;font-weight:bold;box-shadow:0 15px 30px rgba(16,102,247,.25)}.float-icon.blue{background:linear-gradient(145deg,#64a7ff,#1268f5)}.art-lines{display:grid;gap:10px;margin:30px 0}.art-lines i{height:8px;border-radius:10px;background:#dce8f7}.art-lines i:nth-child(1){width:80%}.art-lines i:nth-child(2){width:56%}.art-lines i:nth-child(3){width:70%}.art-progress{height:8px;background:#e4edf8;border-radius:9px;overflow:hidden}.art-progress b{display:block;height:100%;width:86%;background:linear-gradient(90deg,#6cb0ff,#176bff);border-radius:9px}.main-card small{display:block;margin-top:12px;color:#8090a6}.mini-card{position:absolute;padding:14px 19px;background:#fff;border:1px solid #e9f0fa;border-radius:14px;box-shadow:0 16px 40px rgba(45,103,180,.13);font-size:13px;font-weight:700}.mc-one{right:10px;top:38px;transform:rotate(3deg)}.mc-two{left:30px;bottom:23px;transform:rotate(-3deg);color:#168c64}.hero-orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb-one{width:260px;height:260px;background:#dfedff;right:6%;top:15%}.orb-two{width:90px;height:90px;background:#cfe5ff;right:42%;bottom:8%}.apps-section{padding:95px 0 110px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:40px}.section-head h2{font-size:36px;letter-spacing:-1.2px;margin:0 0 10px}.section-head p{margin:0;color:var(--muted)}.search-box{width:245px;height:45px;border:1px solid var(--line);border-radius:11px;display:flex;align-items:center;padding:0 14px;gap:8px;color:#9aabc0;background:#fff}.search-box:focus-within{border-color:#9cc1fb;box-shadow:0 0 0 4px #eff6ff}.search-box input{width:100%;border:0;outline:0;color:var(--ink)}.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.app-card{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff;box-shadow:0 2px 4px rgba(36,70,112,.02);transition:.25s;display:flex;flex-direction:column}.app-card:hover{transform:translateY(-5px);border-color:#cfdef2;box-shadow:var(--shadow)}.app-icon{width:62px;height:62px;border-radius:17px;display:grid;place-items:center;margin-bottom:21px;overflow:hidden;color:#fff;font-size:25px;font-weight:900}.app-icon img{width:100%;height:100%;object-fit:cover}.color-1{background:linear-gradient(145deg,#5ba0ff,#1468ed)}.color-2{background:linear-gradient(145deg,#54d1db,#1697bd)}.color-3{background:linear-gradient(145deg,#8e94ff,#6266df)}.color-4{background:linear-gradient(145deg,#ffb373,#ef793a)}.color-5{background:linear-gradient(145deg,#5fd7a5,#1ba975)}.app-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.app-title h3{margin:0;font-size:19px}.version{font-size:11px;font-weight:700;color:#7593bc;background:#f0f6ff;border-radius:20px;padding:5px 8px}.app-body p{height:48px;overflow:hidden;font-size:14px;line-height:1.7;color:#74839a;margin:13px 0 17px}.app-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:11px;color:#99a5b6}.app-meta i{width:3px;height:3px;background:#b9c4d2;border-radius:50%}.btn-download{margin-top:23px;background:#f2f7ff;color:#1764de}.app-card:hover .btn-download{background:var(--blue);color:#fff}.empty-state{text-align:center;padding:70px;background:var(--soft);border-radius:20px}.empty-state div{font-size:42px;color:var(--blue)}.empty-state h3{margin:12px 0 6px}.empty-state p{color:var(--muted)}.feature-strip{background:#112641;color:#fff;padding:55px 0}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}.features>div{position:relative;padding-left:58px}.features b{position:absolute;left:0;top:-2px;font-size:13px;color:#6fa8fa;border:1px solid #385675;border-radius:9px;padding:8px}.features h3{margin:0 0 9px;font-size:17px}.features p{margin:0;color:#92a5bd;font-size:13px}.footer-inner{min-height:140px;display:flex;align-items:center;justify-content:space-between}.footer-inner p{font-size:12px;color:#94a0b1;margin:13px 0 0}.footer-right{display:flex;flex-direction:column;text-align:right;gap:8px;color:#9aa7b8;font-size:12px}.toast{position:fixed;left:50%;top:91px;z-index:50;transform:translateX(-50%);padding:12px 19px;border-radius:11px;color:#fff;box-shadow:0 12px 35px rgba(0,0,0,.15);font-size:14px;transition:.35s}.toast.success{background:#15976a}.toast.error{background:#df4d58}.toast.info{background:#2779e9}.toast.hide{opacity:0;top:75px;pointer-events:none}

/* Forms and installer */
.install-body{min-height:100vh;background:#eef4fb;display:grid;place-items:center;padding:30px}.install-shell{width:min(1060px,100%);min-height:700px;display:grid;grid-template-columns:40% 60%;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 30px 90px rgba(19,58,108,.16)}.install-aside{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:44px;color:#fff;background:linear-gradient(145deg,#0d62e9,#123c85);overflow:hidden}.install-aside:after{content:"";position:absolute;width:400px;height:400px;border-radius:50%;border:70px solid rgba(255,255,255,.06);right:-230px;bottom:-140px}.install-aside>div{position:relative;z-index:2}.install-aside h1{font-size:39px;line-height:1.28;letter-spacing:-1.5px;margin:0 0 20px}.install-aside p{line-height:1.8;color:#bed6fb}.install-points{display:grid;gap:14px;color:#dbeaff;font-size:14px}.install-form{padding:48px 55px;overflow:auto}.install-form h2{font-size:31px;margin:8px 0}.muted{color:var(--muted)}.step-tag{font-size:12px;color:var(--blue);font-weight:800}.form-stack{display:grid;gap:17px;margin-top:28px}.form-stack label{display:grid;gap:8px;color:#42536b;font-size:13px;font-weight:650}.form-stack input,.form-stack textarea,.form-stack select{width:100%;border:1px solid #dce4ef;border-radius:10px;background:#fff;padding:12px 13px;color:#1c2c43;outline:none;transition:.2s}.form-stack textarea{resize:vertical}.form-stack input:focus,.form-stack textarea:focus,.form-stack select:focus{border-color:#86b5fc;box-shadow:0 0 0 4px #eff6ff}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.form-stack hr{width:100%;border:0;border-top:1px solid #edf1f6;margin:4px 0}.form-help{font-size:11px!important;color:#8d9aae!important;margin:0}.requirement-row{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0}.requirement{font-size:10px;border-radius:20px;padding:5px 9px;background:#f0f3f7;color:#78879c}.requirement.ok{background:#ecfaf4;color:#13845d}.requirement.bad{background:#fff0f1;color:#cc3c4a}.alert{padding:13px 16px;border-radius:11px;margin:18px 0;font-size:13px}.alert-error{background:#fff0f1;color:#b93340;border:1px solid #ffd6da}.alert-success{background:#ecfaf4;color:#157a59;border:1px solid #c9efdf}.alert-info{background:#edf5ff;color:#1a64c7;border:1px solid #d2e6ff}

/* Admin */
.admin-login-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 10% 15%,#deecff,transparent 30%),radial-gradient(circle at 90% 85%,#e4f2ff,transparent 30%),#f5f8fd;padding:25px}.admin-login-card{width:min(430px,100%);background:#fff;border:1px solid #e5ecf5;border-radius:22px;padding:39px;box-shadow:0 25px 70px rgba(28,75,137,.13)}.login-heading{margin-top:45px}.login-heading h1{font-size:31px;margin:3px 0 8px}.login-heading p{margin:0;color:var(--muted)}.back-link{display:block;margin-top:24px;text-align:center;color:#8190a5;font-size:13px}.admin-body{min-height:100vh;background:#f4f7fb}.sidebar{position:fixed;inset:0 auto 0 0;width:235px;padding:27px 20px;background:#102540;color:#fff;display:flex;flex-direction:column;z-index:40}.sidebar .brand{padding:0 10px 30px}.sidebar nav{display:grid;gap:6px}.sidebar nav a{display:flex;align-items:center;gap:12px;border-radius:10px;padding:12px 14px;color:#96aac3;font-size:13px;font-weight:650}.sidebar nav a span{width:20px;text-align:center}.sidebar nav a:hover,.sidebar nav a.active{background:#1c3b60;color:#fff}.sidebar nav a.active{box-shadow:inset 3px 0 #4b98ff}.sidebar-bottom{margin-top:auto}.admin-chip{display:flex;align-items:center;gap:10px;border-top:1px solid #29415e;padding:20px 5px 15px}.admin-chip>span{display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:#2879ec;font-weight:900}.admin-chip div{display:grid;gap:3px}.admin-chip b{font-size:13px}.admin-chip small{font-size:10px;color:#8197b2}.sidebar-bottom>a{display:block;padding:7px;color:#869bb5;font-size:12px}.admin-main{margin-left:235px;padding:32px 38px 70px;min-width:0}.admin-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.admin-top>div{margin-right:auto}.admin-top p{margin:0 0 5px;color:#98a5b7;font-size:11px}.admin-top h1{font-size:25px;margin:0}.menu-toggle{display:none;border:0;background:#fff;border-radius:8px;margin-right:12px;width:38px;height:38px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:22px}.stat-card{background:#fff;border:1px solid #e6ebf3;border-radius:15px;padding:22px;display:flex;align-items:center;gap:16px}.stat-icon{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border-radius:13px;font-size:19px}.stat-icon.blue{background:#e9f2ff;color:#2376ec}.stat-icon.cyan{background:#e7f9fb;color:#1b9aad}.stat-icon.violet{background:#f1edff;color:#7357d6}.stat-icon.green{background:#e9f9f2;color:#15966a}.stat-card>div{display:grid;grid-template-columns:auto auto;align-items:center;flex:1}.stat-card small{grid-column:1/-1;color:#8794a7;font-size:11px}.stat-card strong{font-size:28px;margin-top:5px}.stat-card em{font-style:normal;color:#9aa7b8;font-size:10px;text-align:right}.admin-panel{background:#fff;border:1px solid #e5ebf3;border-radius:15px;overflow:hidden;margin-bottom:22px}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:21px 24px;border-bottom:1px solid #edf1f6}.panel-head h2{font-size:16px;margin:0 0 5px}.panel-head p{font-size:11px;color:#93a0b1;margin:0}.panel-head>a{font-size:12px;color:var(--blue)}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:12px}th{text-align:left;color:#8794a5;font-size:10px;letter-spacing:.3px;background:#fbfcfe;padding:12px 19px;border-bottom:1px solid #edf1f6;white-space:nowrap}td{padding:14px 19px;border-bottom:1px solid #f0f3f7;color:#4e5e74;white-space:nowrap}tr:last-child td{border-bottom:0}.user-cell{display:flex;align-items:center;gap:10px;color:#25364e}.user-cell img{width:35px;height:35px;border-radius:11px;object-fit:cover;background:#edf4ff}.user-cell>div{display:grid;gap:2px}.cell-sub{display:block;color:#9aa7b8;font-size:9px;margin-top:3px;font-weight:400}.tag{display:inline-flex;align-items:center;border-radius:20px;padding:5px 9px;font-size:10px;font-weight:700}.tag-green{background:#e9f9f2;color:#15855f}.tag-blue{background:#eaf3ff;color:#1766d4}.tag-red{background:#fff0f1;color:#cb3e4b}.tag-gray{background:#f0f2f5;color:#808c9c}.table-empty{text-align:center;color:#a0adbe;padding:50px}.table-link{border:0;background:none;color:#2471dc;font-size:11px;padding:3px;margin-right:8px}.table-link.danger{color:#d5505b}.inline-form{display:inline}.mini-app-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,#68aaff,#1769ed);color:#fff;font-weight:800}.page-actions{display:flex;justify-content:space-between;align-items:center;margin:-12px 0 20px}.page-actions p{font-size:12px;color:#8c99aa}.panel-form{padding:2px 24px 25px;max-width:850px}.editor{scroll-margin-top:25px}.switch-row{display:flex!important;align-items:center;gap:10px!important}.switch-row input{width:17px!important}.settings-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:20px;align-items:start}.callback-box{margin:5px 24px 25px;background:#f3f7fc;border-radius:12px;padding:17px}.callback-box b{font-size:12px}.callback-box p{font-size:11px;color:#7e8c9f;line-height:1.6}.callback-box code{font-size:10px;color:#2866b8;word-break:break-all}.ua-cell{max-width:280px;overflow:hidden;text-overflow:ellipsis}.admin-panel code{font-size:10px;color:#687b93}.admin-main>.alert{margin-top:-5px}

@media(max-width:1050px){.app-grid{grid-template-columns:repeat(2,1fr)}.stat-grid{grid-template-columns:repeat(2,1fr)}.hero-inner{grid-template-columns:1fr 1fr}.main-card{left:30px}.settings-grid{grid-template-columns:1fr}.install-shell{grid-template-columns:34% 66%}.install-aside{padding:35px}.install-form{padding:40px}}
@media(max-width:760px){.container{width:min(100% - 28px,1180px)}.site-header{height:65px}.nav{gap:12px}.nav nav{display:none}.nav-user{margin-left:auto}.nav-user>span,.nav-user>.link-muted{display:none}.brand{font-size:16px}.brand-mark{width:31px;height:31px}.hero-inner{display:block;min-height:auto;padding-top:80px;padding-bottom:60px}.hero h1{font-size:39px;letter-spacing:-1.5px}.hero-copy>p{font-size:15px}.hero-art{height:270px;margin-top:20px}.main-card{width:260px;height:200px;left:50%;top:35px;transform:translateX(-50%) rotate(-2deg);padding:25px}.float-icon{width:50px;height:50px;font-size:25px}.art-lines{margin:20px 0}.mc-one{right:0}.mc-two{left:0;bottom:8px}.trust-row{gap:12px;flex-wrap:wrap}.apps-section{padding:65px 0}.section-head{display:block}.section-head h2{font-size:29px}.search-box{margin-top:25px;width:100%}.app-grid{grid-template-columns:1fr}.features{grid-template-columns:1fr;gap:35px}.footer-inner{display:block;padding:40px 0}.footer-right{text-align:left;margin-top:25px}.install-body{padding:0;background:#fff}.install-shell{display:block;border-radius:0;box-shadow:none}.install-aside{min-height:300px}.install-aside h1{font-size:31px}.install-points{display:none}.install-form{padding:32px 22px}.form-grid{grid-template-columns:1fr}.sidebar{transform:translateX(-100%);transition:.25s}.sidebar-open .sidebar{transform:translateX(0);box-shadow:20px 0 60px rgba(0,0,0,.18)}.sidebar-open:after{content:"";position:fixed;inset:0;background:rgba(3,18,37,.45);z-index:35}.admin-main{margin-left:0;padding:22px 14px 60px}.menu-toggle{display:block}.admin-top .btn{font-size:0;width:40px;padding:0}.admin-top .btn:after{content:"↗";font-size:15px}.stat-grid{grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:15px;display:block}.stat-icon{width:36px;height:36px;margin-bottom:12px}.stat-card strong{font-size:23px}.stat-card em{display:none}.page-actions{margin-top:0}.settings-grid{display:block}.admin-login-card{padding:28px 23px}.panel-form{padding:2px 16px 20px}.panel-head{padding:18px 16px}}
@media(max-width:410px){.stat-grid{grid-template-columns:1fr}.hero h1{font-size:34px}.app-card{padding:20px}.install-aside{padding:28px}}
@media(max-width:760px){.admin-top .btn:after{content:">";font-size:15px}}

/* Two-product layout and local icon uploader */
.app-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.app-card{min-height:365px;padding:34px}
.app-icon{width:84px;height:84px;border-radius:22px;font-size:32px;margin-bottom:27px}
.app-title h3{font-size:23px}
.app-body p{height:54px;font-size:15px;margin:16px 0 22px}
.app-meta{font-size:12px}
.btn-download{min-height:52px;margin-top:auto;font-size:15px}
.current-icon{display:flex;align-items:center;gap:12px;padding:12px;border:1px dashed #cbd9eb;border-radius:11px;background:#f7faff;color:#74839a;font-size:12px;font-weight:400}
.current-icon img{width:58px;height:58px;border-radius:14px;object-fit:cover;background:#eaf2ff}
.app-icon.has-image{background:transparent;box-shadow:none;border-radius:0}
.app-icon.has-image img{object-fit:contain;border-radius:0;background:transparent;filter:url(#icon-cutout)}
.icon-filter-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
@media(max-width:760px){.app-grid{grid-template-columns:1fr;gap:18px}.app-card{min-height:330px;padding:24px}.app-icon{width:72px;height:72px}}

/* Compact hero and safer card spacing */
.hero-inner{min-height:430px}
.hero-art{height:330px}
.main-card{width:320px;height:235px;top:42px;padding:30px}
.app-body{margin-bottom:28px}
@media(max-width:760px){
  .hero-inner{padding-top:44px;padding-bottom:40px}
  .hero-art{display:none}
  .hero h1{font-size:34px}
  .hero-copy>p{margin-bottom:24px}
  .trust-row{margin-top:20px}
  .apps-section{padding-top:52px}
  .app-body{margin-bottom:30px}
}

/* Usage tutorials */
.tutorial-section{padding:85px 0;background:#f6f9fe;border-top:1px solid #edf2f8}
.tutorial-heading{text-align:center;margin-bottom:34px}
.tutorial-heading .eyebrow{margin-bottom:12px}
.tutorial-heading h2{margin:0 0 10px;font-size:36px;letter-spacing:-1.2px}
.tutorial-heading p{margin:0;color:var(--muted)}
.tutorial-box{max-width:1000px;margin:auto;background:#fff;border:1px solid #e1e9f4;border-radius:22px;box-shadow:0 18px 55px rgba(31,79,139,.08);overflow:hidden}
.tutorial-tabs{display:grid;grid-template-columns:1fr 1fr;padding:8px;background:#edf4fd;border-bottom:1px solid #e2eaf5}
.tutorial-tabs button{height:52px;border:0;border-radius:13px;background:transparent;color:#708199;font-weight:750}
.tutorial-tabs button span{margin-right:8px;font-size:18px}
.tutorial-tabs button.active{background:#fff;color:var(--blue);box-shadow:0 5px 18px rgba(33,86,153,.1)}
.tutorial-panel{display:none;grid-template-columns:210px 1fr;gap:42px;padding:40px}
.tutorial-panel.active{display:grid}
.tutorial-device{min-height:210px;border-radius:18px;background:linear-gradient(145deg,#207cff,#0b55d1);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 15px 35px rgba(23,107,255,.22)}
.tutorial-device>span{font-size:58px;line-height:1;margin-bottom:18px}
.tutorial-device b{font-size:17px}
.tutorial-device small{margin-top:7px;color:#c8dcff}
.mobile-device{background:linear-gradient(145deg,#34bccc,#147fbd)}
.tutorial-steps{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.tutorial-step{min-height:94px;padding:18px;border:1px solid #e4ebf4;border-radius:14px;background:#fbfcfe}
.tutorial-step>b{display:inline-grid;place-items:center;width:31px;height:31px;border-radius:9px;background:#eaf3ff;color:var(--blue);font-size:11px}
.tutorial-step p{margin:12px 0 0;color:#4f6179;font-size:13px;line-height:1.65}
.tutorial-editor-grid textarea{line-height:1.8}
@media(max-width:760px){
  .tutorial-section{padding:55px 0}
  .tutorial-heading{margin-bottom:24px}
  .tutorial-heading h2{font-size:29px}
  .tutorial-heading p{font-size:13px}
  .tutorial-tabs{padding:6px}
  .tutorial-tabs button{height:46px;font-size:13px}
  .tutorial-panel{grid-template-columns:1fr;gap:20px;padding:18px}
  .tutorial-device{min-height:135px}
  .tutorial-device>span{font-size:42px;margin-bottom:10px}
  .tutorial-steps{grid-template-columns:1fr;gap:10px}
  .tutorial-step{min-height:auto;padding:15px}
  .tutorial-step p{margin-top:9px}
}

/* Video tutorial library */
.legacy-text-tutorial{display:none}
.tutorial-page{min-height:calc(100vh - 215px);background:#f6f9fe}
.tutorial-page-hero{padding:64px 0 54px;background:linear-gradient(180deg,#f2f7ff,#fff);border-bottom:1px solid #e8eef7;text-align:center}
.tutorial-page-hero .eyebrow{margin-bottom:10px}
.tutorial-page-hero h1{margin:0 0 12px;font-size:42px;letter-spacing:-1.5px}
.tutorial-page-hero p{margin:0;color:var(--muted)}
.tutorial-library{padding:48px 0 75px}
.category-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:34px}
.category-tabs a{padding:11px 23px;border:1px solid #dce5f1;border-radius:999px;background:#fff;color:#6d7e94;font-size:13px;font-weight:700}
.category-tabs a.active{border-color:var(--blue);background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(23,107,255,.2)}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.video-card{overflow:hidden;border:1px solid #e1e8f2;border-radius:17px;background:#fff;box-shadow:0 7px 25px rgba(31,75,130,.06);transition:.2s}
.video-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(31,75,130,.12)}
.video-cover{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#eaf2fd}
.video-cover img{width:100%;height:100%;object-fit:cover;transition:.3s}
.video-card:hover .video-cover img{transform:scale(1.035)}
.play-button{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(23,107,255,.92);color:#fff;transform:translate(-50%,-50%);box-shadow:0 10px 30px rgba(0,50,140,.3);padding-left:3px}
.video-cover small{position:absolute;left:13px;top:13px;padding:5px 9px;border-radius:20px;background:rgba(10,31,60,.72);color:#fff;font-size:10px}
.video-card-body{padding:20px}
.video-card-body h2{margin:0 0 9px;font-size:17px}
.video-card-body p{height:42px;margin:0 0 18px;overflow:hidden;color:#7b899c;font-size:12px;line-height:1.7}
.video-card-body>div{display:flex;align-items:center;justify-content:space-between;color:#9aa6b7;font-size:11px}
.video-card-body>div a{color:var(--blue);font-weight:700}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:38px}
.pagination a{display:grid;place-items:center;width:38px;height:38px;border:1px solid #dce5f1;border-radius:10px;background:#fff;color:#667890;font-size:12px}
.pagination a.active{border-color:var(--blue);background:var(--blue);color:#fff}
.video-detail{min-height:calc(100vh - 215px);padding:48px 0 75px;background:#f6f9fe}
.video-detail-container{max-width:1050px}
.back-to-list{display:inline-block;margin-bottom:28px;color:#59708f;font-size:13px}
.video-title-row{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:24px}
.video-title-row h1{margin:13px 0 10px;font-size:30px}
.video-title-row p{margin:0;color:var(--muted);line-height:1.7}
.video-views{flex:none;color:#91a0b3;font-size:12px}
.video-player-shell{overflow:hidden;border-radius:18px;background:#071322;box-shadow:0 24px 65px rgba(10,30,58,.2)}
.video-player-shell video{display:block;width:100%;max-height:72vh;aspect-ratio:16/9;background:#000}
.admin-video-cover{display:block;width:92px;height:52px;border-radius:8px;object-fit:cover;background:#eaf2ff}
.current-cover{display:flex;align-items:center;gap:12px;padding:10px;border:1px dashed #cfdae9;border-radius:10px;color:#7e8c9f;font-weight:400}
.current-cover img{width:112px;height:63px;border-radius:8px;object-fit:cover}
.current-video{padding:16px;border-radius:10px;background:#ecfaf4;color:#16805e;font-weight:500}
@media(max-width:900px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .tutorial-page-hero{padding:43px 0 37px}
  .tutorial-page-hero h1{font-size:32px}
  .tutorial-page-hero p{font-size:13px;line-height:1.7}
  .tutorial-library{padding:30px 0 55px}
  .category-tabs{margin-bottom:24px}
  .category-tabs a{padding:9px 16px}
  .video-grid{grid-template-columns:1fr;gap:16px}
  .video-detail{padding:27px 0 50px}
  .video-title-row{display:block}
  .video-title-row h1{font-size:24px}
  .video-views{display:block;margin-top:12px}
  .video-player-shell{border-radius:12px}
}
.mobile-tutorial-link{display:none;color:var(--blue);font-size:13px;font-weight:750}
@media(max-width:760px){.mobile-tutorial-link{display:inline-block;margin-left:auto}.header-download{display:none}}
.mobile-tutorial-link{display:none;color:var(--blue);font-size:13px;font-weight:700;white-space:nowrap}
@media(max-width:760px){.mobile-tutorial-link{display:inline}.header-download{display:none}}