:root{
  --navy:#07152f;--navy2:#0a214b;--blue:#0d6efd;--blue2:#3b82f6;--cyan:#4cc9ff;
  --ink:#0a1734;--muted:#66758f;--line:#dfe8f6;--soft:#f4f8ff;--white:#fff;
  --green:#20c77a;--red:#ef445a;--amber:#f6a723;--shadow:0 20px 60px rgba(12,40,92,.12);
  --radius:22px;--radius-sm:14px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#f8fbff;min-height:100vh;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}.shell{width:min(1180px,calc(100% - 36px));margin-inline:auto}.icon{vertical-align:-4px}.ambient{position:fixed;z-index:-3;border-radius:999px;filter:blur(90px);opacity:.18;pointer-events:none}.ambient-a{width:420px;height:420px;background:#2675ff;top:-120px;right:-80px}.ambient-b{width:340px;height:340px;background:#4cc9ff;bottom:6%;left:-140px}.circuit-noise{position:fixed;inset:0;z-index:-4;opacity:.17;background-image:linear-gradient(rgba(30,94,190,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(30,94,190,.08) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 70%)}
.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1180px)/2));background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(214,226,245,.85);position:sticky;top:0;z-index:50}.brand{display:flex;align-items:center;gap:11px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--navy),var(--blue));box-shadow:0 10px 24px rgba(13,110,253,.26)}.brand>span:last-child{display:flex;flex-direction:column;line-height:.95;letter-spacing:.8px}.brand b{font-size:17px}.brand small{font-size:9px;color:var(--blue);letter-spacing:2.4px;margin-top:5px}.topnav{display:flex;align-items:center;gap:8px}.topnav>a,.nav-link-button{padding:10px 13px;border-radius:10px;color:#53637e;font-weight:700;font-size:14px;background:none;border:0}.topnav>a:hover,.topnav>a.active,.nav-link-button:hover{color:var(--blue);background:#edf4ff}.nav-form{margin:0}.nav-toggle{display:none;background:none;border:0;font-size:24px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:11px 16px;font-weight:800;transition:.22s ease;box-shadow:none}.btn:hover{transform:translateY(-1px)}.btn-sm{padding:9px 14px}.btn-lg{padding:14px 20px}.btn-block{width:100%}.btn-primary{background:linear-gradient(135deg,#1266e8,#0d82ff);color:#fff;box-shadow:0 12px 28px rgba(13,110,253,.24)}.btn-primary:hover{box-shadow:0 16px 34px rgba(13,110,253,.32)}.btn-ghost,.btn-soft{background:#eef5ff;color:#1d4f94}.btn-discord{background:#5865f2;color:white}.btn-success{background:#dff8eb;color:#137346}.btn-warning{background:#fff2d6;color:#9b5d00}.btn-danger{background:#e93d54;color:#fff}.btn-danger-soft{background:#fff0f2;color:#c72d43}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:900;letter-spacing:2.3px;color:#8dc4ff}.eyebrow.blue{color:#176fe8}.pulse-dot,.status-dot,.service-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#9eabc0}.pulse-dot{background:#58d8ff;box-shadow:0 0 0 6px rgba(88,216,255,.12);animation:pulse 2s infinite}.status-dot.on,.service-dot.on{background:var(--green);box-shadow:0 0 0 4px rgba(32,199,122,.12)}.status-dot.off{background:var(--red)}@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(88,216,255,0)}}
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;min-height:690px;padding:70px 0}.hero-copy h1{font-size:clamp(48px,6vw,76px);line-height:.98;margin:19px 0 22px;letter-spacing:-3.4px}.hero-copy h1 span{color:var(--blue)}.hero-copy>p{font-size:18px;line-height:1.7;color:var(--muted);max-width:620px}.hero-actions{display:flex;gap:12px;margin:32px 0}.hero-mini-stats{display:flex;gap:11px;flex-wrap:wrap}.hero-mini-stats>div{display:grid;grid-template-columns:auto 1fr;gap:0 8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:13px;padding:10px 13px;box-shadow:0 8px 20px rgba(20,55,110,.06)}.hero-mini-stats span{font-size:11px;color:var(--muted)}.hero-mini-stats strong{grid-column:2;font-size:12px}.hero-art{position:relative}.hero-screen{background:linear-gradient(145deg,#061128,#0b295a);border:1px solid #1f4d86;border-radius:28px;padding:18px;box-shadow:0 35px 90px rgba(4,21,54,.3);transform:perspective(1200px) rotateY(-3deg) rotateX(1deg);position:relative;overflow:hidden}.hero-screen:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 15%,rgba(64,171,255,.24),transparent 35%),linear-gradient(rgba(62,131,221,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(62,131,221,.07) 1px,transparent 1px);background-size:auto,28px 28px,28px 28px;pointer-events:none}.screen-top{display:flex;align-items:center;gap:6px;color:#8cb9ed;font-size:9px;letter-spacing:1.4px;border-bottom:1px solid #1a3b69;padding-bottom:12px;position:relative}.screen-top i{width:8px;height:8px;border-radius:50%;background:#356ba3}.screen-top i:first-child{background:#ff6d7c}.screen-top i:nth-child(2){background:#ffbf4d}.screen-top i:nth-child(3){background:#3dd58d}.screen-top span{margin-left:9px}.screen-grid{display:grid;grid-template-columns:1.4fr .8fr;grid-template-rows:1fr 1fr;gap:12px;margin:18px 0;position:relative}.screen-card{border:1px solid #224b7d;border-radius:17px;background:rgba(9,32,72,.78);padding:17px;color:#dcecff;display:flex;flex-direction:column;gap:8px;justify-content:center;min-height:108px}.screen-card.big{grid-row:span 2;min-height:250px}.screen-card.big img{width:112px;filter:drop-shadow(0 16px 22px rgba(0,0,0,.35));animation:floaty 4s ease-in-out infinite}.screen-card h3{font-size:26px;margin:6px 0 0}.screen-card p{font-size:12px;color:#8caed5}.screen-card strong{color:#52c8ff}.tiny-label{font-size:9px;letter-spacing:1.7px;color:#66bfff}.bar,.meter{height:7px;background:#17345f;border-radius:99px;overflow:hidden}.bar span,.meter i{display:block;height:100%;background:linear-gradient(90deg,#2478ff,#54d7ff);border-radius:99px}.code-lines{display:flex;gap:9px;position:relative}.code-lines span{height:5px;border-radius:99px;background:#1b4a7e;flex:1}.code-lines span:nth-child(2){flex:.4}.code-lines span:nth-child(4){flex:.7}.float-chip{position:absolute;background:#fff;border:1px solid #dbe7f8;box-shadow:var(--shadow);padding:10px 13px;border-radius:12px;font-size:12px;font-weight:800;color:#1b4d8f;display:flex;gap:7px;align-items:center;animation:floaty 3.8s ease-in-out infinite}.chip-a{top:15%;right:-24px}.chip-b{bottom:8%;left:-22px;animation-delay:1.1s}@keyframes floaty{50%{transform:translateY(-8px)}}
.feature-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#fff;border-radius:20px;box-shadow:0 15px 50px rgba(9,48,109,.08);overflow:hidden}.feature-strip>div{display:flex;gap:13px;align-items:center;padding:20px 22px;border-right:1px solid var(--line);color:var(--blue)}.feature-strip>div:last-child{border:0}.feature-strip span{display:flex;flex-direction:column;color:var(--ink)}.feature-strip b{font-size:14px}.feature-strip small{font-size:11px;color:var(--muted);margin-top:3px}.section-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:110px 0}.section-copy h2{font-size:44px;line-height:1.1;letter-spacing:-1.8px;margin:13px 0 18px}.section-copy p{color:var(--muted);line-height:1.75}.check-list{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:28px}.check-list li:before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e4f8ef;color:#13945b;font-weight:900;margin-right:8px}.dashboard-preview{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:20px}.preview-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px;font-size:10px;letter-spacing:1px;color:var(--muted)}.preview-head b{color:var(--green)}.preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.preview-metrics article{background:var(--soft);padding:14px;border-radius:13px}.preview-metrics em{font-style:normal;font-size:9px;color:var(--muted)}.preview-metrics strong{display:block;font-size:22px;margin:5px 0}.preview-console{background:#07152f;color:#a8c5ec;border-radius:14px;padding:17px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;min-height:150px}.preview-console p{margin:0 0 9px}.preview-console span{color:#4dc4ff}.preview-console b{display:block;color:#e5f2ff;margin-top:18px}.cursor{display:inline-block;width:7px;height:13px;background:#48c9ff;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}.dark-section{background:linear-gradient(145deg,#07152f,#0b2e67);padding:78px 0;color:white;position:relative;overflow:hidden}.dark-section:after{content:"";position:absolute;width:500px;height:500px;border:1px solid #2b5896;border-radius:50%;right:-200px;top:-280px}.cards-3,.cards-4{display:grid;gap:16px}.cards-3{grid-template-columns:repeat(3,1fr)}.cards-4{grid-template-columns:repeat(4,1fr)}.feature-card{border:1px solid rgba(112,167,231,.22);background:rgba(255,255,255,.06);backdrop-filter:blur(8px);padding:28px;border-radius:19px}.feature-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#dcebff,#f7fbff);color:var(--blue);box-shadow:inset 0 0 0 1px #d6e7ff}.feature-icon.danger{background:#fff0f2;color:var(--red)}.feature-card h3{margin:19px 0 9px}.feature-card p{margin:0;color:#a9bdd9;line-height:1.7}.page-wrap{padding:70px 0 100px}.page-title,.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:28px}.page-title h1,.panel-head h1{font-size:38px;letter-spacing:-1.3px;margin:9px 0 6px}.page-title p,.panel-head p{color:var(--muted);margin:0}.status-pill,.count-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:99px;background:#eef3fa;color:#607089;font-size:10px;font-weight:900;letter-spacing:.6px;text-transform:uppercase}.status-pill i{width:7px;height:7px;border-radius:50%;background:#94a2b5}.status-pill.online{background:#e6f8ef;color:#118955}.status-pill.online i{background:var(--green)}.status-pill.offline{background:#fff0f2;color:#c43549}.status-pill.offline i{background:var(--red)}.metric-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 12px 35px rgba(14,47,99,.065);min-height:142px}.metric-card.accent-blue{background:linear-gradient(145deg,#0c5ed6,#1186ff);color:#fff;border:0}.metric-card.accent-blue span,.metric-card.accent-blue small{color:#ddecff}.metric-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#edf5ff;color:var(--blue);margin-bottom:14px}.accent-blue .metric-icon{background:rgba(255,255,255,.16);color:#fff}.metric-card>span{display:block;color:var(--muted);font-size:11px;font-weight:800}.metric-card>strong{display:block;font-size:25px;margin:4px 0}.metric-card>small{color:#8390a5;font-size:10px}.small-strong{font-size:14px!important;word-break:break-all}.good{color:#15955c!important}.warn{color:#a86d00!important}.warn-text{color:#a86d00!important}
.auth-shell{min-height:calc(100vh - 74px);display:grid;grid-template-columns:1fr 1fr}.auth-art{background:linear-gradient(145deg,#06152f,#0a3986);padding:70px;display:flex;align-items:center;color:#fff;position:relative;overflow:hidden}.auth-art:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(81,154,242,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(81,154,242,.08) 1px,transparent 1px);background-size:36px 36px}.auth-art-inner{max-width:560px;margin:auto;position:relative}.auth-art h1{font-size:54px;letter-spacing:-2.2px;line-height:1;margin:15px 0}.auth-art h1 span{color:#51c9ff}.auth-art p{color:#a9c3e4;line-height:1.7}.auth-art img{width:min(520px,90%);margin:40px auto -20px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.25))}.auth-panel{display:grid;place-items:center;padding:50px 24px}.auth-card{width:min(490px,100%)}.auth-heading{display:flex;gap:14px;align-items:center;margin-bottom:24px}.auth-heading h2{font-size:30px;margin:0}.auth-heading p{margin:4px 0 0;color:var(--muted)}.form-stack{display:grid;gap:15px}.form-stack label,.modal-card label{display:grid;gap:7px;font-size:12px;font-weight:800;color:#40506a}.form-stack input,.form-stack select,.form-stack textarea,.modal-card input,.properties-grid input,.properties-grid select{width:100%;border:1px solid #d5e1f3;background:#fff;border-radius:11px;padding:12px 13px;color:var(--ink);outline:none;transition:.18s}.form-stack input:focus,.form-stack select:focus,.form-stack textarea:focus,.modal-card input:focus,.properties-grid input:focus,.properties-grid select:focus{border-color:#5da3ff;box-shadow:0 0 0 4px rgba(31,121,255,.09)}.check-row{grid-template-columns:auto 1fr!important;align-items:start;gap:10px!important}.check-row input{width:18px!important;height:18px;margin-top:2px}.check-row span{font-weight:500}.check-row span b{display:block}.check-row small{display:block;color:var(--muted);margin-top:2px}.form-meta{text-align:right;font-size:12px;color:var(--blue);font-weight:700}.auth-bottom{text-align:center;color:var(--muted);font-size:13px;margin-top:22px}.auth-bottom a{color:var(--blue);font-weight:800}.or{display:flex;align-items:center;gap:12px;color:#99a6b8;font-size:11px;margin:20px 0}.or span{height:1px;background:var(--line);flex:1}.center-page{min-height:calc(100vh - 130px);display:grid;place-items:center;padding:60px 20px}.verify-card{width:min(520px,100%);text-align:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:38px;box-shadow:var(--shadow)}.verify-orb{width:70px;height:70px;border-radius:22px;margin:0 auto 18px;display:grid;place-items:center;background:linear-gradient(135deg,#eaf4ff,#d9ebff);color:var(--blue)}.verify-orb.danger{color:var(--red);background:#fff0f2}.verify-card h1{font-size:34px;margin:10px 0}.verify-card>p{color:var(--muted);line-height:1.6}.verify-card .form-stack{text-align:left;margin-top:22px}.code-input{text-align:center;font-size:26px!important;letter-spacing:10px;font-weight:900}.inline-center{display:flex;justify-content:center;margin-top:15px}.text-button{border:0;background:none;color:var(--blue);font-weight:800}.flash{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;margin:12px 0 18px;font-size:13px;font-weight:650}.flash.success{background:#e9f9f1;color:#16744b}.flash.error{background:#fff0f2;color:#bd2d41}.flash span{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.7);font-weight:900}
.app-layout{display:grid;grid-template-columns:250px 1fr;min-height:calc(100vh - 74px)}.sidebar{background:#08172f;color:#b5c8e1;padding:20px 14px;position:sticky;top:74px;height:calc(100vh - 74px);display:flex;flex-direction:column;border-right:1px solid #17345f}.sidebar-user{display:flex;gap:11px;align-items:center;padding:11px 10px 20px;border-bottom:1px solid #17345f;margin-bottom:13px}.avatar,.mini-avatar{display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#1a74ee,#5fd6ff);color:white;font-weight:900}.avatar{width:42px;height:42px}.mini-avatar{width:34px;height:34px}.sidebar-user strong{display:block;color:#fff;font-size:13px}.role-chip{display:inline-block;font-size:8px;text-transform:uppercase;letter-spacing:1px;border-radius:99px;padding:4px 7px;margin-top:4px;background:#14325a;color:#8db8ef}.role-owner{background:#39246b;color:#cdbdff}.role-admin{background:#123c73;color:#89c3ff}.role-moderator{background:#174c42;color:#7ee6c4}.side-nav{display:grid;gap:4px}.side-nav a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;color:#9db1cc;font-size:13px;font-weight:700}.side-nav a:hover,.side-nav a.active{color:#fff;background:linear-gradient(90deg,#0e376e,#0b2d59)}.side-nav a.active{box-shadow:inset 3px 0 #3fbaff}.side-label{font-size:8px;font-weight:900;letter-spacing:1.8px;color:#527199;padding:18px 11px 6px}.sidebar-foot{margin-top:auto;border-top:1px solid #17345f;padding:15px 10px 3px;font-size:10px;display:flex;gap:8px;align-items:center}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(32,199,122,.1)}.panel-main{padding:34px clamp(20px,4vw,50px) 60px;min-width:0}.head-actions{display:flex;gap:9px}.panel-grid{display:grid;gap:16px;margin-top:16px}.panel-grid.two{grid-template-columns:1fr 1fr}.panel-card{background:#fff;border:1px solid var(--line);border-radius:19px;padding:21px;box-shadow:0 10px 32px rgba(11,49,105,.055);margin-top:16px}.card-title{display:flex;justify-content:space-between;align-items:center;gap:15px;font-weight:900;margin-bottom:18px}.card-title>span{display:flex;align-items:center;gap:8px}.card-title>a{color:var(--blue);font-size:11px}.card-title small{color:var(--muted);font-weight:600}.ring-row{display:flex;gap:20px;justify-content:center;padding:12px 0 22px}.ring{--p:50;width:106px;height:106px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--blue) calc(var(--p)*1%),#e7eef9 0);position:relative}.ring:after{content:"";position:absolute;width:78px;height:78px;border-radius:50%;background:#fff}.ring>div{position:relative;z-index:1;text-align:center}.ring strong{display:block;font-size:19px}.ring span{font-size:8px;color:var(--muted)}.service-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}.service-list>div{background:#fff;padding:11px 13px;display:flex;justify-content:space-between;font-size:11px}.service-list span{display:flex;align-items:center;gap:8px}.service-list b{color:#63728a;text-transform:uppercase;font-size:9px}.service-list.big>div{padding:15px}.minecraft-scene{display:flex;gap:23px;align-items:center;background:linear-gradient(135deg,#eef7ff,#f9fcff);border:1px solid #d9e9ff;padding:21px;border-radius:15px}.minecraft-scene img{width:100px}.minecraft-scene h3{margin:10px 0 4px}.minecraft-scene p{color:var(--muted);font-size:11px;word-break:break-word}.quick-actions{margin-top:28px}.quick-actions h2{font-size:18px}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick-grid a{display:grid;grid-template-columns:auto 1fr;column-gap:11px;align-items:center;background:#fff;border:1px solid var(--line);padding:16px;border-radius:15px;transition:.2s}.quick-grid a:hover{transform:translateY(-3px);border-color:#b9d5ff;box-shadow:0 14px 30px rgba(18,87,184,.1)}.quick-grid a>span{grid-row:1/3;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#eef5ff;color:var(--blue)}.quick-grid b{font-size:12px}.quick-grid small{font-size:9px;color:var(--muted)}.profile-card{text-align:center}.profile-avatar{width:82px;height:82px;border-radius:26px;display:grid;place-items:center;margin:4px auto 13px;background:linear-gradient(135deg,#0d6efd,#5dd5ff);color:#fff;font-size:30px;font-weight:900;box-shadow:0 15px 30px rgba(13,110,253,.22)}.profile-card h2{margin:0 0 8px}.profile-fields{margin-top:22px;border-top:1px solid var(--line)}.profile-fields>div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:11px}.profile-fields span{color:var(--muted)}.profile-fields b{text-align:right;word-break:break-word}.discord-linked{display:flex;align-items:center;gap:13px;background:#eef0ff;padding:17px;border-radius:14px;margin-bottom:14px}.discord-avatar{width:48px;height:48px;display:grid;place-items:center;background:#5865f2;color:#fff;border-radius:15px}.discord-linked div:nth-child(2){display:flex;flex-direction:column}.discord-linked span{font-size:10px;color:var(--muted)}.discord-linked>b{margin-left:auto;color:#2c9b69;font-size:10px}.empty-state{text-align:center;padding:25px 15px;color:#7a899d}.empty-state svg{color:#7c8cff}.empty-state h3{color:var(--ink)}.empty-state.compact{padding:16px}.preference-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid var(--line);border-radius:13px;padding:14px;position:relative}.toggle-row span{display:flex;flex-direction:column}.toggle-row small{color:var(--muted);font-size:9px;margin-top:3px}.toggle-row input{display:none}.toggle-row>i{width:40px;height:22px;border-radius:99px;background:#cbd5e1;position:relative;transition:.2s}.toggle-row>i:after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:white;transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.2)}.toggle-row input:checked+i{background:var(--blue)}.toggle-row input:checked+i:after{transform:translateX(18px)}.action-toolbar{display:flex;gap:8px;flex-wrap:wrap}.action-output{margin-top:14px;background:#f5f8fc;border:1px dashed #d1deef;color:#65758a;border-radius:10px;padding:10px 12px;font-size:11px;white-space:pre-wrap}.console-card{overflow:hidden}.console{border-radius:14px;overflow:hidden;border:1px solid #17345c;background:#061126;box-shadow:inset 0 0 30px rgba(20,105,220,.08)}.console-output{height:330px;overflow:auto;padding:15px 17px;color:#aac7eb;font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}.console-output.tall{height:440px}.console-output p{margin:0}.console-muted{color:#4f6d96}.console-line-info{color:#b9d7ff}.console-line-error{color:#ff8392}.console-result{color:#5de2a9}.console-input{display:flex;align-items:center;border-top:1px solid #153661;background:#081830}.console-input span{padding-left:14px;color:#47baff;font:700 11px ui-monospace}.console-input input{flex:1;background:transparent;border:0;color:#e7f4ff;padding:13px;outline:none;font:12px ui-monospace}.console-input button{align-self:stretch;border:0;background:#0d6efd;color:white;padding:0 18px;font-weight:800}.console-live{display:flex;align-items:center;gap:6px;color:#19a967;font-size:9px}.console-live i{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 0 5px rgba(32,199,122,.1)}.hint{font-size:10px;color:var(--muted);margin:10px 3px 0}.properties-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.properties-grid label{display:grid;gap:6px}.properties-grid label>span{font-size:11px;font-weight:800}.properties-grid label small{display:block;font-size:8px;color:#9aa7b9;font-family:ui-monospace;margin-top:2px}.properties-actions{grid-column:1/-1;display:flex;gap:8px;margin-top:8px}.danger-zone{border-color:#ffd5db;background:linear-gradient(180deg,#fff,#fffafb)}.danger-zone .card-title>b{font-size:8px;letter-spacing:1.4px;color:#c82f44;background:#fff0f2;padding:6px 8px;border-radius:99px}.danger-copy{display:flex;justify-content:space-between;align-items:center;gap:25px}.danger-copy h3{margin:0 0 6px}.danger-copy p{margin:0;color:var(--muted);font-size:11px;line-height:1.6;max-width:700px}.modal{border:0;background:transparent;padding:0}.modal::backdrop{background:rgba(4,15,35,.72);backdrop-filter:blur(5px)}.modal-card{width:min(500px,calc(100vw - 30px));background:#fff;border-radius:22px;padding:27px;box-shadow:0 30px 80px rgba(0,0,0,.28);position:relative;display:grid;gap:13px}.modal-card h2{margin:0}.modal-card p{color:var(--muted);font-size:12px;line-height:1.6}.modal-close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:26px;color:#8390a3}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:7px}.player-list{display:grid;gap:8px}.player-list>div{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:9px 11px;border-radius:11px}.player-head{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#5a7b39,#8eb953)}.player-list i{margin-left:auto;color:var(--green);font-size:9px}.responsive-table{overflow:auto}.table-card{padding:0;overflow:hidden}.table-card table{width:100%;border-collapse:collapse;font-size:11px;min-width:760px}.table-card th{text-align:left;background:#f4f8ff;color:#6a7890;padding:12px 14px;font-size:9px;text-transform:uppercase;letter-spacing:.8px}.table-card td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:middle}.user-cell{display:flex;align-items:center;gap:9px}.user-cell small{display:block;color:var(--muted);font-size:8px;margin-top:2px}.role-select{border:1px solid var(--line);border-radius:9px;padding:7px;background:#fff}.json-cell{max-width:360px;word-break:break-word;color:#697890;font-family:ui-monospace;font-size:9px}.info-list{display:grid;gap:13px;color:#65758c;font-size:12px;line-height:1.6}.newsletter-art{margin-top:30px;background:linear-gradient(145deg,#07152f,#0c4da9);border-radius:18px;padding:30px;color:#fff;display:flex;align-items:center;justify-content:center;gap:18px}.newsletter-art span{font-weight:900;font-size:25px;line-height:.9;letter-spacing:2px}.count-pill{background:#edf5ff;color:#1a67cb}.legal-page{padding:70px 0 100px;max-width:850px!important}.legal-page h1{font-size:45px}.legal-page h2{margin-top:35px}.legal-page p{color:var(--muted);line-height:1.8}.footer{min-height:58px;display:flex;justify-content:space-between;align-items:center;padding:0 max(24px,calc((100vw - 1180px)/2));border-top:1px solid var(--line);color:#8b98aa;font-size:10px;background:#fff}.footer-links{display:flex;gap:16px}.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}.reveal.in{opacity:1;transform:none}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}
@media(max-width:980px){.hero{grid-template-columns:1fr;padding-top:55px}.hero-art{max-width:650px;margin:auto}.feature-strip{grid-template-columns:1fr 1fr}.feature-strip>div:nth-child(2){border-right:0}.section-grid{grid-template-columns:1fr;gap:40px}.cards-4{grid-template-columns:1fr 1fr}.app-layout{grid-template-columns:78px 1fr}.sidebar{padding-inline:9px}.sidebar-user>div:last-child,.side-nav span,.side-label,.sidebar-foot{display:none}.sidebar-user{justify-content:center;padding-inline:0}.side-nav a{justify-content:center}.panel-grid.two{grid-template-columns:1fr}.quick-grid{grid-template-columns:1fr 1fr}.properties-grid{grid-template-columns:1fr 1fr}.auth-art{padding:45px}.auth-art h1{font-size:44px}}
@media(max-width:760px){.topbar{padding:0 18px}.nav-toggle{display:block}.topnav{display:none;position:absolute;left:14px;right:14px;top:68px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);padding:10px;flex-direction:column;align-items:stretch}.topnav.open{display:flex}.topnav>a,.nav-link-button{text-align:left;width:100%}.hero{min-height:auto;padding:55px 0}.hero-copy h1{font-size:48px}.hero-actions{flex-direction:column;align-items:stretch}.hero-mini-stats{display:grid;grid-template-columns:1fr}.chip-a{right:-5px}.chip-b{left:-5px}.feature-strip{grid-template-columns:1fr}.feature-strip>div{border-right:0;border-bottom:1px solid var(--line)}.cards-3,.cards-4{grid-template-columns:1fr}.section-grid{padding:70px 0}.section-copy h2{font-size:36px}.check-list{grid-template-columns:1fr}.auth-shell{grid-template-columns:1fr}.auth-art{display:none}.app-layout{display:block}.sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;height:66px;z-index:45;padding:6px 9px;background:#07152f;display:block;border-top:1px solid #1a3b68}.sidebar-user,.side-label,.sidebar-foot{display:none}.side-nav{display:flex;justify-content:space-around;overflow-x:auto}.side-nav a{min-width:58px;flex-direction:column;gap:2px;padding:7px 8px;font-size:8px}.side-nav a .icon{width:18px;height:18px}.side-nav span{display:block}.side-nav .side-label{display:none}.panel-main{padding:25px 16px 90px}.panel-head,.page-title{align-items:flex-start;flex-direction:column}.panel-head h1,.page-title h1{font-size:32px}.cards-4{grid-template-columns:1fr 1fr}.metric-card{min-height:128px}.quick-grid{grid-template-columns:1fr}.preference-grid,.properties-grid{grid-template-columns:1fr}.properties-actions{flex-direction:column}.action-toolbar .btn{flex:1 1 40%}.danger-copy{align-items:flex-start;flex-direction:column}.console-output{height:300px}.footer{padding-bottom:70px}.ring-row{gap:9px}.ring{width:88px;height:88px}.ring:after{width:64px;height:64px}.screen-grid{grid-template-columns:1fr}.screen-card.big{grid-row:auto;min-height:230px}.screen-card{min-height:90px}.hero-screen{transform:none}}
@media(max-width:440px){.shell{width:min(100% - 24px,1180px)}.hero-copy h1{font-size:41px}.hero-copy>p{font-size:15px}.cards-4{grid-template-columns:1fr}.preview-metrics{grid-template-columns:1fr}.ring-row{flex-wrap:wrap}.panel-card{padding:16px}.auth-panel{padding:34px 16px}.verify-card{padding:27px 20px}.metric-card{min-height:120px}.feature-strip>div{padding:17px}.modal-card{padding:22px}.footer{flex-direction:column;justify-content:center;gap:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
.toast-stack{position:fixed;right:18px;top:88px;z-index:200;display:grid;gap:9px;width:min(360px,calc(100vw - 36px))}.toast{opacity:0;transform:translateX(15px);transition:.22s;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;padding:12px 14px;font-size:12px;font-weight:700}.toast.show{opacity:1;transform:none}.toast.success{border-left:4px solid var(--green)}.toast.error{border-left:4px solid var(--red)}

.spawn-form{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:9px;align-items:end}.spawn-form label{font-size:10px;font-weight:800;color:#5f6f86}.spawn-form input{width:100%;margin-top:5px;border:1px solid var(--line);border-radius:10px;padding:10px}.quick-command-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}@media(max-width:650px){.spawn-form{grid-template-columns:1fr 1fr 1fr}.spawn-form button{grid-column:1/-1}.quick-command-grid{grid-template-columns:1fr}}

.backup-list{display:grid;gap:8px}.backup-item{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:12px;padding:11px 12px}.backup-item>div:first-child{min-width:0}.backup-item b{display:block;font-size:11px;word-break:break-all}.backup-item small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.backup-item>div:last-child{display:flex;gap:7px}@media(max-width:650px){.backup-item{align-items:flex-start;flex-direction:column}.backup-item>div:last-child{width:100%}.backup-item .btn{flex:1}}

/* =========================================================
   MINECRAFT ADVANCED FILE MANAGER
   ========================================================= */

.minecraft-file-manager{margin-top:16px}
.file-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.file-breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:11px 13px;background:#f6f9fd;border:1px solid #e3ebf7;border-radius:10px;font-size:12px;color:#64748b;margin-bottom:14px}
.file-breadcrumb button{border:0;background:none;color:#0d6efd;font-weight:700;cursor:pointer;padding:0}
.file-manager-grid{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(420px,1.5fr);gap:14px}
.file-browser,.file-editor{border:1px solid #e3ebf7;border-radius:13px;background:#fbfdff;overflow:hidden;min-width:0}
.file-browser-head,.file-editor-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid #e3ebf7;background:#f8fbff}
.file-browser-head span:last-child{font-size:11px;color:#64748b}
.file-list{max-height:560px;overflow:auto;padding:7px}
.file-entry{display:flex;align-items:center;gap:6px;border-bottom:1px solid #edf2f8}
.file-entry:last-child{border-bottom:0}
.file-entry-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border:0;background:transparent;text-align:left;padding:10px 8px;cursor:pointer;color:#10203d}
.file-entry-main:hover{background:#f1f6ff;border-radius:8px}
.file-entry-icon{font-size:18px;width:25px;text-align:center}
.file-entry-name{display:flex;flex-direction:column;min-width:0}
.file-entry-name b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-entry-name small{font-size:10px;color:#7a899d;margin-top:2px}
.file-entry-actions{display:flex;gap:5px;padding-right:6px}
.file-entry.symlink{opacity:.55}
.file-editor{display:flex;flex-direction:column;min-height:560px}
.file-editor-head{align-items:center}
.file-editor-head>div:first-child{display:flex;flex-direction:column;min-width:0}
.file-editor-head b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-editor-head small{font-size:10px;color:#718096;margin-top:2px}
.file-editor-actions{display:flex;gap:6px;flex-shrink:0}
.file-editor-textarea{flex:1;min-height:470px;width:100%;border:0;outline:0;resize:vertical;padding:17px;background:#07152d;color:#dceaff;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
.file-editor-textarea:disabled{opacity:.55;cursor:not-allowed}
.file-editor-status{padding:9px 13px;border-top:1px solid #dfe8f5;background:#f8fbff;color:#64748b;font-size:10px}
.backup-item{align-items:center}
.backup-item>div:last-child{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:980px){.file-manager-grid{grid-template-columns:1fr}.file-editor{min-height:500px}.file-list{max-height:420px}}
@media(max-width:640px){.file-editor-head{align-items:flex-start;flex-direction:column}.file-editor-actions{width:100%}.file-editor-actions .btn{flex:1}.backup-item{align-items:flex-start;flex-direction:column}}

/* =========================================================
   HENOK FILE MANAGER - MODALES INTEGRADOS
   ========================================================= */

.hm-file-dialog-card {
  width: min(520px, calc(100vw - 30px));
  background: #fff;
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
  display: grid;
  gap: 14px;
  position: relative;
  border: 1px solid rgba(20,80,160,.08);
}

.hm-file-dialog-card h2 {
  margin: 0;
  color: #0b1739;
  font-size: 22px;
}

.hm-file-dialog-card p {
  margin: 0;
  color: #65758a;
  font-size: 12px;
  line-height: 1.65;
}

.hm-file-dialog-card label {
  display: grid;
  gap: 7px;
  color: #243452;
  font-size: 11px;
  font-weight: 800;
}

.hm-file-dialog-card input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dce5f2;
  border-radius: 11px;
  background: #fff;
  color: #17243f;
  padding: 12px 13px;
  outline: none;
  font: inherit;
  transition: .18s ease;
}

.hm-file-dialog-card input:focus {
  border-color: #1976ed;
  box-shadow: 0 0 0 4px rgba(25,118,237,.10);
}

.hm-file-dialog-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#eaf4ff,#dcecff);
  color: #0d6efd;
  font-size: 21px;
  font-weight: 900;
}

.hm-file-dialog-icon.danger {
  background: #fff0f2;
  color: #d72f48;
}

.hm-file-dialog-card .modal-actions {
  margin-top: 5px;
}

.hm-file-dialog-card .btn {
  min-width: 100px;
}

.hm-file-dialog-card[data-danger="1"] .btn-primary {
  background: #e8324d;
  border-color: #e8324d;
}

.hm-file-dialog-error {
  display: none;
  color: #c92d43;
  background: #fff0f2;
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 600px) {
  .hm-file-dialog-card {
    padding: 22px;
    border-radius: 18px;
  }

  .hm-file-dialog-card .modal-actions {
    flex-direction: column-reverse;
  }

  .hm-file-dialog-card .btn {
    width: 100%;
  }
}


/* =========================================================
   HENOK - AUTOMATIC MINECRAFT BACKUPS
   ========================================================= */

.auto-backup-box {
  margin: 14px 0 18px;
  padding: 16px;
  border: 1px solid rgba(31, 91, 170, .14);
  border-radius: 16px;
  background: rgba(245, 249, 255, .72);
}

.auto-backup-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}

.auto-backup-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auto-backup-head small {
  color: #73839b;
  line-height: 1.4;
}

.auto-backup-head select {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #ccd8e8;
  border-radius: 10px;
  background: #fff;
  color: #18324f;
}

.auto-backup-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(31, 91, 170, .1);
  font-size: 12px;
  color: #708198;
}

.auto-backup-status b {
  color: #203b5e;
}

.backup-kind {
  display: inline-block;
  margin-left: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(25, 108, 220, .1);
  color: #2564ad;
  font-size: 10px;
  font-weight: 800;
  vertical-align: middle;
}

@media (max-width: 650px) {
  .auto-backup-head {
    grid-template-columns: 1fr;
  }

  .auto-backup-head select,
  .auto-backup-head button {
    width: 100%;
  }

  .auto-backup-status {
    flex-direction: column;
    gap: 6px;
  }
}

/* HENOK MINECRAFT PANEL V2 START */

.mc-tools-panel {
  overflow: hidden;
}

.mc-tools-grid {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.mc-tool-button {
  appearance: none;
  min-height: 94px;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font: inherit;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

.mc-tool-button:hover {
  transform: translateY(-2px);
  border-color: #b9d2f5;
  box-shadow: 0 9px 22px rgba(25, 72, 130, .10);
}

.mc-tool-button:active {
  transform: translateY(0);
}

.mc-tool-button:disabled {
  opacity: .55;
  cursor: wait;
}

.mc-tool-button b {
  font-size: 12px;
  color: #182438;
}

.mc-tool-button small {
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

.mc-tool-button.danger {
  background: #fffafb;
  border-color: #ffd7dc;
}

.mc-tool-button.danger:hover {
  border-color: #efaab4;
}

.mc-tool-emoji {
  font-size: 24px;
  line-height: 1;
}

.mc-tool-modal-card {
  width: min(520px, calc(100vw - 28px));
}

.mc-tool-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding-right: 25px;
}

.mc-tool-modal-head h2 {
  margin: 0 0 4px;
}

.mc-tool-modal-head p {
  margin: 0;
}

.mc-tool-modal-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #edf5ff;
  font-size: 21px;
}

.mc-tool-fields {
  display: grid;
  gap: 12px;
}

.mc-tool-field {
  display: grid;
  gap: 6px;
}

.mc-tool-field > span {
  font-size: 11px;
  font-weight: 800;
  color: #26354d;
}

.mc-tool-field input,
.mc-tool-field select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  padding: 11px 12px;
  color: #17243a;
  outline: none;
  font: inherit;
}

.mc-tool-field input:focus,
.mc-tool-field select:focus {
  border-color: #7db0ee;
  box-shadow: 0 0 0 3px rgba(50, 123, 211, .10);
}

.mc-tool-field small {
  color: var(--muted);
  font-size: 9px;
}

.mc-coordinates {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mc-tool-error {
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff0f2;
  color: #b2293d;
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 1050px) {
  .mc-tools-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .mc-tools-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .mc-tool-button {
    min-height: 88px;
  }

  .mc-coordinates {
    grid-template-columns: 1fr;
  }
}

/* HENOK MINECRAFT PANEL V2 END */

/* HENOK MINECRAFT SOFTWARE V1 START */

.mc-software-panel {
  overflow: hidden;
}

.mc-current-software {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 16px;
}

.mc-current-software > div {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px;
  display: grid;
  gap: 5px;
}

.mc-current-software span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.mc-current-software strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.mc-software-form {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mc-software-form label {
  display: grid;
  gap: 6px;
}

.mc-software-form label > span {
  font-size: 11px;
  font-weight: 800;
}

.mc-software-form select {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card, #fff);
  color: inherit;
  font: inherit;
}

.mc-software-form small {
  color: var(--muted);
  font-size: 9px;
}

.mc-software-footer {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.mc-software-status {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.mc-software-status[data-state="ok"] {
  color: #21824b;
}

.mc-software-status[data-state="warning"] {
  color: #a56b08;
}

.mc-software-status[data-state="error"] {
  color: #b2293d;
}

.mc-install-card {
  width: min(
    520px,
    calc(100vw - 28px)
  );
}

.mc-install-warning {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(245, 158, 11, .08);
  border: 1px solid rgba(245, 158, 11, .22);
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .mc-current-software {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .mc-software-form {
    grid-template-columns: 1fr;
  }

  .mc-software-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .mc-software-footer .btn {
    width: 100%;
  }
}

/* HENOK MINECRAFT SOFTWARE V1 END */

/* HENOK PAPER BETA MODE START */

.mc-experimental-option {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(245, 158, 11, .25);
  border-radius: 12px;
  background: rgba(245, 158, 11, .06);
}

.mc-experimental-option[hidden] {
  display: none !important;
}

.mc-experimental-option label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.mc-experimental-option input {
  width: 16px;
  height: 16px;
}

.mc-experimental-option small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

/* HENOK PAPER BETA MODE END */

/* HENOK MULTISERVER V1 START */

.mc-server-switcher {
  margin-bottom: 16px;
}

.mc-server-switcher-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.mc-server-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mc-server-icon {
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(59, 130, 246, .09);
  font-size: 22px;
}

.mc-server-identity > div {
  display: grid;
  gap: 2px;
}

.mc-server-identity small {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
  color: var(--muted);
}

.mc-server-identity strong {
  font-size: 14px;
}

.mc-server-identity span {
  color: var(--muted);
  font-size: 9px;
}

.mc-server-switcher-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mc-server-switcher-actions select {
  min-width: 190px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 9px 11px;
  background: var(--card, #fff);
  color: inherit;
  font: inherit;
}

.mc-remote-notice {
  margin-top: 13px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(59, 130, 246, .06);
  border: 1px solid rgba(59, 130, 246, .15);
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.mc-server-link-card,
.mc-server-dialog .modal-card {
  width: min(
    570px,
    calc(100vw - 28px)
  );
}

.mc-link-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mc-link-head > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 13px;
  background: rgba(59, 130, 246, .09);
  font-size: 20px;
}

.mc-link-head h2 {
  margin: 0 0 4px;
}

.mc-link-head p {
  margin: 0;
  color: var(--muted);
}

.mc-link-fields {
  display: grid;
  gap: 12px;
}

.mc-link-fields label {
  display: grid;
  gap: 6px;
}

.mc-link-fields label > span {
  font-size: 10px;
  font-weight: 800;
}

.mc-link-fields input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 12px;
  background: var(--card, #fff);
  color: inherit;
  font: inherit;
}

.mc-link-fields small {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
}

.mc-link-grid {
  display: grid;
  grid-template-columns:
    1fr 150px;
  gap: 10px;
}

@media (max-width: 760px) {

  .mc-server-switcher-main {
    align-items: stretch;
    flex-direction: column;
  }

  .mc-server-switcher-actions {
    justify-content: stretch;
  }

  .mc-server-switcher-actions select {
    width: 100%;
  }

  .mc-server-switcher-actions .btn {
    flex: 1 1 auto;
  }

  .mc-link-grid {
    grid-template-columns: 1fr;
  }
}

/* HENOK MULTISERVER V1 END */

/* HENOK MINECRAFT ACCESS V2 START */

.access-server-grid {
  display:grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(250px,1fr)
    );
  gap:14px;
}

.access-server-card {
  display:grid;
  gap:14px;
  padding:17px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
}

.access-server-card.granted {
  border-color:
    rgba(31,170,98,.28);
  background:
    rgba(31,170,98,.025);
}

.access-server-top {
  display:flex;
  align-items:center;
  gap:11px;
}

.access-server-symbol {
  width:43px;
  height:43px;
  flex:0 0 43px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#eef5ff;
  font-size:19px;
}

.access-server-top > div {
  min-width:0;
  display:grid;
  gap:3px;
}

.access-server-top strong {
  font-size:14px;
}

.access-server-top span {
  color:#1769e0;
  font-size:10px;
  font-weight:800;
  overflow-wrap:anywhere;
}

.access-server-top small {
  color:var(--muted);
  font-size:9px;
}

.access-request-form {
  display:grid;
  gap:10px;
}

.access-request-form label {
  display:grid;
  gap:6px;
}

.access-request-form label > span {
  font-size:9px;
  font-weight:800;
}

.access-request-form textarea {
  width:100%;
  resize:vertical;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:11px;
  padding:10px 11px;
  font:inherit;
}

.access-state {
  display:inline-flex;
  width:max-content;
  padding:5px 8px;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.access-state.success {
  color:#187646;
  background:
    rgba(31,170,98,.10);
}

.access-state.pending {
  color:#956206;
  background:
    rgba(245,158,11,.12);
}

.access-permission-pills {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.access-permission-pills span {
  padding:5px 7px;
  border-radius:999px;
  background:#eef5ff;
  color:#28548f;
  font-size:8px;
  font-weight:800;
}

.access-expiry {
  color:var(--muted);
  font-size:9px;
}

.access-history {
  display:grid;
  gap:1px;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--line);
}

.access-history > div {
  background:#fff;
  padding:11px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.access-history span {
  display:grid;
  gap:2px;
}

.access-history small {
  color:var(--muted);
  font-size:8px;
}

.access-history b[class^="access-status"] {
  font-size:8px;
  text-transform:uppercase;
}

.access-status-approved {
  color:#15834b;
}

.access-status-pending {
  color:#a76d08;
}

.access-status-rejected {
  color:#b3283d;
}

.access-status-cancelled {
  color:#758397;
}

.access-admin-list {
  display:grid;
  gap:14px;
}

.access-admin-card {
  border:1px solid var(--line);
  border-radius:15px;
  padding:17px;
  display:grid;
  gap:16px;
}

.access-admin-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.access-admin-head > div:first-child {
  display:grid;
  gap:3px;
}

.access-admin-head strong {
  font-size:13px;
}

.access-admin-head span {
  color:var(--muted);
  font-size:9px;
}

.access-server-tag {
  text-align:right;
  display:grid;
  gap:3px;
}

.access-server-tag b {
  font-size:11px;
}

.access-server-tag span {
  font-size:8px;
}

.access-request-message {
  border-radius:11px;
  background:#f7faff;
  border:1px solid #e0eafb;
  padding:11px 13px;
  display:grid;
  gap:4px;
  font-size:9px;
}

.access-permission-form {
  display:grid;
  gap:15px;
}

.access-permission-grid {
  display:grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
  gap:8px;
}

.access-permission-grid label {
  display:flex;
  align-items:flex-start;
  gap:9px;
  border:1px solid var(--line);
  border-radius:11px;
  padding:10px;
  cursor:pointer;
}

.access-permission-grid label.disabled {
  opacity:.48;
  cursor:not-allowed;
}

.access-permission-grid input {
  width:16px;
  height:16px;
  flex:0 0 16px;
  margin-top:1px;
}

.access-permission-grid label > span {
  display:grid;
  gap:3px;
}

.access-permission-grid b {
  font-size:10px;
}

.access-permission-grid small {
  color:var(--muted);
  font-size:8px;
  line-height:1.4;
}

.access-duration-row {
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.access-duration-row > label {
  min-width:180px;
  display:grid;
  gap:5px;
}

.access-duration-row label > span {
  font-size:9px;
  font-weight:800;
}

.access-duration-row select {
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 10px;
  background:#fff;
  font:inherit;
}

.access-current-expiry {
  display:grid;
  gap:2px;
  margin-right:auto;
}

.access-current-expiry small {
  color:var(--muted);
  font-size:8px;
}

.access-current-expiry b {
  font-size:9px;
}

.access-reject-form {
  display:flex;
  align-items:center;
  gap:8px;
}

.access-reject-form input {
  flex:1;
  min-width:0;
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 10px;
  font:inherit;
}

.mc-access-banner {
  margin-top:12px;
  padding:11px 13px;
  border-radius:11px;
  border:1px solid #dce7f7;
  background:#f7faff;
}

.mc-access-banner strong {
  font-size:10px;
}

.mc-access-banner small {
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:8px;
}

@media(max-width:760px) {

  .access-permission-grid {
    grid-template-columns:1fr;
  }

  .access-admin-head {
    flex-direction:column;
  }

  .access-server-tag {
    text-align:left;
  }

  .access-duration-row {
    align-items:stretch;
    flex-direction:column;
  }

  .access-duration-row > label {
    min-width:0;
  }

  .access-duration-row .btn {
    width:100%;
  }

  .access-reject-form {
    align-items:stretch;
    flex-direction:column;
  }
}

/* HENOK MINECRAFT ACCESS V2 END */

/* HENOK AGENT CORE START */

.agent-pair-card {
  border-color:
    rgba(23,105,224,.25);
}

.agent-code {
  margin:
    12px 0;
  padding:
    18px;
  border-radius:
    14px;
  background:
    #08172f;
  color:
    #ffffff;
  font-size:
    27px;
  font-weight:
    900;
  text-align:
    center;
  letter-spacing:
    5px;
}

.agent-install-command {
  width:
    100%;
  box-sizing:
    border-box;
  border:
    1px solid var(--line);
  border-radius:
    12px;
  padding:
    12px;
  background:
    #f7faff;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size:
    10px;
  resize:
    vertical;
}

.agent-security-list {
  display:
    grid;
  gap:
    10px;
}

.agent-security-list > div {
  display:
    flex;
  align-items:
    center;
  gap:
    10px;
}

.agent-security-list b {
  width:
    28px;
  height:
    28px;
  display:
    grid;
  place-items:
    center;
  flex:
    0 0 28px;
  border-radius:
    9px;
  background:
    #eef5ff;
  color:
    #1769e0;
}

.agent-security-list span {
  color:
    var(--muted);
  font-size:
    10px;
}

.agent-server-list {
  display:
    grid;
  gap:
    10px;
}

.agent-server-row {
  display:
    grid;
  grid-template-columns:
    minmax(180px,1fr)
    minmax(130px,.6fr)
    auto;
  gap:
    14px;
  align-items:
    center;
  padding:
    13px;
  border:
    1px solid var(--line);
  border-radius:
    13px;
}

.agent-server-main {
  display:
    flex;
  gap:
    10px;
  align-items:
    center;
}

.agent-server-main > div,
.agent-server-state {
  display:
    grid;
  gap:
    2px;
}

.agent-server-main small,
.agent-server-state small {
  color:
    var(--muted);
  font-size:
    8px;
}

.agent-server-state b {
  font-size:
    9px;
}

.agent-dot {
  width:
    10px;
  height:
    10px;
  flex:
    0 0 10px;
  border-radius:
    999px;
  background:
    #94a3b8;
}

.agent-dot.online {
  background:
    #20c77a;
  box-shadow:
    0 0 0 5px
    rgba(32,199,122,.10);
}

.agent-server-actions {
  display:
    flex;
  gap:
    6px;
  flex-wrap:
    wrap;
}

@media(max-width:760px) {

  .agent-server-row {
    grid-template-columns:
      1fr;
  }

  .agent-server-actions .btn {
    width:
      100%;
  }
}

/* HENOK AGENT CORE END */

/* ==========================================================
   HENOK HOSTING V1
========================================================== */

.hosting-server-grid,
.hosting-plan-grid {
  display:grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(260px,1fr)
    );
  gap:14px;
}

.hosting-server-card,
.hosting-plan-card,
.hosting-owner-server,
.hosting-admin-request {
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:17px;
}

.hosting-server-card,
.hosting-owner-server,
.hosting-admin-request,
.hosting-plan-card {
  display:grid;
  gap:14px;
}

.hosting-card-head,
.hosting-owner-title {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.hosting-card-head > div,
.hosting-owner-title > div {
  display:grid;
  gap:3px;
  min-width:0;
}

.hosting-card-head strong,
.hosting-owner-title strong {
  font-size:14px;
}

.hosting-card-head span,
.hosting-owner-title span {
  color:var(--muted);
  font-size:9px;
  overflow-wrap:anywhere;
}

.hosting-status {
  display:inline-flex;
  width:max-content;
  padding:5px 8px;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.4px;
}

.hosting-status.active,
.hosting-status.approved {
  background:rgba(31,170,98,.12);
  color:#167548;
}

.hosting-status.pending,
.hosting-status.provisioning {
  background:rgba(245,158,11,.13);
  color:#996208;
}

.hosting-status.suspended,
.hosting-status.rejected,
.hosting-status.failed,
.hosting-status.error {
  background:rgba(220,53,69,.10);
  color:#b2273b;
}

.hosting-status.cancelled,
.hosting-status.deleted {
  background:#eef1f5;
  color:#69788f;
}

.hosting-address {
  padding:11px 12px;
  border-radius:11px;
  background:#f4f8ff;
  color:#1769e0;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size:11px;
  font-weight:800;
}

.hosting-mini-grid,
.hosting-server-details,
.hosting-info-grid {
  display:grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(110px,1fr)
    );
  gap:8px;
}

.hosting-mini-grid > div,
.hosting-server-details > div,
.hosting-info-grid > div {
  padding:10px;
  border-radius:11px;
  border:1px solid var(--line);
  display:grid;
  gap:3px;
}

.hosting-mini-grid small,
.hosting-server-details small,
.hosting-info-grid small {
  color:var(--muted);
  font-size:8px;
}

.hosting-mini-grid b,
.hosting-server-details b,
.hosting-info-grid strong {
  font-size:10px;
}

.hosting-request-grid {
  display:grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
  gap:12px;
}

.hosting-request-grid label,
.hosting-form-grid label,
.hosting-inline-form label {
  display:grid;
  gap:5px;
}

.hosting-request-grid label > span,
.hosting-form-grid label > span,
.hosting-inline-form label > span {
  font-size:8px;
  font-weight:800;
}

.hosting-request-grid input,
.hosting-request-grid select,
.hosting-request-grid textarea,
.hosting-form-grid input,
.hosting-form-grid select,
.hosting-inline-form input,
.hosting-inline-form select,
.hosting-plan-name input {
  width:100%;
  box-sizing:border-box;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  font:inherit;
}

.hosting-request-message {
  grid-column:
    1 / -1;
}

.hosting-catalog-status {
  grid-column:
    1 / -1;
  color:var(--muted);
  font-size:9px;
}

.hosting-request-list,
.hosting-admin-list,
.hosting-owner-servers {
  display:grid;
  gap:10px;
}

.hosting-request-row {
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
}

.hosting-request-row > div {
  display:grid;
  gap:3px;
}

.hosting-request-row span {
  color:var(--muted);
  font-size:9px;
}

.hosting-plan-card.new {
  border-style:dashed;
  background:#f9fbff;
}

.hosting-plan-name {
  display:flex;
  gap:8px;
  align-items:center;
}

.hosting-plan-name input {
  font-weight:900;
  font-size:15px;
}

.hosting-plan-name span {
  color:var(--muted);
  font-size:9px;
}

.hosting-form-grid {
  display:grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
  gap:8px;
}

.hosting-software-checks {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.hosting-software-checks label {
  display:flex;
  align-items:center;
  gap:5px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:9px;
  font-size:9px;
}

.hosting-request-specs {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.hosting-request-specs span,
.hosting-request-specs b {
  padding:5px 7px;
  border-radius:999px;
  background:#eef5ff;
  color:#28548f;
  font-size:8px;
}

.hosting-request-note {
  padding:10px;
  border-radius:10px;
  background:#f7faff;
  font-size:9px;
}

.hosting-admin-actions,
.hosting-owner-actions {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.hosting-inline-form {
  display:grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    )
    auto;
  align-items:end;
  gap:8px;
}

.hosting-suspended {
  margin-bottom:14px;
  padding:14px;
  border:1px solid rgba(220,53,69,.20);
  border-radius:13px;
  background:rgba(220,53,69,.04);
  display:grid;
  gap:4px;
}

.hosting-suspended strong {
  color:#b2273b;
}

.hosting-suspended span {
  color:var(--muted);
  font-size:9px;
}

@media(max-width:760px) {

  .hosting-request-grid,
  .hosting-form-grid,
  .hosting-inline-form {
    grid-template-columns:1fr;
  }

  .hosting-request-message {
    grid-column:auto;
  }

  .hosting-card-head,
  .hosting-owner-title,
  .hosting-request-row {
    align-items:stretch;
    flex-direction:column;
  }

  .hosting-admin-actions,
  .hosting-owner-actions {
    flex-direction:column;
  }

  .hosting-admin-actions .btn,
  .hosting-owner-actions .btn {
    width:100%;
  }
}

/* HENOK HOSTING V1 END */

/* ==========================================================
   HOSTING PANEL V2
========================================================== */

.hosting-quick-grid {
  display:grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(130px,1fr)
    );
  gap:8px;
  margin-bottom:12px;
}

.hosting-tool-form {
  display:grid;
  grid-template-columns:
    minmax(150px,1fr)
    minmax(180px,1fr)
    auto;
  gap:8px;
}

.hosting-tool-form input,
.hosting-tool-form select,
.hosting-properties-grid input,
.hosting-properties-grid select,
.hosting-software-client select,
.hosting-new-world-form input {
  width:100%;
  box-sizing:border-box;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  font:inherit;
}

.hosting-files-panel {
  overflow:hidden;
}

.hosting-file-toolbar {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:10px;
}

.hosting-upload-label {
  cursor:pointer;
}

.hosting-breadcrumb {
  margin-bottom:10px;
  padding:9px 11px;
  border-radius:10px;
  background:#f4f8ff;
  color:#1769e0;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size:9px;
  overflow-wrap:anywhere;
}

.hosting-file-layout {
  display:grid;
  grid-template-columns:
    minmax(240px,.85fr)
    minmax(0,1.5fr);
  gap:12px;
}

.hosting-file-list {
  min-height:340px;
  max-height:590px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:12px;
  padding:6px;
}

.hosting-file-row {
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px;
  border-bottom:1px solid #edf2f8;
}

.hosting-file-row:last-child {
  border-bottom:0;
}

.hosting-file-open {
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  padding:7px;
  display:flex;
  align-items:center;
  gap:8px;
  text-align:left;
  cursor:pointer;
  border-radius:8px;
}

.hosting-file-open:hover {
  background:#f4f8ff;
}

.hosting-file-open > span:last-child {
  min-width:0;
  display:grid;
  gap:2px;
}

.hosting-file-open b {
  font-size:9px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hosting-file-open small {
  font-size:7px;
  color:var(--muted);
}

.hosting-editor {
  min-width:0;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:8px;
}

.hosting-editor-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.hosting-editor-head > div:first-child {
  min-width:0;
  display:grid;
  gap:2px;
}

.hosting-editor-head strong {
  font-size:9px;
  overflow-wrap:anywhere;
}

.hosting-editor-head small {
  font-size:7px;
  color:var(--muted);
}

.hosting-editor textarea {
  width:100%;
  min-height:360px;
  box-sizing:border-box;
  resize:vertical;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#09182d;
  color:#e6edf7;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size:9px;
  line-height:1.55;
}

.hosting-editor textarea:disabled {
  opacity:.65;
}

.hosting-properties-grid {
  display:grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );
  gap:10px;
}

.hosting-properties-grid label {
  display:grid;
  gap:5px;
}

.hosting-properties-grid label > span {
  font-size:8px;
  font-weight:800;
}

.hosting-properties-grid label > small {
  font-size:7px;
  color:var(--muted);
}

.hosting-check {
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:6px !important;
  padding:9px;
  border:1px solid var(--line);
  border-radius:10px;
}

.hosting-check input {
  width:auto !important;
}

.hosting-properties-actions {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.hosting-software-client {
  display:grid;
  grid-template-columns:
    minmax(150px,.8fr)
    minmax(180px,1fr)
    auto;
  gap:9px;
  align-items:end;
}

.hosting-software-client label {
  display:grid;
  gap:5px;
}

.hosting-software-client label > span {
  font-size:8px;
  font-weight:800;
}

.hosting-new-world-form {
  margin-top:12px;
  display:grid;
  grid-template-columns:
    repeat(
      3,
      minmax(120px,1fr)
    )
    auto;
  gap:8px;
  align-items:end;
}

@media(max-width:850px) {

  .hosting-file-layout,
  .hosting-properties-grid,
  .hosting-software-client,
  .hosting-new-world-form,
  .hosting-tool-form {
    grid-template-columns:1fr;
  }

  .hosting-properties-actions {
    grid-column:auto;
    flex-direction:column;
    align-items:stretch;
  }

  .hosting-editor-head {
    align-items:stretch;
    flex-direction:column;
  }

  .hosting-editor-head > div:last-child {
    display:flex;
    gap:5px;
  }

  .hosting-editor-head .btn {
    flex:1;
  }
}

/* HOSTING PANEL V2 END */

/* ==========================================================
   HOSTING CLIENT UI ALIGNMENT V3
========================================================== */

[data-hosting-server-id] .panel-card {
  overflow:hidden;
}

[data-hosting-server-id] input,
[data-hosting-server-id] select,
[data-hosting-server-id] textarea {
  font-family:inherit;
}

/* Herramientas */

.hosting-tool-form {
  display:grid;
  grid-template-columns:
    minmax(190px,1fr)
    minmax(190px,1fr)
    auto;
  gap:10px;
  align-items:end;
}

.hosting-tool-form input,
.hosting-tool-form select {
  min-height:42px;
}


/* Configuración rápida */

.hosting-properties-grid {
  display:grid !important;
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );
  gap:14px;
  align-items:end;
}

.hosting-properties-grid > label {
  display:grid !important;
  gap:7px;
  min-width:0;
}

.hosting-properties-grid > label > span {
  font-size:10px;
  font-weight:800;
  color:var(--text);
}

.hosting-properties-grid input:not([type="checkbox"]),
.hosting-properties-grid select {
  width:100% !important;
  min-width:0;
  min-height:42px;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  color:var(--text);
  outline:none;
}

.hosting-properties-grid input:focus,
.hosting-properties-grid select:focus {
  border-color:#79aef6;
  box-shadow:
    0 0 0 3px
    rgba(23,105,224,.08);
}

.hosting-check {
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start;
  gap:8px !important;
  min-height:42px;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#f9fbff;
  font-size:10px;
  font-weight:700;
}

.hosting-check input {
  width:16px !important;
  height:16px;
  margin:0;
}

.hosting-properties-actions {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:2px;
}


/* Software */

.hosting-software-client {
  display:grid !important;
  grid-template-columns:
    minmax(180px,.8fr)
    minmax(220px,1fr)
    auto;
  gap:12px;
  align-items:end;
}

.hosting-software-client label {
  display:grid;
  gap:7px;
}

.hosting-software-client label > span {
  font-size:10px;
  font-weight:800;
}

.hosting-software-client select {
  width:100%;
  min-height:42px;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
}


/* Mundo */

.hosting-new-world-form {
  display:grid !important;
  grid-template-columns:
    minmax(170px,.8fr)
    minmax(200px,1fr)
    minmax(210px,1fr)
    auto;
  gap:10px;
  align-items:end;
  margin-top:16px;
}

.hosting-new-world-form input {
  width:100%;
  min-height:42px;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
}


/* File manager */

.hosting-file-toolbar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}

.hosting-breadcrumb {
  display:block;
  margin-bottom:12px;
  padding:10px 13px;
  border:1px solid #d7e4f5;
  border-radius:10px;
  background:#f4f8ff;
  color:#24538c;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size:10px;
}

.hosting-file-layout {
  display:grid !important;
  grid-template-columns:
    minmax(300px,.85fr)
    minmax(420px,1.45fr);
  gap:14px;
  align-items:stretch;
}

.hosting-file-list {
  min-height:420px;
  max-height:610px;
  overflow:auto;
  padding:7px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
}

.hosting-file-row {
  display:flex;
  align-items:center;
  gap:7px;
  padding:4px;
  border-bottom:1px solid #edf2f8;
}

.hosting-file-row:last-child {
  border-bottom:0;
}

.hosting-file-open {
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border:0;
  border-radius:9px;
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.hosting-file-open:hover {
  background:#f3f7fd;
}

.hosting-file-open > span:last-child {
  min-width:0;
  display:grid;
  gap:3px;
}

.hosting-file-open b {
  font-size:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hosting-file-open small {
  font-size:8px;
  color:var(--muted);
}

.hosting-editor {
  min-width:0;
  display:grid !important;
  grid-template-rows:auto 1fr auto;
  gap:9px;
}

.hosting-editor-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.hosting-editor-head > div:first-child {
  min-width:0;
  display:grid;
  gap:3px;
}

.hosting-editor-head > div:last-child {
  display:flex;
  gap:7px;
}

.hosting-editor-head strong {
  font-size:11px;
  overflow-wrap:anywhere;
}

.hosting-editor-head small {
  font-size:8px;
  color:var(--muted);
}

.hosting-editor textarea {
  display:block !important;
  width:100% !important;
  min-width:0;
  min-height:420px !important;
  box-sizing:border-box;
  resize:vertical;
  padding:14px !important;
  border:1px solid #183356 !important;
  border-radius:13px !important;
  background:#07182e !important;
  color:#e5edf8 !important;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace !important;
  font-size:11px !important;
  line-height:1.6;
}

.hosting-editor textarea:disabled {
  background:#0a1b31 !important;
  color:#8292aa !important;
  opacity:1;
}


/* Console similar al panel principal */

[data-hosting-server-id] .console-card {
  min-width:0;
}

[data-hosting-server-id] .console {
  overflow:hidden;
  border-radius:13px;
}

[data-hosting-server-id] .console-output {
  min-height:330px;
}


/* Backup rows */

[data-hosting-server-id] .backup-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

[data-hosting-server-id] .backup-item > div:first-child {
  min-width:0;
  display:grid;
  gap:3px;
}

[data-hosting-server-id] .backup-item > div:last-child {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}


/* Responsive */

@media(max-width:1050px) {

  .hosting-file-layout {
    grid-template-columns:1fr;
  }

  .hosting-properties-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .hosting-software-client,
  .hosting-new-world-form {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }
}


@media(max-width:700px) {

  .hosting-properties-grid,
  .hosting-software-client,
  .hosting-new-world-form,
  .hosting-tool-form {
    grid-template-columns:1fr !important;
  }

  .hosting-properties-actions {
    grid-column:auto;
    align-items:stretch;
    flex-direction:column;
  }

  .hosting-editor-head,
  [data-hosting-server-id] .backup-item {
    align-items:stretch;
    flex-direction:column;
  }

  .hosting-editor-head > div:last-child {
    width:100%;
  }

  .hosting-editor-head > div:last-child .btn {
    flex:1;
  }

  .hosting-editor textarea {
    min-height:330px !important;
  }
}

/* HOSTING CLIENT UI ALIGNMENT V3 END */

/* HENOK_FLEX_HOSTING_UI_V1 */

.hosting-flex-resources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 6px 0 14px;
}

.hosting-flex-field {
  display: grid;
  gap: 7px;
}

.hosting-flex-field > span {
  font-weight: 700;
}

.hosting-flex-field small {
  opacity: .72;
  line-height: 1.4;
}

.hosting-flex-summary {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  gap: 5px 18px;
  align-items: center;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid
    rgba(255,255,255,.10);
  border-radius: 14px;
  background:
    rgba(255,255,255,.035);
}

.hosting-flex-summary strong,
.hosting-flex-summary span {
  grid-column: 1;
}

.hosting-flex-summary b {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.15rem;
}

@media (max-width: 720px) {

  .hosting-flex-resources {
    grid-template-columns: 1fr;
  }

  .hosting-flex-summary {
    grid-template-columns: 1fr;
  }

  .hosting-flex-summary b {
    grid-column: 1;
    grid-row: auto;
  }
}



/* ============================================================
   HENOK_UI_NAV_STYLE_V14_1A
   Sidebar information architecture
   ============================================================ */

@media (min-width:981px) {

  .app-layout {
    grid-template-columns:
      276px minmax(0, 1fr);
  }

  .sidebar.sidebar-v14 {
    padding:
      18px 12px 16px;
    overflow:
      hidden;
  }

  .sidebar-v14 .sidebar-user {
    margin-bottom:
      10px;
    padding:
      10px 10px 17px;
  }

  .sidebar-v14 .side-nav {
    display:
      block;
    flex: 1 1 auto;
    min-height:
      0;
    overflow-y:
      auto;
    overflow-x:
      hidden;
    padding:
      2px 4px 16px 0;
    scrollbar-width:
      thin;
    scrollbar-color:
      #264b78 transparent;
  }

  .sidebar-v14 .side-nav::-webkit-scrollbar {
    width:
      5px;
  }

  .sidebar-v14 .side-nav::-webkit-scrollbar-track {
    background:
      transparent;
  }

  .sidebar-v14 .side-nav::-webkit-scrollbar-thumb {
    background:
      #264b78;
    border-radius:
      999px;
  }

  .sidebar-v14 .nav-group {
    position:
      relative;
  }

  .sidebar-v14 .nav-group + .nav-group {
    margin-top:
      14px;
    padding-top:
      13px;
    border-top:
      1px solid rgba(93, 132, 183, .16);
  }

  .sidebar-v14 .nav-group-label {
    display:
      flex;
    align-items:
      center;
    min-height:
      20px;
    padding:
      0 10px 7px;
    color:
      #5f82ad;
    font-size:
      8px;
    font-weight:
      900;
    letter-spacing:
      1.55px;
    line-height:
      1;
    text-transform:
      uppercase;
    user-select:
      none;
  }

  .sidebar-v14 .nav-group.has-active
  .nav-group-label {
    color:
      #8fb7e7;
  }

  .sidebar-v14 .nav-group-links {
    display:
      grid;
    gap:
      3px;
  }

  .sidebar-v14 .side-nav a {
    position:
      relative;
    min-height:
      42px;
    padding:
      9px 10px;
    border:
      1px solid transparent;
    border-radius:
      11px;
    color:
      #a5b9d2;
    font-size:
      12px;
    font-weight:
      700;
    line-height:
      1.2;
    transition:
      background .16s ease,
      border-color .16s ease,
      color .16s ease,
      transform .16s ease;
  }

  .sidebar-v14 .side-nav a:hover {
    color:
      #fff;
    background:
      rgba(24, 67, 119, .54);
    border-color:
      rgba(86, 147, 219, .14);
    transform:
      translateX(2px);
  }

  .sidebar-v14 .side-nav a.active,
  .sidebar-v14 .side-nav a[aria-current="page"] {
    color:
      #fff;
    background:
      linear-gradient(
        90deg,
        rgba(21, 77, 146, .9),
        rgba(12, 49, 94, .9)
      );
    border-color:
      rgba(76, 201, 255, .16);
    box-shadow:
      inset 3px 0 #4cc9ff,
      0 5px 18px rgba(0, 0, 0, .08);
  }

  .sidebar-v14 .side-nav a .icon {
    flex:
      0 0 auto;
    opacity:
      .88;
  }

  .sidebar-v14 .side-nav a.active .icon,
  .sidebar-v14 .side-nav a:hover .icon {
    opacity:
      1;
  }

  .sidebar-v14 .nav-group-owner
  .nav-group-label {
    color:
      #9d8dd9;
  }

  .sidebar-v14 .nav-group-owner
  .side-nav a.active {
    box-shadow:
      inset 3px 0 #a78bfa;
  }

  .sidebar-v14 .sidebar-foot {
    margin-top:
      8px;
    padding:
      13px 10px 2px;
  }

}


/* Tablet: icon rail, but keep logical groups. */
@media (
  min-width:761px
) and (
  max-width:980px
) {

  .app-layout {
    grid-template-columns:
      82px minmax(0, 1fr);
  }

  .sidebar.sidebar-v14 {
    padding:
      14px 8px;
  }

  .sidebar-v14 .side-nav {
    display:
      block;
    overflow-y:
      auto;
    scrollbar-width:
      none;
  }

  .sidebar-v14 .side-nav::-webkit-scrollbar {
    display:
      none;
  }

  .sidebar-v14 .nav-group + .nav-group {
    margin-top:
      9px;
    padding-top:
      9px;
    border-top:
      1px solid rgba(93, 132, 183, .14);
  }

  .sidebar-v14 .nav-group-label {
    display:
      none;
  }

  .sidebar-v14 .nav-group-links {
    display:
      grid;
    gap:
      4px;
  }

  .sidebar-v14 .side-nav a {
    min-height:
      48px;
    justify-content:
      center;
    padding:
      10px 8px;
    border-radius:
      12px;
  }

  .sidebar-v14 .side-nav a.active {
    box-shadow:
      inset 3px 0 #4cc9ff;
  }

}


/* Mobile: preserve the existing bottom navigation,
   flattening the visual groups so links remain usable. */
@media (max-width:760px) {

  .sidebar.sidebar-v14 {
    height:
      72px;
    padding:
      6px 8px;
  }

  .sidebar-v14 .side-nav {
    display:
      flex;
    align-items:
      stretch;
    justify-content:
      flex-start;
    gap:
      5px;
    overflow-x:
      auto;
    overflow-y:
      hidden;
    padding:
      0;
    scrollbar-width:
      none;
    scroll-snap-type:
      x proximity;
  }

  .sidebar-v14 .side-nav::-webkit-scrollbar {
    display:
      none;
  }

  .sidebar-v14 .nav-group,
  .sidebar-v14 .nav-group-links {
    display:
      contents;
  }

  .sidebar-v14 .nav-group-label {
    display:
      none !important;
  }

  .sidebar-v14 .side-nav a {
    flex:
      0 0 66px;
    min-width:
      66px;
    height:
      58px;
    padding:
      7px 6px 6px;
    justify-content:
      center;
    gap:
      3px;
    border:
      1px solid transparent;
    border-radius:
      11px;
    scroll-snap-align:
      start;
  }

  .sidebar-v14 .side-nav a.active {
    background:
      #10315e;
    border-color:
      #204b7f;
    box-shadow:
      inset 0 -3px #4cc9ff;
  }

  .sidebar-v14 .side-nav a span {
    max-width:
      60px;
    overflow:
      hidden;
    text-overflow:
      ellipsis;
    white-space:
      nowrap;
  }

  .sidebar-v14 .panel-main {
    padding-bottom:
      96px;
  }

}



/* ============================================================
   HENOK_UI_DESIGN_SYSTEM_V14_2A

   Sistema visual del panel autenticado.
   Scope intencional: .app-layout
   No afecta homepage/auth/legal.
   ============================================================ */


/* ------------------------------------------------------------
   PANEL FOUNDATION
   ------------------------------------------------------------ */

.app-layout {
  --panel-bg: #f4f7fb;
  --panel-surface: #ffffff;
  --panel-surface-soft: #f8faff;
  --panel-line: #e4eaf3;
  --panel-line-strong: #d6dfec;
  --panel-text: #101828;
  --panel-muted: #667085;
  --panel-subtle: #98a2b3;

  --panel-primary: #2563eb;
  --panel-primary-hover: #1d4ed8;
  --panel-primary-soft: #eff6ff;

  --panel-success: #12b76a;
  --panel-success-soft: #ecfdf3;

  --panel-warning: #f79009;
  --panel-warning-soft: #fffaeb;

  --panel-danger: #f04438;
  --panel-danger-soft: #fff1f0;

  --panel-radius-xs: 8px;
  --panel-radius-sm: 12px;
  --panel-radius-md: 16px;
  --panel-radius-lg: 20px;

  --panel-shadow-xs:
    0 1px 2px rgba(16, 24, 40, .03);

  --panel-shadow-sm:
    0 1px 3px rgba(16, 24, 40, .05),
    0 1px 2px rgba(16, 24, 40, .03);

  --panel-shadow-md:
    0 8px 28px rgba(16, 24, 40, .065);
}


/* ------------------------------------------------------------
   MAIN CANVAS
   ------------------------------------------------------------ */

.app-layout .panel-main {
  background:
    radial-gradient(
      circle at 92% 2%,
      rgba(37, 99, 235, .055),
      transparent 24rem
    ),
    var(--panel-bg);

  padding:
    34px clamp(24px, 3.5vw, 52px) 64px;
}


/* Keep content controlled on very wide screens. */
.app-layout .panel-main > * {
  width:
    min(100%, 1480px);
  margin-left:
    auto;
  margin-right:
    auto;
}


/* ------------------------------------------------------------
   PAGE HEADER
   ------------------------------------------------------------ */

.app-layout .panel-head,
.app-layout .page-title {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    24px;
}


.app-layout .panel-head > div:first-child,
.app-layout .page-title > div:first-child {
  min-width:
    0;
}


.app-layout .panel-head h1,
.app-layout .page-title h1 {
  margin:
    0;

  color:
    var(--panel-text);

  font-size:
    clamp(26px, 2.2vw, 34px);

  font-weight:
    800;

  letter-spacing:
    -.035em;

  line-height:
    1.15;
}


.app-layout .panel-head p,
.app-layout .page-title p {
  margin:
    7px 0 0;

  max-width:
    760px;

  color:
    var(--panel-muted);

  font-size:
    12px;

  line-height:
    1.65;
}


.app-layout .head-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  flex-wrap:
    wrap;
}


/* ------------------------------------------------------------
   SHARED CARD SYSTEM
   ------------------------------------------------------------ */

.app-layout .panel-card {
  margin-top:
    16px;

  padding:
    22px;

  background:
    var(--panel-surface);

  border:
    1px solid var(--panel-line);

  border-radius:
    var(--panel-radius-lg);

  box-shadow:
    var(--panel-shadow-sm);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}


.app-layout .panel-card:hover {
  border-color:
    var(--panel-line-strong);

  box-shadow:
    var(--panel-shadow-md);
}


.app-layout .panel-grid {
  gap:
    18px;

  margin-top:
    18px;
}


.app-layout .panel-grid.two {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}


/* ------------------------------------------------------------
   CARD TITLES
   ------------------------------------------------------------ */

.app-layout .card-title {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  margin-bottom:
    18px;

  color:
    var(--panel-text);

  font-size:
    14px;

  font-weight:
    800;
}


.app-layout .card-title > span {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.app-layout .card-title .icon {
  color:
    var(--panel-primary);
}


.app-layout .card-title small {
  color:
    var(--panel-muted);

  font-size:
    10px;

  font-weight:
    500;
}


.app-layout .card-title > a {
  color:
    var(--panel-primary);

  font-size:
    10px;

  font-weight:
    700;
}


/* ------------------------------------------------------------
   METRIC CARDS
   ------------------------------------------------------------ */

.app-layout .cards-4 {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    14px;
}


.app-layout .metric-card {
  position:
    relative;

  min-width:
    0;

  min-height:
    138px;

  padding:
    19px;

  overflow:
    hidden;

  background:
    var(--panel-surface);

  border:
    1px solid var(--panel-line);

  border-radius:
    var(--panel-radius-md);

  box-shadow:
    var(--panel-shadow-xs);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}


.app-layout .metric-card::after {
  content:
    "";

  position:
    absolute;

  top:
    -48px;

  right:
    -48px;

  width:
    110px;

  height:
    110px;

  border-radius:
    50%;

  background:
    rgba(37, 99, 235, .045);

  pointer-events:
    none;
}


.app-layout .metric-card:hover {
  transform:
    translateY(-2px);

  border-color:
    #cfd9e8;

  box-shadow:
    var(--panel-shadow-md);
}


.app-layout .metric-card > span,
.app-layout .metric-card > small {
  color:
    var(--panel-muted);
}


.app-layout .metric-card strong {
  color:
    var(--panel-text);

  letter-spacing:
    -.025em;
}


/* ------------------------------------------------------------
   QUICK ACTIONS
   ------------------------------------------------------------ */

.app-layout .quick-actions {
  margin-top:
    30px;
}


.app-layout .quick-actions > h2 {
  margin:
    0 0 13px;

  color:
    var(--panel-text);

  font-size:
    17px;

  font-weight:
    800;

  letter-spacing:
    -.02em;
}


.app-layout .quick-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    12px;
}


.app-layout .quick-grid a {
  position:
    relative;

  min-width:
    0;

  padding:
    15px;

  background:
    var(--panel-surface);

  border:
    1px solid var(--panel-line);

  border-radius:
    var(--panel-radius-md);

  box-shadow:
    var(--panel-shadow-xs);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.app-layout .quick-grid a:hover {
  transform:
    translateY(-2px);

  border-color:
    #bfd2f2;

  box-shadow:
    0 8px 22px rgba(37, 99, 235, .09);
}


.app-layout .quick-grid a > span {
  width:
    40px;

  height:
    40px;

  border-radius:
    12px;

  background:
    var(--panel-primary-soft);

  color:
    var(--panel-primary);
}


.app-layout .quick-grid b {
  overflow:
    hidden;

  color:
    var(--panel-text);

  font-size:
    11px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.app-layout .quick-grid small {
  overflow:
    hidden;

  color:
    var(--panel-muted);

  font-size:
    9px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* ------------------------------------------------------------
   BUTTON SYSTEM
   ------------------------------------------------------------ */

.app-layout .btn,
.app-layout button.btn {
  min-height:
    38px;

  padding:
    9px 14px;

  border-radius:
    10px;

  font-size:
    11px;

  font-weight:
    700;

  line-height:
    1;

  transition:
    transform .14s ease,
    box-shadow .14s ease,
    background .14s ease,
    border-color .14s ease,
    opacity .14s ease;
}


.app-layout .btn:hover:not(:disabled),
.app-layout button.btn:hover:not(:disabled) {
  transform:
    translateY(-1px);
}


.app-layout .btn:disabled,
.app-layout button.btn:disabled {
  cursor:
    not-allowed;

  opacity:
    .52;
}


.app-layout .btn-primary,
.app-layout .btn.primary {
  background:
    var(--panel-primary);

  border-color:
    var(--panel-primary);

  color:
    #fff;

  box-shadow:
    0 3px 9px rgba(37, 99, 235, .16);
}


.app-layout .btn-primary:hover,
.app-layout .btn.primary:hover {
  background:
    var(--panel-primary-hover);

  border-color:
    var(--panel-primary-hover);
}


.app-layout .btn-danger,
.app-layout .btn.danger {
  color:
    #fff;

  background:
    var(--panel-danger);

  border-color:
    var(--panel-danger);
}


.app-layout .btn-secondary,
.app-layout .btn.secondary,
.app-layout .btn-ghost,
.app-layout .btn.ghost {
  color:
    #344054;

  background:
    #fff;

  border-color:
    var(--panel-line-strong);
}


/* ------------------------------------------------------------
   INPUTS / FORMS
   ------------------------------------------------------------ */

.app-layout input:not([type="checkbox"]):not([type="radio"]),
.app-layout select,
.app-layout textarea {
  min-height:
    40px;

  color:
    var(--panel-text);

  background:
    #fff;

  border:
    1px solid var(--panel-line-strong);

  border-radius:
    10px;

  outline:
    none;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}


.app-layout input:not([type="checkbox"]):not([type="radio"]):focus,
.app-layout select:focus,
.app-layout textarea:focus {
  border-color:
    #84adf4;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, .09);
}


.app-layout input::placeholder,
.app-layout textarea::placeholder {
  color:
    #98a2b3;
}


/* ------------------------------------------------------------
   TABLES
   ------------------------------------------------------------ */

.app-layout .table-card {
  overflow:
    hidden;

  padding:
    0;

  border:
    1px solid var(--panel-line);

  border-radius:
    var(--panel-radius-md);

  background:
    #fff;

  box-shadow:
    var(--panel-shadow-xs);
}


.app-layout .table-card table {
  width:
    100%;

  border-collapse:
    collapse;

  font-size:
    11px;
}


.app-layout .table-card th {
  padding:
    12px 15px;

  color:
    #667085;

  background:
    #f8fafc;

  border-bottom:
    1px solid var(--panel-line);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .055em;
}


.app-layout .table-card td {
  padding:
    13px 15px;

  border-top:
    1px solid #eef2f7;
}


.app-layout .table-card tbody tr {
  transition:
    background .12s ease;
}


.app-layout .table-card tbody tr:hover {
  background:
    #fafcff;
}


/* ------------------------------------------------------------
   SERVICE LISTS
   ------------------------------------------------------------ */

.app-layout .service-list {
  gap:
    0;

  overflow:
    hidden;

  background:
    #fff;

  border:
    1px solid var(--panel-line);

  border-radius:
    var(--panel-radius-sm);
}


.app-layout .service-list > div {
  padding:
    12px 14px;

  background:
    #fff;

  border-bottom:
    1px solid #eef2f7;
}


.app-layout .service-list > div:last-child {
  border-bottom:
    0;
}


.app-layout .service-list b {
  color:
    #667085;

  font-size:
    9px;

  font-weight:
    700;
}


/* ------------------------------------------------------------
   RINGS / RESOURCE INDICATORS
   ------------------------------------------------------------ */

.app-layout .ring-row {
  display:
    flex;

  justify-content:
    center;

  gap:
    22px;

  padding:
    12px 0 20px;
}


.app-layout .ring {
  width:
    108px;

  height:
    108px;

  background:
    conic-gradient(
      var(--panel-primary)
      calc(var(--p) * 1%),
      #edf1f7 0
    );
}


.app-layout .ring::after {
  background:
    var(--panel-surface);
}


.app-layout .ring strong {
  color:
    var(--panel-text);

  font-size:
    18px;

  font-weight:
    800;
}


.app-layout .ring span {
  color:
    var(--panel-muted);

  font-size:
    8px;

  font-weight:
    600;
}


/* ------------------------------------------------------------
   STATUS / PILLS
   ------------------------------------------------------------ */

.app-layout .role-chip,
.app-layout .count-pill {
  border-radius:
    999px;

  font-weight:
    800;

  letter-spacing:
    .04em;
}


.app-layout .count-pill {
  padding:
    5px 8px;

  color:
    var(--panel-primary);

  background:
    var(--panel-primary-soft);
}


/* ------------------------------------------------------------
   CONSOLES
   ------------------------------------------------------------ */

.app-layout .console {
  overflow:
    hidden;

  background:
    #07111f;

  border:
    1px solid #162a43;

  border-radius:
    14px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}


.app-layout .console-output {
  color:
    #b8c9de;

  background:
    linear-gradient(
      180deg,
      #07111f,
      #091525
    );
}


.app-layout .console-input {
  background:
    #0b1728;

  border-top:
    1px solid #1c304a;
}


.app-layout .console-input input {
  min-height:
    auto;

  border:
    0;

  border-radius:
    0;

  box-shadow:
    none;
}


/* ------------------------------------------------------------
   DANGER ZONES
   ------------------------------------------------------------ */

.app-layout .danger-zone {
  border:
    1px solid #fecdca;

  background:
    linear-gradient(
      180deg,
      #fff,
      #fffbfa
    );
}


.app-layout .danger-zone:hover {
  border-color:
    #fda29b;

  box-shadow:
    0 8px 24px rgba(240, 68, 56, .055);
}


/* ------------------------------------------------------------
   MINECRAFT SCENE
   ------------------------------------------------------------ */

.app-layout .minecraft-scene {
  padding:
    20px;

  background:
    linear-gradient(
      135deg,
      #f2f7ff,
      #fbfdff
    );

  border:
    1px solid #dbe8fb;

  border-radius:
    var(--panel-radius-md);
}


.app-layout .minecraft-scene h3 {
  color:
    var(--panel-text);

  font-weight:
    800;
}


.app-layout .minecraft-scene p {
  color:
    var(--panel-muted);
}


/* ------------------------------------------------------------
   EMPTY STATES
   ------------------------------------------------------------ */

.app-layout .empty-state {
  padding:
    30px 18px;

  color:
    var(--panel-muted);

  background:
    #fbfcfe;

  border:
    1px dashed var(--panel-line-strong);

  border-radius:
    var(--panel-radius-sm);
}


.app-layout .empty-state h3 {
  margin-bottom:
    5px;

  color:
    var(--panel-text);
}


/* ------------------------------------------------------------
   SCROLLBARS INSIDE PANEL
   ------------------------------------------------------------ */

.app-layout * {
  scrollbar-width:
    thin;

  scrollbar-color:
    #cbd5e1 transparent;
}


.app-layout *::-webkit-scrollbar {
  width:
    7px;

  height:
    7px;
}


.app-layout *::-webkit-scrollbar-thumb {
  background:
    #cbd5e1;

  border-radius:
    99px;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width:1100px) {

  .app-layout .cards-4 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .app-layout .quick-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width:760px) {

  .app-layout .panel-main {
    padding:
      22px 15px 98px;
  }

  .app-layout .panel-head,
  .app-layout .page-title {
    align-items:
      flex-start;

    margin-bottom:
      18px;
  }

  .app-layout .panel-head h1,
  .app-layout .page-title h1 {
    font-size:
      26px;
  }

  .app-layout .panel-grid.two {
    grid-template-columns:
      1fr;
  }

  .app-layout .panel-card {
    padding:
      17px;

    border-radius:
      16px;
  }

  .app-layout .cards-4 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      10px;
  }

  .app-layout .metric-card {
    min-height:
      124px;

    padding:
      15px;
  }

  .app-layout .quick-grid {
    grid-template-columns:
      1fr;
  }

  .app-layout .head-actions {
    width:
      100%;

    justify-content:
      flex-start;
  }

}


@media (max-width:440px) {

  .app-layout .cards-4 {
    grid-template-columns:
      1fr;
  }

  .app-layout .ring-row {
    justify-content:
      flex-start;

    overflow-x:
      auto;
  }

  .app-layout .ring {
    flex:
      0 0 94px;

    width:
      94px;

    height:
      94px;
  }

}



/* ============================================================
   HENOK_UI_OWNER_WORKSPACE_STYLE_V14_3A
   ============================================================ */


/* ------------------------------------------------------------
   OWNER SIDEBAR IDENTITY
   ------------------------------------------------------------ */

@media (min-width:981px) {

  .sidebar-v14
  .nav-group-owner {
    margin-top:
      18px;

    padding:
      13px 7px 7px;

    border:
      1px solid rgba(
        167,
        139,
        250,
        .13
      );

    border-radius:
      14px;

    background:
      rgba(
        110,
        75,
        180,
        .07
      );
  }


  .sidebar-v14
  .nav-group-owner
  .nav-group-label {
    padding-left:
      4px;

    color:
      #b6a4ef;
  }


  .sidebar-v14
  .nav-group-owner
  .side-nav a,
  .sidebar-v14
  .nav-group-owner
  a {
    color:
      #b9b1d2;
  }


  .sidebar-v14
  .nav-group-owner
  a:hover {
    color:
      #fff;

    background:
      rgba(
        107,
        76,
        170,
        .25
      );

    border-color:
      rgba(
        167,
        139,
        250,
        .12
      );
  }


  .sidebar-v14
  .nav-group-owner
  a.active {
    color:
      #fff;

    background:
      linear-gradient(
        90deg,
        rgba(103, 70, 171, .62),
        rgba(56, 43, 105, .55)
      );

    border-color:
      rgba(
        167,
        139,
        250,
        .18
      );

    box-shadow:
      inset 3px 0 #a78bfa;
  }

}


/* ------------------------------------------------------------
   ADMIN GROUP
   ------------------------------------------------------------ */

@media (min-width:981px) {

  .sidebar-v14
  .nav-group-administration
  .nav-group-label {
    color:
      #78a6d8;
  }

}


/* ------------------------------------------------------------
   WORKSPACE BAR
   ------------------------------------------------------------ */

.app-layout
.workspace-nav {
  display:
    grid;

  grid-template-columns:
    minmax(190px, auto)
    minmax(0, 1fr);

  gap:
    22px;

  align-items:
    center;

  margin-bottom:
    22px;

  padding:
    14px 16px;

  background:
    rgba(
      255,
      255,
      255,
      .88
    );

  border:
    1px solid
      var(--panel-line);

  border-radius:
    16px;

  box-shadow:
    var(--panel-shadow-xs);

  backdrop-filter:
    blur(10px);
}


.app-layout
.workspace-nav-owner {
  border-color:
    #e5def9;

  background:
    linear-gradient(
      115deg,
      #ffffff 0%,
      #ffffff 65%,
      #faf8ff 100%
    );
}


.app-layout
.workspace-nav-meta {
  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.app-layout
.workspace-nav-meta > span {
  color:
    var(--panel-primary);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    1.4px;
}


.app-layout
.workspace-nav-owner
.workspace-nav-meta > span {
  color:
    #7657c8;
}


.app-layout
.workspace-nav-meta > strong {
  overflow:
    hidden;

  color:
    var(--panel-text);

  font-size:
    13px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.app-layout
.workspace-nav-meta > small {
  overflow:
    hidden;

  color:
    var(--panel-muted);

  font-size:
    9px;

  line-height:
    1.4;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.app-layout
.workspace-nav-links {
  display:
    flex;

  justify-content:
    flex-end;

  gap:
    6px;

  min-width:
    0;

  overflow-x:
    auto;

  scrollbar-width:
    none;
}


.app-layout
.workspace-nav-links::-webkit-scrollbar {
  display:
    none;
}


.app-layout
.workspace-nav-links a {
  display:
    flex;

  flex:
    0 0 auto;

  align-items:
    center;

  gap:
    6px;

  min-height:
    34px;

  padding:
    7px 10px;

  color:
    #667085;

  background:
    #fff;

  border:
    1px solid
      var(--panel-line);

  border-radius:
    9px;

  font-size:
    9px;

  font-weight:
    700;

  white-space:
    nowrap;

  transition:
    color .14s ease,
    border-color .14s ease,
    background .14s ease,
    transform .14s ease;
}


.app-layout
.workspace-nav-links a:hover {
  color:
    var(--panel-primary);

  border-color:
    #bfd3f4;

  background:
    #f8fbff;

  transform:
    translateY(-1px);
}


.app-layout
.workspace-nav-links a.active {
  color:
    #fff;

  background:
    var(--panel-primary);

  border-color:
    var(--panel-primary);
}


.app-layout
.workspace-nav-owner
.workspace-nav-links
a.active {
  background:
    #7051bd;

  border-color:
    #7051bd;
}


.app-layout
.workspace-nav-links
.icon {
  width:
    15px;

  height:
    15px;
}


/* ------------------------------------------------------------
   OWNER PAGE VISUAL CUES
   ------------------------------------------------------------ */

.app-layout
.workspace-nav-owner
+ .panel-head h1,

.app-layout
.workspace-nav-owner
+ .page-title h1 {
  position:
    relative;
}


.app-layout
.workspace-nav-owner
+ .panel-head h1::after,

.app-layout
.workspace-nav-owner
+ .page-title h1::after {
  content:
    "OWNER";

  display:
    inline-flex;

  margin-left:
    10px;

  padding:
    4px 6px;

  vertical-align:
    middle;

  color:
    #7657c8;

  background:
    #f2edff;

  border:
    1px solid #e2d8ff;

  border-radius:
    999px;

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    1px;
}


/* ------------------------------------------------------------
   TABLE/CONTROL REFINEMENTS FOR MANAGEMENT PAGES
   ------------------------------------------------------------ */

.app-layout
.workspace-nav
~ .table-card {
  margin-top:
    14px;
}


.app-layout
.workspace-nav-owner
~ .danger-zone {
  position:
    relative;
}


.app-layout
.workspace-nav-owner
~ .danger-zone::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    20px;

  right:
    20px;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #f97066,
      transparent
    );

  opacity:
    .5;
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (
  min-width:761px
) and (
  max-width:1050px
) {

  .app-layout
  .workspace-nav {
    grid-template-columns:
      1fr;

    gap:
      10px;
  }


  .app-layout
  .workspace-nav-links {
    justify-content:
      flex-start;
  }


  .app-layout
  .workspace-nav-meta
  > small {
    white-space:
      normal;
  }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width:760px) {

  .app-layout
  .workspace-nav {
    display:
      block;

    margin:
      0 0 17px;

    padding:
      13px;

    border-radius:
      14px;
  }


  .app-layout
  .workspace-nav-meta {
    margin-bottom:
      10px;
  }


  .app-layout
  .workspace-nav-meta
  > small {
    white-space:
      normal;
  }


  .app-layout
  .workspace-nav-links {
    justify-content:
      flex-start;

    margin:
      0 -4px;

    padding:
      2px 4px 4px;
  }


  .app-layout
  .workspace-nav-links a {
    min-height:
      36px;

    padding:
      8px 10px;
  }

}



/* ============================================================
   HENOK_UI_OWNER_PAGES_STYLE_V14_3B
   ============================================================ */


/* ------------------------------------------------------------
   COMMON OWNER PAGE
   ------------------------------------------------------------ */

.app-layout
.owner-page {
  --owner-accent:
    #7657c8;

  --owner-accent-dark:
    #6042ad;

  --owner-soft:
    #f7f4ff;

  --owner-line:
    #e4dcf8;
}


.app-layout
.owner-page
.panel-head,

.app-layout
.owner-page
.page-title {
  position:
    relative;

  padding-bottom:
    18px;

  border-bottom:
    1px solid
      var(--panel-line);
}


.app-layout
.owner-page
.panel-head::before,

.app-layout
.owner-page
.page-title::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    -1px;

  width:
    54px;

  height:
    2px;

  border-radius:
    99px;

  background:
    var(--owner-accent);
}


/* ------------------------------------------------------------
   OWNER CARDS
   ------------------------------------------------------------ */

.app-layout
.owner-page
.panel-card {
  border-color:
    #e2e7f0;
}


.app-layout
.owner-page
.panel-card
.card-title {
  padding-bottom:
    13px;

  border-bottom:
    1px solid
      #eef1f6;
}


.app-layout
.owner-page
.panel-card
.card-title
.icon {
  color:
    var(--owner-accent);
}


/* ------------------------------------------------------------
   USERS
   ------------------------------------------------------------ */

.app-layout
.owner-page-users
.owner-users-table {
  margin-top:
    18px;

  border-color:
    #dfe4ed;

  box-shadow:
    0 5px 22px
      rgba(
        16,
        24,
        40,
        .04
      );
}


.app-layout
.owner-page-users
.owner-users-table
th {
  padding-top:
    13px;

  padding-bottom:
    13px;

  color:
    #667085;

  background:
    #f7f8fb;
}


.app-layout
.owner-page-users
.owner-users-table
td {
  padding-top:
    14px;

  padding-bottom:
    14px;
}


.app-layout
.owner-page-users
.owner-users-table
tbody tr:hover {
  background:
    #fafaff;
}


.app-layout
.owner-page-users
.user-cell {
  min-width:
    170px;
}


.app-layout
.owner-page-users
.user-cell
.mini-avatar {
  box-shadow:
    0 3px 10px
      rgba(
        37,
        99,
        235,
        .14
      );
}


.app-layout
.owner-page-users
.role-select {
  min-height:
    35px;

  padding:
    7px 28px 7px 9px;

  color:
    #344054;

  background-color:
    #fff;

  border:
    1px solid
      #d7deea;

  border-radius:
    9px;

  font-size:
    10px;

  font-weight:
    700;
}


/* ------------------------------------------------------------
   SYSTEM / VPS
   ------------------------------------------------------------ */

.app-layout
.owner-page-system
.panel-grid.two {
  align-items:
    start;
}


.app-layout
.owner-page-system
.service-list.big {
  border-color:
    #e2e7f0;

  background:
    #fff;
}


.app-layout
.owner-page-system
.service-list.big
> div {
  min-height:
    49px;

  align-items:
    center;

  padding:
    13px 15px;
}


.app-layout
.owner-page-system
.action-toolbar {
  display:
    flex;

  gap:
    8px;

  padding:
    4px 0;

  flex-wrap:
    wrap;
}


.app-layout
.owner-page-system
.action-output {
  min-height:
    46px;

  margin-top:
    13px;

  padding:
    11px 13px;

  color:
    #596579;

  background:
    #f7f9fc;

  border:
    1px dashed
      #d9e1ec;

  border-radius:
    10px;

  line-height:
    1.55;
}


/* ------------------------------------------------------------
   OWNER TERMINAL
   ------------------------------------------------------------ */

.app-layout
.owner-page-system
.owner-terminal-card {
  overflow:
    hidden;

  border-color:
    #d8def0;

  background:
    linear-gradient(
      180deg,
      #fff,
      #fbfcff
    );
}


.app-layout
.owner-page-system
.owner-terminal-card
.console {
  border-color:
    #243651;

  border-radius:
    13px;

  box-shadow:
    0 8px 24px
      rgba(
        7,
        17,
        31,
        .13
      );
}


.app-layout
.owner-page-system
.owner-terminal-card
.console-output {
  min-height:
    350px;

  color:
    #c1d1e4;

  background:
    #07111f;

  font-size:
    11px;

  line-height:
    1.65;
}


.app-layout
.owner-page-system
.owner-terminal-card
.console-input {
  min-height:
    45px;

  background:
    #0b1728;
}


.app-layout
.owner-page-system
.owner-terminal-card
.console-input span {
  color:
    #7dd3fc;
}


.app-layout
.owner-page-system
.owner-terminal-card
.console-input button {
  min-width:
    84px;

  background:
    var(--owner-accent);

  transition:
    background .14s ease;
}


.app-layout
.owner-page-system
.owner-terminal-card
.console-input button:hover {
  background:
    var(--owner-accent-dark);
}


/* ------------------------------------------------------------
   MINECRAFT ACCESS
   ------------------------------------------------------------ */

.app-layout
.owner-page-access
.panel-card {
  position:
    relative;
}


.app-layout
.owner-page-access
.table-card {
  margin-top:
    16px;
}


.app-layout
.owner-page-access
table td {
  vertical-align:
    middle;
}


.app-layout
.owner-page-access
.btn {
  white-space:
    nowrap;
}


.app-layout
.owner-page-access
.empty-state {
  padding:
    34px 20px;

  background:
    #fafbfe;

  border-color:
    #dbe2ee;
}


/* ------------------------------------------------------------
   HOSTING OWNER
   ------------------------------------------------------------ */

.app-layout
.owner-page-hosting
.hosting-owner-servers {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    13px;
}


.app-layout
.owner-page-hosting
.owner-hosting-card {
  padding:
    17px;

  border:
    1px solid
      var(--panel-line);

  border-radius:
    15px;

  background:
    #fff;

  box-shadow:
    var(--panel-shadow-xs);

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}


.app-layout
.owner-page-hosting
.owner-hosting-card:hover {
  transform:
    translateY(-2px);

  border-color:
    #d1d9e7;

  box-shadow:
    var(--panel-shadow-md);
}


.app-layout
.owner-page-hosting
.hosting-owner-title {
  padding-bottom:
    11px;

  border-bottom:
    1px solid
      #eef1f5;
}


.app-layout
.owner-page-hosting
.hosting-owner-title strong {
  color:
    var(--panel-text);

  font-size:
    13px;

  font-weight:
    800;
}


.app-layout
.owner-page-hosting
.hosting-owner-actions {
  display:
    flex;

  gap:
    7px;

  flex-wrap:
    wrap;
}


/* ------------------------------------------------------------
   CRITICAL ACTIONS
   ------------------------------------------------------------ */

.app-layout
.owner-page
.owner-critical-control {
  position:
    relative;
}


.app-layout
.owner-page
.danger-zone {
  overflow:
    hidden;

  border-color:
    #fecdca;

  background:
    linear-gradient(
      180deg,
      #fff,
      #fffbfa
    );
}


.app-layout
.owner-page
.danger-zone::after {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    3px;

  height:
    100%;

  background:
    #f04438;
}


/* ------------------------------------------------------------
   WORKSPACE NAV STICKINESS
   ------------------------------------------------------------ */

@media (min-width:981px) {

  .app-layout
  .owner-page
  > .workspace-nav {
    position:
      sticky;

    top:
      86px;

    z-index:
      18;

    box-shadow:
      0 6px 22px
      rgba(
        16,
        24,
        40,
        .055
      );
  }

}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width:1050px) {

  .app-layout
  .owner-page-hosting
  .hosting-owner-servers {
    grid-template-columns:
      1fr;
  }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width:760px) {

  .app-layout
  .owner-page
  .panel-head,

  .app-layout
  .owner-page
  .page-title {
    padding-bottom:
      14px;
  }


  .app-layout
  .owner-page
  .table-card {
    margin-left:
      -2px;

    margin-right:
      -2px;
  }


  .app-layout
  .owner-page-system
  .action-toolbar {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .app-layout
  .owner-page-system
  .action-toolbar
  .btn {
    width:
      100%;
  }


  .app-layout
  .owner-page-system
  .owner-terminal-card
  .console-output {
    min-height:
      290px;

    height:
      42vh;
  }


  .app-layout
  .owner-page-hosting
  .hosting-owner-actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .app-layout
  .owner-page-hosting
  .hosting-owner-actions
  .btn {
    width:
      100%;
  }

}


@media (max-width:440px) {

  .app-layout
  .owner-page-system
  .action-toolbar {
    grid-template-columns:
      1fr;
  }

}



/* ============================================================
   HENOK_UI_MINECRAFT_WORKSPACE_STYLE_V14_4A
   ============================================================ */


.app-layout
.minecraft-page {
  --mc-accent:
    #238636;

  --mc-accent-hover:
    #1b6f2c;

  --mc-accent-soft:
    #eef9f0;

  --mc-accent-line:
    #d3ead7;

  scroll-behavior:
    smooth;
}


/* ------------------------------------------------------------
   WORKSPACE NAV
   ------------------------------------------------------------ */

.app-layout
.minecraft-workspace-nav {
  display:
    grid;

  grid-template-columns:
    minmax(190px, auto)
    minmax(0, 1fr);

  align-items:
    center;

  gap:
    20px;

  margin-bottom:
    22px;

  padding:
    14px 16px;

  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.96),
      rgba(247,252,248,.96)
    );

  border:
    1px solid
      var(--mc-accent-line);

  border-radius:
    16px;

  box-shadow:
    0 5px 20px
      rgba(
        16,
        24,
        40,
        .045
      );

  backdrop-filter:
    blur(10px);
}


.app-layout
.minecraft-workspace-meta {
  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.app-layout
.minecraft-workspace-meta
> span {
  color:
    var(--mc-accent);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    1.4px;
}


.app-layout
.minecraft-workspace-meta
> strong {
  color:
    var(--panel-text);

  font-size:
    13px;

  font-weight:
    800;
}


.app-layout
.minecraft-workspace-meta
> small {
  overflow:
    hidden;

  color:
    var(--panel-muted);

  font-size:
    9px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.app-layout
.minecraft-workspace-links {
  display:
    flex;

  justify-content:
    flex-end;

  gap:
    6px;

  min-width:
    0;

  overflow-x:
    auto;

  padding:
    2px;

  scrollbar-width:
    none;
}


.app-layout
.minecraft-workspace-links::-webkit-scrollbar {
  display:
    none;
}


.app-layout
.minecraft-workspace-links
a {
  display:
    inline-flex;

  flex:
    0 0 auto;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    34px;

  padding:
    7px 11px;

  color:
    #5f6b7c;

  background:
    #fff;

  border:
    1px solid
      var(--panel-line);

  border-radius:
    9px;

  font-size:
    9px;

  font-weight:
    750;

  white-space:
    nowrap;

  transition:
    color .14s ease,
    background .14s ease,
    border-color .14s ease,
    transform .14s ease;
}


.app-layout
.minecraft-workspace-links
a:hover {
  color:
    var(--mc-accent);

  background:
    #f8fcf9;

  border-color:
    #bedfc5;

  transform:
    translateY(-1px);
}


.app-layout
.minecraft-workspace-links
a.active {
  color:
    #fff;

  background:
    var(--mc-accent);

  border-color:
    var(--mc-accent);
}


/* ------------------------------------------------------------
   SECTIONS
   ------------------------------------------------------------ */

.app-layout
.minecraft-section {
  scroll-margin-top:
    155px;
}


.app-layout
.minecraft-page
.minecraft-section {
  position:
    relative;
}


.app-layout
.minecraft-page
.minecraft-section
.card-title {
  border-bottom:
    1px solid
      #eef2f5;

  padding-bottom:
    13px;
}


.app-layout
.minecraft-page
.minecraft-section
.card-title
.icon {
  color:
    var(--mc-accent);
}


/* ------------------------------------------------------------
   SERVER SUMMARY
   ------------------------------------------------------------ */

.app-layout
.minecraft-page
.minecraft-section-server {
  overflow:
    hidden;

  border-color:
    var(--mc-accent-line);

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fbfefb
    );
}


.app-layout
.minecraft-page
.minecraft-section-server
.minecraft-scene {
  border-color:
    #d6eadb;

  background:
    linear-gradient(
      135deg,
      #f1faf3,
      #fbfefc
    );
}


.app-layout
.minecraft-page
.minecraft-scene
h3 {
  letter-spacing:
    -.015em;
}


/* ------------------------------------------------------------
   CONSOLE
   ------------------------------------------------------------ */

.app-layout
.minecraft-console-card-v14 {
  overflow:
    hidden;
}


.app-layout
.minecraft-console-v14,
.app-layout
.minecraft-console-card-v14
.console {
  border-color:
    #1f3448;

  background:
    #07121d;

  box-shadow:
    0 10px 28px
      rgba(
        7,
        18,
        29,
        .14
      );
}


.app-layout
.minecraft-console-card-v14
.console-output {
  min-height:
    380px;

  color:
    #c4d6e7;

  background:
    linear-gradient(
      180deg,
      #07121d,
      #091724
    );

  font-size:
    11px;

  line-height:
    1.65;
}


.app-layout
.minecraft-console-card-v14
.console-input {
  min-height:
    46px;

  background:
    #0b1a29;

  border-top:
    1px solid #1c3449;
}


.app-layout
.minecraft-console-card-v14
.console-input
span {
  color:
    #67d98a;
}


.app-layout
.minecraft-console-card-v14
.console-input
button {
  min-width:
    84px;

  background:
    var(--mc-accent);
}


.app-layout
.minecraft-console-card-v14
.console-input
button:hover {
  background:
    var(--mc-accent-hover);
}


/* ------------------------------------------------------------
   FILE MANAGER
   ------------------------------------------------------------ */

.app-layout
.minecraft-files-card-v14 {
  overflow:
    hidden;
}


.app-layout
.minecraft-file-manager-v14 {
  border-radius:
    14px;
}


.app-layout
.minecraft-file-manager-v14
.file-editor {
  border-color:
    #dbe3ed;

  border-radius:
    12px;
}


.app-layout
.minecraft-file-manager-v14
.file-editor-head {
  background:
    #f8fafc;

  border-bottom:
    1px solid
      #e4e9f0;
}


.app-layout
.minecraft-file-manager-v14
textarea {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:
    11px;

  line-height:
    1.6;
}


/* ------------------------------------------------------------
   PROPERTIES
   ------------------------------------------------------------ */

.app-layout
.minecraft-properties-card-v14
.properties-grid {
  gap:
    14px;
}


.app-layout
.minecraft-properties-card-v14
.properties-grid
label {
  gap:
    7px;

  padding:
    12px;

  background:
    #fafbfd;

  border:
    1px solid
      #e8edf4;

  border-radius:
    11px;
}


.app-layout
.minecraft-properties-card-v14
.properties-grid
label > span {
  color:
    #344054;

  font-size:
    10px;

  font-weight:
    750;
}


.app-layout
.minecraft-properties-card-v14
.properties-grid
label small {
  color:
    #98a2b3;
}


.app-layout
.minecraft-properties-card-v14
.properties-actions {
  padding:
    4px 0 0;
}


/* ------------------------------------------------------------
   BACKUPS
   ------------------------------------------------------------ */

.app-layout
.minecraft-page
.minecraft-section-backups
.backup-item {
  padding:
    12px 13px;

  background:
    #fff;

  border:
    1px solid
      #e4e9f1;

  border-radius:
    11px;

  transition:
    border-color .14s ease,
    background .14s ease,
    transform .14s ease;
}


.app-layout
.minecraft-page
.minecraft-section-backups
.backup-item:hover {
  transform:
    translateY(-1px);

  border-color:
    #cad6e5;

  background:
    #fbfcfe;
}


/* ------------------------------------------------------------
   SOFTWARE
   ------------------------------------------------------------ */

.app-layout
.minecraft-page
.minecraft-section-software {
  border-color:
    #dce5ef;
}


.app-layout
.minecraft-page
.minecraft-section-software
select {
  background-color:
    #fff;
}


/* ------------------------------------------------------------
   TOOLS
   ------------------------------------------------------------ */

.app-layout
.minecraft-page
.mc-tools-grid {
  gap:
    12px;
}


.app-layout
.minecraft-page
.mc-tools-grid
> * {
  border-radius:
    12px;
}


/* ------------------------------------------------------------
   CRITICAL MINECRAFT ACTIONS
   ------------------------------------------------------------ */

.app-layout
.minecraft-page
.minecraft-critical-control {
  position:
    relative;
}


.app-layout
.minecraft-page
.danger-zone {
  overflow:
    hidden;
}


.app-layout
.minecraft-page
.danger-zone::after {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    3px;

  height:
    100%;

  background:
    #f04438;
}


/* ------------------------------------------------------------
   STICKY WORKSPACE
   ------------------------------------------------------------ */

@media (min-width:981px) {

  .app-layout
  .minecraft-page
  > .minecraft-workspace-nav {
    position:
      sticky;

    top:
      86px;

    z-index:
      17;
  }

}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width:1050px) {

  .app-layout
  .minecraft-workspace-nav {
    grid-template-columns:
      1fr;

    gap:
      10px;
  }


  .app-layout
  .minecraft-workspace-links {
    justify-content:
      flex-start;
  }


  .app-layout
  .minecraft-workspace-meta
  > small {
    white-space:
      normal;
  }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width:760px) {

  .app-layout
  .minecraft-workspace-nav {
    display:
      block;

    margin-bottom:
      17px;

    padding:
      13px;
  }


  .app-layout
  .minecraft-workspace-meta {
    margin-bottom:
      10px;
  }


  .app-layout
  .minecraft-workspace-meta
  > small {
    white-space:
      normal;
  }


  .app-layout
  .minecraft-workspace-links {
    justify-content:
      flex-start;

    margin:
      0 -4px;

    padding:
      2px 4px 4px;
  }


  .app-layout
  .minecraft-workspace-links
  a {
    min-height:
      36px;

    padding:
      8px 10px;
  }


  .app-layout
  .minecraft-section {
    scroll-margin-top:
      20px;
  }


  .app-layout
  .minecraft-console-card-v14
  .console-output {
    min-height:
      290px;

    height:
      43vh;
  }


  .app-layout
  .minecraft-properties-card-v14
  .properties-grid
  label {
    padding:
      10px;
  }

}



/* ============================================================
   HENOK_UI_HOSTING_WORKSPACE_STYLE_V14_5A
   ============================================================ */


.app-layout
.hosting-page {
  --hosting-accent:
    #2563eb;

  --hosting-accent-hover:
    #1d4ed8;

  --hosting-cyan:
    #0891b2;

  --hosting-soft:
    #f4f8ff;

  --hosting-line:
    #d8e5f7;
}


/* ------------------------------------------------------------
   CLIENT WORKSPACE
   ------------------------------------------------------------ */

.app-layout
.hosting-workspace-nav {
  display:
    grid;

  grid-template-columns:
    minmax(190px, auto)
    minmax(0, 1fr);

  align-items:
    center;

  gap:
    20px;

  margin-bottom:
    22px;

  padding:
    14px 16px;

  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.97),
      rgba(246,250,255,.97)
    );

  border:
    1px solid
      var(--hosting-line);

  border-radius:
    16px;

  box-shadow:
    0 5px 20px
      rgba(16,24,40,.045);

  backdrop-filter:
    blur(10px);
}


.app-layout
.hosting-workspace-meta {
  display:
    grid;

  gap:
    2px;
}


.app-layout
.hosting-workspace-meta
> span {
  color:
    var(--hosting-accent);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    1.4px;
}


.app-layout
.hosting-workspace-meta
> strong {
  color:
    var(--panel-text);

  font-size:
    13px;

  font-weight:
    800;
}


.app-layout
.hosting-workspace-meta
> small {
  color:
    var(--panel-muted);

  font-size:
    9px;
}


.app-layout
.hosting-workspace-links {
  display:
    flex;

  justify-content:
    flex-end;

  gap:
    6px;

  min-width:
    0;

  overflow-x:
    auto;

  padding:
    2px;

  scrollbar-width:
    none;
}


.app-layout
.hosting-workspace-links::-webkit-scrollbar {
  display:
    none;
}


.app-layout
.hosting-workspace-links
a {
  display:
    inline-flex;

  flex:
    0 0 auto;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    34px;

  padding:
    7px 11px;

  color:
    #5f6b7c;

  background:
    #fff;

  border:
    1px solid
      var(--panel-line);

  border-radius:
    9px;

  font-size:
    9px;

  font-weight:
    750;

  white-space:
    nowrap;

  transition:
    .14s ease;
}


.app-layout
.hosting-workspace-links
a:hover {
  color:
    var(--hosting-accent);

  border-color:
    #bfd2f2;

  background:
    #f8fbff;

  transform:
    translateY(-1px);
}


.app-layout
.hosting-workspace-links
a.active {
  color:
    #fff;

  background:
    var(--hosting-accent);

  border-color:
    var(--hosting-accent);
}


.app-layout
.hosting-section {
  scroll-margin-top:
    155px;
}


/* ------------------------------------------------------------
   PLAN CARDS
   ------------------------------------------------------------ */

.app-layout
.hosting-plan-card-v14 {
  position:
    relative;

  overflow:
    hidden;

  border:
    1px solid
      #dce5f1;

  border-radius:
    16px;

  background:
    #fff;

  box-shadow:
    var(--panel-shadow-xs);

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}


.app-layout
.hosting-plan-card-v14::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  right:
    0;

  height:
    3px;

  background:
    linear-gradient(
      90deg,
      var(--hosting-accent),
      #38bdf8
    );

  opacity:
    .78;
}


.app-layout
.hosting-plan-card-v14:hover {
  transform:
    translateY(-3px);

  border-color:
    #bfd1e9;

  box-shadow:
    0 10px 28px
      rgba(37,99,235,.08);
}


/* ------------------------------------------------------------
   SERVER CARDS
   ------------------------------------------------------------ */

.app-layout
.hosting-server-card-v14,
.app-layout
.hosting-owner-card-v14 {
  border-color:
    #dfe5ed;

  box-shadow:
    var(--panel-shadow-xs);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}


.app-layout
.hosting-server-card-v14:hover,
.app-layout
.hosting-owner-card-v14:hover {
  transform:
    translateY(-2px);

  border-color:
    #ccd7e5;

  box-shadow:
    var(--panel-shadow-md);
}


.app-layout
.hosting-card-head,
.app-layout
.hosting-owner-title {
  padding-bottom:
    11px;

  border-bottom:
    1px solid #edf1f5;
}


.app-layout
.hosting-card-head strong,
.app-layout
.hosting-owner-title strong {
  color:
    var(--panel-text);

  font-weight:
    800;
}


/* ------------------------------------------------------------
   ADMIN REQUESTS
   ------------------------------------------------------------ */

.app-layout
.hosting-request-card-v14 {
  border-color:
    #dde4ed;

  background:
    #fff;

  box-shadow:
    var(--panel-shadow-xs);
}


.app-layout
.hosting-request-card-v14:hover {
  border-color:
    #cdd7e4;
}


/* ------------------------------------------------------------
   FILE MANAGER
   ------------------------------------------------------------ */

.app-layout
.hosting-files-v14 {
  gap:
    14px;

  border-radius:
    14px;
}


.app-layout
.hosting-files-v14
.hosting-editor {
  border-color:
    #dce4ed;

  border-radius:
    12px;
}


.app-layout
.hosting-files-v14
.hosting-editor-head {
  background:
    #f8fafc;

  border-bottom:
    1px solid #e5eaf1;
}


.app-layout
.hosting-files-v14
textarea {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:
    11px;

  line-height:
    1.6;
}


/* ------------------------------------------------------------
   PROPERTIES
   ------------------------------------------------------------ */

.app-layout
.hosting-properties-v14 {
  gap:
    13px;
}


.app-layout
.hosting-properties-v14
label {
  padding:
    11px;

  background:
    #fafbfd;

  border:
    1px solid #e8edf4;

  border-radius:
    11px;
}


/* ------------------------------------------------------------
   SOFTWARE
   ------------------------------------------------------------ */

.app-layout
.hosting-software-v14 {
  padding:
    15px;

  background:
    #fafcff;

  border:
    1px solid #e2e9f3;

  border-radius:
    13px;
}


.app-layout
.hosting-software-v14
select {
  background-color:
    #fff;
}


/* ------------------------------------------------------------
   TOOLS
   ------------------------------------------------------------ */

.app-layout
.hosting-tool-v14 {
  padding:
    13px;

  background:
    #fafbfd;

  border:
    1px solid #e5eaf1;

  border-radius:
    12px;
}


/* ------------------------------------------------------------
   ACTIONS
   ------------------------------------------------------------ */

.app-layout
.hosting-admin-actions,
.app-layout
.hosting-owner-actions {
  gap:
    7px;
}


.app-layout
.hosting-critical-control {
  position:
    relative;
}


.app-layout
.hosting-page
.danger-zone {
  overflow:
    hidden;
}


.app-layout
.hosting-page
.danger-zone::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    0;

  bottom:
    0;

  width:
    3px;

  background:
    #f04438;
}


/* ------------------------------------------------------------
   OWNER HOSTING
   ------------------------------------------------------------ */

.app-layout
.hosting-page-owner
.hosting-owner-servers {
  gap:
    13px;
}


.app-layout
.hosting-page-owner
.hosting-owner-card-v14 {
  background:
    linear-gradient(
      180deg,
      #fff,
      #fcfbff
    );
}


/* ------------------------------------------------------------
   STICKY CLIENT WORKSPACE
   ------------------------------------------------------------ */

@media (min-width:981px) {

  .app-layout
  .hosting-page-client
  > .hosting-workspace-nav {
    position:
      sticky;

    top:
      86px;

    z-index:
      17;
  }

}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width:1050px) {

  .app-layout
  .hosting-workspace-nav {
    grid-template-columns:
      1fr;

    gap:
      10px;
  }


  .app-layout
  .hosting-workspace-links {
    justify-content:
      flex-start;
  }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width:760px) {

  .app-layout
  .hosting-workspace-nav {
    display:
      block;

    margin-bottom:
      17px;

    padding:
      13px;
  }


  .app-layout
  .hosting-workspace-meta {
    margin-bottom:
      10px;
  }


  .app-layout
  .hosting-workspace-links {
    justify-content:
      flex-start;

    margin:
      0 -4px;

    padding:
      2px 4px 4px;
  }


  .app-layout
  .hosting-workspace-links
  a {
    min-height:
      36px;

    padding:
      8px 10px;
  }


  .app-layout
  .hosting-section {
    scroll-margin-top:
      20px;
  }


  .app-layout
  .hosting-server-card-v14,
  .app-layout
  .hosting-owner-card-v14,
  .app-layout
  .hosting-plan-card-v14 {
    border-radius:
      14px;
  }


  .app-layout
  .hosting-admin-actions,
  .app-layout
  .hosting-owner-actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .app-layout
  .hosting-admin-actions
  .btn,

  .app-layout
  .hosting-owner-actions
  .btn {
    width:
      100%;
  }

}



/* ============================================================
   HENOK_UI_FINAL_POLISH_STYLE_V14_6A

   Acabado final visual exclusivo del panel.
   ============================================================ */


/* ------------------------------------------------------------
   PANEL TOPBAR
   ------------------------------------------------------------ */

html.henok-panel-shell
.topbar {
  border-bottom:
    1px solid
      rgba(
        214,
        223,
        236,
        .9
      );

  background:
    rgba(
      255,
      255,
      255,
      .93
    );

  box-shadow:
    0 1px 8px
      rgba(
        16,
        24,
        40,
        .035
      );

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


html.henok-panel-shell
.topbar
a,

html.henok-panel-shell
.topbar
button {
  transition:
    color .14s ease,
    background .14s ease,
    border-color .14s ease,
    opacity .14s ease;
}


/* ------------------------------------------------------------
   SIDEBAR USER
   ------------------------------------------------------------ */

html.henok-panel-shell
.sidebar-user {
  border-bottom-color:
    rgba(
      104,
      143,
      192,
      .18
    );
}


html.henok-panel-shell
.sidebar-user
.avatar {
  flex:
    0 0 42px;

  box-shadow:
    0 6px 18px
      rgba(
        13,
        110,
        253,
        .18
      );
}


html.henok-panel-shell
.sidebar-user
strong {
  overflow:
    hidden;

  max-width:
    156px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


html.henok-panel-shell
.role-chip {
  border:
    1px solid
      rgba(
        255,
        255,
        255,
        .05
      );
}


/* ------------------------------------------------------------
   SIDEBAR FOOTER / STATUS
   ------------------------------------------------------------ */

html.henok-panel-shell
.sidebar-foot {
  color:
    #7891b2;
}


html.henok-panel-shell
.sidebar-foot
.live-dot {
  flex:
    0 0 auto;
}


/* ------------------------------------------------------------
   PAGE SPACING
   ------------------------------------------------------------ */

.app-layout
.panel-main {
  min-height:
    calc(
      100vh - 74px
    );
}


.app-layout
.panel-main
> :first-child {
  margin-top:
    0;
}


/* ------------------------------------------------------------
   LINKS
   ------------------------------------------------------------ */

.app-layout
a:focus-visible,

.app-layout
button:focus-visible,

.app-layout
input:focus-visible,

.app-layout
select:focus-visible,

.app-layout
textarea:focus-visible,

.app-layout
[tabindex]:focus-visible {
  outline:
    2px solid
      rgba(
        37,
        99,
        235,
        .75
      );

  outline-offset:
    2px;
}


/* ------------------------------------------------------------
   BUTTON LOADING / DISABLED
   ------------------------------------------------------------ */

.app-layout
button.is-busy,

.app-layout
.btn.is-busy {
  pointer-events:
    none;

  filter:
    saturate(.72);
}


.app-layout
button:disabled,

.app-layout
.btn:disabled {
  box-shadow:
    none !important;
}


/* ------------------------------------------------------------
   FORM LABELS
   ------------------------------------------------------------ */

.app-layout
label {
  color:
    #344054;
}


.app-layout
label > span:first-child {
  font-weight:
    650;
}


/* ------------------------------------------------------------
   MODALS
   ------------------------------------------------------------ */

html.henok-panel-shell
.modal::backdrop {
  background:
    rgba(
      5,
      14,
      30,
      .66
    );

  backdrop-filter:
    blur(6px);

  -webkit-backdrop-filter:
    blur(6px);
}


html.henok-panel-shell
.modal-card {
  width:
    min(
      520px,
      calc(100vw - 28px)
    );

  max-height:
    min(
      82vh,
      760px
    );

  overflow-y:
    auto;

  padding:
    25px;

  border:
    1px solid
      rgba(
        222,
        229,
        239,
        .95
      );

  border-radius:
    18px;

  box-shadow:
    0 28px 80px
      rgba(
        4,
        15,
        35,
        .24
      );
}


html.henok-panel-shell
.modal-card
h2 {
  color:
    var(--panel-text);

  font-size:
    20px;

  font-weight:
    800;

  letter-spacing:
    -.025em;
}


html.henok-panel-shell
.modal-card
p {
  color:
    var(--panel-muted);
}


html.henok-panel-shell
.modal-close {
  display:
    grid;

  place-items:
    center;

  width:
    34px;

  height:
    34px;

  top:
    10px;

  right:
    10px;

  padding:
    0;

  color:
    #667085;

  border-radius:
    9px;
}


html.henok-panel-shell
.modal-close:hover {
  color:
    #344054;

  background:
    #f2f4f7;
}


html.henok-panel-shell
.modal-actions {
  padding-top:
    9px;

  border-top:
    1px solid
      #eef1f5;
}


/* ------------------------------------------------------------
   TABLE REFINEMENTS
   ------------------------------------------------------------ */

.app-layout
.responsive-table {
  border-radius:
    inherit;

  scrollbar-gutter:
    stable;
}


.app-layout
.table-card
th {
  white-space:
    nowrap;
}


.app-layout
.table-card
td {
  color:
    #475467;
}


.app-layout
.table-card
td:first-child {
  color:
    #344054;
}


/* ------------------------------------------------------------
   BADGES / STATUS
   ------------------------------------------------------------ */

.app-layout
.role-chip,

.app-layout
.count-pill {
  line-height:
    1;
}


.app-layout
.role-owner {
  color:
    #d5c8ff;

  background:
    #38276d;
}


.app-layout
.role-admin {
  color:
    #a9d1ff;

  background:
    #123c73;
}


.app-layout
.role-moderator {
  color:
    #9ae8d0;

  background:
    #16483f;
}


/* ------------------------------------------------------------
   EMPTY STATES
   ------------------------------------------------------------ */

.app-layout
.empty-state
svg {
  opacity:
    .72;
}


.app-layout
.empty-state
h3 {
  margin-top:
    10px;

  font-size:
    14px;

  font-weight:
    800;
}


.app-layout
.empty-state
p {
  max-width:
    500px;

  margin-left:
    auto;

  margin-right:
    auto;

  line-height:
    1.55;
}


/* ------------------------------------------------------------
   ACTION OUTPUTS
   ------------------------------------------------------------ */

.app-layout
.action-output {
  overflow-wrap:
    anywhere;

  line-height:
    1.55;
}


/* ------------------------------------------------------------
   CONSOLE SCROLLBARS
   ------------------------------------------------------------ */

.app-layout
.console-output {
  scrollbar-color:
    #31485f
    transparent;
}


.app-layout
.console-output::-webkit-scrollbar-thumb {
  background:
    #31485f;
}


/* ------------------------------------------------------------
   TOOLTIP-LIKE TITLES / TRUNCATION
   ------------------------------------------------------------ */

.app-layout
.card-title
> span,

.app-layout
.panel-head
h1,

.app-layout
.page-title
h1 {
  min-width:
    0;
}


/* ------------------------------------------------------------
   FOOTER ON PANEL
   ------------------------------------------------------------ */

html.henok-panel-shell
.footer {
  color:
    #98a2b3;

  background:
    #fff;

  border-top:
    1px solid
      #e8edf3;
}


/* ------------------------------------------------------------
   DESKTOP POLISH
   ------------------------------------------------------------ */

@media (min-width:981px) {

  html.henok-panel-shell
  .sidebar {
    box-shadow:
      8px 0 30px
      rgba(
        6,
        22,
        47,
        .06
      );
  }


  .app-layout
  .panel-main {
    padding-top:
      38px;
  }

}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (
  min-width:761px
) and (
  max-width:980px
) {

  html.henok-panel-shell
  .sidebar-user
  .avatar {
    width:
      40px;

    height:
      40px;
  }


  .app-layout
  .panel-main {
    padding-left:
      25px;

    padding-right:
      25px;
  }

}


/* ------------------------------------------------------------
   MOBILE TOPBAR
   ------------------------------------------------------------ */

@media (max-width:760px) {

  html.henok-panel-shell
  .topbar {
    min-height:
      64px;
  }


  html.henok-panel-shell
  .topbar {
    padding-left:
      15px;

    padding-right:
      15px;
  }


  .app-layout
  .panel-main {
    min-height:
      calc(
        100vh - 64px
      );

    padding-top:
      20px;
  }


  .app-layout
  .panel-head,

  .app-layout
  .page-title {
    gap:
      12px;
  }


  .app-layout
  .head-actions {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      7px;
  }


  .app-layout
  .head-actions
  .btn {
    width:
      100%;
  }


  html.henok-panel-shell
  .modal-card {
    width:
      calc(
        100vw - 20px
      );

    max-height:
      calc(
        100vh - 30px
      );

    padding:
      20px 17px;

    border-radius:
      16px;
  }


  html.henok-panel-shell
  .modal-actions {
    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      7px;
  }


  html.henok-panel-shell
  .modal-actions
  .btn,

  html.henok-panel-shell
  .modal-actions
  button {
    width:
      100%;
  }


  html.henok-panel-shell
  .footer {
    padding-bottom:
      84px;
  }

}


/* ------------------------------------------------------------
   SMALL MOBILE
   ------------------------------------------------------------ */

@media (max-width:440px) {

  .app-layout
  .head-actions {
    grid-template-columns:
      1fr;
  }


  .app-layout
  .panel-main {
    padding-left:
      12px;

    padding-right:
      12px;
  }


  .app-layout
  .panel-card {
    padding:
      15px;
  }


  .app-layout
  .card-title {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      7px;
  }

}


/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */

@media (
  prefers-reduced-motion:
  reduce
) {

  html.henok-panel-shell
  *,

  html.henok-panel-shell
  *::before,

  html.henok-panel-shell
  *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      .01ms !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;
  }

}



/* ============================================================
   HENOK_UI_MOTION_ICONS_STYLE_V14_7A
   ============================================================ */


/* ------------------------------------------------------------
   ROUTE LOADER
   ------------------------------------------------------------ */

html.henok-panel-shell
.henok-route-progress {
  position:
    fixed;

  z-index:
    9999;

  top:
    0;

  left:
    0;

  width:
    0;

  height:
    3px;

  pointer-events:
    none;

  opacity:
    0;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #4cc9ff,
      #20c77a
    );

  box-shadow:
    0 0 15px
      rgba(
        76,
        201,
        255,
        .55
      );

  transition:
    width .7s
      cubic-bezier(
        .22,
        1,
        .36,
        1
      ),
    opacity .18s ease;
}


html.henok-panel-shell
.henok-route-progress.is-loading {
  width:
    14%;

  opacity:
    1;
}


html.henok-panel-shell
.henok-route-progress.is-loading.is-moving {
  width:
    78%;
}


html.henok-panel-shell
.henok-route-progress.is-finished {
  width:
    100%;

  opacity:
    0;

  transition:
    width .16s ease,
    opacity .22s ease .08s;
}


/* ------------------------------------------------------------
   PAGE ENTRANCE
   ------------------------------------------------------------ */

html.henok-motion-enabled
.app-layout
.panel-main {
  opacity:
    0;

  transform:
    translateY(8px);

  filter:
    blur(1.5px);
}


html.henok-motion-enabled.henok-page-entered
.app-layout
.panel-main {
  opacity:
    1;

  transform:
    translateY(0);

  filter:
    blur(0);

  transition:
    opacity .32s
      cubic-bezier(
        .22,
        1,
        .36,
        1
      ),
    transform .36s
      cubic-bezier(
        .22,
        1,
        .36,
        1
      ),
    filter .25s ease;
}


/* ------------------------------------------------------------
   PAGE EXIT
   ------------------------------------------------------------ */

html.henok-page-leaving
.app-layout
.panel-main {
  opacity:
    .32 !important;

  transform:
    translateY(4px)
    scale(.998) !important;

  filter:
    blur(1px) !important;

  transition:
    opacity .14s ease,
    transform .14s ease,
    filter .14s ease !important;

  pointer-events:
    none;
}


html.henok-page-leaving
.sidebar {
  opacity:
    .92;

  transition:
    opacity .14s ease;
}


/* ------------------------------------------------------------
   SCROLL REVEAL
   ------------------------------------------------------------ */

html.henok-motion-enabled
.henok-reveal {
  opacity:
    0;

  transform:
    translateY(14px)
    scale(.996);

  transition:
    opacity .42s
      cubic-bezier(
        .22,
        1,
        .36,
        1
      )
      var(
        --henok-reveal-delay,
        0ms
      ),

    transform .46s
      cubic-bezier(
        .22,
        1,
        .36,
        1
      )
      var(
        --henok-reveal-delay,
        0ms
      );
}


html.henok-motion-enabled
.henok-reveal.is-visible {
  opacity:
    1;

  transform:
    none;
}


/* ------------------------------------------------------------
   CARD MICRO INTERACTIONS
   ------------------------------------------------------------ */

.app-layout
.panel-card,

.app-layout
.metric-card,

.app-layout
.quick-grid a,

.app-layout
.hosting-server-card,

.app-layout
.hosting-plan-card {
  will-change:
    transform;
}


.app-layout
.panel-card:hover {
  transform:
    translateY(-1px);
}


.app-layout
.metric-card:hover,

.app-layout
.quick-grid a:hover {
  transform:
    translateY(-3px);
}


/* ------------------------------------------------------------
   HENOK VECTOR ICON SYSTEM
   ------------------------------------------------------------ */

.app-layout
.henok-ui-icon {
  display:
    inline-grid;

  flex:
    0 0 auto;

  width:
    1.15em;

  height:
    1.15em;

  margin:
    0 .22em 0 .04em;

  vertical-align:
    -.18em;

  place-items:
    center;

  color:
    currentColor;
}


.app-layout
.henok-ui-icon
svg {
  display:
    block;

  width:
    100%;

  height:
    100%;
}


.app-layout
.minecraft-page
.henok-ui-icon {
  color:
    #238636;
}


.app-layout
.minecraft-page
.btn-primary
.henok-ui-icon,

.app-layout
.minecraft-page
.btn.primary
.henok-ui-icon,

.app-layout
.minecraft-workspace-links
a.active
.henok-ui-icon {
  color:
    currentColor;
}


.app-layout
.side-nav
a[href*="minecraft"]
.henok-ui-icon {
  color:
    #67d98a;
}


.app-layout
.minecraft-page
.card-title
.henok-ui-icon {
  width:
    18px;

  height:
    18px;

  margin-right:
    4px;
}


/* Icon container aesthetic matches Henok controls */
.app-layout
.minecraft-page
.quick-grid a
.henok-ui-icon {
  color:
    #238636;
}


/* ------------------------------------------------------------
   ACTIVE NAV MICRO MOTION
   ------------------------------------------------------------ */

@media (min-width:761px) {

  .sidebar-v14
  .side-nav
  a {
    transition:
      color .16s ease,
      background .16s ease,
      border-color .16s ease,
      box-shadow .16s ease,
      transform .16s
        cubic-bezier(
          .22,
          1,
          .36,
          1
        );
  }


  .sidebar-v14
  .side-nav
  a:hover {
    transform:
      translateX(3px);
  }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width:760px) {

  html.henok-motion-enabled
  .henok-reveal {
    transform:
      translateY(9px);
  }


  html.henok-page-leaving
  .app-layout
  .panel-main {
    transform:
      translateY(2px) !important;
  }

}


/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */

@media (
  prefers-reduced-motion:
  reduce
) {

  html.henok-panel-shell
  .henok-route-progress {
    display:
      none !important;
  }


  html.henok-motion-enabled
  .app-layout
  .panel-main,

  html.henok-motion-enabled
  .henok-reveal,

  html.henok-motion-enabled
  .henok-reveal.is-visible,

  html.henok-page-leaving
  .app-layout
  .panel-main {
    opacity:
      1 !important;

    transform:
      none !important;

    filter:
      none !important;

    transition:
      none !important;
  }

}



/* ============================================================
   HENOK_UI_SOURCE_ICONS_STYLE_V14_7B
   ============================================================ */


/* Iconos usados dentro de contenedores que antes alojaban emoji. */

.app-layout
.mc-tool-modal-icon
.henok-ui-icon,

.app-layout
.feature-icon
.henok-ui-icon,

.app-layout
.mc-link-icon
.henok-ui-icon {
  width:
    24px;

  height:
    24px;

  margin:
    0;

  vertical-align:
    middle;
}


.app-layout
.mc-tool-modal-icon
.henok-ui-icon {
  color:
    #2563eb;
}


.app-layout
.feature-icon.danger
.henok-ui-icon {
  color:
    #f04438;
}


.app-layout
.mc-link-icon {
  display:
    inline-grid;

  place-items:
    center;
}


.app-layout
.mc-link-icon
.henok-ui-icon {
  color:
    #2563eb;
}


/* File managers */

.app-layout
.file-entry
.henok-ui-icon,

.app-layout
.hosting-file-row
.henok-ui-icon {
  width:
    17px;

  height:
    17px;

  margin:
    0;

  color:
    #667085;
}


.app-layout
.file-entry:hover
.henok-ui-icon,

.app-layout
.hosting-file-row:hover
.henok-ui-icon {
  color:
    #2563eb;
}


/* Locked hosting files */

.app-layout
.hosting-file-row
.henok-ui-icon-lock {
  color:
    #f79009;
}


/* Folders */

.app-layout
.file-entry
.henok-ui-icon-folder,

.app-layout
.hosting-file-row
.henok-ui-icon-folder {
  color:
    #3b82f6;
}



/* ============================================================
   HENOK_UI_IPHONE_MOTION_STYLE_V14_7C
   ============================================================ */


/* Quick Tools */

.app-layout
.henok-tool-icon-host {
  display:
    grid;

  place-items:
    center;

  width:
    48px;

  height:
    48px;

  margin:
    0 auto 8px;

  color:
    #2563eb;

  background:
    linear-gradient(
      145deg,
      #f5f9ff,
      #edf5ff
    );

  border:
    1px solid #d8e6fa;

  border-radius:
    14px;
}


.app-layout
.henok-tool-svg {
  display:
    grid;

  place-items:
    center;

  width:
    27px;

  height:
    27px;
}


.app-layout
.henok-tool-svg
svg {
  display:
    block;

  width:
    100%;

  height:
    100%;
}


.app-layout
.henok-tool-svg-ban,

.app-layout
.henok-tool-svg-kill {
  color:
    #e5484d;
}


.app-layout
.henok-tool-svg-whitelist {
  color:
    #238636;
}


.app-layout
.henok-quick-tool-v147c {
  transition:
    transform .22s
      cubic-bezier(.22,1,.36,1),
    box-shadow .22s ease,
    border-color .18s ease;
}


.app-layout
.henok-quick-tool-v147c:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 10px 24px
      rgba(16,24,40,.07);
}


/* Título Herramientas rápidas */

.app-layout
.henok-tools-title-icon {
  display:
    inline-grid;

  place-items:
    center;

  width:
    28px;

  height:
    28px;

  margin-right:
    7px;

  vertical-align:
    middle;

  color:
    #2563eb;
}


.app-layout
.henok-tools-title-icon
.henok-tool-svg {
  width:
    24px;

  height:
    24px;
}


/* Scroll reveal más perceptible */

html.henok-panel-shell
.henok-v147c-reveal {
  opacity:
    0;

  transform:
    translate3d(
      0,
      22px,
      0
    )
    scale(.985);

  transition:
    opacity .48s
      cubic-bezier(.22,1,.36,1)
      var(--v147c-delay,0ms),

    transform .55s
      cubic-bezier(.22,1,.36,1)
      var(--v147c-delay,0ms);
}


html.henok-panel-shell
.henok-v147c-reveal.henok-v147c-visible {
  opacity:
    1;

  transform:
    translate3d(
      0,
      0,
      0
    )
    scale(1);
}


/* Transición breve entre páginas */

html.henok-panel-shell
.henok-transition-screen-v147c {
  position:
    fixed;

  z-index:
    9998;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  pointer-events:
    none;

  opacity:
    0;

  background:
    rgba(
      246,
      249,
      254,
      .76
    );

  -webkit-backdrop-filter:
    blur(6px);

  backdrop-filter:
    blur(6px);

  transition:
    opacity .14s ease;
}


html.henok-panel-shell
.henok-transition-screen-v147c.is-visible {
  opacity:
    1;
}


html.henok-panel-shell
.henok-transition-brand-v147c {
  display:
    grid;

  place-items:
    center;

  gap:
    8px;

  opacity:
    0;

  transform:
    translateY(7px)
    scale(.94);

  transition:
    opacity .15s ease,
    transform .2s
      cubic-bezier(.22,1,.36,1);
}


html.henok-panel-shell
.henok-transition-screen-v147c.is-visible
.henok-transition-brand-v147c {
  opacity:
    1;

  transform:
    none;
}


html.henok-panel-shell
.henok-transition-logo-v147c {
  display:
    grid;

  place-items:
    center;

  width:
    52px;

  height:
    52px;

  color:
    #fff;

  background:
    linear-gradient(
      145deg,
      #07336f,
      #0d6efd
    );

  border-radius:
    16px;

  box-shadow:
    0 14px 36px
      rgba(
        13,
        110,
        253,
        .24
      );

  animation:
    henokV147cPulse
    .66s ease-in-out
    infinite alternate;
}


html.henok-panel-shell
.henok-transition-logo-v147c
svg {
  width:
    29px;

  height:
    29px;
}


html.henok-panel-shell
.henok-transition-brand-v147c
strong {
  color:
    #0a1734;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    2.8px;
}


@keyframes henokV147cPulse {

  from {
    transform:
      translateY(0)
      scale(1);
  }

  to {
    transform:
      translateY(-3px)
      scale(1.045);
  }

}


/* iPhone */

@media (max-width:760px) {

  .app-layout
  .henok-tool-icon-host {
    width:
      44px;

    height:
      44px;

    border-radius:
      13px;
  }


  .app-layout
  .henok-tool-svg {
    width:
      25px;

    height:
      25px;
  }


  html.henok-panel-shell
  .henok-v147c-reveal {
    transform:
      translate3d(
        0,
        18px,
        0
      )
      scale(.988);
  }

}


/* Accesibilidad */

@media (
  prefers-reduced-motion:
  reduce
) {

  html.henok-panel-shell
  .henok-v147c-reveal,

  html.henok-panel-shell
  .henok-v147c-reveal.henok-v147c-visible {
    opacity:
      1 !important;

    transform:
      none !important;

    transition:
      none !important;
  }


  html.henok-panel-shell
  .henok-transition-screen-v147c {
    display:
      none !important;
  }


  html.henok-panel-shell
  .henok-transition-logo-v147c {
    animation:
      none !important;
  }

}



/* ============================================================
   HENOK_UI_QUICK_TOOLS_CLEANUP_STYLE_V14_8A1
   ============================================================ */

.app-layout
.henok-quick-tool-clean-v148a1 {
  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    5px !important;
}


.app-layout
.henok-quick-tool-clean-v148a1
.henok-tool-icon-host {
  margin:
    0 0 4px !important;
}


.app-layout
.henok-quick-tool-clean-v148a1
h3,

.app-layout
.henok-quick-tool-clean-v148a1
h4,

.app-layout
.henok-quick-tool-clean-v148a1
p,

.app-layout
.henok-quick-tool-clean-v148a1
strong {
  margin-top:
    0 !important;

  margin-bottom:
    0 !important;
}


.app-layout
.henok-quick-tool-clean-v148a1
> div:empty,

.app-layout
.henok-quick-tool-clean-v148a1
> span:empty {
  display:
    none !important;
}



/* ============================================================
   HENOK_UI_MOBILE_NAV_STYLE_V14_8A2
   ============================================================ */

.henok-mobile-nav-v148a2,
.henok-mobile-sheet-v148a2 {
  display:
    none;
}


@media (max-width:760px) {

  .sidebar-v14
  .side-nav {
    display:
      none !important;
  }


  .sidebar.sidebar-v14 {
    height:
      72px;

    padding:
      6px 8px;
  }


  .henok-mobile-nav-v148a2 {
    display:
      grid;

    grid-template-columns:
      repeat(5, minmax(0,1fr));

    gap:
      4px;

    height:
      60px;
  }


  .henok-mobile-tab-v148a2 {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    gap:
      3px;

    min-width:
      0;

    padding:
      5px 2px;

    color:
      #9fb2ce;

    background:
      transparent;

    border:
      1px solid transparent;

    border-radius:
      12px;

    font-family:
      inherit;
  }


  .henok-mobile-tab-v148a2
  > span {
    display:
      grid;

    place-items:
      center;

    width:
      21px;

    height:
      21px;
  }


  .henok-mobile-tab-v148a2
  svg {
    width:
      21px;

    height:
      21px;
  }


  .henok-mobile-tab-v148a2
  b {
    overflow:
      hidden;

    width:
      100%;

    color:
      inherit;

    font-size:
      8px;

    font-weight:
      750;

    text-align:
      center;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  .henok-mobile-tab-v148a2.active {
    color:
      #fff;

    background:
      #12396c;

    border-color:
      #24568e;

    box-shadow:
      inset 0 -3px #4cc9ff;
  }


  .henok-mobile-sheet-v148a2 {
    position:
      fixed;

    z-index:
      75;

    inset:
      0;

    display:
      block;

    visibility:
      hidden;

    pointer-events:
      none;
  }


  .henok-mobile-sheet-v148a2.open {
    visibility:
      visible;

    pointer-events:
      auto;
  }


  .henok-mobile-sheet-bg-v148a2 {
    position:
      absolute;

    inset:
      0;

    width:
      100%;

    height:
      100%;

    opacity:
      0;

    background:
      rgba(5,14,30,.5);

    border:
      0;

    backdrop-filter:
      blur(3px);

    transition:
      opacity .18s ease;
  }


  .henok-mobile-sheet-v148a2.open
  .henok-mobile-sheet-bg-v148a2 {
    opacity:
      1;
  }


  .henok-mobile-sheet-panel-v148a2 {
    position:
      absolute;

    left:
      10px;

    right:
      10px;

    bottom:
      82px;

    max-height:
      60vh;

    overflow:
      hidden;

    opacity:
      0;

    background:
      #fff;

    border:
      1px solid #dde6f2;

    border-radius:
      20px;

    box-shadow:
      0 25px 70px
      rgba(4,15,35,.25);

    transform:
      translateY(18px);

    transition:
      opacity .18s ease,
      transform .24s
      cubic-bezier(.22,1,.36,1);
  }


  .henok-mobile-sheet-v148a2.open
  .henok-mobile-sheet-panel-v148a2 {
    opacity:
      1;

    transform:
      none;
  }


  .henok-mobile-sheet-panel-v148a2
  header {
    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    padding:
      15px 16px;

    border-bottom:
      1px solid #edf1f6;
  }


  .henok-mobile-sheet-panel-v148a2
  header strong {
    color:
      #101828;

    font-size:
      17px;
  }


  .henok-mobile-sheet-panel-v148a2
  header button {
    width:
      34px;

    height:
      34px;

    color:
      #667085;

    background:
      #f3f5f8;

    border:
      0;

    border-radius:
      10px;

    font-size:
      22px;
  }


  .henok-mobile-sheet-panel-v148a2
  [data-sheet-links] {
    max-height:
      calc(60vh - 65px);

    overflow-y:
      auto;

    padding:
      10px;
  }


  .henok-mobile-sheet-label-v148a2 {
    padding:
      10px 10px 5px;

    color:
      #98a2b3;

    font-size:
      8px;

    font-weight:
      900;

    letter-spacing:
      1.2px;

    text-transform:
      uppercase;
  }


  .henok-mobile-sheet-panel-v148a2
  [data-sheet-links]
  a {
    display:
      flex;

    align-items:
      center;

    min-height:
      45px;

    padding:
      10px 12px;

    color:
      #344054;

    border-radius:
      11px;

    font-size:
      11px;

    font-weight:
      700;
  }


  .henok-mobile-sheet-panel-v148a2
  [data-sheet-links]
  a.active {
    color:
      #175cd3;

    background:
      #eff6ff;
  }


  .app-layout
  .panel-main {
    padding-bottom:
      98px;
  }

}



/* ============================================================
   HENOK_GLOBAL_TRANSITION_STYLE_V14_8C1B
   ============================================================ */

.henok-global-transition-v148c1b {
  position:
    fixed;

  z-index:
    99999;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  visibility:
    hidden;

  opacity:
    0;

  pointer-events:
    none;

  background:
    rgba(
      246,
      249,
      254,
      .82
    );

  -webkit-backdrop-filter:
    blur(7px);

  backdrop-filter:
    blur(7px);

  transition:
    opacity .16s ease,
    visibility 0s linear .16s;
}


.henok-global-transition-v148c1b.is-visible,
.henok-global-transition-v148c1b.is-entry {
  visibility:
    visible;

  opacity:
    1;

  transition-delay:
    0s;
}


.henok-global-loader-v148c1b {
  display:
    grid;

  place-items:
    center;

  gap:
    4px;

  opacity:
    0;

  transform:
    translateY(8px)
    scale(.94);

  transition:
    opacity .17s ease,
    transform .22s
    cubic-bezier(.22,1,.36,1);
}


.henok-global-transition-v148c1b.is-visible
.henok-global-loader-v148c1b,

.henok-global-transition-v148c1b.is-entry
.henok-global-loader-v148c1b {
  opacity:
    1;

  transform:
    none;
}


.henok-global-cube-v148c1b {
  display:
    grid;

  place-items:
    center;

  width:
    58px;

  height:
    58px;

  margin-bottom:
    5px;

  color:
    #fff;

  background:
    linear-gradient(
      145deg,
      #07336f,
      #0d6efd
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .18
    );

  border-radius:
    18px;

  box-shadow:
    0 15px 42px
    rgba(
      13,
      110,
      253,
      .27
    );

  animation:
    henokGlobalCube148c1b
    .68s ease-in-out
    infinite alternate;
}


.henok-global-cube-v148c1b
svg {
  width:
    32px;

  height:
    32px;
}


.henok-global-loader-v148c1b
strong {
  margin-top:
    3px;

  color:
    #0a1734;

  font-size:
    13px;

  font-weight:
    900;

  letter-spacing:
    3px;
}


.henok-global-loader-v148c1b
small {
  color:
    #3485f6;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    3.4px;
}


@keyframes henokGlobalCube148c1b {

  from {
    transform:
      translateY(0)
      rotate(0deg)
      scale(1);
  }

  to {
    transform:
      translateY(-4px)
      rotate(2deg)
      scale(1.045);
  }

}


@media (max-width:760px) {

  .henok-global-cube-v148c1b {
    width:
      54px;

    height:
      54px;

    border-radius:
      17px;
  }


  .henok-global-cube-v148c1b
  svg {
    width:
      30px;

    height:
      30px;
  }

}


@media (
  prefers-reduced-motion:
  reduce
) {

  .henok-global-transition-v148c1b {
    display:
      none !important;
  }


  .henok-global-cube-v148c1b {
    animation:
      none !important;
  }

}



/* ============================================================
   HENOK_HOME_STYLE_V14_9A
   ============================================================ */

.hn-home-v149a {
  overflow:hidden;
  background:
    radial-gradient(
      circle at 82% 3%,
      rgba(39,126,255,.08),
      transparent 23rem
    ),
    #f8fbff;
}


/* HERO */

.hn-home-hero {
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  gap:68px;
  align-items:center;
  min-height:650px;
  padding:72px 0 66px;
}

.hn-home-copy h1 {
  max-width:700px;
  margin:18px 0 22px;
  font-size:clamp(48px,6vw,74px);
  line-height:.98;
  letter-spacing:-3.6px;
}

.hn-home-copy h1 span {
  display:block;
  color:var(--blue);
}

.hn-home-copy>p {
  max-width:620px;
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
}

.hn-home-benefits {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:27px;
}

.hn-home-benefits>span {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 12px;
  border:1px solid #dce7f6;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  box-shadow:0 7px 20px rgba(22,65,126,.045);
  color:#46617f;
  font-size:10px;
  font-weight:800;
}


/* CONTROL CENTER MOCKUP */

.hn-control-demo {
  position:relative;
  overflow:hidden;
  padding:17px;
  border:1px solid #174982;
  border-radius:27px;
  background:
    radial-gradient(
      circle at 82% 3%,
      rgba(61,169,255,.24),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #06142e,
      #09295a
    );
  box-shadow:
    0 36px 85px rgba(5,27,63,.25),
    inset 0 1px rgba(255,255,255,.04);
  color:#fff;
}

.hn-control-demo:before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background-image:
    linear-gradient(
      rgba(86,151,224,.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(86,151,224,.08) 1px,
      transparent 1px
    );
  background-size:28px 28px;
}

.hn-control-demo>* {
  position:relative;
  z-index:1;
}


/* TOP BAR */

.hn-demo-top {
  display:flex;
  align-items:center;
  min-height:29px;
  gap:9px;
  padding:0 2px 12px;
  border-bottom:1px solid rgba(121,171,229,.18);
}

.hn-demo-dots {
  display:flex;
  gap:5px;
}

.hn-demo-dots i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#4477ad;
}

.hn-demo-dots i:first-child {
  background:#ff6b7d;
}

.hn-demo-dots i:nth-child(2) {
  background:#ffc15a;
}

.hn-demo-dots i:nth-child(3) {
  background:#3ed58d;
}

.hn-demo-top strong {
  margin-left:5px;
  color:#eef7ff;
  font-size:9px;
  letter-spacing:1.5px;
}

.hn-demo-top>span {
  margin-left:auto;
  color:#69bbff;
  font-size:7px;
  font-weight:800;
  letter-spacing:1.4px;
}


/* MINECRAFT MAIN CARD */

.hn-demo-main {
  padding-top:14px;
}

.hn-demo-minecraft {
  display:flex;
  align-items:center;
  gap:20px;
  padding:18px;
  border:1px solid #205083;
  border-radius:17px;
  background:rgba(8,32,71,.78);
}

.hn-demo-cube {
  width:82px;
  flex:0 0 82px;
}

.hn-demo-cube img {
  width:100%;
  filter:drop-shadow(
    0 14px 18px rgba(0,0,0,.28)
  );
  animation:floaty 4s ease-in-out infinite;
}

.hn-demo-minecraft small {
  display:block;
  color:#5fbcff;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.3px;
}

.hn-demo-minecraft h3 {
  margin:5px 0 5px;
  color:#f4f9ff;
  font-size:20px;
  letter-spacing:-.4px;
}

.hn-demo-minecraft p {
  margin:0;
  color:#82a6ce;
  font-size:10px;
  line-height:1.5;
}


/* TOOL GRID */

.hn-demo-tools {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:9px;
}

.hn-demo-tools article {
  min-height:101px;
  padding:14px;
  border:1px solid #1c4778;
  border-radius:14px;
  background:rgba(8,29,65,.76);
}

.hn-demo-tools article>span {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(44,133,239,.13);
  color:#65c6ff;
}

.hn-demo-tools b,
.hn-demo-tools small {
  display:block;
}

.hn-demo-tools b {
  margin-top:9px;
  color:#e8f4ff;
  font-size:11px;
}

.hn-demo-tools small {
  margin-top:2px;
  color:#7094bf;
  font-size:8px;
}


/* DEMO FOOT */

.hn-demo-foot {
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  padding:8px 4px 1px;
  color:#7398c2;
  font-size:8px;
}

.hn-demo-foot span {
  display:flex;
  align-items:center;
  gap:6px;
}

.hn-demo-foot i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(32,199,122,.08);
}

.hn-demo-foot strong {
  margin-left:auto;
  color:#51d99c;
  font-size:8px;
  letter-spacing:1px;
}


/* FEATURE STRIP */

.hn-home-features {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
}

.hn-home-features article {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:17px;
  border:1px solid var(--line);
  border-radius:17px;
  background:#fff;
  box-shadow:0 12px 34px rgba(12,53,110,.055);
}

.hn-feature-icon {
  display:grid;
  place-items:center;
  width:41px;
  height:41px;
  flex:0 0 41px;
  border-radius:12px;
  background:#edf5ff;
  color:var(--blue);
}

.hn-home-features article>div {
  min-width:0;
}

.hn-home-features b,
.hn-home-features small {
  display:block;
}

.hn-home-features b {
  color:var(--ink);
  font-size:12px;
}

.hn-home-features small {
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}



/* ============================================================
   HENOK_HOME_PLANS_STYLE_V14_9A
   ============================================================ */

.hn-home-section {
  padding:100px 0;
}

.hn-section-heading {
  max-width:720px;
  margin-bottom:34px;
}

.hn-section-heading h2 {
  margin:12px 0 14px;
  color:var(--ink);
  font-size:42px;
  line-height:1.08;
  letter-spacing:-1.7px;
}

.hn-section-heading>p {
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.hn-plan-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px;
  align-items:stretch;
}

.hn-plan-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:25px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 15px 42px rgba(14,55,112,.07);
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.hn-plan-card:hover {
  transform:translateY(-4px);
  border-color:#b8d4f7;
  box-shadow:0 22px 50px rgba(14,71,151,.11);
}

.hn-plan-card.featured {
  border-color:#78aff6;
  box-shadow:
    0 20px 55px rgba(13,110,253,.14),
    inset 0 3px #1677f2;
}

.hn-plan-popular {
  position:absolute;
  top:-11px;
  right:18px;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,#1266e8,#1089ff);
  box-shadow:0 8px 20px rgba(13,110,253,.22);
  color:#fff;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
}

.hn-plan-title>small {
  color:#7488a4;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.4px;
}

.hn-plan-title h3 {
  margin:7px 0 18px;
  font-size:27px;
  letter-spacing:-.8px;
}

.hn-plan-price {
  display:flex;
  align-items:flex-end;
  gap:7px;
  min-height:43px;
}

.hn-plan-price strong {
  color:#116fe8;
  font-size:31px;
  line-height:1;
  letter-spacing:-1.3px;
}

.hn-plan-price span {
  padding-bottom:3px;
  color:var(--muted);
  font-size:9px;
}

.hn-plan-resources {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin:23px 0 18px;
}

.hn-plan-resources>div {
  min-width:0;
  padding:12px 7px;
  border:1px solid #e5edf8;
  border-radius:12px;
  background:#f7faff;
  text-align:center;
}

.hn-plan-resources strong,
.hn-plan-resources span {
  display:block;
}

.hn-plan-resources strong {
  color:#203b61;
  font-size:14px;
}

.hn-plan-resources span {
  margin-top:3px;
  overflow-wrap:anywhere;
  color:#8998ac;
  font-size:7px;
  text-transform:uppercase;
}

.hn-plan-includes {
  display:grid;
  gap:9px;
  margin-bottom:19px;
  padding-top:17px;
  border-top:1px solid var(--line);
}

.hn-plan-includes>span {
  display:flex;
  align-items:center;
  gap:8px;
  color:#526780;
  font-size:10px;
  font-weight:700;
}

.hn-plan-includes svg {
  color:#16a164;
}

.hn-plan-software {
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:5px;
  min-height:55px;
  margin-bottom:20px;
}

.hn-plan-software>span {
  padding:5px 7px;
  border-radius:7px;
  background:#edf4ff;
  color:#3168a7;
  font-size:7px;
  font-weight:900;
  letter-spacing:.3px;
  text-transform:uppercase;
}

.hn-plan-card>.btn {
  margin-top:auto;
}



/* ============================================================
   HENOK_HOME_DIGITAL_STYLE_V14_9A
   ============================================================ */

.hn-digital-section {
  position:relative;
  overflow:hidden;
  padding:88px 0;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(51,154,255,.18),
      transparent 28rem
    ),
    linear-gradient(
      145deg,
      #06142e,
      #0a326e
    );
  color:#fff;
}

.hn-digital-section:after {
  content:"";
  position:absolute;
  width:440px;
  height:440px;
  right:-210px;
  bottom:-250px;
  border:1px solid rgba(89,164,247,.16);
  border-radius:50%;
  pointer-events:none;
}

.hn-digital-section>.shell {
  position:relative;
  z-index:1;
}

.hn-digital-section .hn-section-heading h2 {
  color:#fff;
}

.hn-digital-section .hn-section-heading>p {
  color:#9fb8d8;
}


/* DIGITAL SERVICE CARDS */

.hn-service-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.hn-service-card {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:12px;
  align-items:center;
  min-width:0;
  min-height:105px;
  padding:15px;
  border:1px solid rgba(125,180,240,.17);
  border-radius:17px;
  background:rgba(255,255,255,.065);
  backdrop-filter:blur(8px);
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.hn-service-card:hover {
  transform:translateY(-3px);
  border-color:rgba(105,193,255,.36);
  background:rgba(255,255,255,.09);
}

.hn-brand-icon {
  grid-row:1 / 3;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  padding:10px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.15);
}

.hn-brand-icon.wide {
  width:62px;
}

.hn-brand-icon img {
  width:100%;
  height:100%;
  object-fit:contain;
}

.hn-service-card>b {
  overflow:hidden;
  color:#f3f8ff;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hn-service-card>small {
  align-self:start;
  color:#86a7cf;
  font-size:8px;
}

.hn-service-card>span {
  grid-column:1 / -1;
  margin-top:11px;
  padding-top:9px;
  border-top:1px solid rgba(118,170,227,.14);
  color:#5ac9ff;
  font-size:8px;
  font-weight:800;
}

.hn-brand-note {
  max-width:780px;
  margin:22px auto 0;
  color:#7597c1;
  font-size:8px;
  line-height:1.6;
  text-align:center;
}


/* HENOK WEB FEATURE CARDS */

.hn-web-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
}

.hn-web-grid article {
  min-width:0;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 32px rgba(12,53,111,.045);
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.hn-web-grid article:hover {
  transform:translateY(-3px);
  border-color:#bed8f8;
  box-shadow:0 17px 40px rgba(16,76,154,.08);
}

.hn-web-grid article>span {
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  border-radius:12px;
  background:linear-gradient(
    145deg,
    #edf5ff,
    #f8fbff
  );
  box-shadow:inset 0 0 0 1px #dceaff;
  color:var(--blue);
}

.hn-web-grid h3 {
  margin:16px 0 7px;
  color:var(--ink);
  font-size:15px;
  letter-spacing:-.2px;
}

.hn-web-grid p {
  margin:0;
  color:var(--muted);
  font-size:10px;
  line-height:1.65;
}



/* ============================================================
   HENOK_HOME_CTA_STYLE_V14_9A
   ============================================================ */

.hn-how-section {
  position:relative;
  padding:90px 0;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(23,116,235,.08),
      transparent 23rem
    ),
    #f1f6fd;
}

.hn-how-section .hn-section-heading {
  margin-bottom:32px;
}

.hn-steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.hn-steps article {
  display:flex;
  gap:16px;
  min-width:0;
  padding:22px;
  border:1px solid #dce7f5;
  border-radius:18px;
  background:rgba(255,255,255,.86);
  box-shadow:0 12px 34px rgba(14,54,108,.05);
}

.hn-step-number {
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  flex:0 0 43px;
  border-radius:13px;
  background:linear-gradient(
    135deg,
    #0e67e5,
    #1594ff
  );
  box-shadow:0 10px 22px rgba(13,110,253,.19);
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.7px;
}

.hn-steps h3 {
  margin:2px 0 7px;
  color:var(--ink);
  font-size:15px;
}

.hn-steps p {
  margin:0;
  color:var(--muted);
  font-size:10px;
  line-height:1.65;
}


/* FINAL CTA */

.hn-home-cta {
  padding:78px 0;
  border-top:1px solid #e0eafa;
  background:
    radial-gradient(
      circle at 85% 50%,
      rgba(31,129,255,.12),
      transparent 25rem
    ),
    #fff;
}

.hn-home-cta>.shell {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:55px;
}

.hn-home-cta h2 {
  max-width:620px;
  margin:10px 0 10px;
  color:var(--ink);
  font-size:39px;
  line-height:1.08;
  letter-spacing:-1.5px;
}

.hn-home-cta p {
  max-width:570px;
  margin:0;
  color:var(--muted);
  line-height:1.65;
}

.hn-home-cta-actions {
  display:flex;
  flex:0 0 auto;
  gap:9px;
}



/* ============================================================
   HENOK_HOME_MOBILE_V14_9A
   ============================================================ */

@media(max-width:980px) {

  .hn-home-hero {
    grid-template-columns:1fr;
    gap:42px;
    min-height:auto;
    padding:58px 0 62px;
  }

  .hn-home-copy {
    max-width:720px;
  }

  .hn-control-demo {
    width:min(680px,100%);
  }

  .hn-home-features {
    grid-template-columns:1fr 1fr;
  }

  .hn-plan-grid {
    grid-template-columns:1fr;
    max-width:690px;
  }

  .hn-plan-card {
    min-height:auto;
  }

  .hn-service-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hn-web-grid {
    grid-template-columns:1fr 1fr;
  }

  .hn-steps {
    grid-template-columns:1fr;
  }

  .hn-home-cta>.shell {
    align-items:flex-start;
    flex-direction:column;
    gap:28px;
  }

}


@media(max-width:760px) {

  .hn-home-v149a {
    background:
      radial-gradient(
        circle at 80% 0,
        rgba(39,126,255,.07),
        transparent 18rem
      ),
      #f8fbff;
  }


  /* HERO */

  .hn-home-hero {
    gap:34px;
    padding:46px 0 52px;
  }

  .hn-home-copy h1 {
    max-width:100%;
    margin:15px 0 18px;
    font-size:43px;
    line-height:1;
    letter-spacing:-2.4px;
  }

  .hn-home-copy>p {
    font-size:15px;
    line-height:1.65;
  }

  .hn-home-copy .hero-actions {
    margin:27px 0 0;
  }

  .hn-home-copy .hero-actions .btn {
    width:100%;
  }

  .hn-home-benefits {
    display:grid;
    grid-template-columns:1fr;
    margin-top:20px;
  }

  .hn-home-benefits>span {
    width:100%;
    border-radius:12px;
  }


  /* CONTROL CENTER DEMO */

  .hn-control-demo {
    padding:13px;
    border-radius:21px;
    box-shadow:0 25px 55px rgba(5,27,63,.2);
  }

  .hn-demo-top {
    min-height:24px;
    padding-bottom:10px;
  }

  .hn-demo-top strong {
    font-size:8px;
  }

  .hn-demo-top>span {
    font-size:6px;
  }

  .hn-demo-minecraft {
    gap:14px;
    padding:14px;
  }

  .hn-demo-cube {
    width:62px;
    flex-basis:62px;
  }

  .hn-demo-minecraft h3 {
    font-size:16px;
  }

  .hn-demo-minecraft p {
    font-size:9px;
  }

  .hn-demo-tools {
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .hn-demo-tools article {
    min-height:88px;
    padding:12px;
  }

  .hn-demo-tools article>span {
    width:30px;
    height:30px;
  }


  /* FEATURES */

  .hn-home-features {
    grid-template-columns:1fr;
    gap:9px;
  }

  .hn-home-features article {
    padding:15px;
  }


  /* SECTIONS */

  .hn-home-section {
    padding:68px 0;
  }

  .hn-section-heading {
    margin-bottom:26px;
  }

  .hn-section-heading h2 {
    font-size:32px;
    letter-spacing:-1.1px;
  }

  .hn-section-heading>p {
    font-size:13px;
  }


  /* PLANS */

  .hn-plan-grid {
    gap:20px;
  }

  .hn-plan-card {
    padding:22px;
  }

  .hn-plan-title h3 {
    font-size:25px;
  }

  .hn-plan-price strong {
    font-size:29px;
  }

  .hn-plan-resources {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .hn-plan-resources>div {
    padding:11px 5px;
  }

  .hn-plan-resources strong {
    font-size:13px;
  }

  .hn-plan-popular {
    right:15px;
  }


  /* DIGITAL */

  .hn-digital-section {
    padding:67px 0;
  }

  .hn-service-grid {
    grid-template-columns:1fr 1fr;
    gap:9px;
  }

  .hn-service-card {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-height:156px;
    padding:14px;
  }

  .hn-brand-icon {
    width:43px;
    height:43px;
    flex:0 0 43px;
    margin-bottom:11px;
  }

  .hn-brand-icon.wide {
    width:58px;
  }

  .hn-service-card>b {
    width:100%;
    margin-top:0;
    font-size:11px;
  }

  .hn-service-card>small {
    margin-top:3px;
    font-size:8px;
  }

  .hn-service-card>span {
    width:100%;
    margin-top:auto;
    padding-top:9px;
  }


  /* HENOK WEB FEATURES */

  .hn-web-grid {
    grid-template-columns:1fr;
    gap:10px;
  }

  .hn-web-grid article {
    padding:19px;
  }

  .hn-web-grid h3 {
    margin-top:14px;
  }


  /* STEPS */

  .hn-how-section {
    padding:66px 0;
  }

  .hn-steps {
    gap:10px;
  }

  .hn-steps article {
    padding:18px;
  }


  /* CTA */

  .hn-home-cta {
    padding:62px 0;
  }

  .hn-home-cta h2 {
    font-size:31px;
    letter-spacing:-1px;
  }

  .hn-home-cta-actions {
    width:100%;
    flex-direction:column;
  }

  .hn-home-cta-actions .btn {
    width:100%;
  }

}


@media(max-width:440px) {

  .hn-home-copy h1 {
    font-size:39px;
  }

  .hn-control-demo {
    padding:11px;
  }

  .hn-demo-minecraft {
    gap:11px;
  }

  .hn-demo-cube {
    width:54px;
    flex-basis:54px;
  }

  .hn-demo-minecraft h3 {
    font-size:15px;
  }

  .hn-demo-tools article {
    min-height:84px;
    padding:11px;
  }

  .hn-plan-card {
    padding:19px;
  }

  .hn-plan-resources {
    gap:5px;
  }

  .hn-plan-resources>div {
    padding:10px 4px;
  }

  .hn-plan-resources span {
    font-size:6px;
  }

  .hn-service-grid {
    gap:8px;
  }

  .hn-service-card {
    min-height:150px;
    padding:13px;
  }

  .hn-step-number {
    width:39px;
    height:39px;
    flex-basis:39px;
  }

}


/* HENOK_PLANS_CAROUSEL_V14_9B1 */

.hn-plan-grid{
  display:flex;
  width:100%;
  max-width:none;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:8px 3px 18px;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}

.hn-plan-grid::-webkit-scrollbar{
  height:7px;
}

.hn-plan-grid::-webkit-scrollbar-track{
  background:#edf3fb;
  border-radius:999px;
}

.hn-plan-grid::-webkit-scrollbar-thumb{
  background:#b8cae4;
  border-radius:999px;
}

.hn-plan-card{
  flex:0 0 min(360px,31.5%);
  scroll-snap-align:start;
}

@media(max-width:980px){
  .hn-plan-grid{
    max-width:none;
  }

  .hn-plan-card{
    flex:0 0 48%;
  }
}

@media(max-width:760px){
  .hn-plan-grid{
    gap:14px;
    margin-right:-12px;
    padding-right:42px;
  }

  .hn-plan-card{
    flex:0 0 86%;
  }
}


/* HENOK_DIGITAL_LIGHT_V14_9B2 */

.hn-digital-section{
  padding:88px 0;
  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(27,121,255,.08),
      transparent 26rem
    ),
    #f3f7fd;
  color:var(--ink);
}

.hn-digital-section:after{
  display:none;
}

.hn-digital-section .hn-section-heading h2{
  color:var(--ink);
}

.hn-digital-section .hn-section-heading>p{
  color:var(--muted);
}

.hn-digital-section .eyebrow{
  color:var(--blue);
}

.hn-service-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.hn-service-card{
  min-height:126px;
  border:1px solid #dce6f4;
  background:#fff;
  box-shadow:0 12px 32px rgba(14,55,112,.055);
}

.hn-service-card:hover{
  border-color:#b9d5f8;
  background:#fff;
  box-shadow:0 18px 40px rgba(15,72,150,.09);
}

.hn-service-card>b{
  color:var(--ink);
  font-size:13px;
}

.hn-service-card>small{
  color:var(--muted);
}

.hn-service-card>span{
  border-top-color:#e8eef7;
  color:var(--blue);
}

.hn-brand-icon{
  width:54px;
  height:54px;
  padding:9px;
  border:1px solid #e1e9f5;
  background:#f8fbff;
  box-shadow:none;
}

.hn-brand-icon.wide{
  width:72px;
}

.hn-brand-icon img{
  max-width:100%;
  max-height:100%;
}

.brand-disney img{
  transform:scale(1.13);
}

.brand-tnt img{
  transform:scale(1.08);
}

.brand-hbomax{
  width:78px;
}

.brand-hbomax img{
  transform:scale(1.04);
}

.hn-brand-note{
  color:#8796aa;
}

@media(max-width:760px){

  .hn-digital-section{
    padding:67px 0;
  }

  .hn-service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  .hn-service-card{
    min-height:156px;
  }

  .hn-brand-icon{
    width:48px;
    height:48px;
    flex-basis:48px;
  }

  .hn-brand-icon.wide{
    width:66px;
  }

  .brand-hbomax{
    width:72px;
  }

}





/* HENOK_REAL_BRAND_LOGOS_V149B4 */

.brand-disney{
  background:#fff;
}
.brand-disney img{
  width:72px;
  max-width:100%;
  height:auto;
  object-fit:contain;
  filter: brightness(0) saturate(100%) invert(40%) sepia(89%) saturate(1695%) hue-rotate(198deg) brightness(102%) contrast(101%);
}

.brand-tnt,
.brand-hbomax{
  background:#fff;
  display:grid;
  place-items:center;
  padding:10px;
}

.brand-tnt img,
.brand-hbomax img{
  width:100%;
  max-width:118px;
  height:44px;
  object-fit:contain;
  display:block;
}

.hn-brand-icon.wide{
  width:140px;
  min-width:140px;
  height:88px;
  border-radius:22px;
}

@media (max-width:760px){
  .hn-brand-icon.wide{
    width:104px;
    min-width:104px;
    height:72px;
    border-radius:18px;
  }

  .brand-disney img{
    width:58px;
  }

  .brand-tnt img,
  .brand-hbomax img{
    max-width:86px;
    height:34px;
  }
}

/* HENOK_BRANDS_REFERENCE_V149B5 */

/* Disney+ */
.brand-disney{
  background:#fff !important;
}

.brand-disney img{
  width:68px !important;
  max-width:100% !important;
  height:auto !important;
  filter:
    brightness(0)
    saturate(100%)
    invert(38%)
    sepia(93%)
    saturate(1855%)
    hue-rotate(198deg)
    brightness(101%)
    contrast(101%) !important;
}


/* TNT SPORTS:
   símbolo arriba, SPORTS abajo */

.brand-tnt-stack{
  width:78px !important;
  min-width:78px !important;
  height:88px !important;
  padding:7px !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;

  gap:5px !important;
  overflow:hidden !important;

  background:#fff !important;
}

.tnt-symbol-crop{
  position:relative;
  display:block;
  width:49px;
  height:49px;
  overflow:hidden;
  flex:0 0 49px;
}

/*
 El SVG oficial es horizontal.
 Lo ampliamos y mostramos únicamente
 el símbolo circular del lado izquierdo.
*/
.tnt-symbol-crop img{
  position:absolute !important;
  left:0 !important;
  top:0 !important;

  width:auto !important;
  max-width:none !important;
  height:49px !important;

  object-fit:initial !important;
}

.tnt-word-sports{
  display:block;
  color:#111f2c;
  font-size:10px;
  line-height:1;
  font-weight:950;
  letter-spacing:1px;
}


/* HBO MAX:
   wordmark horizontal de la referencia */

.brand-hbomax-ref{
  width:130px !important;
  min-width:130px !important;
  height:70px !important;

  display:grid !important;
  place-items:center !important;

  padding:11px !important;
  overflow:hidden !important;

  background:#fff !important;
}

.brand-hbomax-ref img{
  display:block !important;

  width:108px !important;
  max-width:108px !important;
  height:auto !important;
  max-height:45px !important;

  object-fit:contain !important;
}


/* mismo acabado que los demás badges */

.brand-tnt-stack,
.brand-hbomax-ref{
  border:1px solid #dce7f6 !important;
  border-radius:17px !important;
  box-shadow:none !important;
}


@media(max-width:760px){

  .brand-disney img{
    width:58px !important;
  }

  .brand-tnt-stack{
    width:70px !important;
    min-width:70px !important;
    height:80px !important;
  }

  .tnt-symbol-crop{
    width:43px;
    height:43px;
    flex-basis:43px;
  }

  .tnt-symbol-crop img{
    height:43px !important;
  }

  .tnt-word-sports{
    font-size:9px;
  }

  .brand-hbomax-ref{
    width:120px !important;
    min-width:120px !important;
    height:64px !important;
    padding:9px !important;
  }

  .brand-hbomax-ref img{
    width:102px !important;
    max-width:102px !important;
    max-height:41px !important;
  }

}



/* HENOK_BRANDS_FINAL_TUNE_V149B6 */

/* Igualar comportamiento visual de TNT Sports y HBO Max */
.hn-brand-icon.brand-tnt-stack,
.hn-brand-icon.brand-hbomax-ref{
  width: 150px;
  min-height: 86px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 8px;
}

/* reset general */
.hn-brand-icon.brand-tnt-stack img,
.hn-brand-icon.brand-hbomax-ref img{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* TNT Sports: que se vea completo y centrado */
.hn-brand-icon.brand-tnt-stack img{
  max-width: 112px;
  max-height: 54px;
}

/* HBO Max: contenido, no tan expandido horizontalmente */
.hn-brand-icon.brand-hbomax-ref img{
  max-width: 110px;
  max-height: 36px;
}

/* móvil */
@media (max-width: 760px){
  .hn-brand-icon.brand-tnt-stack,
  .hn-brand-icon.brand-hbomax-ref{
    width: 128px;
    min-height: 78px;
    padding: 8px 12px;
  }

  .hn-brand-icon.brand-tnt-stack img{
    max-width: 96px;
    max-height: 48px;
  }

  .hn-brand-icon.brand-hbomax-ref img{
    max-width: 96px;
    max-height: 32px;
  }
}

/* HENOK_BRANDS_UNIFORM_V149B7 */

/* Todos los logos usan el mismo contenedor */
.hn-digital-section .hn-brand-icon{
  width:102px;
  height:102px;
  min-width:102px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  overflow:hidden;
  background:#fff;
}

/* Todos los logos parten desde una misma base */
.hn-digital-section .hn-brand-icon img{
  display:block;
  width:auto;
  height:auto;
  max-width:72px;
  max-height:42px;
  object-fit:contain;
  margin:0 auto;
}

/* Disney un poco más pequeño para que respire */
.hn-digital-section .brand-disney img{
  max-width:62px;
  max-height:28px;
}

/* TNT centrado y del mismo peso visual */
.hn-digital-section .brand-tnt-stack img{
  max-width:68px;
  max-height:44px;
}

/* HBO Max más contenido, para que no se vea estirado */
.hn-digital-section .brand-hbomax-ref img{
  max-width:74px;
  max-height:32px;
}

/* En móvil mantenemos el mismo criterio visual */
@media (max-width:760px){
  .hn-digital-section .hn-brand-icon{
    width:102px;
    height:102px;
    padding:12px;
  }

  .hn-digital-section .hn-brand-icon img{
    max-width:70px;
    max-height:40px;
  }

  .hn-digital-section .brand-disney img{
    max-width:60px;
    max-height:27px;
  }

  .hn-digital-section .brand-tnt-stack img{
    max-width:66px;
    max-height:42px;
  }

  .hn-digital-section .brand-hbomax-ref img{
    max-width:70px;
    max-height:30px;
  }
}


/* HENOK_BRANDS_COMPACT_UNIFORM_V149B8 */

/*
   TODOS LOS LOGOS:
   caja cuadrada pequeña y uniforme
*/

.hn-digital-section .hn-brand-icon,
.hn-digital-section .brand-tnt-stack,
.hn-digital-section .brand-hbomax-stack,
.hn-digital-section .hn-brand-icon.wide{

  box-sizing:border-box !important;

  width:54px !important;
  height:54px !important;

  min-width:54px !important;
  min-height:54px !important;

  max-width:54px !important;
  max-height:54px !important;

  flex:0 0 54px !important;

  padding:8px !important;
  margin:0 0 11px 0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid #dce7f6 !important;
  border-radius:14px !important;

  background:#fff !important;
  overflow:hidden !important;

  box-shadow:none !important;
}


/* BASE IMAGEN */

.hn-digital-section
.hn-brand-icon > img{

  display:block !important;

  width:auto !important;
  height:auto !important;

  max-width:36px !important;
  max-height:36px !important;

  object-fit:contain !important;

  margin:auto !important;
}


/* CHATGPT */

.hn-digital-section
.hn-service-card:nth-child(1)
.hn-brand-icon img{

  max-width:35px !important;
  max-height:35px !important;
}


/* CLAUDE */

.hn-digital-section
.hn-service-card:nth-child(2)
.hn-brand-icon img{

  max-width:36px !important;
  max-height:36px !important;
}


/* DISNEY+ */

.hn-digital-section
.brand-disney img{

  width:auto !important;
  height:auto !important;

  max-width:40px !important;
  max-height:25px !important;
}


/* NETFLIX */

.hn-digital-section
.hn-service-card:nth-child(4)
.hn-brand-icon img{

  max-width:24px !important;
  max-height:37px !important;
}


/* SPOTIFY */

.hn-digital-section
.hn-service-card:nth-child(5)
.hn-brand-icon img{

  max-width:36px !important;
  max-height:36px !important;
}


/* ======================================================
   TNT SPORTS
   TNT ARRIBA
   SPORTS ABAJO
   ====================================================== */

.hn-digital-section
.brand-tnt-stack{

  flex-direction:column !important;

  gap:2px !important;

  padding:5px !important;
}


.hn-digital-section
.tnt-symbol-crop{

  position:relative !important;

  display:block !important;

  width:31px !important;
  height:31px !important;

  min-width:31px !important;
  min-height:31px !important;

  flex:0 0 31px !important;

  overflow:hidden !important;
}


.hn-digital-section
.tnt-symbol-crop img{

  position:absolute !important;

  left:0 !important;
  top:0 !important;

  width:auto !important;

  max-width:none !important;
  max-height:none !important;

  height:31px !important;

  margin:0 !important;

  object-fit:initial !important;
}


.hn-digital-section
.tnt-word-sports{

  display:block !important;

  color:#111f2c !important;

  font-size:6.5px !important;

  line-height:1 !important;

  font-weight:950 !important;

  letter-spacing:.7px !important;
}


/* ======================================================
   HBO MAX
   HBO ARRIBA
   MAX ABAJO
   ====================================================== */

.hn-digital-section
.brand-hbomax-stack{

  width:54px !important;
  height:54px !important;

  min-width:54px !important;
  min-height:54px !important;

  max-width:54px !important;
  max-height:54px !important;

  flex:0 0 54px !important;

  padding:5px !important;
}


.hn-digital-section
.brand-hbomax-stack img{

  display:block !important;

  width:auto !important;
  height:auto !important;

  max-width:42px !important;
  max-height:42px !important;

  object-fit:contain !important;

  margin:auto !important;
}


/* ======================================================
   MOVIL
   conservar exactamente las mismas cajas
   ====================================================== */

@media(max-width:760px){

  .hn-digital-section .hn-brand-icon,
  .hn-digital-section .brand-tnt-stack,
  .hn-digital-section .brand-hbomax-stack,
  .hn-digital-section .hn-brand-icon.wide{

    width:54px !important;
    height:54px !important;

    min-width:54px !important;
    min-height:54px !important;

    max-width:54px !important;
    max-height:54px !important;

    flex:0 0 54px !important;
  }

}


/* HENOK_V149B9_UI_START */

/* ------------------------------
   LOGOS DIGITALES UNIFORMES
   ------------------------------ */
.hn-digital-section .hn-brand-icon{
  width:82px !important;
  height:82px !important;
  min-width:82px !important;
  border-radius:20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
  gap:3px !important;
  padding:10px !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid #d7e2f3 !important;
  box-sizing:border-box !important;
}

.hn-digital-section .hn-brand-icon img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:50px !important;
  max-height:50px !important;
  object-fit:contain !important;
}

/* Ajustes finos por marca */
.hn-digital-section .brand-disney img{
  max-width:58px !important;
  max-height:30px !important;
}

.hn-digital-section .brand-netflix img{
  max-width:34px !important;
  max-height:46px !important;
}

.hn-digital-section .brand-chatgpt img,
.hn-digital-section .brand-claude img,
.hn-digital-section .brand-spotify img{
  max-width:46px !important;
  max-height:46px !important;
}

.hn-digital-section .brand-tnt-stack img,
.hn-digital-section .brand-tnt-stack svg{
  max-width:50px !important;
  max-height:50px !important;
}

.hn-digital-section .brand-tnt-stack{
  gap:2px !important;
}

.hn-digital-section .brand-tnt-stack .tnt-label,
.hn-digital-section .brand-tnt-stack .sports-label{
  line-height:1 !important;
}

/* HBO Max apilado, cuadrado y limpio */
.hn-digital-section .brand-hbomax-stack{
  width:82px !important;
  height:82px !important;
  min-width:82px !important;
  padding:8px 6px !important;
  gap:1px !important;
}

.hn-digital-section .brand-hbomax-stack .hbomax-top{
  display:block !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.5px !important;
  color:#111827 !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}

.hn-digital-section .brand-hbomax-stack .hbomax-bottom{
  display:block !important;
  font-size:24px !important;
  line-height:.92 !important;
  font-weight:900 !important;
  letter-spacing:-1.2px !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  background:linear-gradient(90deg,#7c3aed 0%, #8b5cf6 38%, #7c7cff 70%, #4da3ff 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

/* ------------------------------
   BOTON "CONSULTAR DISPONIBILIDAD"
   ------------------------------ */
.hn-availability-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  position:relative !important;
  overflow:hidden !important;
  padding:11px 15px !important;
  border-radius:14px !important;
  border:1px solid #cfe0fb !important;
  background:linear-gradient(180deg,#eef5ff 0%, #e3efff 100%) !important;
  color:#1664ea !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-decoration:none !important;
  box-shadow:0 8px 18px rgba(25,85,180,.10) !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease !important;
}

.hn-availability-btn::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent) !important;
  transform:translateX(-130%) !important;
  transition:transform .45s ease !important;
}

.hn-availability-btn::after{
  content:"→" !important;
  position:relative !important;
  z-index:1 !important;
  font-size:14px !important;
  transition:transform .18s ease !important;
}

.hn-availability-btn:hover{
  transform:translateY(-2px) !important;
  background:linear-gradient(135deg,#1266e8,#0d82ff) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 14px 28px rgba(13,110,253,.25) !important;
}

.hn-availability-btn:hover::before{
  transform:translateX(130%) !important;
}

.hn-availability-btn:hover::after{
  transform:translateX(3px) !important;
}

.hn-availability-btn:active{
  transform:translateY(0) scale(.98) !important;
}

@media(max-width:760px){
  .hn-availability-btn{
    padding:10px 14px !important;
    font-size:13px !important;
  }
}

/* HENOK_V149B9_UI_END */

/* HENOK_V149B10_BRANDS_FINAL */

/* Contenedor uniforme como antes: cuadrado, compacto y centrado */
.hn-digital-section .hn-brand-icon{
  width:84px !important;
  height:84px !important;
  min-width:84px !important;
  max-width:84px !important;
  border-radius:20px !important;
  padding:8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid #d7e1f0 !important;
  box-sizing:border-box !important;
}

/* Base uniforme para todos los logos */
.hn-digital-section .hn-brand-icon img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:52px !important;
  max-height:52px !important;
  object-fit:contain !important;
  margin:0 auto !important;
}

/* Tamaños finos por marca, parecidos a como se veían antes */
.hn-digital-section .brand-chatgpt img{
  max-width:48px !important;
  max-height:48px !important;
}

.hn-digital-section .brand-claude img{
  max-width:48px !important;
  max-height:48px !important;
}

.hn-digital-section .brand-disney img{
  max-width:56px !important;
  max-height:26px !important;
}

.hn-digital-section .brand-netflix img{
  max-width:26px !important;
  max-height:44px !important;
}

.hn-digital-section .brand-spotify img{
  max-width:46px !important;
  max-height:46px !important;
}

/* TNT Sports: cuadrado y compacto, como referencia enviada */
.hn-digital-section .brand-tnt-stack img{
  max-width:54px !important;
  max-height:54px !important;
}

/* HBO Max: HBO más grande arriba y max debajo, todo compacto */
.hn-digital-section .brand-hbomax-stack img{
  max-width:56px !important;
  max-height:56px !important;
}

/* Mantener también el texto/botón más claro visualmente */
.hn-availability-btn,
.hn-digital-section .hn-card a.hn-availability-btn,
.hn-digital-section .hn-card button.hn-availability-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:40px !important;
  padding:10px 14px !important;
  border-radius:12px !important;
  border:1px solid #cfe0ff !important;
  background:linear-gradient(180deg,#f7fbff 0%, #eef5ff 100%) !important;
  color:#2f74ff !important;
  font-weight:800 !important;
  font-size:14px !important;
  text-decoration:none !important;
  cursor:pointer !important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
  box-shadow:0 6px 14px rgba(47,116,255,.10) !important;
}

.hn-availability-btn:hover{
  transform:translateY(-2px) !important;
  background:linear-gradient(180deg,#2f74ff 0%, #1f68ff 100%) !important;
  color:#ffffff !important;
  box-shadow:0 12px 24px rgba(47,116,255,.22) !important;
}

.hn-availability-btn:active{
  transform:translateY(0) scale(.98) !important;
}

/* En móvil mantenemos exactamente el tamaño compacto */
@media (max-width: 760px){
  .hn-digital-section .hn-brand-icon{
    width:84px !important;
    height:84px !important;
    min-width:84px !important;
    max-width:84px !important;
    padding:8px !important;
  }

  .hn-digital-section .brand-disney img{
    max-width:54px !important;
    max-height:25px !important;
  }

  .hn-digital-section .brand-netflix img{
    max-width:24px !important;
    max-height:42px !important;
  }

  .hn-digital-section .brand-tnt-stack img,
  .hn-digital-section .brand-hbomax-stack img{
    max-width:54px !important;
    max-height:54px !important;
  }
}

/* =========================================================
   HENOK_V149B11_ICON_BUTTON_FIX
   Iconos mas pequenos, cuadrados y botones reales
   ========================================================= */

.hn-digital-section .hn-brand-icon{
  width:84px !important;
  height:84px !important;
  min-width:84px !important;
  max-width:84px !important;
  min-height:84px !important;
  max-height:84px !important;
  border-radius:20px !important;
  padding:8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
  gap:3px !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1.5px solid #d6e0ef !important;
  box-shadow:none !important;
}

.hn-digital-section .hn-brand-icon img{
  width:auto !important;
  height:auto !important;
  max-width:56px !important;
  max-height:56px !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 auto !important;
}

/* ChatGPT / Claude / Disney / Netflix / Spotify mantienen tamano controlado */
.hn-digital-section .brand-disney img{
  max-width:58px !important;
  max-height:40px !important;
}

.hn-digital-section .brand-netflix img,
.hn-digital-section .brand-spotify img{
  max-width:48px !important;
  max-height:48px !important;
}

/* TNT Sports apilado y cuadrado */
.hn-digital-section .brand-tnt-stack{
  text-align:center !important;
}

.hn-digital-section .brand-tnt-stack .tnt-top{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:48px !important;
  height:48px !important;
  border-radius:50% !important;
  background:#e65bff !important;
  color:#fff !important;
  font-weight:900 !important;
  font-size:21px !important;
  line-height:1 !important;
  letter-spacing:.3px !important;
  margin:0 auto !important;
}

.hn-digital-section .brand-tnt-stack .tnt-bottom{
  display:block !important;
  font-weight:900 !important;
  font-size:10px !important;
  line-height:1 !important;
  letter-spacing:2.2px !important;
  color:#1d2330 !important;
  margin-top:2px !important;
}

/* HBO Max apilado y cuadrado */
.hn-digital-section .brand-hbomax-stack{
  text-align:center !important;
}

.hn-digital-section .brand-hbomax-stack .hbomax-top{
  display:block !important;
  font-weight:900 !important;
  font-size:25px !important;
  line-height:.95 !important;
  letter-spacing:.4px !important;
  color:#101218 !important;
  margin:0 !important;
}

.hn-digital-section .brand-hbomax-stack .hbomax-bottom{
  display:block !important;
  font-weight:900 !important;
  font-size:18px !important;
  line-height:1 !important;
  letter-spacing:.2px !important;
  color:#7454f6 !important;
  margin-top:5px !important;
}

/* Boton real para disponibilidad */
.hn-availability-btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:1px solid #c9d9fb !important;
  background:linear-gradient(135deg,#f8fbff 0%, #edf4ff 100%) !important;
  color:#2b6eff !important;
  border-radius:12px !important;
  padding:10px 14px !important;
  min-height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  cursor:pointer !important;
  box-shadow:0 8px 18px rgba(39,107,255,.10) !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease !important;
}

.hn-availability-btn:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 12px 22px rgba(39,107,255,.16) !important;
  background:linear-gradient(135deg,#2f6fff 0%, #5a94ff 100%) !important;
  color:#fff !important;
  border-color:#2f6fff !important;
}

.hn-availability-btn:active{
  transform:translateY(0) scale(.98) !important;
}

.hn-availability-btn:focus-visible{
  outline:none !important;
  box-shadow:
    0 0 0 4px rgba(47,111,255,.14),
    0 12px 22px rgba(39,107,255,.16) !important;
}

/* En movil, que se vea claramente boton */
@media (max-width:760px){
  .hn-availability-btn{
    width:auto !important;
    font-size:14px !important;
    padding:10px 13px !important;
  }
}

/* HENOK_V149B12_COMPACT_FINAL */

/* =========================================================
   ICONOS: volver al formato compacto y cuadrado
   ========================================================= */

.hn-digital-section .hn-brand-icon,
.hn-digital-section .brand-tnt-stack,
.hn-digital-section .brand-hbomax-stack,
.hn-digital-section .hn-brand-icon.wide{
  box-sizing:border-box !important;

  width:56px !important;
  height:56px !important;

  min-width:56px !important;
  min-height:56px !important;

  max-width:56px !important;
  max-height:56px !important;

  flex:0 0 56px !important;

  padding:7px !important;
  margin:0 0 10px 0 !important;

  border:1px solid #dce6f4 !important;
  border-radius:14px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:#fff !important;
  box-shadow:none !important;
  overflow:hidden !important;
}


/* Base logos */

.hn-digital-section .hn-brand-icon img{
  display:block !important;

  width:auto !important;
  height:auto !important;

  max-width:38px !important;
  max-height:38px !important;

  object-fit:contain !important;
  margin:auto !important;
}


/* ChatGPT */

.hn-digital-section
.hn-service-card:nth-child(1)
.hn-brand-icon img{
  max-width:35px !important;
  max-height:35px !important;
}


/* Claude */

.hn-digital-section
.hn-service-card:nth-child(2)
.hn-brand-icon img{
  max-width:36px !important;
  max-height:36px !important;
}


/* Disney+ */

.hn-digital-section .brand-disney img{
  max-width:41px !important;
  max-height:24px !important;
}


/* Netflix */

.hn-digital-section
.hn-service-card:nth-child(4)
.hn-brand-icon img{
  max-width:23px !important;
  max-height:37px !important;
}


/* Spotify */

.hn-digital-section
.hn-service-card:nth-child(5)
.hn-brand-icon img{
  max-width:35px !important;
  max-height:35px !important;
}


/* =========================================================
   TNT SPORTS
   TNT arriba / SPORTS abajo
   ========================================================= */

.hn-digital-section .brand-tnt-stack{
  flex-direction:column !important;
  gap:2px !important;
  padding:5px !important;
}

.hn-digital-section .brand-tnt-stack .tnt-top{
  width:31px !important;
  height:31px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  margin:0 !important;

  border-radius:50% !important;

  background:#e65bff !important;
  color:#fff !important;

  font-size:11px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
}

.hn-digital-section .brand-tnt-stack .tnt-bottom{
  display:block !important;

  margin:0 !important;

  color:#192333 !important;

  font-size:6px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:1.15px !important;
}


/* =========================================================
   HBO MAX
   HBO claramente mas grande
   max pequeño debajo
   ========================================================= */

.hn-digital-section .brand-hbomax-stack{
  flex-direction:column !important;
  gap:2px !important;
  padding:5px !important;
}

.hn-digital-section .brand-hbomax-stack .hbomax-top{
  display:block !important;

  margin:0 !important;

  color:#101218 !important;

  font-size:18px !important;
  font-weight:950 !important;
  line-height:.9 !important;
  letter-spacing:-.7px !important;
}

.hn-digital-section .brand-hbomax-stack .hbomax-bottom{
  display:block !important;

  margin:2px 0 0 !important;

  color:#7657f6 !important;

  font-size:11px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:-.25px !important;
}


/* =========================================================
   CONSULTAR DISPONIBILIDAD
   pequeño, sobrio y dentro de la paleta Henok
   ========================================================= */

.hn-digital-section .hn-availability-btn{
  appearance:none !important;
  -webkit-appearance:none !important;

  width:auto !important;
  min-width:0 !important;
  min-height:0 !important;

  margin-top:8px !important;
  padding:7px 10px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;

  border:1px solid #d4e2f7 !important;
  border-radius:9px !important;

  background:#edf4ff !important;
  color:#2768c9 !important;

  font-size:10px !important;
  font-weight:800 !important;
  line-height:1 !important;

  cursor:pointer !important;

  box-shadow:none !important;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease !important;
}


/* sin flecha enorme de reglas anteriores */

.hn-digital-section .hn-availability-btn::after{
  content:"→" !important;

  position:static !important;

  font-size:10px !important;
  line-height:1 !important;

  transform:none !important;
  transition:transform .18s ease !important;
}


/* quitar brillo anterior */

.hn-digital-section .hn-availability-btn::before{
  display:none !important;
  content:none !important;
}


/* hover PC */

.hn-digital-section .hn-availability-btn:hover{
  transform:translateY(-2px) !important;

  border-color:#b8d1f4 !important;

  background:#e3efff !important;
  color:#155bbf !important;

  box-shadow:0 7px 15px rgba(25,94,187,.10) !important;
}

.hn-digital-section .hn-availability-btn:hover::after{
  transform:translateX(2px) !important;
}


/* presión móvil */

.hn-digital-section .hn-availability-btn:active{
  transform:scale(.97) !important;
}


/* que no se estire dentro de la tarjeta */

.hn-digital-section .hn-service-card .hn-availability-btn{
  align-self:flex-start !important;
}


/* mismo tamaño en teléfono */

@media(max-width:760px){

  .hn-digital-section .hn-brand-icon,
  .hn-digital-section .brand-tnt-stack,
  .hn-digital-section .brand-hbomax-stack,
  .hn-digital-section .hn-brand-icon.wide{

    width:56px !important;
    height:56px !important;

    min-width:56px !important;
    min-height:56px !important;

    max-width:56px !important;
    max-height:56px !important;

    flex:0 0 56px !important;
  }

  .hn-digital-section .hn-availability-btn{
    padding:7px 9px !important;
    font-size:9px !important;
    border-radius:9px !important;
  }

}



/* ========================================================
   HENOK_FILES_V14_12_FINAL
   ======================================================== */

.henok-files-final {
  min-width: 0 !important;
  overflow: hidden !important;
}

.henok-files-final-title {
  gap: 14px;
  align-items: center;
}

.henok-files-final-title > div {
  min-width: 0;
}

.henok-files-path-pill {
  display: inline-flex;
  align-items: center;
  max-width: 48%;
  min-width: 0;
  padding: 7px 11px;
  border: 1px solid rgba(110,145,205,.26);
  border-radius: 999px;
  background: rgba(239,245,255,.72);
  color: #586b8d;
  font-size: 12px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.henok-files-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 14px 0 12px;
}

.henok-files-toolbar .btn {
  min-width: 0;
}

.henok-files-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 2px 12px;
  scrollbar-width: thin;
}

.henok-files-crumb {
  appearance: none;
  border: 0;
  background: transparent;
  color: #2f66cf;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  padding: 4px 3px;
  cursor: pointer;
  white-space: nowrap;
}

.henok-files-crumb-separator {
  color: #99a8c3;
  flex: 0 0 auto;
}

.henok-files-final-grid,
.henok-files-browser,
.henok-files-editor,
.henok-files-list {
  min-width: 0 !important;
  max-width: 100% !important;
}

.henok-files-list {
  overflow-x: hidden !important;
}

.henok-file-row {
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    auto
    auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(143,164,201,.20);
}

.henok-file-row:last-child {
  border-bottom: 0;
}

.henok-file-open {
  appearance: none;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 12px 10px;
  cursor: pointer;
  border-radius: 12px;
}

.henok-file-open:hover {
  background: rgba(226,237,255,.54);
}

.henok-file-kind {
  flex: 0 0 auto;
  min-width: 38px;
  padding: 5px 6px;
  border-radius: 8px;
  background: rgba(222,234,255,.70);
  color: #3268cc;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
  letter-spacing: .4px;
}

.henok-file-info {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.henok-file-info strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.henok-file-info small {
  color: #7586a4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.henok-file-action {
  appearance: none;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}

.henok-file-download {
  color: #1f5ab7;
  background: #edf4ff;
}

.henok-file-delete {
  color: #fff;
  background: #f0443c;
}

.henok-files-editor-meta {
  min-width: 0;
}

.henok-files-editor-meta b,
.henok-files-editor-meta small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.henok-files-editor .file-editor-textarea {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  resize: vertical !important;
  overflow-x: auto !important;
  white-space: pre !important;
}

.henok-files-editor
.file-editor-actions {
  flex: 0 0 auto;
}

.henok-files-final.is-busy {
  cursor: progress;
}

.henok-files-final.is-busy
.henok-files-list {
  opacity: .72;
}

.henok-files-final
.file-editor-status[data-type="success"] {
  color: #16864a;
}

.henok-files-final
.file-editor-status[data-type="error"] {
  color: #c83232;
}

@media (max-width: 760px) {

  .henok-files-final {
    overflow: visible !important;
  }

  .henok-files-final-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .henok-files-path-pill {
    max-width: 100%;
  }

  .henok-files-toolbar {
    display: grid;
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .henok-files-toolbar .btn {
    width: 100%;
    min-height: 44px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .henok-files-toolbar
  [data-hf-action="upload"] {
    grid-column: 1 / -1;
  }

  .henok-files-final-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 14px !important;
  }

  .henok-files-browser,
  .henok-files-editor {
    width: 100% !important;
    min-width: 0 !important;
  }

  .henok-file-row {
    grid-template-columns:
      minmax(0,1fr)
      46px
      46px;
  }

  .henok-file-open {
    padding-left: 7px;
    gap: 8px;
  }

  .henok-file-action {
    width: 42px;
    height: 42px;
  }

  .henok-files-editor
  .file-editor-head {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .henok-files-editor
  .file-editor-actions {
    display: grid;
    width: 100%;
    grid-template-columns:
      repeat(2,minmax(0,1fr));
    gap: 9px;
  }

  .henok-files-editor
  .file-editor-actions .btn {
    width: 100%;
  }

  .henok-files-editor
  .file-editor-textarea {
    min-height: 320px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

}



/* ========================================================
   HENOK_FILES_MODAL_V14_12A
   UX consistente en desktop / tablet / Android / iOS
   ======================================================== */

.henok-files-toolbar
.henok-files-parent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}


.henok-files-btn-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: inline-flex;
}


.henok-files-btn-icon svg {
  width: 100%;
  height: 100%;
}


.henok-files-auto-sync {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding:
    9px
    14px;

  border:
    1px solid
    rgba(91,136,207,.19);

  border-radius:
    14px;

  background:
    rgba(241,247,255,.72);

  color:
    #647795;

  font-size:
    13px;

  font-weight:
    750;

  line-height:
    1.2;
}


.henok-files-auto-dot {
  width: 8px;
  height: 8px;

  border-radius:
    50%;

  background:
    #29b96c;

  box-shadow:
    0 0 0 4px
    rgba(41,185,108,.11);

  flex:
    0 0 auto;
}


/*
 * Modal
 */

body.henok-files-modal-open {
  overflow:
    hidden !important;
}


.henok-files-modal-backdrop[hidden] {
  display:
    none !important;
}


.henok-files-modal-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    100000;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    max(
      22px,
      env(safe-area-inset-top)
    )
    max(
      18px,
      env(safe-area-inset-right)
    )
    max(
      22px,
      env(safe-area-inset-bottom)
    )
    max(
      18px,
      env(safe-area-inset-left)
    );

  background:
    rgba(5,18,42,.48);

  backdrop-filter:
    blur(13px);

  -webkit-backdrop-filter:
    blur(13px);
}


.henok-files-modal {
  position:
    relative;

  box-sizing:
    border-box;

  width:
    min(
      100%,
      480px
    );

  max-height:
    min(
      720px,
      calc(100dvh - 44px)
    );

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  padding:
    27px;

  border:
    1px solid
    rgba(113,146,202,.22);

  border-radius:
    27px;

  background:
    rgba(255,255,255,.98);

  box-shadow:
    0 28px 90px
    rgba(4,22,55,.24);

  color:
    #10203d;

  animation:
    henokFilesModalIn
    .22s
    cubic-bezier(.22,1,.36,1);
}


@keyframes henokFilesModalIn {

  from {
    opacity:
      0;

    transform:
      translateY(12px)
      scale(.97);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }

}


.henok-files-modal-close {
  position:
    absolute;

  top:
    16px;

  right:
    16px;

  appearance:
    none;

  width:
    39px;

  height:
    39px;

  border:
    0;

  border-radius:
    12px;

  display:
    grid;

  place-items:
    center;

  background:
    #f1f5fb;

  color:
    #60728f;

  font-size:
    25px;

  line-height:
    1;

  cursor:
    pointer;
}


.henok-files-modal-icon {
  width:
    54px;

  height:
    54px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    18px;

  border-radius:
    17px;

  background:
    #eaf2ff;

  color:
    #2363da;
}


.henok-files-modal-icon svg {
  width:
    27px;

  height:
    27px;
}


.henok-files-modal-backdrop.is-danger
.henok-files-modal-icon {
  background:
    #fff0ee;

  color:
    #e8453c;
}


.henok-files-modal h3 {
  margin:
    0 48px 8px 0;

  color:
    #10203d;

  font-size:
    clamp(
      21px,
      4.6vw,
      27px
    );

  line-height:
    1.14;
}


.henok-files-modal-message {
  margin:
    0 0 20px;

  color:
    #677895;

  font-size:
    15px;

  line-height:
    1.55;
}


.henok-files-modal-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  margin:
    15px 0;
}


.henok-files-modal-field > span {
  color:
    #32435f;

  font-size:
    13px;

  font-weight:
    750;
}


.henok-files-modal-field input {
  box-sizing:
    border-box;

  width:
    100%;

  min-height:
    50px;

  padding:
    0 15px;

  border:
    1px solid
    #ccd8eb;

  border-radius:
    14px;

  outline:
    none;

  background:
    #fff;

  color:
    #10203d;

  font:
    inherit;

  font-size:
    16px;
}


.henok-files-modal-field input:focus {
  border-color:
    #3e72e8;

  box-shadow:
    0 0 0 4px
    rgba(55,108,230,.10);
}


.henok-files-modal-verify strong {
  color:
    #d93632;

  letter-spacing:
    .3px;
}


.henok-files-modal-error {
  margin:
    10px 0 0;

  padding:
    11px 13px;

  border-radius:
    12px;

  background:
    #fff0ef;

  color:
    #c52f2b;

  font-size:
    13px;

  font-weight:
    700;
}


.henok-files-modal-actions {
  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap:
    10px;

  margin-top:
    24px;
}


.henok-files-modal-actions .btn {
  width:
    100%;

  min-height:
    49px;

  margin:
    0;
}


.henok-files-modal-actions
.btn-danger {
  border-color:
    #eb443c !important;

  background:
    #eb443c !important;

  color:
    #fff !important;
}


/*
 * Mobile / tablet
 */

@media (max-width: 760px) {

  .henok-files-toolbar {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }


  .henok-files-auto-sync {
    width:
      100%;

    box-sizing:
      border-box;
  }


  .henok-files-parent-btn {
    width:
      100%;
  }


  .henok-files-modal-backdrop {
    align-items:
      flex-end;

    padding:
      12px
      10px
      max(
        12px,
        env(safe-area-inset-bottom)
      );
  }


  .henok-files-modal {
    width:
      100%;

    max-height:
      min(
        82dvh,
        720px
      );

    padding:
      25px
      20px
      20px;

    border-radius:
      27px
      27px
      22px
      22px;

    animation:
      henokFilesSheetIn
      .24s
      cubic-bezier(.22,1,.36,1);
  }


  @keyframes henokFilesSheetIn {

    from {
      opacity:
        0;

      transform:
        translateY(38px);
    }

    to {
      opacity:
        1;

      transform:
        translateY(0);
    }

  }


  .henok-files-modal-actions {
    position:
      sticky;

    bottom:
      0;

    margin:
      22px -4px -2px;

    padding-top:
      8px;

    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        #fff 18px
      );
  }

}


@media (max-width: 420px) {

  .henok-files-modal-actions {
    grid-template-columns:
      1fr;
  }


  .henok-files-modal-actions
  [data-hfm-confirm] {
    order:
      -1;
  }


  .henok-files-toolbar {
    gap:
      8px !important;
  }


  .henok-files-auto-sync,
  .henok-files-toolbar .btn {
    font-size:
      13px;
  }

}


/*
 * Reduce motion
 */

@media (
  prefers-reduced-motion:
  reduce
) {

  .henok-files-modal {
    animation:
      none !important;
  }

}

/* HENOK_MODAL_VISIBILITY_V14_12C */
.henok-files-modal-backdrop:not([hidden]){display:flex!important;opacity:1!important;visibility:visible!important;position:fixed!important;inset:0!important;z-index:2147483000!important;align-items:center!important;justify-content:center!important;padding:18px!important;background:rgba(4,16,38,.78)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.henok-files-modal-backdrop[hidden]{display:none!important}
.henok-files-modal{display:block!important;opacity:1!important;visibility:visible!important;width:min(480px,100%)!important;max-height:82dvh!important;overflow:auto!important;padding:26px!important;border:1px solid #d7e1ef!important;border-radius:26px!important;background:#fff!important;color:#10203d!important;box-shadow:0 28px 80px rgba(0,15,45,.40)!important}
.henok-files-modal *{opacity:1!important;visibility:visible!important}
.henok-files-modal [hidden]{display:none!important}
.henok-files-modal h3{color:#10203d!important;-webkit-text-fill-color:#10203d!important}
.henok-files-modal-message,.henok-files-modal-field>span{color:#667895!important;-webkit-text-fill-color:#667895!important}
.henok-files-modal-field input{display:block!important;width:100%!important;min-height:50px!important;box-sizing:border-box!important;background:#fff!important;color:#10203d!important;-webkit-text-fill-color:#10203d!important;border:1px solid #cbd8ea!important;border-radius:14px!important}
.henok-files-modal-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
.henok-files-modal-actions .btn{display:flex!important;align-items:center!important;justify-content:center!important;min-height:50px!important;font-weight:800!important}
.henok-files-modal-actions [data-hfm-cancel]{background:#edf3fb!important;color:#28466f!important;-webkit-text-fill-color:#28466f!important}
.henok-files-modal-actions [data-hfm-confirm]{background:#2864e8!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.henok-files-modal-backdrop.is-danger [data-hfm-confirm]{background:#ed433b!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.henok-files-modal-close{display:grid!important;background:#edf3fb!important;color:#40546f!important;-webkit-text-fill-color:#40546f!important}
@media(max-width:760px){.henok-files-modal-backdrop:not([hidden]){align-items:flex-end!important;padding:10px!important}.henok-files-modal{width:100%!important;border-radius:26px 26px 18px 18px!important}}

/* ========================================================
   HENOK_V14_13_CONSOLE_FINAL
   Consolas integradas
   ======================================================== */

.console,
.hosting-console,
[data-console],
[data-hosting-console]{
  overflow:hidden!important;
}

.console-input,
form.console-input,
[data-console-form]{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  padding:8px 9px 9px!important;

  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;

  background:#081522!important;

  border:0!important;
  border-top:1px solid #1e3856!important;

  border-radius:0!important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025)!important;
}


.console-input > span,
[data-console-form] > span{
  margin:0!important;
  padding:0 2px!important;

  background:transparent!important;

  color:#67a5ff!important;
  -webkit-text-fill-color:#67a5ff!important;

  font-size:13px!important;
  font-weight:850!important;

  white-space:nowrap!important;
}


.console-input input,
[data-console-form] input{
  box-sizing:border-box!important;

  width:100%!important;
  min-width:0!important;
  height:44px!important;

  margin:0!important;
  padding:0 13px!important;

  border:
    1px solid
    #203b5d!important;

  border-radius:
    11px!important;

  outline:0!important;

  background:
    #0d1d2e!important;

  color:
    #edf5ff!important;

  -webkit-text-fill-color:
    #edf5ff!important;

  caret-color:
    #72acff!important;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace!important;

  font-size:
    14px!important;

  box-shadow:
    inset 0 2px 7px
    rgba(0,0,0,.20)!important;
}


.console-input input::placeholder,
[data-console-form] input::placeholder{
  color:#71839b!important;
  -webkit-text-fill-color:#71839b!important;
  opacity:1!important;
}


.console-input input:focus,
[data-console-form] input:focus{
  border-color:#3778df!important;

  box-shadow:
    0 0 0 3px
    rgba(49,119,226,.12),
    inset 0 2px 7px
    rgba(0,0,0,.20)!important;
}


.console-input button,
[data-console-form] button{
  box-sizing:border-box!important;

  min-width:92px!important;
  height:44px!important;

  margin:0!important;
  padding:0 18px!important;

  border:
    1px solid
    #2868d7!important;

  border-radius:
    11px!important;

  background:
    linear-gradient(
      180deg,
      #347cf0 0%,
      #2365d3 100%
    )!important;

  color:#fff!important;
  -webkit-text-fill-color:#fff!important;

  font-size:14px!important;
  font-weight:850!important;

  box-shadow:
    0 5px 14px
    rgba(31,100,214,.23)!important;

  cursor:pointer!important;
}


.console-input button:hover,
[data-console-form] button:hover{
  filter:brightness(1.07)!important;
}


.console-input button:active,
[data-console-form] button:active{
  transform:translateY(1px)!important;
}


.console-output + .console-input,
[data-console-output] + [data-console-form]{
  margin-top:0!important;
}


/* Modal operaciones generales */

.henok-action-modal[hidden]{
  display:none!important;
}

.henok-action-modal{
  position:fixed!important;
  inset:0!important;

  z-index:2147483100!important;

  display:flex!important;

  align-items:center!important;
  justify-content:center!important;

  padding:20px!important;

  background:
    rgba(4,16,38,.76)!important;
}


.henok-action-modal-card{
  box-sizing:border-box!important;

  width:min(100%,470px)!important;

  max-height:
    calc(100dvh - 40px)!important;

  overflow:auto!important;

  padding:26px!important;

  border:
    1px solid
    #d8e3f1!important;

  border-radius:
    25px!important;

  background:
    #fff!important;

  color:
    #10203d!important;

  box-shadow:
    0 28px 90px
    rgba(0,14,40,.38)!important;
}


.henok-action-modal-card h3{
  margin:0 0 8px!important;
  color:#10203d!important;
  font-size:23px!important;
}


.henok-action-modal-card p{
  margin:0 0 18px!important;

  color:#677895!important;

  line-height:1.55!important;
}


.henok-action-modal-icon{
  width:52px!important;
  height:52px!important;

  display:grid!important;
  place-items:center!important;

  margin-bottom:16px!important;

  border-radius:16px!important;

  background:#eaf2ff!important;
  color:#2365dc!important;

  font-size:23px!important;
  font-weight:900!important;
}


.henok-action-modal.is-danger
.henok-action-modal-icon{
  background:#fff0ee!important;
  color:#e4433c!important;
}


.henok-action-verify[hidden],
.henok-action-error[hidden]{
  display:none!important;
}


.henok-action-verify{
  display:block!important;
  margin-top:14px!important;
}


.henok-action-verify span{
  display:block!important;

  margin-bottom:7px!important;

  color:#344762!important;

  font-size:13px!important;
  font-weight:750!important;
}


.henok-action-verify strong{
  color:#d93632!important;
}


.henok-action-verify input{
  box-sizing:border-box!important;

  width:100%!important;
  height:50px!important;

  padding:0 14px!important;

  border:
    1px solid
    #cbd8ea!important;

  border-radius:
    13px!important;

  background:#fff!important;

  color:#10203d!important;
  -webkit-text-fill-color:#10203d!important;

  font-size:16px!important;
}


.henok-action-error{
  margin-top:10px!important;
  padding:10px 12px!important;

  border-radius:11px!important;

  background:#fff0ef!important;
  color:#c52f2b!important;

  font-size:13px!important;
  font-weight:750!important;
}


.henok-action-modal-actions{
  display:grid!important;

  grid-template-columns:
    1fr 1fr!important;

  gap:10px!important;

  margin-top:22px!important;
}


.henok-action-modal-actions .btn{
  width:100%!important;
  min-height:48px!important;
  margin:0!important;
}


.henok-operation-busy{
  opacity:.62!important;
  pointer-events:none!important;
  cursor:wait!important;
}


@media(max-width:620px){

  .console-input,
  form.console-input,
  [data-console-form]{
    gap:6px!important;
    padding:7px 8px 8px!important;
  }


  .console-input > span,
  [data-console-form] > span{
    font-size:11px!important;
  }


  .console-input input,
  [data-console-form] input{
    height:42px!important;

    padding:
      0 10px!important;

    font-size:
      13px!important;
  }


  .console-input button,
  [data-console-form] button{
    min-width:72px!important;
    height:42px!important;

    padding:
      0 12px!important;

    font-size:
      13px!important;
  }


  .henok-action-modal{
    align-items:flex-end!important;

    padding:
      10px
      10px
      max(
        16px,
        env(safe-area-inset-bottom)
      )!important;
  }


  .henok-action-modal-card{
    width:100%!important;

    padding:
      23px
      19px
      19px!important;

    border-radius:
      25px 25px
      18px 18px!important;
  }

}


/* ========================================================
   HENOK_V14_14_MODAL_UNIFIED
   Una sola ventana + handlers originales
   ======================================================== */

dialog.modal.henok-unified-modal {
  box-sizing:
    border-box !important;

  width:
    min(92vw, 520px) !important;

  max-width:
    520px !important;

  padding:
    0 !important;

  overflow:
    visible !important;

  border:
    0 !important;

  border-radius:
    28px !important;

  background:
    transparent !important;

  color:
    #10203d !important;

  box-shadow:
    none !important;
}


dialog.modal.henok-unified-modal::backdrop {
  background:
    rgba(5,18,42,.70) !important;

  -webkit-backdrop-filter:
    blur(8px) !important;

  backdrop-filter:
    blur(8px) !important;
}


.henok-unified-modal
.henok-unified-modal-card {
  box-sizing:
    border-box !important;

  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  padding:
    27px !important;

  overflow:
    auto !important;

  border:
    1px solid #dbe5f2 !important;

  border-radius:
    28px !important;

  background:
    #fff !important;

  color:
    #10203d !important;

  box-shadow:
    0 30px 90px
    rgba(0,14,40,.34) !important;
}


.henok-unified-modal
.henok-unified-modal-card
h1,

.henok-unified-modal
.henok-unified-modal-card
h2,

.henok-unified-modal
.henok-unified-modal-card
h3 {
  margin-top:
    0 !important;

  color:
    #10203d !important;

  -webkit-text-fill-color:
    #10203d !important;
}


.henok-unified-modal
.henok-unified-modal-card p {
  color:
    #687a98 !important;

  -webkit-text-fill-color:
    #687a98 !important;

  line-height:
    1.5 !important;
}


.henok-unified-icon {
  box-sizing:
    border-box !important;

  width:
    58px !important;

  height:
    58px !important;

  display:
    grid !important;

  place-items:
    center !important;

  margin:
    0 0 18px !important;

  border-radius:
    18px !important;

  background:
    #eaf2ff !important;

  color:
    #2867df !important;
}


.henok-unified-icon svg {
  display:
    block !important;

  width:
    29px !important;

  height:
    29px !important;

  opacity:
    1 !important;

  visibility:
    visible !important;
}


.henok-unified-danger
.henok-unified-icon {
  background:
    #fff0ee !important;

  color:
    #df453d !important;
}


.henok-unified-warning
.henok-unified-icon {
  background:
    #fff6df !important;

  color:
    #bb7800 !important;
}


.henok-v1414-requirement {
  display:
    block !important;

  margin:
    19px 0 !important;
}


.henok-v1414-requirement span {
  display:
    block !important;

  margin-bottom:
    8px !important;

  color:
    #354762 !important;

  -webkit-text-fill-color:
    #354762 !important;

  font-size:
    14px !important;

  font-weight:
    750 !important;
}


.henok-v1414-requirement strong {
  color:
    #d93f38 !important;

  -webkit-text-fill-color:
    #d93f38 !important;
}


.henok-v1414-requirement input {
  box-sizing:
    border-box !important;

  width:
    100% !important;

  min-height:
    52px !important;

  padding:
    0 14px !important;

  border:
    1px solid #cad7e9 !important;

  border-radius:
    14px !important;

  outline:
    0 !important;

  background:
    #fff !important;

  color:
    #10203d !important;

  -webkit-text-fill-color:
    #10203d !important;

  caret-color:
    #2867df !important;

  font-size:
    16px !important;

  font-weight:
    500 !important;
}


.henok-v1414-requirement
input::placeholder {
  color:
    #a9b4c5 !important;

  -webkit-text-fill-color:
    #a9b4c5 !important;

  opacity:
    1 !important;

  font-weight:
    400 !important;
}


.henok-unified-modal
.modal-actions {
  display:
    grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr) !important;

  gap:
    10px !important;

  margin-top:
    22px !important;
}


.henok-unified-modal
.modal-actions
.btn {
  width:
    100% !important;

  min-height:
    50px !important;

  margin:
    0 !important;

  border-radius:
    14px !important;

  font-weight:
    800 !important;
}


.henok-unified-modal
.modal-actions
.btn-primary {
  border-color:
    #2c6fea !important;

  background:
    linear-gradient(
      180deg,
      #3f7df0,
      #2867df
    ) !important;

  color:
    #fff !important;

  -webkit-text-fill-color:
    #fff !important;
}


.henok-unified-modal
.modal-actions
.btn-danger {
  border-color:
    #df4a43 !important;

  background:
    #df4a43 !important;

  color:
    #fff !important;

  -webkit-text-fill-color:
    #fff !important;
}


.henok-unified-modal
.modal-actions
.btn-warning {
  border-color:
    #e7b956 !important;

  background:
    #fff0c9 !important;

  color:
    #895900 !important;

  -webkit-text-fill-color:
    #895900 !important;
}


.henok-unified-modal
.modal-actions
.btn-soft,

.henok-unified-modal
.modal-actions
[value="cancel"] {
  background:
    #edf4ff !important;

  color:
    #24569e !important;

  -webkit-text-fill-color:
    #24569e !important;
}


.henok-unified-modal
.modal-actions
button:disabled {
  opacity:
    .48 !important;

  cursor:
    not-allowed !important;
}


/*
 * Ocultar cualquier contenedor de icono antiguo
 * solamente cuando nuestro SVG ya fue instalado.
 */

.henok-unified-modal
.feature-icon.henok-unified-icon {
  font-size:
    0 !important;
}


@media(max-width:760px) {

  dialog.modal.henok-unified-modal {
    position:
      fixed !important;

    inset:
      auto 10px
      max(
        12px,
        env(safe-area-inset-bottom)
      )
      10px !important;

    width:
      auto !important;

    max-width:
      none !important;

    margin:
      0 !important;

    max-height:
      84dvh !important;
  }


  .henok-unified-modal
  .henok-unified-modal-card {
    max-height:
      84dvh !important;

    padding:
      24px 21px 20px !important;

    border-radius:
      27px 27px
      19px 19px !important;
  }


  .henok-unified-modal
  .modal-actions {
    position:
      sticky !important;

    bottom:
      -1px !important;

    padding-top:
      10px !important;

    background:
      #fff !important;
  }

}


@media(max-width:420px) {

  .henok-unified-modal
  .modal-actions {
    grid-template-columns:
      1fr !important;
  }


  .henok-unified-modal
  .modal-actions
  .btn-primary,

  .henok-unified-modal
  .modal-actions
  .btn-danger,

  .henok-unified-modal
  .modal-actions
  .btn-warning {
    order:
      -1 !important;
  }

}

/* HENOK_V14_15_VISUAL_POLISH */

/* Oculta únicamente contenedores de icono realmente vacíos. */
.henok-empty-icon-box {
  display: none !important;
}

/* Iconos de modales: cuadrados compactos y consistentes. */
.henok-unified-modal .henok-unified-icon,
.henok-files-modal .henok-files-modal-icon,
.henok-icon-compact {
  box-sizing: border-box !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.henok-unified-modal .henok-unified-icon svg,
.henok-files-modal .henok-files-modal-icon svg,
.henok-icon-compact svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  display: block !important;
}

/* Herramientas rápidas: mismo tamaño de icono en todas las plataformas. */
.henok-quick-tools-v1415 .henok-quick-icon-v1415 {
  box-sizing: border-box !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 !important;
  margin: 0 auto 12px !important;
  border: 1px solid #d7e4f8 !important;
  border-radius: 14px !important;
  background: #eef5ff !important;
  color: #2f66df !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.henok-quick-tools-v1415 .henok-quick-icon-v1415 svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  display: block !important;
  stroke: currentColor !important;
}

/* Evita que reglas antiguas vuelvan a agrandar el contenedor. */
.henok-quick-tools-v1415 .henok-quick-tool-v1415 [class*="icon"] {
  transform: none !important;
}

@media (max-width: 760px) {
  .henok-unified-modal .henok-unified-icon,
  .henok-files-modal .henok-files-modal-icon,
  .henok-icon-compact {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-radius: 13px !important;
  }

  .henok-quick-tools-v1415 .henok-quick-icon-v1415 {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-radius: 13px !important;
  }

  .henok-unified-modal .henok-unified-icon svg,
  .henok-files-modal .henok-files-modal-icon svg,
  .henok-icon-compact svg,
  .henok-quick-tools-v1415 .henok-quick-icon-v1415 svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }
}

/* ========================================================
   HENOK_V14_17_ICON_SIZE
   Un solo tamaño visual para modal.
   ======================================================== */

.henok-unified-modal
.henok-icon-v1417 {
  box-sizing:
    border-box !important;

  width:
    48px !important;

  height:
    48px !important;

  min-width:
    48px !important;

  min-height:
    48px !important;

  max-width:
    48px !important;

  max-height:
    48px !important;

  padding:
    0 !important;

  margin:
    0 0 15px !important;

  display:
    grid !important;

  place-items:
    center !important;

  border:
    1px solid
    #d8e4f7 !important;

  border-radius:
    14px !important;

  background:
    #edf4ff !important;

  color:
    #3267df !important;

  overflow:
    hidden !important;

  box-shadow:
    none !important;
}


.henok-unified-modal
.henok-icon-v1417 svg {
  display:
    block !important;

  width:
    23px !important;

  height:
    23px !important;

  max-width:
    23px !important;

  max-height:
    23px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  fill:
    none !important;

  stroke:
    currentColor !important;

  stroke-width:
    2 !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;
}


.henok-unified-danger
.henok-icon-v1417 {
  border-color:
    #f1d3d0 !important;

  background:
    #fff0ee !important;

  color:
    #df453e !important;
}


.henok-unified-warning
.henok-icon-v1417 {
  border-color:
    #efdfb9 !important;

  background:
    #fff7e5 !important;

  color:
    #b77800 !important;
}


/*
 * Evitar que reglas antiguas agranden nuevamente
 * el SVG que acabamos de copiar.
 */
.henok-unified-modal
.henok-icon-v1417
> svg {
  transform:
    none !important;
}


/*
 * Móvil: ligeramente más compacto.
 */
@media (max-width:760px) {

  .henok-unified-modal
  .henok-icon-v1417 {
    width:
      46px !important;

    height:
      46px !important;

    min-width:
      46px !important;

    min-height:
      46px !important;

    max-width:
      46px !important;

    max-height:
      46px !important;

    border-radius:
      13px !important;
  }


  .henok-unified-modal
  .henok-icon-v1417 svg {
    width:
      22px !important;

    height:
      22px !important;
  }

}


/* ========================================================
   HENOK_V14_18_ICON_CLEANUP
   Un único icono visible por modal.
   ======================================================== */


/*
 * Si existe el nuevo icono unificado,
 * ningún contenedor legacy vacío debe ocupar espacio.
 */

.henok-unified-modal-card:has(> .henok-unified-icon)
> .feature-icon:not(.henok-unified-icon):not(:has(svg,img,picture)),

.henok-unified-modal-card:has(> .henok-unified-icon)
> .modal-icon:not(.henok-unified-icon):not(:has(svg,img,picture)),

.henok-unified-modal-card:has(> .henok-unified-icon)
> .tool-icon:not(.henok-unified-icon):not(:has(svg,img,picture)),

.henok-unified-modal-card:has(> .henok-unified-icon)
> .action-icon:not(.henok-unified-icon):not(:has(svg,img,picture)),

.henok-unified-modal-card:has(> .henok-unified-icon)
> .card-icon:not(.henok-unified-icon):not(:has(svg,img,picture)) {
  display:
    none !important;

  width:
    0 !important;

  height:
    0 !important;

  min-width:
    0 !important;

  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;
}


/*
 * El icono REAL queda siempre compacto.
 */

.henok-unified-modal-card
> .henok-unified-icon.henok-icon-v1417 {
  width:
    48px !important;

  height:
    48px !important;

  min-width:
    48px !important;

  min-height:
    48px !important;

  max-width:
    48px !important;

  max-height:
    48px !important;

  flex:
    0 0 48px !important;

  display:
    grid !important;

  place-items:
    center !important;

  margin:
    0 0 16px !important;

  padding:
    0 !important;

  border-radius:
    14px !important;
}


.henok-unified-modal-card
> .henok-unified-icon.henok-icon-v1417
svg {
  width:
    23px !important;

  height:
    23px !important;

  min-width:
    23px !important;

  min-height:
    23px !important;

  margin:
    0 !important;

  transform:
    none !important;
}


@media(max-width:760px) {

  .henok-unified-modal-card
  > .henok-unified-icon.henok-icon-v1417 {
    width:
      46px !important;

    height:
      46px !important;

    min-width:
      46px !important;

    min-height:
      46px !important;

    max-width:
      46px !important;

    max-height:
      46px !important;

    flex:
      0 0 46px !important;
  }


  .henok-unified-modal-card
  > .henok-unified-icon.henok-icon-v1417
  svg {
    width:
      22px !important;

    height:
      22px !important;
  }

}

/* === HENOK V14.25B MODAL ONLY BEGIN === */

/*
 * NO existen reglas para:
 * [data-mc-tool]
 * [data-mc-tool-command]
 * cards/grids
 *
 * Por lo tanto Día/Noche/Despejar y todas las tarjetas
 * vuelven a usar exclusivamente su diseño original.
 */

.mc-tool-modal-icon {
  color: #3267df;
}

.mc-tool-modal-icon > .mc-tool-modal-svg {
  display: block !important;

  width: 24px !important;
  height: 24px !important;

  min-width: 24px !important;
  min-height: 24px !important;

  max-width: 24px !important;
  max-height: 24px !important;

  margin: 0 !important;
  padding: 0 !important;

  pointer-events: none !important;
}

@media (max-width: 640px) {

  .mc-tool-modal-icon > .mc-tool-modal-svg {
    width: 22px !important;
    height: 22px !important;

    min-width: 22px !important;
    min-height: 22px !important;

    max-width: 22px !important;
    max-height: 22px !important;
  }

}

/* === HENOK V14.25B MODAL ONLY END === */

/* === HENOK V14.27 MC TOOLS ROOT UI BEGIN === */

/* ---------------------------------------------------------
   MODAL DE HERRAMIENTAS

   Estructura final:

   [ ICONO ] [ TITULO
               DESCRIPCION ]

   Un solo icono.
   --------------------------------------------------------- */

.mc-tool-dialog .mc-tool-modal-head {
  display: grid !important;

  grid-template-columns:
    42px minmax(0, 1fr) !important;

  grid-template-rows:
    auto !important;

  align-items:
    start !important;

  justify-items:
    stretch !important;

  column-gap:
    14px !important;

  row-gap:
    0 !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


.mc-tool-dialog
.mc-tool-modal-head
> .mc-tool-modal-icon {

  grid-column:
    1 !important;

  grid-row:
    1 !important;

  display:
    grid !important;

  place-items:
    center !important;

  box-sizing:
    border-box !important;

  width:
    42px !important;

  height:
    42px !important;

  min-width:
    42px !important;

  min-height:
    42px !important;

  max-width:
    42px !important;

  max-height:
    42px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border-radius:
    13px !important;

  background:
    #edf5ff !important;

  color:
    #3267df !important;
}


/*
 * El segundo DIV original contiene
 * únicamente h2 + p.
 */
.mc-tool-dialog
.mc-tool-modal-head
> .mc-tool-modal-icon
+ div {

  grid-column:
    2 !important;

  grid-row:
    1 !important;

  min-width:
    0 !important;

  align-self:
    center !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


.mc-tool-dialog
.mc-tool-modal-head
h2 {

  margin:
    0 0 4px !important;
}


.mc-tool-dialog
.mc-tool-modal-head
p {

  margin:
    0 !important;
}


/*
 * Icono REAL copiado desde la tarjeta.
 */
.mc-tool-dialog
.mc-tool-modal-icon
> .mc-tool-modal-svg {

  display:
    block !important;

  width:
    24px !important;

  height:
    24px !important;

  min-width:
    24px !important;

  min-height:
    24px !important;

  max-width:
    24px !important;

  max-height:
    24px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  pointer-events:
    none !important;
}


/*
 * Seguridad:
 * panel-final no debería volver a crearlos,
 * pero si un DOM viejo conservara alguno,
 * jamás se muestra dentro de mc-tool-dialog.
 */
.mc-tool-dialog
.henok-unified-icon {

  display:
    none !important;
}


/* ---------------------------------------------------------
   TARJETAS

   Las tres piezas usan filas fijas:

   ICONO
   TITULO
   DESCRIPCION

   Día, Noche, Despejar, Spawn, Teleport,
   Gamemode, Kick, Ban, Kill y Whitelist
   quedan alineados exactamente igual.
   --------------------------------------------------------- */

.mc-tools-grid
.mc-tool-button {

  display:
    grid !important;

  grid-template-columns:
    minmax(0, 1fr) !important;

  grid-template-rows:
    56px min-content min-content !important;

  align-content:
    center !important;

  align-items:
    center !important;

  justify-items:
    center !important;

  column-gap:
    0 !important;

  row-gap:
    5px !important;

  padding:
    14px 10px !important;

  text-align:
    center !important;
}


/*
 * Tanto el host SVG moderno como el span original
 * ocupan LA MISMA FILA.
 *
 * Así un wrapper residual nunca crea un hueco extra.
 */
.mc-tools-grid
.mc-tool-button
> .mc-tool-emoji,

.mc-tools-grid
.mc-tool-button
> .henok-tool-icon-host {

  grid-column:
    1 !important;

  grid-row:
    1 !important;

  align-self:
    center !important;

  justify-self:
    center !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


.mc-tools-grid
.mc-tool-button
> b {

  grid-column:
    1 !important;

  grid-row:
    2 !important;

  align-self:
    center !important;

  justify-self:
    center !important;

  margin:
    0 !important;

  padding:
    0 !important;

  line-height:
    1.2 !important;
}


.mc-tools-grid
.mc-tool-button
> small {

  grid-column:
    1 !important;

  grid-row:
    3 !important;

  align-self:
    center !important;

  justify-self:
    center !important;

  margin:
    0 !important;

  padding:
    0 !important;

  line-height:
    1.25 !important;
}


/*
 * Un mc-tool-emoji vacío no ocupa espacio.
 */
.mc-tools-grid
.mc-tool-button
> .mc-tool-emoji:empty {

  display:
    none !important;
}


@media (max-width: 650px) {

  .mc-tools-grid
  .mc-tool-button {

    grid-template-rows:
      52px min-content min-content !important;

    row-gap:
      5px !important;
  }


  .mc-tool-dialog
  .mc-tool-modal-head {

    grid-template-columns:
      40px minmax(0, 1fr) !important;

    column-gap:
      12px !important;
  }


  .mc-tool-dialog
  .mc-tool-modal-head
  > .mc-tool-modal-icon {

    width:
      40px !important;

    height:
      40px !important;

    min-width:
      40px !important;

    min-height:
      40px !important;

    max-width:
      40px !important;

    max-height:
      40px !important;
  }


  .mc-tool-dialog
  .mc-tool-modal-icon
  > .mc-tool-modal-svg {

    width:
      22px !important;

    height:
      22px !important;

    min-width:
      22px !important;

    min-height:
      22px !important;

    max-width:
      22px !important;

    max-height:
      22px !important;
  }

}

/* === HENOK V14.27 MC TOOLS ROOT UI END === */

/* === HENOK V14.28 PLAYER PICKER UI BEGIN === */

/* Header del modal más suave */
.mc-tool-dialog .mc-tool-modal-head h2 {
  color: #2f63ad !important;
  font-weight: 800 !important;
}

.mc-tool-dialog .mc-tool-modal-head p {
  color: #6d7c96 !important;
}

.mc-tool-dialog .mc-tool-field > span {
  color: #2d3c56 !important;
}

.mc-tool-dialog .mc-tool-close {
  color: #6e7c95 !important;
}

/* Player picker */
.mc-tool-player-wrap {
  position: relative;
}

.mc-tool-player-wrap > input {
  padding-right: 48px !important;
}

.mc-tool-player-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #edf5ff;
  color: #3267df;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}

.mc-tool-player-toggle:active {
  transform: translateY(-50%) scale(.98);
}

.mc-tool-player-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  border: 1px solid #d7e4fb;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(20, 55, 110, .12);
  padding: 8px;
  max-height: 220px;
  overflow: auto;
}

.mc-tool-player-option {
  width: 100%;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #22324f;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.mc-tool-player-option:hover,
.mc-tool-player-option:focus {
  background: #f3f7ff;
  outline: none;
}

.mc-tool-player-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #4d7df0;
  flex: 0 0 8px;
}

.mc-tool-player-empty {
  padding: 12px 14px;
  border-radius: 11px;
  background: #f8fbff;
  color: #72829c;
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 640px) {

  .mc-tool-player-menu {
    max-height: 200px;
    border-radius: 13px;
  }

  .mc-tool-player-option {
    min-height: 44px;
  }

}

/* === HENOK V14.28 PLAYER PICKER UI END === */

/* === HENOK V14.30 PLACEHOLDERS BEGIN === */

/*
 * Texto REAL escrito por el usuario.
 */
.mc-tool-dialog
.mc-tool-field input {

  color: #293b59 !important;

  font-weight: 500 !important;
}


/*
 * Texto de ejemplo / ayuda.
 *
 * Debe verse claramente como algo que
 * todavía NO ha sido escrito.
 */
.mc-tool-dialog
.mc-tool-field input::placeholder {

  color: #9aa8bc !important;

  opacity: 1 !important;

  font-weight: 400 !important;
}


/*
 * Safari / iPhone.
 */
.mc-tool-dialog
.mc-tool-field input::-webkit-input-placeholder {

  color: #9aa8bc !important;

  opacity: 1 !important;

  font-weight: 400 !important;
}


/*
 * Firefox.
 */
.mc-tool-dialog
.mc-tool-field input::-moz-placeholder {

  color: #9aa8bc !important;

  opacity: 1 !important;

  font-weight: 400 !important;
}


/*
 * Cuando el campo está enfocado,
 * el placeholder se suaviza un poco más.
 */
.mc-tool-dialog
.mc-tool-field input:focus::placeholder {

  color: #b1bccb !important;
}


/*
 * Compatible también con los inputs
 * dentro del selector de jugadores.
 */
.mc-tool-dialog
.mc-player-picker > input::placeholder {

  color: #9aa8bc !important;

  opacity: 1 !important;

  font-weight: 400 !important;
}

/* === HENOK V14.30 PLACEHOLDERS END === */

/* === HENOK V14.32 MOTION SYSTEM BEGIN === */

:root {
  --hn-motion-ease:
    cubic-bezier(.22, 1, .36, 1);

  --hn-motion-fast:
    160ms;

  --hn-motion-normal:
    420ms;

  --hn-motion-shadow:
    0 16px 34px rgba(23, 58, 105, .10);

  --hn-motion-shadow-hover:
    0 21px 42px rgba(23, 58, 105, .15);
}


/* ==========================================================
   REVEAL GENERAL
   ========================================================== */

html.henok-panel-shell
.henok-v147c-reveal {

  opacity:
    0;

  transform:
    translate3d(0, 22px, 0)
    scale(.988);

  transform-origin:
    center center;

  transition:
    opacity
      460ms
      ease
      var(--v147c-delay, 0ms),

    transform
      520ms
      var(--hn-motion-ease)
      var(--v147c-delay, 0ms);

  will-change:
    transform,
    opacity;
}


html.henok-panel-shell
.henok-v147c-reveal.henok-v147c-visible {

  opacity:
    1;

  transform:
    translate3d(0, 0, 0)
    scale(1);

  will-change:
    auto;
}


/* ==========================================================
   PANELES
   ========================================================== */

html.henok-panel-shell
.app-layout
.panel-card {

  transition:
    border-color
      180ms ease,

    box-shadow
      220ms ease,

    background-color
      180ms ease;
}


/* ==========================================================
   ELEMENTOS INTERACTIVOS
   Solo dispositivos que realmente tienen hover.
   ========================================================== */

@media
  (min-width: 1024px)
  and (hover: hover)
  and (pointer: fine) {


  html.henok-panel-shell
  .app-layout
  .panel-card:hover {

    border-color:
      rgba(64, 119, 195, .22);

    box-shadow:
      var(--hn-motion-shadow);
  }


  html.henok-panel-shell
  .app-layout
  .metric-card,

  html.henok-panel-shell
  .app-layout
  .mc-tool-button,

  html.henok-panel-shell
  .app-layout
  .quick-grid > a,

  html.henok-panel-shell
  .app-layout
  .screen-card {

    transition:
      transform
        220ms
        var(--hn-motion-ease),

      box-shadow
        220ms ease,

      border-color
        180ms ease,

      background-color
        180ms ease;
  }


  html.henok-panel-shell
  .app-layout
  .metric-card:hover,

  html.henok-panel-shell
  .app-layout
  .mc-tool-button:hover,

  html.henok-panel-shell
  .app-layout
  .quick-grid > a:hover,

  html.henok-panel-shell
  .app-layout
  .screen-card:hover {

    transform:
      translate3d(0, -4px, 0)
      scale(1.008)
      !important;

    box-shadow:
      var(--hn-motion-shadow-hover);
  }


  html.henok-panel-shell
  .app-layout
  .mc-tool-button:hover {

    border-color:
      #b8d1f3;
  }


  /* -----------------------------------------------
     ICONOS
     ----------------------------------------------- */

  html.henok-panel-shell
  .metric-card
  .metric-icon,

  html.henok-panel-shell
  .mc-tool-button
  .henok-tool-icon-host {

    transition:
      transform
        220ms
        var(--hn-motion-ease);
  }


  html.henok-panel-shell
  .metric-card:hover
  .metric-icon,

  html.henok-panel-shell
  .mc-tool-button:hover
  .henok-tool-icon-host {

    transform:
      translateY(-2px)
      scale(1.06);
  }


  /* -----------------------------------------------
     BOTONES
     ----------------------------------------------- */

  html.henok-panel-shell
  .btn {

    transition:
      transform
        160ms
        var(--hn-motion-ease),

      box-shadow
        180ms ease,

      background-color
        180ms ease,

      border-color
        180ms ease,

      color
        180ms ease;
  }


  html.henok-panel-shell
  .btn:hover:not(:disabled) {

    transform:
      translateY(-2px);
  }


  html.henok-panel-shell
  .btn:active:not(:disabled) {

    transform:
      translateY(0)
      scale(.985);
  }


  /* -----------------------------------------------
     SIDEBAR
     ----------------------------------------------- */

  html.henok-panel-shell
  .side-nav a {

    transition:
      transform
        180ms
        var(--hn-motion-ease),

      background
        180ms ease,

      color
        180ms ease,

      box-shadow
        180ms ease;
  }


  html.henok-panel-shell
  .side-nav a:hover {

    transform:
      translateX(3px);
  }


  html.henok-panel-shell
  .side-nav a svg {

    transition:
      transform
        200ms
        var(--hn-motion-ease);
  }


  html.henok-panel-shell
  .side-nav a:hover svg {

    transform:
      scale(1.08)
      translateX(1px);
  }

}


/* ==========================================================
   HOME / SERVICIOS / PLANES
   ========================================================== */

@media
  (min-width: 1024px)
  and (hover: hover)
  and (pointer: fine) {

  .hn-service-card,
  .hn-plan-card {

    transition:
      transform
        220ms
        var(--hn-motion-ease),

      box-shadow
        220ms ease,

      border-color
        180ms ease;
  }


  .hn-service-card:hover,
  .hn-plan-card:hover {

    transform:
      translate3d(0, -5px, 0);

    box-shadow:
      0 20px 40px
      rgba(29, 66, 117, .13);
  }


  .hn-service-card
  .hn-brand-icon {

    transition:
      transform
        220ms
        var(--hn-motion-ease);
  }


  .hn-service-card:hover
  .hn-brand-icon {

    transform:
      translateY(-2px)
      scale(1.045);
  }


  .hn-availability-btn:active {

    transform:
      translateY(0)
      scale(.985)
      !important;
  }

}


/* ==========================================================
   CAMBIO DE PÁGINA EN PC
   ========================================================== */

@media (min-width: 1024px) {

  html.henok-panel-shell
  .henok-transition-screen-v147c {

    background:
      rgba(247, 250, 255, .86);

    backdrop-filter:
      blur(9px)
      saturate(115%);

    -webkit-backdrop-filter:
      blur(9px)
      saturate(115%);

    transition:
      opacity
      170ms
      ease;
  }


  html.henok-panel-shell
  .henok-transition-brand-v147c {

    transition:
      opacity
        170ms ease,

      transform
        240ms
        var(--hn-motion-ease);
  }

}


/* ==========================================================
   TABLET
   Menos desplazamiento y menos escala.
   ========================================================== */

@media
  (min-width: 761px)
  and (max-width: 1023px) {

  html.henok-panel-shell
  .henok-v147c-reveal {

    transform:
      translate3d(0, 14px, 0)
      scale(.994);

    transition:
      opacity
        340ms
        ease
        var(--v147c-delay, 0ms),

      transform
        380ms
        var(--hn-motion-ease)
        var(--v147c-delay, 0ms);
  }


  html.henok-panel-shell
  .henok-v147c-reveal.henok-v147c-visible {

    transform:
      none;
  }


  html.henok-panel-shell
  .henok-transition-screen-v147c {

    backdrop-filter:
      blur(4px);

    -webkit-backdrop-filter:
      blur(4px);
  }

}


/* ==========================================================
   MÓVIL
   Movimiento corto, rápido y sin efectos pesados.
   ========================================================== */

@media (max-width: 760px) {

  html.henok-panel-shell
  .henok-v147c-reveal {

    transform:
      translate3d(0, 8px, 0);

    transition:
      opacity
        240ms ease,

      transform
        280ms
        var(--hn-motion-ease);

    transition-delay:
      0ms !important;
  }


  html.henok-panel-shell
  .henok-v147c-reveal.henok-v147c-visible {

    transform:
      none;
  }


  html.henok-panel-shell
  .panel-card,

  html.henok-panel-shell
  .metric-card,

  html.henok-panel-shell
  .mc-tool-button {

    box-shadow:
      none;
  }


  html.henok-panel-shell
  .btn:active:not(:disabled),

  .hn-availability-btn:active {

    transform:
      scale(.985);
  }


  html.henok-panel-shell
  .henok-transition-screen-v147c {

    backdrop-filter:
      none;

    -webkit-backdrop-filter:
      none;

    transition:
      opacity
      90ms ease;
  }


  html.henok-panel-shell
  .henok-transition-logo-v147c {

    animation-duration:
      .9s;
  }

}


/* ==========================================================
   ACCESIBILIDAD
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  html.henok-panel-shell
  .henok-v147c-reveal,

  html.henok-panel-shell
  .henok-v147c-visible,

  html.henok-panel-shell
  .panel-card,

  html.henok-panel-shell
  .metric-card,

  html.henok-panel-shell
  .mc-tool-button,

  html.henok-panel-shell
  .quick-grid > a,

  html.henok-panel-shell
  .screen-card,

  html.henok-panel-shell
  .btn,

  html.henok-panel-shell
  .side-nav a,

  html.henok-panel-shell
  .side-nav a svg,

  .hn-service-card,

  .hn-plan-card,

  .hn-brand-icon,

  .hn-availability-btn {

    animation:
      none !important;

    transition:
      none !important;

    transform:
      none !important;
  }

}

/* === HENOK V14.32 MOTION SYSTEM END === */

/* === HENOK V14.33 HOME RESPONSIVE BEGIN === */


/* ==========================================================
   PLANES
   ========================================================== */

.hn-plan-grid {

  display:
    flex !important;

  width:
    100% !important;

  gap:
    18px !important;

  overflow-x:
    auto !important;

  overflow-y:
    hidden !important;

  padding:
    8px 3px 18px !important;

  scroll-snap-type:
    x mandatory !important;

  scroll-padding-inline:
    3px !important;

  scroll-behavior:
    smooth !important;

  overscroll-behavior-inline:
    contain;

  -webkit-overflow-scrolling:
    touch;
}


.hn-plan-card {

  flex:
    0 0 calc((100% - 36px) / 3) !important;

  min-width:
    0 !important;

  scroll-snap-align:
    start !important;

  scroll-snap-stop:
    normal;
}


/* scrollbar PC */
.hn-plan-grid {

  scrollbar-width:
    thin;

  scrollbar-color:
    #b8cae4 #edf3fb;
}


.hn-plan-grid::-webkit-scrollbar {

  height:
    7px;
}


.hn-plan-grid::-webkit-scrollbar-track {

  background:
    #edf3fb;

  border-radius:
    999px;
}


.hn-plan-grid::-webkit-scrollbar-thumb {

  background:
    #b8cae4;

  border-radius:
    999px;
}



/* ==========================================================
   SERVICIOS DIGITALES
   3 columnas desktop
   ========================================================== */

.hn-digital-section
.hn-service-grid {

  display:
    grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  align-items:
    stretch !important;

  gap:
    14px !important;
}


.hn-digital-section
.hn-service-card {

  box-sizing:
    border-box !important;

  min-width:
    0 !important;

  min-height:
    190px !important;

  height:
    100% !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  justify-content:
    flex-start !important;

  padding:
    18px !important;
}


.hn-digital-section
.hn-service-card
> b {

  margin:
    0 0 4px !important;

  line-height:
    1.2 !important;
}


.hn-digital-section
.hn-service-card
> small {

  display:
    block !important;

  margin:
    0 !important;

  min-height:
    30px !important;

  line-height:
    1.35 !important;
}


/*
 * Mantener TODOS los logos
 * dentro de la misma caja compacta.
 */
.hn-digital-section
.hn-brand-icon,

.hn-digital-section
.brand-tnt-stack,

.hn-digital-section
.brand-hbomax-stack,

.hn-digital-section
.hn-brand-icon.wide {

  box-sizing:
    border-box !important;

  width:
    56px !important;

  height:
    56px !important;

  min-width:
    56px !important;

  min-height:
    56px !important;

  max-width:
    56px !important;

  max-height:
    56px !important;

  flex:
    0 0 56px !important;

  margin:
    0 0 10px !important;
}


/*
 * Botón siempre abajo.
 */
.hn-digital-section
.hn-service-card
.hn-availability-btn {

  margin-top:
    auto !important;

  align-self:
    flex-start !important;
}



/* ==========================================================
   DESKTOP
   ========================================================== */

@media
  (min-width: 1024px)
  and (hover: hover)
  and (pointer: fine) {

  .hn-plan-card,
  .hn-service-card {

    transition:
      transform
        220ms
        cubic-bezier(.22,1,.36,1),

      box-shadow
        220ms ease,

      border-color
        180ms ease !important;
  }


  .hn-plan-card:hover,
  .hn-service-card:hover {

    transform:
      translate3d(0,-5px,0);

    box-shadow:
      0 20px 40px
      rgba(25,67,125,.12) !important;
  }


  .hn-service-card
  .hn-brand-icon,

  .hn-service-card
  .brand-tnt-stack,

  .hn-service-card
  .brand-hbomax-stack {

    transition:
      transform
      220ms
      cubic-bezier(.22,1,.36,1);
  }


  .hn-service-card:hover
  .hn-brand-icon,

  .hn-service-card:hover
  .brand-tnt-stack,

  .hn-service-card:hover
  .brand-hbomax-stack {

    transform:
      translateY(-2px)
      scale(1.045);
  }

}



/* ==========================================================
   TABLET
   2 planes / 2 servicios
   ========================================================== */

@media
  (min-width: 761px)
  and (max-width: 1023px) {

  .hn-plan-grid {

    gap:
      16px !important;
  }


  .hn-plan-card {

    flex:
      0 0 calc((100% - 16px) / 2) !important;
  }


  .hn-digital-section
  .hn-service-grid {

    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap:
      12px !important;
  }


  .hn-digital-section
  .hn-service-card {

    min-height:
      180px !important;
  }

}



/* ==========================================================
   PHONE
   casi una tarjeta de plan visible
   2 servicios por fila
   ========================================================== */

@media (max-width: 760px) {

  .hn-plan-grid {

    gap:
      14px !important;

    margin-right:
      -12px !important;

    padding:
      7px 42px 13px 1px !important;

    scrollbar-width:
      none;
  }


  .hn-plan-grid::-webkit-scrollbar {

    display:
      none;
  }


  .hn-plan-card {

    flex:
      0 0 86% !important;

    scroll-snap-align:
      start !important;
  }


  .hn-digital-section {

    padding:
      64px 0 !important;
  }


  .hn-digital-section
  .hn-service-grid {

    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap:
      9px !important;
  }


  .hn-digital-section
  .hn-service-card {

    min-height:
      168px !important;

    padding:
      13px !important;

    border-radius:
      14px !important;
  }


  .hn-digital-section
  .hn-brand-icon,

  .hn-digital-section
  .brand-tnt-stack,

  .hn-digital-section
  .brand-hbomax-stack,

  .hn-digital-section
  .hn-brand-icon.wide {

    width:
      56px !important;

    height:
      56px !important;

    min-width:
      56px !important;

    min-height:
      56px !important;

    max-width:
      56px !important;

    max-height:
      56px !important;

    flex:
      0 0 56px !important;
  }


  .hn-digital-section
  .hn-service-card
  > b {

    font-size:
      12px !important;
  }


  .hn-digital-section
  .hn-service-card
  > small {

    min-height:
      27px !important;

    font-size:
      9px !important;
  }


  .hn-digital-section
  .hn-availability-btn {

    padding:
      7px 9px !important;

    font-size:
      10px !important;

    line-height:
      1.15 !important;

    border-radius:
      9px !important;
  }


  /*
   * Feedback táctil sin hover falso.
   */
  .hn-plan-card:active,
  .hn-service-card:active {

    transform:
      scale(.992);
  }


  .hn-availability-btn:active {

    transform:
      scale(.97) !important;
  }

}



/* ==========================================================
   TELÉFONOS ESTRECHOS
   Seguimos usando 2 columnas.
   ========================================================== */

@media (max-width: 390px) {

  .hn-digital-section
  .hn-service-grid {

    gap:
      8px !important;
  }


  .hn-digital-section
  .hn-service-card {

    padding:
      11px !important;

    min-height:
      164px !important;
  }


  .hn-digital-section
  .hn-availability-btn {

    padding:
      6px 7px !important;

    font-size:
      9px !important;
  }

}



/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hn-plan-grid {

    scroll-behavior:
      auto !important;
  }


  .hn-plan-card,
  .hn-service-card,
  .hn-brand-icon,
  .brand-tnt-stack,
  .brand-hbomax-stack,
  .hn-availability-btn {

    animation:
      none !important;

    transition:
      none !important;
  }

}

/* === HENOK V14.33 HOME RESPONSIVE END === */

/* === HENOK V14.34 DIGITAL TICKETS BEGIN === */


/* ==========================================================
   HOME MODAL
   ========================================================== */

.digital-request-dialog {

  width:
    min(94vw, 560px);

  max-width:
    560px;

  padding:
    0;

  border:
    0;

  border-radius:
    21px;

  background:
    transparent;

  overflow:
    visible;
}


.digital-request-dialog::backdrop {

  background:
    rgba(13, 28, 50, .48);

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);
}


.digital-request-modal {

  position:
    relative;

  padding:
    24px;

  border:
    1px solid #e1e9f4;

  border-radius:
    21px;

  background:
    #fff;

  box-shadow:
    0 24px 70px
    rgba(18, 48, 91, .19);
}


.digital-request-close {

  position:
    absolute;

  top:
    15px;

  right:
    16px;

  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    10px;

  background:
    #f3f6fa;

  color:
    #7d8b9f;

  font:
    inherit;

  font-size:
    21px;

  cursor:
    pointer;
}


.digital-request-modal-head {

  display:
    grid;

  grid-template-columns:
    46px minmax(0, 1fr);

  gap:
    14px;

  padding-right:
    35px;
}


.digital-request-modal-icon {

  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    14px;

  background:
    #edf5ff;

  color:
    #3470c2;
}


.digital-request-modal-head span {

  display:
    block;

  margin-bottom:
    4px;

  color:
    #6684ad;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    1.2px;
}


.digital-request-modal-head h2 {

  margin:
    0;

  color:
    #294f82;

  font-size:
    21px;

  line-height:
    1.2;
}


.digital-request-modal-head p {

  margin:
    6px 0 0;

  color:
    #7c8ba1;

  font-size:
    13px;

  line-height:
    1.55;
}


.digital-request-form {

  display:
    grid;

  gap:
    15px;

  margin-top:
    22px;
}


.digital-selected-service {

  padding:
    13px 14px;

  border:
    1px solid #dce7f5;

  border-radius:
    13px;

  background:
    #f8fbff;
}


.digital-selected-service small {

  display:
    block;

  margin-bottom:
    3px;

  color:
    #8b98aa;

  font-size:
    10px;
}


.digital-selected-service strong {

  color:
    #305f9f;

  font-size:
    15px;
}


.digital-request-form label,
.digital-reply-form label,
.digital-status-form label {

  display:
    grid;

  gap:
    7px;
}


.digital-request-form label > span,
.digital-reply-form label > span,
.digital-status-form label > span {

  color:
    #566a85;

  font-size:
    12px;

  font-weight:
    700;
}


.digital-request-form textarea,
.digital-reply-form textarea,
.digital-status-form select {

  box-sizing:
    border-box;

  width:
    100%;

  border:
    1px solid #dce5f0;

  border-radius:
    13px;

  background:
    #fff;

  color:
    #2c405c;

  font:
    inherit;

  font-size:
    14px;

  outline:
    0;
}


.digital-request-form textarea,
.digital-reply-form textarea {

  padding:
    13px 14px;

  resize:
    vertical;
}


.digital-status-form select {

  padding:
    11px 12px;
}


.digital-request-form textarea::placeholder,
.digital-reply-form textarea::placeholder {

  color:
    #a4afbf;

  font-weight:
    400;
}


.digital-request-form textarea:focus,
.digital-reply-form textarea:focus,
.digital-status-form select:focus {

  border-color:
    #8bb3e7;

  box-shadow:
    0 0 0 4px
    rgba(55, 115, 194, .09);
}


.digital-request-form-actions {

  display:
    flex;

  justify-content:
    flex-end;

  gap:
    9px;
}



/* ==========================================================
   STATUS
   ========================================================== */

.digital-status {

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    25px;

  padding:
    4px 9px;

  border:
    1px solid transparent;

  border-radius:
    999px;

  font-size:
    10px;

  font-weight:
    800;

  white-space:
    nowrap;
}


.digital-status-pending {

  background:
    #fff7e8;

  border-color:
    #f2dca9;

  color:
    #a16a13;
}


.digital-status-reviewing {

  background:
    #eef5ff;

  border-color:
    #c9dcf6;

  color:
    #3569a9;
}


.digital-status-available {

  background:
    #edf9f3;

  border-color:
    #c5e8d5;

  color:
    #34805a;
}


.digital-status-assigned {

  background:
    #edf4ff;

  border-color:
    #c7daf7;

  color:
    #3265ad;
}


.digital-status-unavailable {

  background:
    #fff0f1;

  border-color:
    #f0cbd0;

  color:
    #a54d59;
}


.digital-status-closed {

  background:
    #f1f3f6;

  border-color:
    #dce1e7;

  color:
    #727e8e;
}



/* ==========================================================
   LISTAS
   ========================================================== */

.digital-request-panel {

  scroll-margin-top:
    95px;
}


.digital-request-list {

  display:
    grid;

  gap:
    9px;

  margin-top:
    14px;
}


.digital-request-row {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    14px 15px;

  border:
    1px solid #e3eaf3;

  border-radius:
    13px;

  background:
    #fbfcfe;

  color:
    inherit;

  text-decoration:
    none;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}


.digital-request-row:hover {

  border-color:
    #c6daf4;

  background:
    #fff;

  box-shadow:
    0 9px 22px
    rgba(28, 67, 120, .07);

  transform:
    translateY(-1px);
}


.digital-request-row-main {

  min-width:
    0;

  display:
    grid;

  gap:
    3px;
}


.digital-request-row-main strong {

  color:
    #263b58;

  font-size:
    13px;
}


.digital-request-row-main > span {

  color:
    #78869a;

  font-size:
    11px;
}


.digital-request-row-main small {

  max-width:
    780px;

  overflow:
    hidden;

  color:
    #98a3b2;

  font-size:
    10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.digital-request-row-title {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.digital-request-row-title > span {

  color:
    #8492a5;

  font-size:
    10px;

  font-weight:
    700;
}



/* ==========================================================
   OWNER STATS
   ========================================================== */

.digital-owner-stats {

  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap:
    9px;

  margin-top:
    14px;

  margin-bottom:
    14px;
}


.digital-owner-stats > div {

  padding:
    12px;

  border:
    1px solid #e2eaf4;

  border-radius:
    12px;

  background:
    #f8fbff;
}


.digital-owner-stats span {

  display:
    block;

  color:
    #8593a6;

  font-size:
    10px;
}


.digital-owner-stats strong {

  display:
    block;

  margin-top:
    3px;

  color:
    #315e9a;

  font-size:
    20px;
}



/* ==========================================================
   THREAD / FORO
   ========================================================== */

.digital-thread-layout {

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr) 280px;

  align-items:
    start;

  gap:
    16px;
}


.digital-thread-main {

  min-width:
    0;
}


.digital-thread-side {

  display:
    grid;

  gap:
    13px;

  position:
    sticky;

  top:
    88px;
}


.digital-thread {

  display:
    grid;

  gap:
    12px;

  margin-top:
    14px;
}


.digital-message {

  max-width:
    86%;

  padding:
    14px 15px;

  border:
    1px solid #e1e8f1;

  border-radius:
    15px;

  background:
    #f8fafc;
}


.digital-message-user {

  justify-self:
    start;
}


.digital-message-owner {

  justify-self:
    end;

  border-color:
    #cbdcf4;

  background:
    #eef5ff;
}


.digital-message-system {

  max-width:
    100%;

  justify-self:
    stretch;

  padding:
    9px 12px;

  border-style:
    dashed;

  background:
    #fafbfc;
}


.digital-message header {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    8px;
}


.digital-message header > div {

  display:
    grid;

  gap:
    1px;
}


.digital-message header strong {

  color:
    #31445f;

  font-size:
    12px;
}


.digital-message header span,
.digital-message time {

  color:
    #95a1b1;

  font-size:
    9px;
}


.digital-message p {

  margin:
    0;

  color:
    #43536a;

  font-size:
    13px;

  line-height:
    1.6;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;
}


.digital-reply-form {

  display:
    grid;

  gap:
    12px;

  margin-top:
    19px;

  padding-top:
    17px;

  border-top:
    1px solid #e5ebf3;
}


.digital-reply-actions {

  display:
    flex;

  justify-content:
    flex-end;
}


.digital-thread-closed {

  margin-top:
    18px;

  padding:
    13px;

  border:
    1px solid #e1e6ed;

  border-radius:
    12px;

  background:
    #f6f7f9;

  color:
    #7c8795;

  font-size:
    12px;
}


.digital-request-details {

  display:
    grid;

  gap:
    10px;

  margin-top:
    13px;
}


.digital-request-details > div {

  padding-bottom:
    9px;

  border-bottom:
    1px solid #edf0f4;
}


.digital-request-details > div:last-child {

  padding-bottom:
    0;

  border-bottom:
    0;
}


.digital-request-details small {

  display:
    block;

  margin-bottom:
    2px;

  color:
    #939eae;

  font-size:
    9px;

  text-transform:
    uppercase;
}


.digital-request-details strong {

  color:
    #344861;

  font-size:
    12px;

  overflow-wrap:
    anywhere;
}


.digital-status-form {

  display:
    grid;

  gap:
    12px;

  margin-top:
    13px;
}



/* ==========================================================
   TABLET / MOBILE
   ========================================================== */

@media (max-width: 980px) {

  .digital-thread-layout {

    grid-template-columns:
      1fr;
  }


  .digital-thread-side {

    position:
      static;

    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }


  .digital-thread-side > a {

    grid-column:
      1 / -1;
  }

}


@media (max-width: 760px) {

  .digital-request-modal {

    padding:
      19px;
  }


  .digital-request-modal-head {

    grid-template-columns:
      42px minmax(0,1fr);

    gap:
      11px;
  }


  .digital-request-modal-icon {

    width:
      42px;

    height:
      42px;
  }


  .digital-request-modal-head h2 {

    font-size:
      18px;
  }


  .digital-request-form-actions {

    display:
      grid;

    grid-template-columns:
      1fr 1fr;
  }


  .digital-owner-stats {

    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }


  .digital-request-row {

    align-items:
      flex-start;

    padding:
      12px;
  }


  .digital-request-row-main small {

    white-space:
      normal;

    display:
      -webkit-box;

    -webkit-line-clamp:
      2;

    -webkit-box-orient:
      vertical;
  }


  .digital-thread-side {

    grid-template-columns:
      1fr;
  }


  .digital-message {

    max-width:
      94%;
  }


  .digital-message header {

    display:
      grid;

    gap:
      5px;
  }


  .digital-message-owner {

    margin-left:
      auto;
  }

}


/* === HENOK V14.34 DIGITAL TICKETS END === */

/* === HENOK V14.35 DIGITAL ACCOUNTS BEGIN === */

.digital-account-panel {
  scroll-margin-top: 95px;
}

.digital-account-stats {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  margin: 15px 0;
}

.digital-account-stats > div {
  padding: 13px;
  border: 1px solid #e1e9f4;
  border-radius: 13px;
  background: #f8fbff;
}

.digital-account-stats span {
  display: block;
  color: #8492a5;
  font-size: 10px;
}

.digital-account-stats strong {
  display: block;
  margin-top: 3px;
  color: #315f9e;
  font-size: 21px;
}

.digital-create-account,
.digital-account-edit {
  border: 1px solid #e0e8f3;
  border-radius: 14px;
  background: #fbfcfe;
}

.digital-create-account {
  margin: 14px 0 18px;
}

.digital-create-account > summary,
.digital-account-edit > summary {
  padding: 13px 15px;
  color: #3565a3;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.digital-account-form {
  display: grid;
  gap: 13px;
  padding: 4px 15px 15px;
}

.digital-account-form-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 11px;
}

.digital-account-form label {
  display: grid;
  gap: 6px;
}

.digital-account-form label > span {
  color: #60738d;
  font-size: 11px;
  font-weight: 700;
}

.digital-account-form label > small {
  color: #95a1b1;
  font-size: 9px;
}

.digital-account-form input,
.digital-account-form select,
.digital-account-form textarea,
.digital-add-profile input,
.digital-profile-row input,
.digital-profile-row select {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #dce5f0;
  border-radius: 11px;
  background: #fff;
  color: #30445f;
  font: inherit;
  font-size: 12px;
  outline: none;
}

.digital-account-form input,
.digital-account-form select,
.digital-add-profile input,
.digital-profile-row input,
.digital-profile-row select {
  min-height: 39px;
  padding: 8px 10px;
}

.digital-account-form textarea {
  padding: 10px 11px;
  resize: vertical;
}

.digital-account-form input:focus,
.digital-account-form select:focus,
.digital-account-form textarea:focus,
.digital-add-profile input:focus,
.digital-profile-row input:focus,
.digital-profile-row select:focus {
  border-color: #8fb6e7;
  box-shadow: 0 0 0 4px rgba(52,111,191,.08);
}

.digital-account-list {
  display: grid;
  gap: 13px;
}

.digital-account-card {
  padding: 16px;
  border: 1px solid #dfe8f3;
  border-radius: 16px;
  background: #fff;
}

.digital-account-card.is-disabled {
  background: #fafbfc;
  opacity: .78;
}

.digital-account-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.digital-account-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.digital-account-head > div > span {
  color: #5680b7;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.digital-account-head strong {
  color: #2b405d;
  font-size: 15px;
}

.digital-account-head small {
  color: #98a4b4;
  font-size: 9px;
}

.digital-account-state {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}

.digital-account-state.active {
  background: #edf8f2;
  color: #3a805c;
}

.digital-account-state.disabled {
  background: #f1f3f6;
  color: #778291;
}

.digital-account-info {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 10px;
  margin-top: 14px;
}

.digital-account-info > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #e7edf5;
  border-radius: 12px;
  background: #f9fbfd;
}

.digital-account-info small {
  display: block;
  margin-bottom: 4px;
  color: #929eae;
  font-size: 9px;
  text-transform: uppercase;
}

.digital-account-info strong {
  color: #364c69;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.digital-secret-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.digital-secret-row code {
  min-width: 110px;
  color: #315f9e;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.digital-account-profile-head {
  margin-top: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #edf1f6;
}

.digital-account-profile-head > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.digital-account-profile-head strong {
  color: #354a66;
  font-size: 12px;
}

.digital-account-profile-head span {
  color: #8d99a9;
  font-size: 10px;
}

.digital-profile-list {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.digital-profile-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 135px auto;
  align-items: center;
  gap: 7px;
}

.digital-profile-status {
  justify-self: start;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}

.digital-profile-status.assigned {
  background: #edf4ff;
  color: #3166ad;
}

.digital-profile-empty {
  padding: 10px;
  color: #97a2b1;
  font-size: 10px;
}

.digital-add-profile {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 7px;
  margin-top: 9px;
}

.digital-account-edit {
  margin-top: 14px;
}

.digital-account-toggle {
  align-content: start;
}

.digital-account-toggle input {
  width: 18px;
  min-height: 18px;
}

.digital-account-empty {
  margin-top: 14px;
}

@media (max-width:760px) {

  .digital-account-stats {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .digital-account-form-grid {
    grid-template-columns: 1fr;
  }

  .digital-account-info {
    grid-template-columns: 1fr;
  }

  .digital-profile-row {
    grid-template-columns: minmax(0,1fr) 115px;
  }

  .digital-profile-row .btn {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .digital-account-card {
    padding: 13px;
  }

  .digital-secret-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
  }

}

@media (max-width:420px) {

  .digital-profile-row {
    grid-template-columns: 1fr;
  }

  .digital-profile-row .btn {
    grid-column: auto;
    justify-self: stretch;
  }

  .digital-secret-row {
    grid-template-columns: 1fr 1fr;
  }

  .digital-secret-row code {
    grid-column: 1 / -1;
  }

}

/* === HENOK V14.35 DIGITAL ACCOUNTS END === */

/* === HENOK V14.36 DIGITAL ASSIGNMENTS BEGIN === */


.digital-assignment-form {

  display:
    grid;

  gap:
    12px;

  margin-top:
    14px;
}


.digital-assignment-form label {

  display:
    grid;

  gap:
    6px;
}


.digital-assignment-form label > span {

  color:
    #62758f;

  font-size:
    11px;

  font-weight:
    700;
}


.digital-assignment-form select {

  box-sizing:
    border-box;

  width:
    100%;

  min-height:
    42px;

  padding:
    9px 11px;

  border:
    1px solid #dce5f0;

  border-radius:
    11px;

  background:
    #fff;

  color:
    #30445f;

  font:
    inherit;

  font-size:
    12px;

  outline:
    none;
}


.digital-assignment-form select:focus {

  border-color:
    #8fb6e7;

  box-shadow:
    0 0 0 4px
    rgba(52,111,191,.08);
}


.digital-assignment-form button:disabled {

  opacity:
    .55;

  cursor:
    not-allowed;
}


.digital-no-stock {

  margin-top:
    13px;

  padding:
    14px;

  border:
    1px dashed #d9e3ef;

  border-radius:
    13px;

  background:
    #fafcff;
}


.digital-no-stock strong {

  color:
    #566b87;

  font-size:
    12px;
}


.digital-no-stock p {

  margin:
    5px 0 10px;

  color:
    #8a97a8;

  font-size:
    10px;

  line-height:
    1.5;
}



/* =========================================================
   CREDENCIAL ASIGNADA
   ========================================================= */

.digital-access-card {

  border-color:
    #cbdcf3 !important;
}


.digital-access-details {

  display:
    grid;

  gap:
    8px;

  margin-top:
    13px;
}


.digital-access-details > div {

  padding:
    10px 11px;

  border:
    1px solid #e4eaf2;

  border-radius:
    11px;

  background:
    #f9fbfd;
}


.digital-access-details small {

  display:
    block;

  margin-bottom:
    3px;

  color:
    #929faf;

  font-size:
    9px;

  text-transform:
    uppercase;
}


.digital-access-details strong,
.digital-access-details code {

  display:
    block;

  color:
    #345171;

  font-size:
    11px;

  font-weight:
    700;

  overflow-wrap:
    anywhere;
}


.digital-access-details code {

  color:
    #2f63a8;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
}


.digital-access-actions {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    7px;

  margin-top:
    10px;
}


.digital-access-security {

  margin:
    9px 0 0;

  color:
    #909cac;

  font-size:
    9px;

  line-height:
    1.5;
}


.digital-unassign-form {

  margin-top:
    13px;

  padding-top:
    12px;

  border-top:
    1px solid #e7edf4;
}



/* =========================================================
   OWNER: QUIEN OCUPA CADA PERFIL
   ========================================================= */

.digital-profile-assignee {

  grid-column:
    1 / -1;

  display:
    grid;

  grid-template-columns:
    auto minmax(0,1fr) auto;

  align-items:
    center;

  gap:
    7px;

  margin-top:
    -2px;

  padding:
    7px 9px;

  border:
    1px solid #dce7f5;

  border-radius:
    9px;

  background:
    #f5f9ff;
}


.digital-profile-assignee strong {

  color:
    #345f98;

  font-size:
    10px;
}


.digital-profile-assignee span {

  min-width:
    0;

  overflow:
    hidden;

  color:
    #7c899b;

  font-size:
    9px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.digital-profile-assignee a {

  color:
    #3971ba;

  font-size:
    9px;

  font-weight:
    800;

  text-decoration:
    none;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:760px) {

  .digital-access-actions {

    grid-template-columns:
      1fr;
  }


  .digital-profile-assignee {

    grid-template-columns:
      1fr auto;
  }


  .digital-profile-assignee span {

    grid-column:
      1 / -1;
  }

}


@media (max-width:420px) {

  .digital-profile-assignee {

    grid-template-columns:
      1fr;
  }


  .digital-profile-assignee span {

    grid-column:
      auto;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }

}


/* === HENOK V14.36 DIGITAL ASSIGNMENTS END === */

/* === HENOK V14.37 MOTION POLISH BEGIN === */


/* ==========================================================
   VARIABLES
   ========================================================== */

:root {

  --hn1437-ease:
    cubic-bezier(.22, .8, .28, 1);

  --hn1437-ease-soft:
    cubic-bezier(.25, .65, .3, 1);

  --hn1437-shadow-soft:
    0 12px 28px
    rgba(26, 63, 112, .09);

  --hn1437-shadow-hover:
    0 18px 38px
    rgba(26, 63, 112, .13);
}



/* ==========================================================
   MODAL SERVICIOS DIGITALES
   ========================================================== */

@keyframes hn1437ModalIn {

  from {

    opacity:
      0;

    transform:
      translate3d(0, 14px, 0)
      scale(.975);
  }

  to {

    opacity:
      1;

    transform:
      translate3d(0, 0, 0)
      scale(1);
  }
}


@keyframes hn1437ModalOut {

  from {

    opacity:
      1;

    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  to {

    opacity:
      0;

    transform:
      translate3d(0, 9px, 0)
      scale(.985);
  }
}


@keyframes hn1437BackdropIn {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


@keyframes hn1437BackdropOut {

  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}


.digital-request-dialog[open]:not(.hn1437-closing)
.digital-request-modal {

  animation:
    hn1437ModalIn
    220ms
    var(--hn1437-ease)
    both;
}


.digital-request-dialog[open]:not(.hn1437-closing)::backdrop {

  animation:
    hn1437BackdropIn
    180ms
    ease
    both;
}


.digital-request-dialog.hn1437-closing
.digital-request-modal {

  animation:
    hn1437ModalOut
    150ms
    ease
    both;
}


.digital-request-dialog.hn1437-closing::backdrop {

  animation:
    hn1437BackdropOut
    150ms
    ease
    both;
}



/* ==========================================================
   DETAILS / FORMULARIOS
   ========================================================== */

.digital-create-account[open]
.digital-account-form,

.digital-account-edit[open]
.digital-account-form {

  animation:
    hn1437DetailsIn
    190ms
    var(--hn1437-ease-soft)
    both;
}


@keyframes hn1437DetailsIn {

  from {

    opacity:
      0;

    transform:
      translate3d(0, 7px, 0);
  }

  to {

    opacity:
      1;

    transform:
      none;
  }
}



/* ==========================================================
   DESKTOP REVEAL ESPECIFICO
   Utiliza el observer V14.7c/V14.32 existente.
   ========================================================== */

@media (min-width: 1024px) {


  html.henok-panel-shell
  .digital-request-row.henok-v147c-reveal,

  html.henok-panel-shell
  .digital-account-card.henok-v147c-reveal,

  html.henok-panel-shell
  .digital-owner-stats > .henok-v147c-reveal,

  html.henok-panel-shell
  .digital-account-stats > .henok-v147c-reveal {

    transform:
      translate3d(0, 13px, 0)
      scale(.994);
  }


  html.henok-panel-shell
  .digital-profile-row.henok-v147c-reveal,

  html.henok-panel-shell
  .digital-profile-assignee.henok-v147c-reveal {

    transform:
      translate3d(9px, 0, 0);
  }


  html.henok-panel-shell
  .digital-message-user.henok-v147c-reveal {

    transform:
      translate3d(-13px, 6px, 0)
      scale(.995);
  }


  html.henok-panel-shell
  .digital-message-owner.henok-v147c-reveal {

    transform:
      translate3d(13px, 6px, 0)
      scale(.995);
  }


  html.henok-panel-shell
  .digital-message-system.henok-v147c-reveal {

    transform:
      translate3d(0, 7px, 0)
      scale(.997);
  }


  html.henok-panel-shell
  .digital-access-card.henok-v147c-reveal,

  html.henok-panel-shell
  .digital-no-stock.henok-v147c-reveal {

    transform:
      translate3d(0, 11px, 0)
      scale(.992);
  }


  html.henok-panel-shell
  .digital-request-row.henok-v147c-visible,

  html.henok-panel-shell
  .digital-account-card.henok-v147c-visible,

  html.henok-panel-shell
  .digital-profile-row.henok-v147c-visible,

  html.henok-panel-shell
  .digital-profile-assignee.henok-v147c-visible,

  html.henok-panel-shell
  .digital-message.henok-v147c-visible,

  html.henok-panel-shell
  .digital-owner-stats > .henok-v147c-visible,

  html.henok-panel-shell
  .digital-account-stats > .henok-v147c-visible,

  html.henok-panel-shell
  .digital-access-card.henok-v147c-visible,

  html.henok-panel-shell
  .digital-no-stock.henok-v147c-visible {

    transform:
      none;
  }

}



/* ==========================================================
   DESKTOP HOVER / MICROINTERACTIONS
   Solo mouse/trackpad real.
   ========================================================== */

@media
  (min-width: 1024px)
  and (hover: hover)
  and (pointer: fine) {


  /* --------------------------------------------------------
     SOLICITUDES
     -------------------------------------------------------- */

  .digital-request-row {

    transition:
      transform
        190ms
        var(--hn1437-ease),

      box-shadow
        190ms
        ease,

      border-color
        170ms
        ease,

      background-color
        170ms
        ease;
  }


  .digital-request-row:hover,

  html.henok-panel-shell
  .digital-request-row.henok-v147c-visible:hover {

    transform:
      translate3d(0, -3px, 0);

    border-color:
      #c5d9f1;

    background:
      #fff;

    box-shadow:
      var(--hn1437-shadow-soft);
  }


  .digital-request-row
  .digital-status {

    transition:
      transform
        180ms
        var(--hn1437-ease),

      box-shadow
        180ms
        ease;
  }


  .digital-request-row:hover
  .digital-status {

    transform:
      scale(1.025);
  }



  /* --------------------------------------------------------
     CUENTAS
     -------------------------------------------------------- */

  .digital-account-card {

    transition:
      transform
        210ms
        var(--hn1437-ease),

      border-color
        180ms
        ease,

      box-shadow
        210ms
        ease;
  }


  .digital-account-card:hover,

  html.henok-panel-shell
  .digital-account-card.henok-v147c-visible:hover {

    transform:
      translate3d(0, -4px, 0);

    border-color:
      #c9dbf2;

    box-shadow:
      var(--hn1437-shadow-hover);
  }


  .digital-account-state {

    transition:
      transform
        180ms
        var(--hn1437-ease),

      box-shadow
        180ms
        ease;
  }


  .digital-account-card:hover
  .digital-account-state {

    transform:
      scale(1.035);
  }



  /* --------------------------------------------------------
     PERFILES
     -------------------------------------------------------- */

  .digital-profile-row {

    transition:
      transform
        170ms
        var(--hn1437-ease),

      background-color
        170ms
        ease;
  }


  .digital-profile-row:hover,

  html.henok-panel-shell
  .digital-profile-row.henok-v147c-visible:hover {

    transform:
      translate3d(3px, 0, 0);
  }


  .digital-profile-assignee {

    transition:
      transform
        170ms
        var(--hn1437-ease),

      border-color
        170ms
        ease,

      background-color
        170ms
        ease;
  }


  html.henok-panel-shell
  .digital-profile-assignee.henok-v147c-visible:hover,

  .digital-profile-assignee:hover {

    transform:
      translate3d(2px, 0, 0);

    border-color:
      #c8dcf5;

    background:
      #f1f7ff;
  }


  .digital-profile-assignee a {

    display:
      inline-block;

    transition:
      transform
        170ms
        var(--hn1437-ease),

      color
        170ms
        ease;
  }


  .digital-profile-assignee a:hover {

    transform:
      translateX(2px);
  }



  /* --------------------------------------------------------
     FORO / MENSAJES
     -------------------------------------------------------- */

  .digital-message {

    transition:
      transform
        180ms
        var(--hn1437-ease),

      box-shadow
        180ms
        ease,

      border-color
        180ms
        ease;
  }


  .digital-message:hover,

  html.henok-panel-shell
  .digital-message.henok-v147c-visible:hover {

    transform:
      translate3d(0, -1px, 0);

    box-shadow:
      0 8px 20px
      rgba(31, 69, 117, .06);
  }


  .digital-message-owner:hover {

    border-color:
      #bcd3f1;
  }



  /* --------------------------------------------------------
     CREDENCIAL ASIGNADA
     -------------------------------------------------------- */

  .digital-access-card {

    transition:
      transform
        210ms
        var(--hn1437-ease),

      border-color
        180ms
        ease,

      box-shadow
        210ms
        ease;
  }


  .digital-access-card:hover,

  html.henok-panel-shell
  .digital-access-card.henok-v147c-visible:hover {

    transform:
      translate3d(0, -3px, 0);

    border-color:
      #bcd4f2 !important;

    box-shadow:
      0 16px 34px
      rgba(39, 91, 158, .11);
  }



  /* --------------------------------------------------------
     METRICAS SERVICIOS
     -------------------------------------------------------- */

  .digital-owner-stats > div,

  .digital-account-stats > div {

    transition:
      transform
        190ms
        var(--hn1437-ease),

      border-color
        170ms
        ease,

      box-shadow
        190ms
        ease;
  }


  .digital-owner-stats > div:hover,

  .digital-account-stats > div:hover,

  html.henok-panel-shell
  .digital-owner-stats > .henok-v147c-visible:hover,

  html.henok-panel-shell
  .digital-account-stats > .henok-v147c-visible:hover {

    transform:
      translate3d(0, -3px, 0);

    border-color:
      #c7dbf3;

    box-shadow:
      0 11px 24px
      rgba(37, 77, 127, .08);
  }



  /* --------------------------------------------------------
     HOME SERVICIOS
     -------------------------------------------------------- */

  .hn-availability-btn {

    transition:
      transform
        170ms
        var(--hn1437-ease),

      box-shadow
        180ms
        ease,

      background-color
        180ms
        ease,

      border-color
        180ms
        ease !important;
  }


  .hn-availability-btn:hover {

    transform:
      translate3d(0, -2px, 0)
      !important;

    box-shadow:
      0 10px 20px
      rgba(39, 107, 255, .15)
      !important;
  }


  .hn-service-card:hover
  .hn-availability-btn {

    transform:
      translate3d(0, -1px, 0);
  }


  .hn-plan-card
  .btn {

    transition:
      transform
        170ms
        var(--hn1437-ease),

      box-shadow
        180ms
        ease;
  }


  .hn-plan-card:hover
  .btn {

    transform:
      translate3d(0, -1px, 0);
  }



  /* --------------------------------------------------------
     SIDEBAR
     Se conserva el movimiento V14.32 y se pule active.
     -------------------------------------------------------- */

  html.henok-panel-shell
  .side-nav a.active {

    box-shadow:
      inset 3px 0 0
      rgba(48, 105, 181, .75),

      0 7px 17px
      rgba(30, 67, 116, .055);
  }


  html.henok-panel-shell
  .side-nav a.active svg {

    transform:
      scale(1.035);
  }

}



/* ==========================================================
   TABLET
   Mantiene V14.32, solo microfeedback ligero.
   ========================================================== */

@media
  (min-width: 761px)
  and (max-width: 1023px) {


  .digital-request-row,
  .digital-account-card,
  .digital-profile-row,
  .digital-message,
  .digital-access-card {

    transition:
      border-color
        160ms
        ease,

      background-color
        160ms
        ease,

      box-shadow
        160ms
        ease;
  }


  .digital-request-dialog[open]:not(.hn1437-closing)
  .digital-request-modal {

    animation-duration:
      190ms;
  }

}



/* ==========================================================
   MOBILE
   Animación corta y liviana.
   ========================================================== */

@media (max-width: 760px) {


  .digital-request-dialog[open]:not(.hn1437-closing)
  .digital-request-modal {

    animation-duration:
      170ms;
  }


  .digital-request-dialog.hn1437-closing
  .digital-request-modal {

    animation-duration:
      130ms;
  }


  .digital-create-account[open]
  .digital-account-form,

  .digital-account-edit[open]
  .digital-account-form {

    animation-duration:
      150ms;
  }


  .digital-request-row,
  .digital-account-card,
  .digital-profile-row,
  .digital-message,
  .digital-access-card {

    transition:
      background-color
        140ms
        ease,

      border-color
        140ms
        ease;
  }

}



/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {


  .digital-request-dialog,
  .digital-request-dialog::backdrop,
  .digital-request-dialog
  .digital-request-modal,

  .digital-create-account
  .digital-account-form,

  .digital-account-edit
  .digital-account-form,

  .digital-request-row,
  .digital-account-card,
  .digital-profile-row,
  .digital-profile-assignee,
  .digital-message,
  .digital-access-card,
  .digital-no-stock,

  .digital-owner-stats > div,
  .digital-account-stats > div,

  .hn-availability-btn,
  .hn-service-card,
  .hn-plan-card,
  .hn-brand-icon {

    animation:
      none !important;

    transition:
      none !important;

    transform:
      none !important;
  }

}


/* === HENOK V14.37 MOTION POLISH END === */

/* === HENOK V14.37.1 PC MOTION FIX BEGIN === */


/* ==========================================================
   SOLO ESCRITORIO
   Ya no depende de html.henok-panel-shell
   ========================================================== */

@media (min-width: 1024px) {


  /*
   * Reveal base real.
   * Esta es la pieza que faltaba para Home y cualquier
   * página que no tenga henok-panel-shell.
   */

  .hn14371-motion-ready.henok-v147c-reveal {

    opacity:
      0;

    transform:
      translate3d(0, 20px, 0)
      scale(.992);

    transition:
      opacity
        390ms
        ease
        var(--hn14371-delay, 0ms),

      transform
        470ms
        cubic-bezier(.22,.8,.28,1)
        var(--hn14371-delay, 0ms);

    will-change:
      opacity,
      transform;
  }


  .hn14371-motion-ready.henok-v147c-reveal
  .hn-brand-icon {

    transition:
      transform
        360ms
        cubic-bezier(.22,.8,.28,1);
  }


  .hn14371-motion-ready.henok-v147c-reveal.henok-v147c-visible {

    opacity:
      1;

    transform:
      translate3d(0,0,0)
      scale(1);

    will-change:
      auto;
  }



  /* --------------------------------------------------------
     DISTINTAS ENTRADAS SEGÚN COMPONENTE
     -------------------------------------------------------- */

  .digital-profile-row.hn14371-motion-ready.henok-v147c-reveal,

  .digital-profile-assignee.hn14371-motion-ready.henok-v147c-reveal {

    transform:
      translate3d(14px,0,0);
  }


  .digital-message-user.hn14371-motion-ready.henok-v147c-reveal {

    transform:
      translate3d(-16px,7px,0)
      scale(.994);
  }


  .digital-message-owner.hn14371-motion-ready.henok-v147c-reveal {

    transform:
      translate3d(16px,7px,0)
      scale(.994);
  }


  .digital-message-system.hn14371-motion-ready.henok-v147c-reveal {

    transform:
      translate3d(0,10px,0)
      scale(.996);
  }


  .digital-profile-row.hn14371-motion-ready.henok-v147c-visible,

  .digital-profile-assignee.hn14371-motion-ready.henok-v147c-visible,

  .digital-message.hn14371-motion-ready.henok-v147c-visible {

    transform:
      none;
  }



  /* ========================================================
     LOADER / TRANSICION CON LOGO EN PC
     ======================================================== */

  .henok-transition-screen-v147c {

    align-items:
      center;

    justify-content:
      center;
  }


  .henok-transition-screen-v147c
  .henok-transition-brand-v147c {

    display:
      flex !important;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    gap:
      13px;

    opacity:
      1;

    visibility:
      visible;
  }


  .henok-transition-screen-v147c
  .henok-transition-logo-v147c {

    box-sizing:
      border-box;

    width:
      68px;

    height:
      68px;

    min-width:
      68px;

    min-height:
      68px;

    display:
      grid !important;

    place-items:
      center;

    opacity:
      1;

    visibility:
      visible;

    border:
      1px solid
      rgba(162,190,228,.65);

    border-radius:
      20px;

    background:
      rgba(255,255,255,.92);

    box-shadow:
      0 18px 48px
      rgba(28,64,112,.16);
  }


  .henok-transition-screen-v147c
  .henok-transition-logo-v147c
  img,

  .henok-transition-screen-v147c
  .henok-transition-logo-v147c
  svg {

    display:
      block !important;

    width:
      40px !important;

    height:
      40px !important;

    max-width:
      40px !important;

    max-height:
      40px !important;
  }


  .henok-transition-screen-v147c.hn14371-force-active {

    position:
      fixed !important;

    inset:
      0 !important;

    z-index:
      2147483000 !important;

    width:
      100vw !important;

    height:
      100vh !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    opacity:
      1 !important;

    visibility:
      visible !important;

    pointer-events:
      auto !important;

    background:
      rgba(247,250,255,.91)
      !important;

    backdrop-filter:
      blur(10px)
      saturate(118%);

    -webkit-backdrop-filter:
      blur(10px)
      saturate(118%);

    animation:
      hn14371ScreenIn
      135ms
      ease
      both;
  }


  .henok-transition-screen-v147c.hn14371-force-active
  .henok-transition-brand-v147c {

    animation:
      hn14371BrandIn
      230ms
      cubic-bezier(.22,.8,.28,1)
      both;
  }


  .henok-transition-screen-v147c.hn14371-force-active
  .henok-transition-logo-v147c {

    animation:
      hn14371LogoPulse
      920ms
      ease-in-out
      infinite;
  }


  @keyframes hn14371ScreenIn {

    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }


  @keyframes hn14371BrandIn {

    from {

      opacity:
        0;

      transform:
        translate3d(0,8px,0)
        scale(.96);
    }

    to {

      opacity:
        1;

      transform:
        none;
    }
  }


  @keyframes hn14371LogoPulse {

    0%,
    100% {

      transform:
        translate3d(0,0,0)
        scale(1);

      box-shadow:
        0 18px 48px
        rgba(28,64,112,.14);
    }

    50% {

      transform:
        translate3d(0,-2px,0)
        scale(1.045);

      box-shadow:
        0 22px 56px
        rgba(28,64,112,.22);
    }
  }



  /* ========================================================
     HOME - HOVER VISIBLE
     ======================================================== */

  @media
    (hover: hover)
    and (pointer: fine) {


    .hn-plan-card {

      transition:
        transform
          220ms
          cubic-bezier(.22,.8,.28,1),

        box-shadow
          220ms ease,

        border-color
          180ms ease;
    }


    .hn-plan-card:hover,

    .hn-plan-card.hn14371-motion-ready.henok-v147c-visible:hover {

      transform:
        translate3d(0,-6px,0)
        scale(1.008);

      box-shadow:
        0 22px 44px
        rgba(30,67,116,.14);
    }


    .hn-service-card {

      transition:
        transform
          220ms
          cubic-bezier(.22,.8,.28,1),

        box-shadow
          220ms ease,

        border-color
          180ms ease;
    }


    .hn-service-card:hover,

    .hn-service-card.hn14371-motion-ready.henok-v147c-visible:hover {

      transform:
        translate3d(0,-6px,0)
        scale(1.008);

      box-shadow:
        0 22px 44px
        rgba(30,67,116,.14);
    }


    .hn-service-card:hover
    .hn-brand-icon {

      transform:
        translate3d(0,-3px,0)
        scale(1.055);
    }


    .hn-availability-btn {

      transition:
        transform
          170ms
          cubic-bezier(.22,.8,.28,1),

        box-shadow
          180ms ease !important;
    }


    .hn-availability-btn:hover {

      transform:
        translate3d(0,-2px,0)
        !important;

      box-shadow:
        0 10px 24px
        rgba(42,105,195,.17)
        !important;
    }



    /* ------------------------------------------------------
       PANEL CARDS
       ------------------------------------------------------ */

    .panel-card {

      transition:
        transform
          200ms
          cubic-bezier(.22,.8,.28,1),

        box-shadow
          200ms ease,

        border-color
          180ms ease;
    }


    .panel-card.henok-v147c-visible:hover {

      transform:
        translate3d(0,-3px,0);

      box-shadow:
        0 16px 34px
        rgba(30,67,116,.095);
    }



    /* ------------------------------------------------------
       SOLICITUDES
       ------------------------------------------------------ */

    .digital-request-row:hover,

    .digital-request-row.hn14371-motion-ready.henok-v147c-visible:hover {

      transform:
        translate3d(0,-3px,0);

      border-color:
        #c4d8f0;

      box-shadow:
        0 13px 28px
        rgba(30,67,116,.10);
    }



    /* ------------------------------------------------------
       CUENTAS
       ------------------------------------------------------ */

    .digital-account-card:hover,

    .digital-account-card.hn14371-motion-ready.henok-v147c-visible:hover {

      transform:
        translate3d(0,-4px,0);

      border-color:
        #c4d8f0;

      box-shadow:
        0 18px 38px
        rgba(30,67,116,.12);
    }



    /* ------------------------------------------------------
       PERFILES
       ------------------------------------------------------ */

    .digital-profile-row:hover,

    .digital-profile-row.hn14371-motion-ready.henok-v147c-visible:hover {

      transform:
        translate3d(4px,0,0);
    }



    /* ------------------------------------------------------
       MENSAJES
       ------------------------------------------------------ */

    .digital-message:hover,

    .digital-message.hn14371-motion-ready.henok-v147c-visible:hover {

      transform:
        translate3d(0,-2px,0);

      box-shadow:
        0 8px 20px
        rgba(31,69,117,.07);
    }



    /* ------------------------------------------------------
       ACCESS CARD
       ------------------------------------------------------ */

    .digital-access-card:hover,

    .digital-access-card.hn14371-motion-ready.henok-v147c-visible:hover {

      transform:
        translate3d(0,-3px,0);

      box-shadow:
        0 17px 36px
        rgba(39,91,158,.12);
    }



    /* ------------------------------------------------------
       SIDEBAR
       Sin depender de html.henok-panel-shell
       ------------------------------------------------------ */

    .side-nav a {

      transition:
        transform
          180ms
          cubic-bezier(.22,.8,.28,1),

        background-color
          180ms ease,

        box-shadow
          180ms ease;
    }


    .side-nav a:hover {

      transform:
        translate3d(4px,0,0);
    }


    .side-nav a svg {

      transition:
        transform
        190ms
        cubic-bezier(.22,.8,.28,1);
    }


    .side-nav a:hover svg {

      transform:
        translate3d(1px,0,0)
        scale(1.08);
    }

  }

}



/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {


  .hn14371-motion-ready.henok-v147c-reveal,

  .hn14371-motion-ready.henok-v147c-visible {

    opacity:
      1 !important;

    transform:
      none !important;

    animation:
      none !important;

    transition:
      none !important;
  }


  .henok-transition-screen-v147c.hn14371-force-active
  .henok-transition-brand-v147c,

  .henok-transition-screen-v147c.hn14371-force-active
  .henok-transition-logo-v147c {

    animation:
      none !important;
  }

}


/* === HENOK V14.37.1 PC MOTION FIX END === */

/* === HENOK V14.38 DIGITAL LIFECYCLE BEGIN === */


/* ==========================================================
   BADGES
   ========================================================== */

.digital-lifecycle-badge {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    fit-content;

  min-height:
    23px;

  padding:
    4px 8px;

  border:
    1px solid transparent;

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .035em;

  white-space:
    nowrap;
}


.digital-lifecycle-badge.lifecycle-active {

  border-color:
    #bde7d0;

  background:
    #ecfbf3;

  color:
    #23734a;
}


.digital-lifecycle-badge.lifecycle-expiring {

  border-color:
    #f2d899;

  background:
    #fff8df;

  color:
    #986c12;
}


.digital-lifecycle-badge.lifecycle-today {

  border-color:
    #f2c77d;

  background:
    #fff2d2;

  color:
    #975e00;
}


.digital-lifecycle-badge.lifecycle-expired {

  border-color:
    #efb8b5;

  background:
    #fff0ef;

  color:
    #a2413d;
}


.digital-lifecycle-badge.lifecycle-unlimited {

  border-color:
    #bed4f3;

  background:
    #eff6ff;

  color:
    #3168a8;
}


.digital-lifecycle-badge.lifecycle-revoked {

  border-color:
    #d8dee7;

  background:
    #f4f6f8;

  color:
    #707d8e;
}



/* ==========================================================
   CLIENT ACCESS SUMMARY
   ========================================================== */

.digital-lifecycle-summary {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    8px;

  margin-top:
    11px;
}


.digital-lifecycle-summary > div {

  min-width:
    0;

  padding:
    10px 11px;

  border:
    1px solid #e3eaf3;

  border-radius:
    11px;

  background:
    #fafcff;
}


.digital-lifecycle-summary small {

  display:
    block;

  margin-bottom:
    4px;

  color:
    #909daf;

  font-size:
    9px;

  text-transform:
    uppercase;
}


.digital-lifecycle-summary strong:not(.digital-lifecycle-badge) {

  color:
    #3b5575;

  font-size:
    11px;

  overflow-wrap:
    anywhere;
}



/* ==========================================================
   OWNER CONTROLS
   ========================================================== */

.digital-lifecycle-owner {

  margin-top:
    13px;

  border:
    1px solid #dbe6f3;

  border-radius:
    13px;

  background:
    #fbfdff;

  overflow:
    hidden;
}


.digital-lifecycle-owner > summary {

  padding:
    12px 13px;

  color:
    #38649c;

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;

  user-select:
    none;
}


.digital-lifecycle-owner[open] > summary {

  border-bottom:
    1px solid #e2eaf3;

  background:
    #f6faff;
}


.digital-lifecycle-owner-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    10px;

  padding:
    12px;
}


.digital-lifecycle-owner-grid form {

  display:
    grid;

  align-content:
    start;

  gap:
    8px;

  min-width:
    0;

  padding:
    12px;

  border:
    1px solid #e2e9f2;

  border-radius:
    11px;

  background:
    #fff;
}


.digital-lifecycle-owner-grid form strong,
.digital-change-access > strong {

  color:
    #405d7f;

  font-size:
    11px;
}


.digital-lifecycle-owner-grid form p,
.digital-change-access > p {

  margin:
    0;

  color:
    #8795a7;

  font-size:
    9px;

  line-height:
    1.45;
}


.digital-lifecycle-owner input,
.digital-lifecycle-owner select,
.digital-lifecycle-fields input,
.digital-lifecycle-fields select {

  box-sizing:
    border-box;

  width:
    100%;

  min-height:
    40px;

  padding:
    8px 10px;

  border:
    1px solid #dae4ef;

  border-radius:
    10px;

  background:
    #fff;

  color:
    #405670;

  font:
    inherit;

  font-size:
    11px;
}


.digital-change-access {

  margin:
    0 12px 12px;

  padding:
    12px;

  border:
    1px solid #dce7f4;

  border-radius:
    11px;

  background:
    #f7fbff;
}



/* ==========================================================
   INITIAL ASSIGNMENT
   ========================================================== */

.digital-lifecycle-fields {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    9px;
}


.digital-lifecycle-fields label {

  display:
    grid;

  gap:
    5px;
}


.digital-lifecycle-fields label > span {

  color:
    #62758f;

  font-size:
    10px;

  font-weight:
    700;
}



/* ==========================================================
   DASHBOARD OWNER
   ========================================================== */

.digital-lifecycle-panel {

  scroll-margin-top:
    20px;
}


.digital-lifecycle-kpis {

  display:
    grid;

  grid-template-columns:
    repeat(
      6,
      minmax(0,1fr)
    );

  gap:
    8px;

  margin-top:
    13px;
}


.digital-lifecycle-kpis > div {

  display:
    grid;

  gap:
    4px;

  padding:
    11px;

  border:
    1px solid #e1e8f1;

  border-radius:
    12px;

  background:
    #fafcff;
}


.digital-lifecycle-kpis span {

  color:
    #8391a4;

  font-size:
    9px;

  font-weight:
    700;
}


.digital-lifecycle-kpis strong {

  color:
    #365779;

  font-size:
    20px;

  line-height:
    1;
}


.digital-lifecycle-kpis
.lifecycle-expiring {

  border-color:
    #efdba9;

  background:
    #fffaeb;
}


.digital-lifecycle-kpis
.lifecycle-today {

  border-color:
    #f1cf93;

  background:
    #fff6df;
}


.digital-lifecycle-kpis
.lifecycle-expired {

  border-color:
    #ecc6c3;

  background:
    #fff5f4;
}



/* ==========================================================
   STOCK
   ========================================================== */

.digital-stock-section {

  margin-top:
    16px;
}


.digital-stock-title {

  margin-bottom:
    8px;

  color:
    #5d718a;

  font-size:
    10px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    .04em;
}


.digital-stock-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:
    8px;
}


.digital-stock-card {

  min-width:
    0;

  padding:
    11px;

  border:
    1px solid #e1e8f1;

  border-radius:
    11px;

  background:
    #fff;
}


.digital-stock-card > div:first-child {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    7px;
}


.digital-stock-card strong {

  color:
    #3d5a79;

  font-size:
    11px;
}


.digital-stock-warning {

  padding:
    3px 6px;

  border-radius:
    999px;

  background:
    #fff0d7;

  color:
    #98600a;

  font-size:
    8px;

  font-weight:
    800;
}


.digital-stock-card.low-stock {

  border-color:
    #efd3a1;

  background:
    #fffaf0;
}


.digital-stock-numbers {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    7px;

  color:
    #8b98a9;

  font-size:
    9px;
}


.digital-stock-numbers b {

  color:
    #4b6684;
}



/* ==========================================================
   FILTROS
   ========================================================== */

.digital-lifecycle-filters {

  display:
    grid;

  grid-template-columns:
    minmax(180px,1.6fr)
    repeat(3,minmax(120px,1fr))
    auto
    auto;

  gap:
    7px;

  margin-top:
    16px;

  padding:
    11px;

  border:
    1px solid #e1e9f2;

  border-radius:
    12px;

  background:
    #f9fbfe;
}


.digital-lifecycle-filters input,
.digital-lifecycle-filters select {

  box-sizing:
    border-box;

  min-width:
    0;

  width:
    100%;

  min-height:
    39px;

  padding:
    8px 9px;

  border:
    1px solid #dbe4ef;

  border-radius:
    10px;

  background:
    #fff;

  color:
    #455d79;

  font:
    inherit;

  font-size:
    10px;
}


.digital-lifecycle-filters .btn {

  width:
    auto !important;

  min-height:
    39px !important;
}



/* ==========================================================
   RESULTS
   ========================================================== */

.digital-lifecycle-results {

  display:
    grid;

  gap:
    8px;

  margin-top:
    12px;
}


.digital-lifecycle-row {

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:
    10px;

  align-items:
    center;

  padding:
    12px;

  border:
    1px solid #e1e8f1;

  border-radius:
    12px;

  background:
    #fff;
}


.digital-lifecycle-row.lifecycle-expiring,
.digital-lifecycle-row.lifecycle-today {

  border-color:
    #ecd6a4;

  background:
    #fffdf7;
}


.digital-lifecycle-row.lifecycle-expired {

  border-color:
    #ecc8c5;

  background:
    #fff9f8;
}


.digital-lifecycle-row.lifecycle-revoked {

  opacity:
    .78;

  background:
    #fafbfc;
}


.digital-lifecycle-row-main {

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap:
    10px;

  min-width:
    0;
}


.digital-lifecycle-row-main > div {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    6px;

  min-width:
    0;
}


.digital-lifecycle-row-main strong {

  color:
    #405b79;

  font-size:
    11px;
}


.digital-lifecycle-row-main small,
.digital-lifecycle-client span {

  color:
    #8b98a9;

  font-size:
    9px;

  overflow-wrap:
    anywhere;
}


.digital-lifecycle-client {

  display:
    grid !important;

  gap:
    2px !important;
}


.digital-lifecycle-row-meta {

  grid-column:
    1 / -1;

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    7px;
}


.digital-lifecycle-row-meta > span {

  display:
    grid;

  gap:
    2px;

  min-width:
    0;

  padding:
    7px 8px;

  border-radius:
    8px;

  background:
    #f7f9fc;
}


.digital-lifecycle-row-meta small {

  color:
    #939faf;

  font-size:
    8px;

  text-transform:
    uppercase;
}


.digital-lifecycle-row-meta b {

  color:
    #536b86;

  font-size:
    9px;

  overflow-wrap:
    anywhere;
}


.digital-lifecycle-countdown {

  grid-column:
    1 / -1;

  width:
    fit-content;

  padding:
    5px 8px;

  border-radius:
    8px;

  background:
    #fff2dc;

  color:
    #946113;

  font-size:
    9px;
}



/* ==========================================================
   HISTORY
   ========================================================== */

.digital-history-list {

  display:
    grid;

  gap:
    7px;

  margin-top:
    12px;
}


.digital-history-item {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    9px 10px;

  border:
    1px solid #e4eaf2;

  border-radius:
    9px;

  background:
    #fafcff;
}


.digital-history-item > div {

  display:
    grid;

  gap:
    2px;
}


.digital-history-item strong {

  color:
    #48627e;

  font-size:
    10px;
}


.digital-history-item span,
.digital-history-item time {

  color:
    #8c98a8;

  font-size:
    8px;
}



/* ==========================================================
   DESKTOP HOVER
   ========================================================== */

@media
  (min-width:1024px)
  and (hover:hover)
  and (pointer:fine) {

  .digital-lifecycle-row,
  .digital-stock-card,
  .digital-lifecycle-kpis > div {

    transition:
      transform
        180ms
        cubic-bezier(.22,.8,.28,1),

      box-shadow
        180ms ease,

      border-color
        180ms ease;
  }


  .digital-lifecycle-row:hover,
  .digital-stock-card:hover,
  .digital-lifecycle-kpis > div:hover {

    transform:
      translate3d(0,-3px,0);

    box-shadow:
      0 12px 26px
      rgba(30,67,116,.085);
  }

}



/* ==========================================================
   TABLET
   ========================================================== */

@media
  (min-width:761px)
  and (max-width:1100px) {

  .digital-lifecycle-kpis {

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }


  .digital-stock-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .digital-lifecycle-filters {

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}



/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:760px) {

  .digital-lifecycle-summary {

    grid-template-columns:
      1fr;
  }


  .digital-lifecycle-owner-grid {

    grid-template-columns:
      1fr;
  }


  .digital-lifecycle-fields {

    grid-template-columns:
      1fr;
  }


  .digital-lifecycle-kpis {

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .digital-stock-grid {

    grid-template-columns:
      1fr;
  }


  .digital-lifecycle-filters {

    grid-template-columns:
      1fr;
  }


  .digital-lifecycle-filters
  .btn {

    width:
      100% !important;
  }


  .digital-lifecycle-row {

    grid-template-columns:
      1fr;
  }


  .digital-lifecycle-row-main {

    grid-template-columns:
      1fr;
  }


  .digital-lifecycle-row-meta {

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .digital-history-item {

    align-items:
      flex-start;

    flex-direction:
      column;
  }

}


@media (max-width:420px) {

  .digital-lifecycle-row-meta {

    grid-template-columns:
      1fr;
  }

}



/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion:reduce) {

  .digital-lifecycle-row,
  .digital-stock-card,
  .digital-lifecycle-kpis > div {

    animation:
      none !important;

    transition:
      none !important;

    transform:
      none !important;
  }

}


/* === HENOK V14.38 DIGITAL LIFECYCLE END === */


/* ==========================================================
   HENOK V14.39 DIGITAL REMINDERS BEGIN
   ========================================================== */

.digital-renewals-panel {

  scroll-margin-top:
    20px;
}


.digital-reminder-kpis {

  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0,1fr)
    );

  gap:
    8px;

  margin-top:
    13px;
}


.digital-reminder-kpis > div {

  display:
    grid;

  gap:
    4px;

  min-width:
    0;

  padding:
    11px;

  border:
    1px solid #e1e8f1;

  border-radius:
    12px;

  background:
    #fafcff;
}


.digital-reminder-kpis span {

  color:
    #8391a4;

  font-size:
    9px;

  font-weight:
    700;
}


.digital-reminder-kpis strong {

  color:
    #365779;

  font-size:
    20px;

  line-height:
    1;
}


.digital-reminder-kpis
.reminder-today {

  border-color:
    #eed09a;

  background:
    #fff8e7;
}


.digital-reminder-kpis
.reminder-expired {

  border-color:
    #ebc5c2;

  background:
    #fff5f4;
}


.digital-reminder-kpis
.reminder-failed {

  border-color:
    #efb8b5;

  background:
    #fff0ef;
}


.digital-renewal-list {

  display:
    grid;

  gap:
    9px;

  margin-top:
    14px;
}


.digital-renewal-row {

  display:
    grid;

  gap:
    10px;

  padding:
    12px;

  border:
    1px solid #e1e8f1;

  border-radius:
    12px;

  background:
    #fff;
}


.digital-renewal-row.renewal-today {

  border-color:
    #ebd19d;

  background:
    #fffdf7;
}


.digital-renewal-row.renewal-expired {

  border-color:
    #ebc7c4;

  background:
    #fff9f8;
}


.digital-renewal-head {

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap:
    10px;
}


.digital-renewal-head > div:first-child {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    6px;
}


.digital-renewal-head strong {

  color:
    #405b79;

  font-size:
    11px;
}


.digital-renewal-head small,
.digital-renewal-user span {

  color:
    #8a98aa;

  font-size:
    9px;
}


.digital-renewal-user {

  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.digital-renewal-user span {

  overflow-wrap:
    anywhere;
}


.digital-renewal-meta {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    7px;
}


.digital-renewal-meta > span {

  display:
    grid;

  gap:
    2px;

  min-width:
    0;

  padding:
    7px 8px;

  border-radius:
    8px;

  background:
    #f7f9fc;
}


.digital-renewal-meta small {

  color:
    #939faf;

  font-size:
    8px;

  text-transform:
    uppercase;
}


.digital-renewal-meta b {

  color:
    #536b86;

  font-size:
    9px;

  overflow-wrap:
    anywhere;
}


.digital-reminder-statuses {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;
}


.digital-reminder-statuses > span {

  padding:
    5px 7px;

  border-radius:
    8px;

  background:
    #f7f9fc;

  color:
    #8593a4;

  font-size:
    8px;
}


.digital-reminder-statuses b {

  color:
    #60758f;
}


.digital-reminder-statuses
.notice-sent {

  color:
    #26754d;
}


.digital-reminder-statuses
.notice-failed {

  color:
    #a54540;
}


.digital-renewal-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;
}


.digital-renewal-actions form {

  margin:
    0;
}


.digital-renewals-empty {

  margin-top:
    13px;

  padding:
    16px;

  border:
    1px dashed #dbe4ef;

  border-radius:
    12px;

  background:
    #fafcff;

  text-align:
    center;
}


.digital-renewals-empty strong {

  color:
    #516b88;

  font-size:
    11px;
}


.digital-renewals-empty p {

  margin:
    5px auto 0;

  max-width:
    520px;

  color:
    #8d99a8;

  font-size:
    9px;

  line-height:
    1.5;
}


@media
  (min-width:1024px)
  and (hover:hover)
  and (pointer:fine) {

  .digital-renewal-row,
  .digital-reminder-kpis > div {

    transition:
      transform 180ms cubic-bezier(.22,.8,.28,1),
      box-shadow 180ms ease,
      border-color 180ms ease;
  }


  .digital-renewal-row:hover,
  .digital-reminder-kpis > div:hover {

    transform:
      translate3d(
        0,
        -3px,
        0
      );

    box-shadow:
      0 12px 26px
      rgba(
        30,
        67,
        116,
        .085
      );
  }

}


@media
  (min-width:761px)
  and (max-width:1100px) {

  .digital-reminder-kpis {

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }


  .digital-renewal-meta {

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}


@media (max-width:760px) {

  .digital-reminder-kpis {

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .digital-renewal-head {

    grid-template-columns:
      1fr;
  }


  .digital-renewal-meta {

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .digital-renewal-actions {

    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .digital-renewal-actions
  .btn,

  .digital-renewal-actions
  form {

    width:
      100%;
  }

}


@media (max-width:420px) {

  .digital-reminder-kpis {

    grid-template-columns:
      1fr;
  }


  .digital-renewal-meta {

    grid-template-columns:
      1fr;
  }

}


@media (prefers-reduced-motion:reduce) {

  .digital-renewal-row,
  .digital-reminder-kpis > div {

    transition:
      none !important;

    transform:
      none !important;
  }

}


/* ==========================================================
   HENOK V14.39 DIGITAL REMINDERS END
   ========================================================== */


/* ==========================================================
   HENOK_V14_39_2_OWNER_NAV_FIX_V2
   ========================================================== */

@media
  (min-width:1024px)
  and (hover:hover)
  and (pointer:fine) {

  /*
   * El sistema moderno del sidebar puede envolver OWNER
   * dentro de .nav-group-owner.
   *
   * Ese wrapper es el responsable del panel/cuadro especial.
   * En desktop lo devolvemos al mismo aspecto del resto.
   */

  .sidebar-v14
  .nav-group-owner {

    margin:
      0 !important;

    padding:
      0 !important;

    border:
      0 !important;

    outline:
      0 !important;

    border-radius:
      0 !important;

    background:
      transparent !important;

    background-color:
      transparent !important;

    background-image:
      none !important;

    box-shadow:
      none !important;

    filter:
      none !important;
  }


  .sidebar-v14
  .nav-group-owner::before,

  .sidebar-v14
  .nav-group-owner::after {

    content:
      none !important;

    display:
      none !important;

    background:
      none !important;

    box-shadow:
      none !important;
  }


  .sidebar-v14
  .nav-group-owner
  .nav-group-links {

    margin:
      0 !important;

    padding:
      0 !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    background:
      transparent !important;

    background-image:
      none !important;

    box-shadow:
      none !important;

    gap:
      1px !important;
  }


  .sidebar-v14
  .nav-group-owner
  .nav-group-label,

  .sidebar
  .owner-side-label {

    display:
      block !important;

    width:
      auto !important;

    margin:
      14px 10px 5px !important;

    padding:
      0 !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    background:
      transparent !important;

    background-image:
      none !important;

    box-shadow:
      none !important;

    color:
      #8a9aad !important;

    font-size:
      9px !important;

    font-weight:
      800 !important;

    letter-spacing:
      .12em !important;

    line-height:
      1.35 !important;

    text-transform:
      uppercase !important;
  }


  .sidebar-v14
  .nav-group-owner
  .nav-group-label::before,

  .sidebar-v14
  .nav-group-owner
  .nav-group-label::after,

  .sidebar
  .owner-side-label::before,

  .sidebar
  .owner-side-label::after {

    content:
      none !important;

    display:
      none !important;
  }


  /*
   * Oracle VPS y Usuarios se comportan como cualquier
   * otro enlace normal del sidebar.
   */

  .sidebar
  .side-nav
  .owner-side-link,

  .sidebar-v14
  .nav-group-owner
  a {

    margin:
      1px 0 !important;

    border:
      1px solid transparent !important;

    border-radius:
      10px !important;

    background:
      transparent !important;

    background-color:
      transparent !important;

    background-image:
      none !important;

    box-shadow:
      none !important;

    filter:
      none !important;
  }


  .sidebar
  .side-nav
  .owner-side-link:hover,

  .sidebar-v14
  .nav-group-owner
  a:hover {

    border-color:
      #dce8f5 !important;

    background:
      #f5f9fd !important;

    background-image:
      none !important;

    box-shadow:
      none !important;
  }


  .sidebar
  .side-nav
  .owner-side-link.active,

  .sidebar-v14
  .nav-group-owner
  a.active {

    border-color:
      #d5e5f7 !important;

    background:
      #edf5fd !important;

    background-image:
      none !important;

    box-shadow:
      none !important;

    color:
      #315f91 !important;
  }


  .sidebar
  .side-nav
  .owner-side-link.active svg,

  .sidebar-v14
  .nav-group-owner
  a.active svg {

    color:
      #3972ad !important;
  }

}


/*
 * Newsletter vuelve al mismo sistema de navegación.
 */

.sidebar
.side-nav
a[href="/panel/newsletter"] {

  isolation:
    isolate;
}


/* ==========================================================
   END HENOK_V14_39_2_OWNER_NAV_FIX_V2
   ========================================================== */

/* HENOK_BOT_HOME_V3_CSS_START */

.hn-bot-v3 {
  margin: 20px auto 34px;
}

.hn-bot-v3,
.hn-bot-v3 * {
  box-sizing: border-box;
}

.hn-bot-v3__card {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: 26px;
  width: 100%;
  padding: 26px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(37, 99, 235, .13);
  box-shadow: 0 12px 35px rgba(30, 75, 160, .07);
  color: #12284b;
}

.hn-bot-v3__content {
  min-width: 0;
}

.hn-bot-v3__eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: #1860d9;
  margin-bottom: 10px;
}

.hn-bot-v3__content h2 {
  margin: 0 0 11px;
  color: #102b54;
  font-size: clamp(1.6rem, 2.7vw, 2.4rem);
  line-height: 1.13;
  letter-spacing: -.035em;
}

.hn-bot-v3__content p {
  color: #60728e;
  font-size: .95rem;
  line-height: 1.6;
  margin: 0 0 16px;
  max-width: 510px;
}

.hn-bot-v3__features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 19px;
}

.hn-bot-v3__features span {
  font-size: .78rem;
  font-weight: 650;
  padding: 7px 11px;
  border-radius: 999px;
  background: #edf4ff;
  color: #2360bd;
  border: 1px solid #dfebff;
}

.hn-bot-v3__invite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 43px;
  padding: 11px 20px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 11px;
  background: #1767e8;
  color: #fff;
}

.hn-bot-v3__invite:hover {
  background: #1055c7;
  color: #fff;
}

.hn-bot-v3__preview {
  min-width: 0;
  padding: 19px;
  border-radius: 19px;
  color: #fff;
  background: linear-gradient(145deg,#0a245b,#1246a0 65%,#176bea);
  box-shadow: 0 12px 30px rgba(20,75,175,.15);
}

.hn-bot-v3__topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: #bdcfff;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: 17px;
}

.hn-bot-v3__dots {
  color: #81b4ff;
  letter-spacing: .25em;
  white-space: nowrap;
}

.hn-bot-v3__identity {
  display: flex;
  gap: 15px;
  align-items: center;
  min-width: 0;
}

.hn-bot-v3__identity img {
  display: block;
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  object-fit: cover;
  border-radius: 19px;
  border: 1px solid rgba(255,255,255,.3);
}

.hn-bot-v3__identity-text {
  min-width: 0;
}

.hn-bot-v3__identity-text strong {
  display: block;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.2;
  margin-bottom: 6px;
}

.hn-bot-v3__identity-text span {
  display: block;
  color: #cadcff;
  font-size: .84rem;
  line-height: 1.35;
}

.hn-bot-v3__preview-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.hn-bot-v3__preview-footer span {
  font-size: .72rem;
  color: #deebff;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
}

@media (max-width: 760px) {
  .hn-bot-v3 {
    margin: 15px auto 23px;
  }

  .hn-bot-v3__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
    border-radius: 19px;
  }

  .hn-bot-v3__content h2 {
    font-size: clamp(1.45rem, 5.4vw, 1.85rem);
  }

  .hn-bot-v3__content p {
    font-size: .88rem;
    margin-bottom: 13px;
  }

  .hn-bot-v3__features {
    gap: 6px;
    margin-bottom: 15px;
  }

  .hn-bot-v3__features span {
    font-size: .72rem;
    padding: 6px 9px;
  }

  .hn-bot-v3__invite {
    width: 100%;
  }

  .hn-bot-v3__preview {
    padding: 14px;
    border-radius: 15px;
  }

  .hn-bot-v3__topline {
    margin-bottom: 10px;
  }

  .hn-bot-v3__identity {
    gap: 12px;
  }

  .hn-bot-v3__identity img {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
    border-radius: 14px;
  }

  .hn-bot-v3__identity-text strong {
    font-size: 1.1rem;
  }

  .hn-bot-v3__preview-footer {
    margin-top: 12px;
  }
}

/* HENOK_BOT_HOME_V3_CSS_END */