/* ===================== PLATFORM HUB (головна платформа навчання) =====================
   The post-login cabinet: Home / Learning / Achievements / Profile tabs.
   Depends on tokens from base.css (loaded before this file). */

.hub-viewport{flex:1; overflow:hidden; position:relative;}
.hub-screen{position:absolute; inset:0; overflow-y:auto; padding:16px 18px 18px; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .3s ease, transform .3s ease;}
.hub-screen.active{opacity:1; transform:translateY(0); pointer-events:auto;}

.greeting{font-family:var(--font-mono); font-size:calc(11px * var(--fs-scale)); letter-spacing:.06em; text-transform:uppercase; color:var(--green-700); margin-bottom:4px;}
.hub-h1{font-size:calc(21px * var(--fs-scale)); font-weight:800; margin-bottom:16px; line-height:1.25;}
.hub-empty-note{font-size:calc(11.6px * var(--fs-scale)); color:var(--ink-soft); text-align:center; padding:6px 10px 2px;}

.profile-card{display:flex; align-items:center; gap:13px; background:linear-gradient(150deg, var(--green-700), var(--green-900)); color:#fff; border-radius:var(--radius-lg); padding:16px; margin-bottom:14px; box-shadow:0 14px 30px -16px rgba(11,74,52,.55); position:relative; overflow:hidden;}
.profile-card::after{content:''; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.08);}
.avatar{width:54px; height:54px; border-radius:50%; background:var(--gold); color:#3a2a00; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:calc(18px * var(--fs-scale)); flex-shrink:0; border:2px solid rgba(255,255,255,.5); position:relative; z-index:1;}
.profile-info{min-width:0; position:relative; z-index:1;}
.profile-name{font-family:var(--font-display); font-weight:700; font-size:calc(15.5px * var(--fs-scale)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.profile-meta{font-size:calc(11.5px * var(--fs-scale)); opacity:.85; margin-top:2px;}
.profile-level{display:inline-flex; align-items:center; gap:5px; margin-top:7px; background:rgba(255,255,255,.16); border-radius:99px; padding:3px 10px 3px 4px; font-size:calc(10.8px * var(--fs-scale)); font-weight:700;}
.profile-level .lv-star{width:15px;height:15px; border-radius:50%; background:var(--gold); color:#3a2a00; display:flex; align-items:center; justify-content:center; font-size:9px;}

.xp-wrap{margin-bottom:16px;}
.xp-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
.xp-label{font-size:calc(11.5px * var(--fs-scale)); color:var(--ink-soft); font-weight:600;}
.xp-num{font-family:var(--font-mono); font-size:calc(11px * var(--fs-scale)); color:var(--ink-soft);}
.xp-track{height:9px; border-radius:99px; background:var(--surface-2); overflow:hidden;}
.xp-fill{height:100%; border-radius:99px; background:linear-gradient(90deg, var(--gold), var(--green-500)); transition:width .7s cubic-bezier(.4,0,.2,1);}

.stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:18px;}
.stat-pill{background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-md); padding:11px 8px; text-align:center;}
.stat-pill b{display:block; font-family:var(--font-display); font-size:calc(17px * var(--fs-scale)); color:var(--green-700);}
.stat-pill span{font-size:calc(9.8px * var(--fs-scale)); color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;}

.hub-sec-title{display:flex; align-items:center; justify-content:space-between; margin:4px 0 10px;}
.hub-sec-title h3{font-size:calc(13.5px * var(--fs-scale)); font-weight:700; color:var(--ink);}
.hub-sec-title span{font-size:calc(11px * var(--fs-scale)); color:var(--ink-soft);}

/* real, clickable course card (Home "Продовжити навчання" + Learning tab) */
.course-tile{display:flex; gap:12px; align-items:flex-start; background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px; margin-bottom:12px; cursor:pointer; transition:transform .15s ease, border-color .15s ease; text-decoration:none; color:inherit;}
.course-tile:active{transform:scale(.98);}
.course-tile:hover{border-color:var(--green-300);}
.course-tile .ct-icon{background:var(--green-tint); color:var(--green-700);}
.ct-tag{font-family:var(--font-mono); font-size:calc(9px * var(--fs-scale)); text-transform:uppercase; letter-spacing:.05em; background:var(--gold-soft); color:var(--gold); padding:2px 7px; border-radius:99px; font-weight:700; flex-shrink:0;}
.ct-progress-row{display:flex; align-items:center; gap:8px;}
.ct-progress-track{flex:1; height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden;}
.ct-progress-fill{height:100%; border-radius:99px; background:linear-gradient(90deg, var(--green-500), var(--green-700));}
.ct-progress-pct{font-family:var(--font-mono); font-size:calc(10px * var(--fs-scale)); color:var(--ink-soft); flex-shrink:0;}
.ct-status-done{display:flex; align-items:center; gap:6px; font-size:calc(11.8px * var(--fs-scale)); font-weight:700;}
.ct-status-done svg{width:14px;height:14px;}
.ct-status-done.is-pass{color:var(--green-700);}
.ct-status-done.is-fail{color:var(--danger);}
.ct-chevron{color:var(--ink-soft); flex-shrink:0; align-self:center;}
.ct-chevron svg{width:16px;height:16px;}

/* "coming soon" placeholder course cards (Learning tab) */
.placeholder-card{display:flex; gap:12px; align-items:flex-start; background:var(--surface-1); border:1.5px dashed var(--line); border-radius:var(--radius-lg); padding:14px; margin-bottom:12px; opacity:.85;}
.ct-icon{width:46px; height:46px; border-radius:13px; background:var(--surface-2); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.ct-icon svg{width:23px; height:23px;}
.ct-body{flex:1; min-width:0;}
.ct-top{display:flex; align-items:center; gap:7px; margin-bottom:3px;}
.ct-title{font-weight:700; font-size:calc(14px * var(--fs-scale)); color:var(--ink);}
.ct-desc{font-size:calc(11.8px * var(--fs-scale)); color:var(--ink-soft); margin-bottom:9px; line-height:1.4;}
.pc-soon{font-family:var(--font-mono); font-size:calc(9px * var(--fs-scale)); text-transform:uppercase; letter-spacing:.05em; background:var(--surface-2); color:var(--ink-soft); padding:2px 7px; border-radius:99px; font-weight:700; flex-shrink:0;}

.badge-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px;}
.badge-item{display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;}
.badge-ico{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:23px; background:linear-gradient(150deg, var(--gold), #93732f); box-shadow:0 8px 16px -8px rgba(185,146,75,.6);}
.badge-item.locked .badge-ico{background:var(--surface-2); box-shadow:none; filter:grayscale(1); opacity:.6;}
.badge-item span{font-size:calc(10px * var(--fs-scale)); color:var(--ink-soft); font-weight:600; line-height:1.25;}

.leaderboard-wrap{position:relative; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:8px;}
.leaderboard-list{display:flex; flex-direction:column; gap:6px; filter:blur(3px); opacity:.6; pointer-events:none; user-select:none;}
.lb-row{display:flex; align-items:center; gap:10px; background:var(--surface-1); border:1px solid var(--line); border-radius:12px; padding:9px 12px;}
.lb-rank{font-family:var(--font-mono); font-weight:700; color:var(--ink-soft); width:18px;}
.lb-name{flex:1; font-size:calc(12.5px * var(--fs-scale)); font-weight:600;}
.lb-score{font-family:var(--font-mono); font-size:calc(11.5px * var(--fs-scale)); color:var(--green-700); font-weight:700;}
.leaderboard-lock{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:0 20px;}
.leaderboard-lock svg{width:22px;height:22px; color:var(--ink-soft);}
.leaderboard-lock b{font-size:calc(12.5px * var(--fs-scale));}
.leaderboard-lock span{font-size:calc(11px * var(--fs-scale)); color:var(--ink-soft);}

.profile-detail-list{display:flex; flex-direction:column; gap:0; background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:16px;}
.pd-row{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); gap:10px;}
.pd-row:last-child{border-bottom:none;}
.pd-k{font-size:calc(11.8px * var(--fs-scale)); color:var(--ink-soft);}
.pd-v{font-size:calc(12.8px * var(--fs-scale)); font-weight:700; color:var(--ink); text-align:right;}

.tabbar{flex-shrink:0; display:flex; border-top:1px solid var(--line); background:var(--surface); padding:6px 6px calc(6px + env(safe-area-inset-bottom));}
.tab-btn{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 2px; border:none; background:transparent; color:var(--ink-soft); font-family:inherit; cursor:pointer; border-radius:12px; transition:color .15s ease, background .15s ease;}
.tab-btn svg{width:20px;height:20px;}
.tab-btn span{font-size:calc(9.6px * var(--fs-scale)); font-weight:600;}
.tab-btn.active{color:var(--green-700); background:var(--green-tint);}

.logout-row{display:flex; align-items:center; gap:10px; padding:12px 13px; margin-top:16px; border-radius:var(--radius-md); background:transparent; border:1.5px solid var(--danger); color:var(--danger); font-weight:700; font-size:calc(13px * var(--fs-scale)); cursor:pointer; width:100%; justify-content:center; transition:background .15s ease, transform .15s ease;}
.logout-row:active{transform:scale(.98);}
.logout-row svg{width:16px;height:16px;}