@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #202124;
  --subtle: #5f6368;
  --line: #dadce0;
  --blue: #1a73e8;
  --blue-soft: #e8f0fe;
  --green: #188038;
}

html:has(body.ed-product-hub), body.ed-product-hub { height: 100%; }
body.ed-product-hub.ed-app-shell {
  margin: 0; color: var(--ink); background: #fff !important;
  font-family: Manrope, Arial, sans-serif; overflow: hidden;
}
body.ed-product-hub .xl-formula-bar, body.ed-product-hub .xl-statusbar,
body.ed-product-hub .xl-sheet-tabs, body.ed-product-hub .app-rail,
body.ed-product-hub .edarm-mobile-nav { display: none !important; }

body.ed-product-hub .wrapper.app-outer { min-height: 100dvh; padding: 0 !important; display: flex; flex-direction: column; }
body.ed-product-hub .xl-titlebar {
  height: 64px; flex: 0 0 64px; padding: 0 32px !important; background: #fff !important;
  border: 0 !important; border-bottom: 1px solid #f1f3f4 !important;
}
body.ed-product-hub .xl-titlebar-logo { color: var(--ink) !important; font-size: 19px; font-weight: 800; letter-spacing: -.06em; text-decoration:none; }
body.ed-product-hub .xl-titlebar-logo svg { color: var(--green); }
body.ed-product-hub .xl-titlebar-sep { display: none; }
body.ed-product-hub .xl-titlebar-sub { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--line); }
body.ed-product-hub .xl-titlebar-h1 { color: var(--subtle) !important; font-size: 12px !important; font-weight: 600 !important; }

