:root{--bg:#cbd0d1;--ink:#111315;--side:#292d31;--side2:#34393e;--line:rgba(255,255,255,.09);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,sans-serif}body{background:var(--bg);overflow:hidden}button,input,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.app{height:100svh;min-height:560px;position:relative;display:flex;flex-direction:column;align-items:center;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,rgba(255,255,255,.13),transparent 50%),var(--bg)}
.brand{height:118px;margin-top:8px;display:flex;align-items:center;justify-content:center;z-index:1;transform:translateY(5px);overflow:visible}.brand img{width:clamp(150px,17vw,205px);height:118px;object-fit:contain;mix-blend-mode:multiply;filter:contrast(1.07)}
.welcome{width:min(100% - 36px,980px);text-align:center;margin:auto 0 0;padding-top:6vh;z-index:1;transition:opacity .5s ease,filter .6s ease,transform .6s var(--ease)}h1{font-size:clamp(37px,5.4vw,64px);line-height:1.05;letter-spacing:-.075em;font-weight:600;color:#101214;margin:0}
.suggestions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin:29px auto 0}.suggestion{min-height:38px;padding:0 15px;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(12,14,16,.16);border-radius:99px;background:rgba(255,255,255,.2);color:#17191b;font-size:10.5px;font-weight:500;transition:transform .45s var(--ease),background .3s,border-color .3s}.suggestion span{font-size:14px}.suggestion:hover{transform:translateY(-3px);background:rgba(255,255,255,.48);border-color:rgba(0,0,0,.28)}
.composer-area{width:min(680px,calc(100% - 34px));min-height:150px;margin:58px 0 auto;display:flex;align-items:center;flex-direction:column;z-index:3}.composer-shell{position:relative;width:148px;height:42px;border-radius:99px;background:#08090a;box-shadow:0 9px 25px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.13);transition:width .48s var(--ease),height .44s var(--ease),transform .46s var(--ease),box-shadow .42s ease;will-change:width,height,transform}
.launcher{position:absolute;inset:0;border:0;border-radius:inherit;background:transparent;display:grid;place-items:center}.launcher span{width:24px;height:3px;border-radius:9px;background:#fff;box-shadow:0 0 12px #ffffff66;transition:all .7s var(--ease)}
.searchbar{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 8px 0 22px;opacity:0;filter:blur(22px);transform:scale(.84) translateY(9px);pointer-events:none;transition:opacity .32s ease .04s,filter .38s var(--ease),transform .42s var(--ease)}
.searchbar input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:white;font-size:13px}.searchbar input::placeholder{color:#ffffff80}
.send-button{width:34px;height:34px;flex:0 0 34px;border:0;border-radius:50%;background:#f6f6f6;color:#08090a;display:grid;place-items:center;transition:transform .4s var(--ease)}.send-button:hover{transform:scale(1.1) rotate(-8deg)}.send-button svg{width:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.composer-shell.is-open{width:min(590px,calc(100vw - 42px));height:59px;transform:translateY(-3px);box-shadow:0 22px 55px #0003,0 0 0 1px #ffffff20,inset 0 1px 0 #ffffff20}
.composer-shell.is-open .launcher{opacity:0;filter:blur(16px);pointer-events:none}.composer-shell.is-open .launcher span{width:70px;opacity:0;transform:scaleX(.35)}
.composer-shell.is-open .searchbar{opacity:1;filter:blur(0);transform:scale(1) translateY(0);pointer-events:auto;transition-delay:.16s,.1s,.04s}
.composer-hint{margin:15px 0 0;color:#16191a80;font-size:9px;transition:opacity .4s,filter .5s}.composer-area.is-active .composer-hint{opacity:0;filter:blur(9px)}
.footer{width:calc(100% - 52px);display:flex;justify-content:space-between;margin:0 0 19px;color:#14171866;font-size:8px;font-weight:600;letter-spacing:.1em;z-index:1}
.conversation{position:absolute;z-index:2;top:150px;bottom:195px;width:min(760px,calc(100% - 42px));overflow:auto;padding:15px 8px;animation:conversationIn .8s var(--ease) both}.conversation[hidden]{display:none}.conversation-model{font-size:10px;color:#333a3c80;text-align:center;margin-bottom:25px}.user-message{margin-left:auto;max-width:75%;width:max-content;padding:13px 17px;background:#17191b;color:#fff;border-radius:18px 18px 5px 18px;font-size:13px;line-height:1.5}.assistant-placeholder{display:flex;align-items:center;gap:10px;margin-top:28px;color:#282d2f;font-size:12px;flex-wrap:wrap}.assistant-placeholder small{width:100%;padding-left:20px;color:#34393b88;font-size:10px}.pulse{width:9px;height:9px;border-radius:50%;background:#252a2d;box-shadow:0 0 0 5px #252a2d16;animation:pulse 1.8s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px #252a2d05;opacity:.5}}@keyframes conversationIn{from{opacity:0;filter:blur(14px);transform:translateY(15px)}to{opacity:1;filter:blur(0);transform:none}}
/* Swipe drawer */
.sidebar{position:fixed;z-index:12;inset:0 auto 0 0;width:min(338px,88vw);padding:18px 15px 13px;background:linear-gradient(155deg,#30353a,#25292d 70%);color:#f4f5f5;display:flex;flex-direction:column;border-right:1px solid #ffffff12;box-shadow:25px 0 75px #0002;transform:translateX(-105%);opacity:.65;filter:blur(12px);pointer-events:none;transition:transform .38s var(--ease),opacity .3s ease,filter .34s var(--ease)}
.sidebar.is-open{transform:translateX(0);opacity:1;filter:blur(0);pointer-events:auto}
.side-head{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 5px 10px}.side-brand{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.16em}.side-brand img{width:31px;height:27px;object-fit:contain;filter:grayscale(1) brightness(0) invert(1);opacity:.9}.side-brand b{font-weight:500;color:#b8c0c4}
.icon-btn{width:31px;height:31px;border:0;border-radius:50%;background:#ffffff0e;color:#e9ecee;font-size:22px;line-height:1}.icon-btn:hover{background:#ffffff1b}
.side-scroll{min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;padding:8px 2px 14px}
.new-chat{width:100%;height:44px;border:1px solid #ffffff23;border-radius:12px;background:linear-gradient(110deg,#f3f5f5,#d9dfe1);color:#171b1e;display:flex;align-items:center;gap:10px;padding:0 12px;font-size:12px;font-weight:700;box-shadow:0 7px 20px #0002;transition:transform .35s var(--ease),box-shadow .35s}.new-chat:hover{transform:translateY(-2px);box-shadow:0 11px 25px #0003}.plus{font-size:22px;font-weight:400;line-height:1}.new-chat kbd{margin-left:auto;font-size:9px;color:#535b60;background:#0000000b;border:1px solid #00000013;border-radius:5px;padding:3px 5px}
.field-label,.section-heading,.history-head,.sidebar .history-group>span{display:block;color:#aeb6ba;font-size:8px;font-weight:700;letter-spacing:.16em}.field-label{margin:19px 4px 8px}.select-wrap{position:relative}.select-wrap select{appearance:none;width:100%;height:38px;border:1px solid #ffffff14;border-radius:10px;background:#ffffff0a;color:#f0f2f3;padding:0 34px 0 11px;font-size:11px;outline:none}.select-wrap option{background:#30353a;color:white}.select-chevron{position:absolute;right:12px;top:8px;color:#b9c0c3;pointer-events:none}
.side-section{margin-top:22px}.section-heading{padding:0 5px 8px}.side-link{width:100%;min-height:34px;padding:0 9px;border:0;border-radius:8px;background:transparent;color:#d8dddf;display:flex;align-items:center;gap:10px;text-align:left;font-size:11px;transition:background .2s,color .2s}.side-link:hover{background:#ffffff0d;color:white}.side-ico{width:17px;text-align:center;color:#b9c3c7;font-size:13px}.count{margin-left:auto;color:#b7c0c3;font-size:9px}
.history-head{display:flex;align-items:center;justify-content:space-between;margin:21px 4px 8px}.tiny-icon{border:0;background:transparent;color:#bac2c5;font-size:20px}.history-filter{display:none;width:100%;height:31px;margin:0 0 8px;border:1px solid #ffffff1a;border-radius:8px;background:#ffffff0b;color:#fff;padding:0 9px;font-size:10px;outline:none}.history-filter.show{display:block}
.history-list{display:flex;flex-direction:column;gap:15px}.history-group>span{margin:0 5px 6px}.chat-row{position:relative;display:flex;align-items:center;gap:7px;height:31px;padding:0 5px;border-radius:7px}.chat-row:hover,.chat-row.active{background:#ffffff0c}.chat-glyph{color:#aeb8bc;font-size:13px}.chat-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;background:none;color:#dce0e1;text-align:left;font-size:10px;padding:0}.chat-more{width:22px;height:24px;opacity:0;border:0;background:none;color:#dce0e1;font-size:16px;letter-spacing:1px}.chat-row:hover .chat-more,.chat-more:focus{opacity:1}
.side-footer{margin-top:auto;padding-top:10px;border-top:1px solid #ffffff12}.side-footer .side-link{min-height:35px}.profile{width:100%;display:flex;align-items:center;gap:9px;padding:9px 7px;margin-top:7px;border:0;border-radius:10px;background:#ffffff0b;color:white;text-align:left}.profile:hover{background:#ffffff14}.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#dce1e2,#858e93);color:#252a2d;font-size:12px;font-weight:800}.profile-copy{display:flex;flex-direction:column;gap:3px}.profile-copy b{font-size:10px;font-weight:600}.profile-copy small{font-size:9px;color:#aab3b7}.profile-dots{margin-left:auto;color:#c4cbce}
.edge-trigger{position:fixed;z-index:10;left:0;top:0;width:18px;height:100svh;background:transparent;border:0;cursor:ew-resize;touch-action:pan-y}.scrim{position:fixed;z-index:11;inset:0;border:0;background:#10141632;opacity:0;pointer-events:none;backdrop-filter:blur(0);transition:opacity .3s ease,backdrop-filter .34s ease}.scrim.is-open{opacity:1;pointer-events:auto;backdrop-filter:blur(5px)}
.context-menu,.profile-menu{position:fixed;z-index:20;display:none;min-width:165px;padding:5px;border:1px solid #ffffff12;border-radius:11px;background:#353a3f;box-shadow:0 15px 45px #0005}.context-menu.show,.profile-menu.show{display:block;animation:pop .18s ease both}.context-menu button,.profile-menu button{width:100%;height:31px;display:flex;align-items:center;gap:9px;padding:0 9px;border:0;border-radius:7px;background:transparent;color:#e8ebec;text-align:left;font-size:10px}.context-menu button:hover,.profile-menu button:hover{background:#ffffff12}.context-menu .danger,.profile-menu .danger{color:#ffaaa5}
.modal-backdrop{position:fixed;z-index:30;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:#11171955;backdrop-filter:blur(8px)}.modal-backdrop.show{display:flex;animation:fade .25s ease}.modal{width:min(530px,100%);max-height:min(700px,90svh);overflow:hidden;border:1px solid #ffffff20;border-radius:19px;background:#30353a;color:#f3f5f5;box-shadow:0 25px 90px #0005;animation:modalIn .45s var(--ease)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:21px 23px 16px;border-bottom:1px solid #ffffff12}.modal-kicker{margin:0 0 5px;color:#aeb8bc;font-size:8px;letter-spacing:.2em}.modal h2{margin:0;font-size:20px;letter-spacing:-.04em}.modal-body{max-height:calc(90svh - 95px);overflow:auto;padding:17px 23px 23px}.setting-group{padding:13px 0;border-bottom:1px solid #ffffff10}.setting-group:last-child{border:0}.setting-group h3{margin:0 0 5px;font-size:11px}.setting-group p{margin:0 0 10px;color:#aeb7bb;font-size:9px;line-height:1.55}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;color:#e5e8e9;font-size:10px}.setting-row select,.setting-row input[type=text]{max-width:180px;border:1px solid #ffffff20;border-radius:7px;background:#ffffff0d;color:#fff;padding:7px;font-size:10px}.setting-row select option{background:#30353a}.setting-row input[type=checkbox]{accent-color:#dfe4e5}.modal-action{border:1px solid #ffffff1c;border-radius:8px;background:#ffffff0c;color:#f0f2f3;padding:8px 10px;font-size:9px}.modal-action:hover{background:#ffffff18}.modal-action.danger{color:#ffaaa5}
.profile-menu{right:20px;bottom:70px}.toast{position:fixed;z-index:50;left:50%;bottom:26px;transform:translate(-50%,15px);opacity:0;pointer-events:none;padding:10px 15px;border-radius:99px;background:#202427;color:#fff;font-size:10px;box-shadow:0 8px 28px #0003;transition:all .3s var(--ease)}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes pop{from{opacity:0;transform:translateY(5px) scale(.97)}to{opacity:1;transform:none}}@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.98);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@media(max-width:650px){.brand{height:82px;margin-top:0;transform:translateY(-10px)}.brand img{width:140px;height:88px}.welcome{padding-top:4vh}h1{font-size:clamp(36px,9.8vw,56px)}.suggestions{gap:7px;margin-top:23px;max-width:380px}.suggestion{min-height:35px;padding:0 11px;font-size:9px}.composer-area{margin-top:39px;min-height:135px}.composer-shell.is-open{width:calc(100vw - 34px);height:56px}.footer{width:calc(100% - 30px);font-size:7px;letter-spacing:.04em}.conversation{top:120px;bottom:170px}.sidebar{width:min(330px,88vw)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}


/* ZALOO AI — refined sidebar finish */
.sidebar{
  width:min(356px,90vw);padding:22px 17px 15px;
  background:linear-gradient(160deg,#30363b 0%,#292e33 48%,#24292d 100%);
  border-right:1px solid #ffffff16;box-shadow:30px 0 90px #10141638;
  border-radius:0 22px 22px 0;
}
.side-head{height:54px;padding:0 7px 15px;border-bottom:1px solid #ffffff12;margin-bottom:13px}
.side-brand{gap:0;font-size:17px;font-weight:800;letter-spacing:.17em;color:#f5f7f7}
.side-brand img{display:none}
.side-brand b{margin-left:5px;color:#aeb9be;font-weight:500}
.close-side{width:34px;height:34px;border-radius:12px;background:#ffffff0d;font-size:23px;transition:background .25s,transform .35s var(--ease)}
.close-side:hover{background:#ffffff1b;transform:rotate(90deg)}
.side-scroll{padding:7px 3px 16px}
.new-chat{
  height:49px;border-radius:15px;padding:0 15px;gap:12px;
  background:linear-gradient(135deg,#f5f7f7,#d9e0e2);color:#1b2023;
  font-size:13px;font-weight:700;letter-spacing:-.015em;
  box-shadow:0 8px 24px #00000024,inset 0 1px 0 #ffffff;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),filter .35s;
}
.new-chat:hover{transform:translateY(-2px) scale(1.012);box-shadow:0 13px 28px #00000035}
.new-chat:active{transform:scale(.975)}
.plus{font-size:23px;font-weight:400}
.new-chat kbd{font-size:9px;border-radius:7px;padding:4px 6px;background:#1820250d;color:#5b656a}
.field-label,.section-heading,.history-head,.sidebar .history-group>span{
  color:#9faab0;font-size:9px;font-weight:700;letter-spacing:.17em
}
.field-label{margin:22px 7px 9px}
.select-wrap select{
  height:43px;border-radius:13px;background:#ffffff0c;border:1px solid #ffffff17;
  color:#f4f6f6;padding-left:13px;font-size:12px;font-weight:600;
  transition:background .25s,border-color .25s,box-shadow .25s
}
.select-wrap select:hover,.select-wrap select:focus{background:#ffffff12;border-color:#ffffff35;box-shadow:0 0 0 3px #ffffff08}
.select-chevron{top:10px;right:14px;font-size:15px}
.side-section{margin-top:25px}
.section-heading{padding:0 8px 10px}
.side-link{
  min-height:41px;padding:0 11px;border-radius:12px;gap:12px;
  color:#e0e5e7;font-size:12px;font-weight:500;letter-spacing:-.01em;
  transition:background .28s var(--ease),color .25s,transform .3s var(--ease),box-shadow .3s
}
.side-link:hover{background:#ffffff10;color:#fff;transform:translateX(3px);box-shadow:inset 2px 0 #dce3e6}
.side-link:active{transform:scale(.985)}
.side-ico{width:19px;font-size:15px;color:#c4cdd1}
.count{font-size:10px;background:#ffffff12;border-radius:20px;padding:3px 7px;color:#d9e0e2}
.history-head{margin:25px 8px 10px}
.tiny-icon{width:27px;height:27px;border-radius:9px;background:#ffffff0a;font-size:18px;transition:background .2s,transform .3s}
.tiny-icon:hover{background:#ffffff18;transform:scale(1.06)}
.history-filter{height:36px;border-radius:11px;padding:0 12px;font-size:11px;background:#ffffff0c}
.history-list{gap:19px}
.history-group>span{margin:0 8px 8px}
.chat-row{height:38px;padding:0 9px;border-radius:10px;gap:9px;transition:background .25s,transform .3s var(--ease)}
.chat-row:hover,.chat-row.active{background:#ffffff10}
.chat-glyph{font-size:15px;color:#c4cdd1}
.chat-title{font-size:11px;font-weight:500;color:#e7ebed}
.chat-more{width:27px;height:28px;border-radius:8px;font-size:17px;transition:opacity .2s,background .2s}
.chat-more:hover{background:#ffffff17}
.side-footer{padding-top:13px;border-top:1px solid #ffffff15}
.side-footer .side-link{min-height:41px}
.profile{min-height:57px;padding:10px 10px;margin-top:10px;border:1px solid #ffffff10;border-radius:14px;background:#ffffff0b;transition:background .25s,border-color .25s,transform .3s var(--ease)}
.profile:hover{background:#ffffff13;border-color:#ffffff20;transform:translateY(-1px)}
.avatar{width:34px;height:34px;font-size:13px}
.profile-copy b{font-size:11px}.profile-copy small{font-size:10px}
.profile-dots{font-size:18px;letter-spacing:2px}
.context-menu,.profile-menu{border-radius:14px;padding:6px;background:#30363b;border:1px solid #ffffff18;box-shadow:0 18px 50px #0006}
.context-menu button,.profile-menu button{height:36px;border-radius:9px;font-size:11px;padding:0 11px}
@media(max-width:650px){
 .brand{height:103px;margin-top:7px;transform:translateY(3px)}
 .brand img{width:158px;height:103px}
 .welcome{padding-top:5vh}
 .composer-area{margin-top:48px}
 .sidebar{width:min(340px,91vw);border-radius:0 19px 19px 0}
}


/* ZALOO AI — interactive workspace launcher */
.brand{position:relative;transition:transform .42s var(--ease),width .42s var(--ease),height .42s var(--ease)}
.brand-button{border:0;background:transparent;padding:0;display:grid;place-items:center;border-radius:28px;cursor:pointer;transition:transform .28s var(--ease),filter .28s}
.brand-button:hover{transform:scale(1.045);filter:drop-shadow(0 10px 18px #00000016)}
.brand-button:active{transform:scale(.96)}
.brand-button img{display:block}
.workspace-hub{position:absolute;z-index:4;inset:125px 0 78px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 24px;opacity:0;visibility:hidden;pointer-events:none;filter:blur(10px);transform:translateY(12px) scale(.985);transition:opacity .34s ease,filter .38s var(--ease),transform .4s var(--ease),visibility .34s}
.workspace-hub.is-visible{opacity:1;visibility:visible;pointer-events:auto;filter:blur(0);transform:none}
.hub-heading{text-align:center;margin:0 0 23px}
.hub-heading .eyebrow{margin:0 0 8px;color:#697276;font-size:10px;font-weight:700;letter-spacing:.2em}
.hub-heading h2{margin:0;color:#15191b;font-size:clamp(25px,3.2vw,37px);font-weight:650;letter-spacing:-.065em}
.hub-heading p{margin:9px 0 0;color:#4e575b;font-size:13px;font-weight:450;letter-spacing:-.015em}
.hub-grid{width:min(100%,930px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.hub-card{position:relative;min-height:112px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:17px 18px;border:1px solid #ffffffa8;border-radius:22px;background:linear-gradient(145deg,#ffffff78,#ffffff35);color:#171b1d;text-align:left;box-shadow:0 8px 26px #2830340a,inset 0 1px 0 #ffffffa8;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .28s var(--ease),background .28s,border-color .28s,box-shadow .28s}
.hub-card:hover,.hub-card:focus-visible{transform:translateY(-4px);background:#ffffffb5;border-color:#ffffff;box-shadow:0 15px 34px #28303416,inset 0 1px 0 #fff;outline:none}
.hub-card:active{transform:translateY(-1px) scale(.985)}
.hub-card-top{display:flex;align-items:center;gap:11px;width:100%}
.hub-icon{width:39px;height:39px;flex:0 0 39px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#ffffffc9,#dfe4e5a8);box-shadow:inset 0 1px 0 #fff,0 4px 12px #2026290c;font-size:19px}
.hub-title{font-size:13px;font-weight:650;line-height:1.28;letter-spacing:-.035em}
.hub-desc{max-height:0;overflow:hidden;opacity:0;filter:blur(5px);color:#596267;font-size:11px;line-height:1.45;letter-spacing:-.01em;transform:translateY(-4px);transition:max-height .28s var(--ease),opacity .24s ease,filter .28s,transform .28s var(--ease)}
.hub-card:hover .hub-desc,.hub-card:focus-visible .hub-desc{max-height:48px;opacity:1;filter:blur(0);transform:none}
.hub-close{margin-top:17px;padding:9px 17px;border:1px solid #ffffff9c;border-radius:99px;background:#ffffff55;color:#343b3f;font-size:11px;font-weight:600;transition:background .22s,transform .22s}
.hub-close:hover{background:#ffffffa8;transform:translateY(-1px)}
.app.hub-open .brand{position:absolute;top:17px;left:22px;width:110px;height:65px;margin:0;transform:none;z-index:6}
.app.hub-open .brand-button img{width:100px;height:62px}
.app.hub-open .welcome,.app.hub-open .composer-area,.app.hub-open .footer{opacity:0;filter:blur(8px);transform:translateY(8px);pointer-events:none;transition:opacity .25s,filter .3s,transform .3s}
.app.hub-open .workspace-hub{inset:92px 0 36px}
@media(max-width:760px){
 .workspace-hub{inset:112px 0 55px;justify-content:flex-start;overflow:auto;padding:16px 16px 24px}
 .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .hub-card{min-height:104px;padding:13px;border-radius:18px}
 .hub-icon{width:34px;height:34px;flex-basis:34px;border-radius:12px;font-size:17px}
 .hub-title{font-size:11px}
 .hub-desc{font-size:10px;max-height:none;opacity:.78;filter:none;transform:none}
 .app.hub-open .brand{top:10px;left:12px;width:92px;height:58px}
 .app.hub-open .brand-button img{width:84px;height:55px}
 .app.hub-open .workspace-hub{inset:75px 0 25px}
}
@media(max-width:390px){.hub-grid{grid-template-columns:1fr}.hub-card{min-height:88px}.hub-heading h2{font-size:25px}}


/* SÉPTIMA VERSIÓN — ecosistema visible, claro y táctil */
.brand-button img{
  mix-blend-mode:normal!important;
  filter:drop-shadow(0 9px 18px #17202416)!important;
  object-fit:contain;
}
.workspace-hub{
  justify-content:flex-start;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#8d969955 transparent;
  padding:24px 24px 34px;
  transition:opacity .24s ease,filter .28s ease,transform .3s var(--ease),visibility .24s;
}
.hub-heading{margin:4px 0 22px}
.hub-heading .eyebrow{font-size:10px;letter-spacing:.22em}
.hub-heading h2{font-size:clamp(26px,3.1vw,36px);letter-spacing:-.055em}
.hub-heading p{font-size:13px;line-height:1.55}
.hub-grid{
  width:min(100%,980px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding:3px 2px 12px;
}
.hub-card{
  min-height:148px;
  justify-content:flex-start;
  gap:11px;
  padding:17px 17px 16px;
  border-radius:22px;
  background:linear-gradient(145deg,#ffffffa8,#ffffff5c);
  border:1px solid #ffffffc9;
  box-shadow:0 8px 24px #20282c0b,inset 0 1px 0 #fff;
  animation:hubCardIn .48s var(--ease) both;
  animation-delay:calc(var(--card-index, 0) * 45ms);
  transition:transform .22s var(--ease),background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.hub-card:nth-child(1){--card-index:1}.hub-card:nth-child(2){--card-index:2}.hub-card:nth-child(3){--card-index:3}
.hub-card:nth-child(4){--card-index:4}.hub-card:nth-child(5){--card-index:5}.hub-card:nth-child(6){--card-index:6}
.hub-card:nth-child(7){--card-index:7}.hub-card:nth-child(8){--card-index:8}.hub-card:nth-child(9){--card-index:9}
.hub-card:hover,.hub-card:focus-visible{
  transform:translateY(-3px) scale(1.012);
  background:#ffffffd9;
  border-color:#fff;
  box-shadow:0 14px 30px #20282c17,inset 0 1px 0 #fff;
}
.hub-card:active{transform:scale(.975);box-shadow:0 4px 12px #20282c12}
.hub-card-top{gap:12px}
.hub-icon{
  width:42px;height:42px;flex-basis:42px;border-radius:15px;
  background:linear-gradient(145deg,#fff,#e5e9ea);
  box-shadow:0 4px 13px #252d3110,inset 0 1px 0 #fff;
  font-size:20px;
  transition:transform .28s var(--ease),box-shadow .28s ease;
}
.hub-card:hover .hub-icon{transform:rotate(-5deg) scale(1.07);box-shadow:0 7px 17px #252d3118}
.hub-title{font-size:13px;font-weight:700;line-height:1.32;letter-spacing:-.025em}
.hub-desc{
  display:block;
  max-height:none;
  overflow:visible;
  opacity:1;
  filter:none;
  transform:none;
  color:#4c565b;
  font-size:11px;
  line-height:1.55;
  letter-spacing:-.012em;
  transition:color .2s ease;
}
.hub-card:hover .hub-desc{color:#263035}
.hub-close{
  position:sticky;
  bottom:0;
  margin:16px auto 0;
  padding:11px 20px;
  background:#202528e8;
  color:#fff;
  border:1px solid #ffffff24;
  border-radius:999px;
  box-shadow:0 8px 22px #17202420;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  font-size:11px;font-weight:650;
  transition:transform .2s var(--ease),background .2s ease,box-shadow .2s ease;
}
.hub-close:hover{background:#101416;transform:translateY(-2px);box-shadow:0 12px 26px #1720242a}
.hub-close:active{transform:scale(.97)}
@keyframes hubCardIn{
  from{opacity:0;transform:translateY(13px) scale(.975);filter:blur(7px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@media(max-width:800px){
  .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hub-card{min-height:142px;padding:14px;border-radius:19px}
  .hub-title{font-size:12px}
}
@media(max-width:520px){
  .workspace-hub{padding:15px 13px 28px}
  .hub-heading{margin:0 0 16px}
  .hub-heading h2{font-size:25px}
  .hub-heading p{font-size:11px}
  .hub-grid{grid-template-columns:1fr;gap:9px}
  .hub-card{min-height:unset;padding:13px 14px;border-radius:17px;gap:8px}
  .hub-card-top{gap:10px}
  .hub-icon{width:37px;height:37px;flex-basis:37px;border-radius:13px;font-size:18px}
  .hub-desc{font-size:10px;line-height:1.45;padding-left:47px}
  .app.hub-open .brand{top:8px;left:12px;width:92px;height:58px}
  .app.hub-open .brand-button img{width:84px;height:55px}
  .app.hub-open .workspace-hub{inset:74px 0 15px}
}
@media(prefers-reduced-motion:reduce){
  .hub-card{animation:none!important}
}