body.ed-product-hub .app-shell { flex: 1; display: flex !important; background: #fff !important; border: 0 !important; box-shadow: none !important; }
body.ed-product-hub .app-main { flex: 1; display: flex; border: 0 !important; }
body.ed-product-hub .app-main-inner.container { flex: 1; max-width: none; padding: 0; display: flex; }
.hub { width: 100%; min-height: 0; display: flex; flex-direction: column; }
.hub-top { display: none; }
.hub-canvas { position: relative; flex: 1; display: flex; min-height: 0; overflow: hidden; border: 0; background: #fff; }
.hub-canvas::before { content: ""; position: absolute; width: 560px; height: 560px; right: -270px; top: -360px; border-radius: 50%; background: var(--blue-soft); z-index: 0; }
.hub-canvas::after { content: ""; position: absolute; width: 420px; height: 420px; left: -285px; bottom: -275px; border-radius: 50%; background: #f1f8e9; z-index: 0; }
.hub-donate-pre { position:absolute; z-index:5; top:18px; right:22px; display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border-radius:99px; color:#5f6368; background:rgba(255,255,255,.78); border:1px solid #e8eaed; font-size:11px; font-weight:700; text-decoration:none; transition:color .15s, border-color .15s, background .15s; }
.hub-donate-pre span{color:#c5221f;font-size:13px}.hub-donate-pre:hover{color:#174ea6;border-color:#b7c8e8;background:#fff;}
.hub-ai-pulse { position:absolute; z-index:4; right:30px; bottom:28px; width:54px; height:54px; display:flex; align-items:center; justify-content:center; gap:3px; border-radius:50%; background:linear-gradient(145deg,#3978f6,#735cff); box-shadow:0 12px 28px rgba(57,120,246,.28), inset 0 1px 1px rgba(255,255,255,.5); }
.hub-ai-pulse::before,.hub-ai-pulse::after { content:""; position:absolute; inset:-8px; border:1px solid rgba(57,120,246,.2); border-radius:50%; animation:ai-ring 2.3s ease-out infinite; }.hub-ai-pulse::after{animation-delay:1.15s}
.hub-ai-pulse span { position:relative; z-index:1; width:3px; height:11px; border-radius:8px; background:#fff; animation:ai-wave 1.05s ease-in-out infinite; }.hub-ai-pulse span:nth-child(2){animation-delay:.12s;height:18px}.hub-ai-pulse span:nth-child(3){animation-delay:.24s;height:25px}.hub-ai-pulse span:nth-child(4){animation-delay:.36s;height:18px}.hub-ai-pulse span:nth-child(5){animation-delay:.48s}
@keyframes ai-wave { 0%,100%{transform:scaleY(.48);opacity:.55}50%{transform:scaleY(1);opacity:1} } @keyframes ai-ring { 0%{transform:scale(.72);opacity:.78}100%{transform:scale(1.24);opacity:0} }

.hub-stage { position: relative; z-index: 1; width: min(100%, 700px); margin: auto; padding: 32px 24px 52px; text-align: center; }
.hub-stage::before { content: "ЛИСТ. UNLOCK+"; display: inline-block; padding: 6px 12px; border-radius: 99px; color: var(--blue); background: var(--blue-soft); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.hub-stage::after { content: "Файлы не сохраняем · без регистрации · анонимная обработка"; display: block; margin-top: 24px; color: #80868b; font-size: 11px; font-weight: 600; }
.hub-stage > form#xhub-form { display: contents; }

.hub-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 250px; margin: 22px 0 16px; padding: 28px; border: 1.5px dashed #b7c8e8;
  border-radius: 16px; background: #fbfdff; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.hub-drop::before { content: "XLSX"; position: absolute; top: 19px; left: 20px; color: #a8b0bd; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.hub-drop::after { content: ""; position: absolute; right: 18px; bottom: 18px; width: 62px; height: 42px; opacity: .46; background: repeating-linear-gradient(to bottom, transparent 0 7px, #a5b9df 7px 8px), repeating-linear-gradient(90deg, transparent 0 14px, #a5b9df 14px 15px); }
.hub-drop:hover, .hub-drop.is-drag { border-color: var(--blue); background: var(--blue-soft); transform: translateY(-2px); }
.hub-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.hub-drop-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 16px; border-radius: 50%; color: var(--blue); background: var(--blue-soft); font-size: 29px; font-weight: 400; }
.hub-drop strong { color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -.035em; }
.hub-drop p { margin: 8px 0 0; color: var(--subtle); font-size: 13px; font-weight: 500; }
.hub-stage-actions { display: flex; justify-content: center; gap: 10px; }
.hub-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 4px; font-family: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .15s, box-shadow .15s; }
.hub-btn--primary { color: #fff; background: var(--blue); }.hub-btn--primary:hover { background: #1765cc; box-shadow: 0 1px 3px rgba(60,64,67,.3); }
.hub-btn--ghost { color: var(--blue); background: #fff; border-color: var(--line); }.hub-btn--ghost:hover { background: #f8faff; border-color: #b8cdf2; }
.hub-btn--secondary { color: var(--blue); background: var(--blue-soft); }.hub-btn--xl { min-width: 185px; }
.hub-flash { margin: 16px 0; padding: 12px 14px; text-align: left; border-radius: 8px; background: #fce8e6; color: #b3261e; font-size: 13px; }

/* The visible transition between choosing a file and receiving the result. */
.hub-busy::before { content: "Снимаем защиту"; position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding-bottom: 53px; color: var(--ink); background: rgba(255,255,255,.97); font-size: 22px; font-weight: 700; letter-spacing: -.04em; }
.hub-busy::after { content: "Проверяем листы и структуру книги"; position: absolute; z-index: 31; width: min(310px, 72vw); left: 50%; top: 50%; padding-top: 42px; border-top: 5px solid #e8eaed; transform: translate(-50%, 26px); color: var(--subtle); font-size: 12px; font-weight: 600; background: linear-gradient(90deg, var(--blue), var(--blue)) left top / 38% 5px no-repeat; animation: unlock-progress 1.1s ease-in-out infinite alternate; }
 .hub-busy .hub-stage { opacity: .08; transform: scale(.985); transition: opacity .25s, transform .25s; }
@keyframes unlock-progress { to { background-position: -220% 0; } }

/* Result screen and the existing advanced controls. */
.hub-work { position: relative; z-index: 1; display: grid; grid-template-columns: 310px minmax(0,1fr); width: 100%; min-height: 0; }
.hub-work--complete { display:flex; align-items:center; justify-content:center; min-height:100%; padding:28px; box-sizing:border-box; background:radial-gradient(circle at 50% 42%,#f5f9ff 0,transparent 52%); }
.hub-work--complete .hub-panel { position:relative; width:min(440px,100%); max-height:calc(100dvh - 155px); box-sizing:border-box; padding:34px; overflow:auto; text-align:center; border:1px solid #e8eaed; border-radius:18px; background:#fff; box-shadow:0 12px 34px rgba(60,64,67,.11); }
.hub-work--complete .hub-panel::before { content:"✓"; display:grid; width:54px; height:54px; margin:0 auto 17px; place-items:center; border-radius:50%; color:#fff; background:#188038; font-size:27px; font-weight:700; box-shadow:0 8px 18px rgba(24,128,56,.22); }
.hub-work--complete .hub-panel-main { display:none; }
.hub-work--complete .hub-filemeta .name { font-size:18px; line-height:1.35; letter-spacing:-.025em; }
.hub-work--complete .hub-pills { justify-content:center; }.hub-work--complete .hub-flash { margin:0 0 18px; text-align:center; border:0; color:var(--ink); background:transparent; font-size:14px; line-height:1.5; }.hub-work--complete .hub-log,.hub-work--complete .hub-compare,.hub-work--complete .hub-tools-more{display:none}.hub-work--complete .hub-actions{margin:24px 0 0}.hub-work--complete .hub-actions .hub-btn--primary{min-height:50px;font-size:15px}.hub-work--complete .hub-donate{text-align:left;margin-top:15px}.hub-work--complete .hub-donate-popup{text-align:left}
.hub-panel { padding: 28px; border-right: 1px solid #f0f1f2; background: #fff; overflow: auto; }
.hub-filemeta .name { display:block; font-size:14px; font-weight:800; overflow-wrap:anywhere; }.hub-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }.hub-pill { display:inline-flex; padding:5px 9px; border-radius:99px; border:1px solid var(--line); color:var(--subtle); background:#fff; font-size:11px; font-weight:700; }.hub-pill--ok{color:#137333;background:#e6f4ea;border-color:#ceead6}.hub-pill--warn{color:#a15c00;background:#fef7e0;border-color:#f8df9b}
.hub-actions { display:grid; gap:9px; margin:26px 0; }.hub-actions .hub-btn { width:100%; }.hub-panel-main { padding: 32px; background:#fafbfc; overflow:auto; }.hub-sheetboard-head { display:flex; align-items:baseline; justify-content:space-between; color:var(--subtle); font-size:13px; }.hub-sheetboard-head strong{color:var(--ink);font-size:18px;}.hub-sheet-scroll{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:22px}.hub-sheet-chip{min-height:82px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:8px}.hub-sheet-chip.is-locked{background:#fffaf0;border-color:#f0d297}.hub-sheet-chip b{font-size:13px;overflow-wrap:anywhere}.hub-tools-more{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}.hub-tools-more summary{cursor:pointer;color:var(--subtle);font-size:13px;font-weight:700}.hub-tool-grid{display:grid;gap:9px;margin-top:12px}.hub-tool{padding:12px;border:1px solid var(--line);border-radius:9px;background:#fff}.hub-tool h4{margin:0 0 8px;font-size:13px}.hub-inp{width:100%;box-sizing:border-box;margin-bottom:8px;padding:9px;border:1px solid var(--line);border-radius:5px;font:inherit;font-size:13px}.hub-chk{display:flex;align-items:center;gap:7px;margin:7px 0;font-size:12px}.hub-log,.hub-empty{margin-top:14px;padding:10px;border-radius:7px;background:#f8faff;color:var(--subtle);font-size:12px;line-height:1.4}.hub-compare{display:flex;gap:8px;margin-top:14px}.hub-compare-box{flex:1;padding:10px;border-radius:7px;background:#f8faff;font-size:12px}.hub-compare-box strong{display:block;margin-bottom:4px;font-size:10px;color:var(--subtle);text-transform:uppercase}

.hub-donate { margin-top: 14px; border: 1px solid #d7e4fc; border-radius: 9px; background: #f8faff; }
.hub-donate > summary { display:flex; align-items:center; gap:9px; padding:11px; cursor:pointer; list-style:none; color:#174ea6; }
.hub-donate > summary::-webkit-details-marker { display:none; }
.hub-donate > summary b { display:block; font-size:12px; }.hub-donate > summary small{display:block;margin-top:2px;color:var(--subtle);font-size:10px;font-weight:600;}
.hub-donate-heart { display:grid; width:25px; height:25px; place-items:center; flex:0 0 auto; color:#c5221f; border-radius:50%; background:#fce8e6; font-size:14px; }
.hub-donate[open] > summary { border-bottom:1px solid #d7e4fc; }
.hub-donate-popup { position:fixed; z-index:50; left:50%; top:50%; width:min(500px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; transform:translate(-50%,-50%); padding:20px; border:1px solid #dadce0; border-radius:15px; background:#fff; box-shadow:0 18px 64px rgba(32,33,36,.28); }
.hub-donate-popup::before { content:""; position:fixed; inset:0; z-index:-1; background:rgba(32,33,36,.28); }
.hub-donate-head { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }.hub-donate-head strong{font-size:16px;letter-spacing:-.03em}.hub-donate-head span{font-size:12px;color:var(--subtle);line-height:1.4}
.hub-donate-popup iframe { display:block; width:100%; max-width:500px; min-height:480px; margin:0 auto; border:0; }.hub-donate-link{display:block;margin-top:10px;color:var(--blue);font-size:12px;font-weight:700;text-align:center;text-decoration:none}

@media (max-width: 700px) { body.ed-product-hub .xl-titlebar{height:56px;flex-basis:56px;padding:0 18px!important}.xl-titlebar-sub{display:none}.hub-stage{padding:56px 18px 36px}.hub-drop{min-height:230px}.hub-drop strong{font-size:18px}.hub-work{grid-template-columns:1fr}.hub-panel{border-right:0;border-bottom:1px solid #f0f1f2}.hub-panel-main{padding:22px}.hub-canvas::before{right:-410px}.hub-canvas::after{left:-360px}.hub-donate-pre{top:14px;right:14px} }