/* ═══════════════════════════════════════
   wspominawka.pl — Oś czasu portal
   ═══════════════════════════════════════ */

:root {
  --primary: #1a1a2e;
  --accent: #6c5ce7;
  --accent2: #e17055;
  --bg: #f8f9fa;
  --card: #fff;
  --text: #1a1a2e;
  --muted: #64748b;
  --border: rgba(0,0,0,.08);
  --radius: 14px;
  --shadow: 0 2px 12px rgba(0,0,0,.06);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{overflow-x:hidden;max-width:100vw;}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;}
a{color:var(--accent);text-decoration:none;}
img{max-width:100%;}

/* ─── BUTTONS ─── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:10px;font-weight:600;font-size:14px;border:2px solid transparent;cursor:pointer;transition:.2s;}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-primary:hover{background:#5a4bd1;transform:translateY(-1px);box-shadow:0 4px 16px rgba(108,92,231,.3);}
.btn-outline{background:transparent;color:var(--accent);border-color:var(--accent);}
.btn-outline:hover{background:var(--accent);color:#fff;}
.btn-lg{padding:12px 28px;font-size:16px;border-radius:12px;}

/* ─── HEADER ─── */
.site-header{background:var(--primary);color:#fff;padding:0 24px;position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(0,0,0,.15);}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;height:80px;gap:24px;}
.site-logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:18px;font-weight:800;}
.logo-img{height:70px;width:auto;}
.logo-icon{font-size:24px;}
.logo-text{letter-spacing:-0.5px;}
.logo-dot{color:var(--accent);}
.header-nav{display:flex;gap:4px;flex:1;justify-content:center;}
.nav-link{color:rgba(255,255,255,.7);padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;transition:.2s;}
.nav-link:hover,.nav-link.active{color:#fff;background:rgba(255,255,255,.1);}
.header-actions{display:flex;gap:8px;}

/* ─── CATEGORY STRIP ─── */
.cat-strip{background:#f4f4f8;border-bottom:1px solid var(--border);overflow:hidden;max-width:100vw;}
.cat-strip-inner{max-width:1200px;margin:0 auto;display:flex;gap:6px;padding:8px 24px;white-space:nowrap;justify-content:center;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.cat-strip-inner::-webkit-scrollbar{height:0;}
.cat-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;color:#fff;background:var(--cat-color);opacity:.85;transition:.2s;}
.cat-chip:hover{opacity:1;transform:scale(1.05);}
.cat-chip-more{background:var(--muted);}

/* ─── HERO ─── */
.hero{background:#151530;color:#fff;padding:0 24px;position:relative;overflow:hidden;}
.hero-split{max-width:1200px;margin:0 auto;display:flex;align-items:center;position:relative;z-index:1;}
.hero-left{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 40px 40px 0;}
.hero-right{flex:0 0 500px;display:flex;align-items:center;justify-content:center;-webkit-mask-image:radial-gradient(ellipse 55% 65% at center,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 55% 65% at center,#000 30%,transparent 80%);}
.hero-mascot{max-height:420px;width:auto;object-fit:contain;}
.hero h1{font-size:40px;font-weight:900;line-height:1.15;margin-bottom:20px;}
.hero-accent{background:linear-gradient(90deg,#e17055,#fdcb6e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hero-actions{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap;}
.hero-stats-bar{display:flex;gap:32px;border-top:1px solid rgba(255,255,255,.15);padding-top:16px;}
.hero-stat{text-align:center;}
.hero-stat strong{display:block;font-size:26px;font-weight:800;}
.hero-stat span{font-size:11px;opacity:.65;text-transform:uppercase;letter-spacing:1px;}

/* ─── SECTIONS ─── */
.section-title{font-size:24px;font-weight:800;color:var(--primary);margin-bottom:24px;display:flex;align-items:center;gap:10px;}
.section-icon{font-size:28px;}

/* ─── TIMELINE ─── */
.tl-section{padding:48px 24px;max-width:900px;margin:0 auto;}
.tl-section-inner{position:relative;}
.tl-wrap{position:relative;max-width:750px;margin:0 auto;}
.tl-line{position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);background:linear-gradient(to bottom,#e9e6f5,#6c5ce7,#e17055,#22c55e);border-radius:2px;}
.tl-item{position:relative;width:50%;padding:10px 30px 20px;}
.tl-item:nth-child(odd){left:0;text-align:right;padding-right:40px;}
.tl-item:nth-child(even){left:50%;text-align:left;padding-left:40px;}
.tl-dot{position:absolute;width:14px;height:14px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--accent);z-index:2;top:14px;}
.tl-item:nth-child(odd) .tl-dot{right:-7px;}
.tl-item:nth-child(even) .tl-dot{left:-7px;}
.tl-dot-major{width:18px;height:18px;box-shadow:0 0 0 3px var(--accent),0 0 10px rgba(108,92,231,.3);}
.tl-item:nth-child(odd) .tl-dot-major{right:-9px;}
.tl-item:nth-child(even) .tl-dot-major{left:-9px;}
.tl-content{display:flex;align-items:flex-start;gap:8px;text-align:left;}
.tl-content-text{flex:1;min-width:0;}
.tl-item:nth-child(odd) .tl-content{flex-direction:row-reverse;text-align:right;}
.tl-img{width:56px;height:56px;object-fit:cover;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.12);flex-shrink:0;}
.tl-ma{font-size:11px;color:var(--muted);font-weight:700;display:block;margin-bottom:2px;}
.tl-label{font-size:13px;font-weight:700;color:var(--text);}
.tl-label-link{color:var(--accent)!important;}
.tl-label-link:hover{text-decoration:underline;}
.tl-desc{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4;}
.tl-cat-badge{display:inline-block;font-size:9px;font-weight:700;color:#fff;padding:1px 6px;border-radius:8px;margin-top:4px;}
.tl-empty{text-align:center;padding:40px;color:var(--muted);}

@media(max-width:700px){
  .tl-wrap{padding-left:30px;}
  .tl-line{left:15px;transform:none;}
  .tl-item{width:100%;left:0!important;text-align:left!important;padding:8px 0 16px 40px!important;}
  .tl-item .tl-dot{left:-7px!important;right:auto!important;}
  .tl-item .tl-content{flex-direction:row!important;text-align:left!important;}
}

/* ─── CATEGORIES GRID ─── */
.cats-section{padding:48px 24px;background:#fff;}
.cats-section-inner{max-width:1200px;margin:0 auto;}
.cats-grid-img{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;}
.cat-img-card{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;text-decoration:none;transition:.2s;}
.cat-img-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.2);}
.cat-img-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:.3s;}
.cat-img-card:hover .cat-img-bg{transform:scale(1.05);}
.cat-img-label{position:absolute;bottom:0;left:0;right:0;padding:10px 12px;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;gap:5px;z-index:1;}
.cat-img-icon{font-size:16px;}

/* ─── QUIZ CTA ─── */
.quiz-cta{padding:48px 24px;background:linear-gradient(135deg,#1a1a2e,#2d1f5e);color:#fff;}
.quiz-cta-inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.quiz-cta-text h2{font-size:28px;margin-bottom:12px;}
.quiz-cta-text p{opacity:.8;margin-bottom:20px;}
.quiz-preview-card{background:rgba(255,255,255,.1);border-radius:var(--radius);padding:20px;backdrop-filter:blur(10px);}
.quiz-q{font-weight:700;margin-bottom:12px;}
.quiz-options{display:flex;flex-direction:column;gap:8px;}
.quiz-opt{background:rgba(255,255,255,.08);padding:10px 14px;border-radius:10px;font-size:14px;cursor:pointer;transition:.2s;border:2px solid transparent;}
.quiz-opt:hover{border-color:var(--accent);background:rgba(108,92,231,.2);}
@media(max-width:700px){.quiz-cta-inner{grid-template-columns:1fr;}}

/* ─── FOOTER (jak porownajmy.to) ─── */
.site-footer{background:var(--primary);color:rgba(255,255,255,.7);padding:48px 24px 0;}
.footer-wrap{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 500px;gap:40px;}
.footer-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.footer-desc{font-size:14px;line-height:1.7;max-width:520px;}
.footer-company{font-size:12px;opacity:.5;line-height:1.7;margin-top:16px;}
.footer-links{display:flex;gap:48px;margin-top:28px;}
.footer-col{display:flex;flex-direction:column;gap:7px;}
.footer-col h4{color:#fff;font-size:13px;font-weight:700;margin:0 0 8px;letter-spacing:.5px;}
.footer-col a{color:rgba(255,255,255,.6);font-size:13px;transition:.2s;text-decoration:none;}
.footer-col a:hover{color:#fff;}
.footer-right{display:flex;flex-direction:column;align-items:stretch;min-width:0;max-width:100%;overflow:hidden;}
.footer-right .fb-page,.footer-right iframe{width:100%!important;max-width:100%!important;border-radius:8px 8px 0 0;overflow:hidden;}
.footer-fb-cta{display:block;text-align:center;padding:12px;background:rgba(255,255,255,.08);color:#fff;font-size:13px;font-weight:700;letter-spacing:.5px;border-radius:0 0 8px 8px;text-decoration:none;transition:.2s;width:100%;}
.footer-fb-cta:hover{background:rgba(255,255,255,.15);}
.footer-bottom{max-width:1200px;margin:0 auto;text-align:center;padding:20px 0;margin-top:32px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;}

/* ─── MOBILE HAMBURGER ─── */
.mobile-menu-btn{display:none;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:4px 8px;line-height:1;}
.mobile-quick-link{display:none!important;}
.mobile-menu-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);}
.mobile-menu-panel{position:fixed;top:0;right:-280px;width:280px;height:100%;background:var(--primary);z-index:201;transition:right .3s;padding:20px;overflow-y:auto;}
.mobile-menu-panel.open{right:0;}
.mobile-menu-panel .mm-close{background:none;border:none;color:#fff;font-size:28px;cursor:pointer;position:absolute;top:12px;right:16px;}
.mobile-menu-panel .mm-links{display:flex;flex-direction:column;gap:4px;margin-top:48px;}
.mobile-menu-panel .mm-link{color:rgba(255,255,255,.8);padding:12px 16px;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none;transition:.2s;}
.mobile-menu-panel .mm-link:hover,.mobile-menu-panel .mm-link.active{color:#fff;background:rgba(255,255,255,.1);}
.mobile-menu-panel .mm-divider{height:1px;background:rgba(255,255,255,.1);margin:8px 0;}

@media(max-width:700px){
  .footer-wrap{grid-template-columns:1fr;gap:24px;}
  .footer-right{max-width:100%;min-width:0;}
  .footer-right .fb-page{max-width:100%!important;}
  .footer-right .fb-page span,.footer-right .fb-page iframe{max-width:100%!important;width:100%!important;}
  .footer-links{flex-direction:column;gap:20px;}
  .footer-desc{max-width:100%;}
  .site-footer{padding:32px 16px 0;}
  .hero-split{flex-direction:column;text-align:center;min-height:auto;}
  .hero-left{text-align:center;min-height:auto;padding:24px 0;}
  .hero-right{flex:0 0 auto;padding-top:0;}
  .hero-mascot{max-height:180px;}
  .hero{padding:0 16px;}
  .hero-actions{justify-content:center;gap:8px;}
  .hero-actions .btn{padding:10px 18px;font-size:14px;}
  .hero-stats-bar{gap:16px;justify-content:center;}
  .hero h1{font-size:24px;}
  .hero-stat strong{font-size:20px;}
  .hero-stat span{font-size:9px;}
  .header-nav{display:none;}
  .mobile-menu-btn{display:block;}
  .mobile-quick-link{display:inline-flex!important;}
  .header-inner{height:62px;gap:8px;}
  .logo-img{height:58px;}
  .header-actions .btn{padding:6px 12px;font-size:12px;}
  .site-header{padding:0 12px;}
  .evt-grid{grid-template-columns:1fr!important;}
  .evt-topline{flex-direction:column;gap:12px;}
  .evt-title{font-size:20px;}
  .evt-wrapper{padding:16px;}
  .evt-topbar{padding:12px 16px 16px;}
  .cat-strip{display:none!important;}
  .section-title{font-size:18px;padding:0 4px;}
  .cats-section{padding:32px 12px;}
  .cats-grid-img{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;}
  .quiz-cta{padding:32px 16px;}
  .quiz-cta-inner{grid-template-columns:1fr;gap:24px;}
  .quiz-cta-text h2{font-size:22px;}
  .dual-tl-wrap{padding:0 4px;}
  #os-czasu{padding:32px 12px;}
  /* login mobile handled by mobile-first in .login-split block */
  .section-title{font-size:20px;}
}

/* ─── MOBILE LANDSCAPE ─── */
@media(max-width:900px) and (orientation:landscape){
  .site-header{position:relative;}
  .header-inner{height:40px;}
  .logo-img{height:28px;}
  .cat-strip{display:none;}
  .site-footer{display:none;}
  #pwa-install-bar{display:none!important;}
  .hero{padding:0 12px;}
  .hero-split{min-height:auto;}
  .hero-left{padding:12px 0;}
  .hero h1{font-size:20px;}
  .hero-right{display:none;}
  .hero-stats-bar{gap:12px;padding-top:8px;}
  .hero-stat strong{font-size:18px;}
  .login-split{grid-template-columns:1fr 1fr;min-height:auto;max-height:100vh;overflow:hidden;}
  .login-hero{max-height:none;overflow:hidden;}
  .login-hero>img{max-height:40%;width:auto;}
  .login-hero-overlay{padding:8px 20px;}
  .login-hero-overlay h2{font-size:14px;margin-bottom:2px;}
  .login-hero-overlay p{font-size:10px;}
  .login-form-col{padding:10px 16px;overflow-y:auto;}
  .auth-box h1{font-size:16px;margin-bottom:2px;}
  .auth-box .sub{font-size:10px;margin-bottom:8px;}
  .auth-box .form-group{margin-bottom:6px;}
  .auth-box .form-group label{font-size:11px;margin-bottom:2px;}
  .auth-box .form-control{padding:6px 10px;font-size:13px;}
  .auth-box .btn-lg{padding:8px 16px;font-size:13px;}
  .auth-box .btn-social,.auth-box [class*="btn-facebook"],.auth-box [class*="btn-google"]{padding:8px!important;font-size:13px!important;}
  .auth-box img[alt="wspominawka.pl"]{height:50px!important;}
  .sms-digits input{width:30px;height:36px;font-size:16px;}
  .dual-tl-wrap{gap:16px;}
  #os-czasu{padding:16px 12px;}
  .dual-tl-title{font-size:18px;}
  .cats-section{padding:16px 12px;}
  .cats-grid-img{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;}
  .quiz-cta{padding:16px;}
}
@media(max-height:450px){
  .site-header{position:relative;}
  .cat-strip{display:none;}
  .site-footer{display:none;}
  #pwa-install-bar{display:none!important;}
  .hero-right{display:none;}
}

/* ═══════════════════════════════════════
   KARTA WYDARZENIA (jak oceniamy.to)
   ═══════════════════════════════════════ */

.evt-topbar{background:var(--primary);color:#fff;padding:16px 24px 20px;}
.evt-topbar-inner{max-width:1200px;margin:0 auto;}
.evt-breadcrumb{font-size:12px;margin-bottom:6px;}
.evt-breadcrumb a{color:rgba(255,255,255,.6);transition:.2s;}
.evt-breadcrumb a:hover{color:#fff;}
.evt-breadcrumb span{margin:0 4px;opacity:.4;}
.evt-topline{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.evt-topline-left{flex:1;}
.evt-title{font-size:28px;font-weight:800;margin:0 0 8px;line-height:1.2;}
.evt-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.evt-difficulty-wrap{display:inline-flex;flex-direction:column;gap:2px;min-width:110px;padding:4px 10px;background:rgba(255,255,255,.08);border-radius:10px;}
.evt-diff-bar-dual{display:flex;height:8px;border-radius:4px;overflow:hidden;width:100%;}
.evt-diff-green{background:linear-gradient(90deg,#22c55e,#4ade80);height:100%;transition:.4s;}
.evt-diff-red{background:linear-gradient(90deg,#f87171,#ef4444);height:100%;transition:.4s;}
.evt-diff-info{display:flex;align-items:center;gap:4px;}
.evt-diff-label{font-size:11px;font-weight:800;}
.evt-diff-pct{font-size:10px;opacity:.7;}
.evt-diff-stats{font-size:12px;display:inline-flex;align-items:center;gap:2px;}
.evt-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700;color:#fff;}
.evt-topline-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.evt-share-label{font-size:12px;opacity:.6;}
.evt-share-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;}
.evt-share-btn:hover{background:rgba(255,255,255,.2);transform:scale(1.1);}

.evt-wrapper{max-width:1200px;margin:0 auto;padding:24px;}
.evt-grid{display:grid;grid-template-columns:1fr 400px;gap:24px;}
.evt-content{min-width:0;}

/* Tabs */
.evt-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:0;}
.evt-tab{padding:12px 20px;border:none;background:none;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;transition:.2s;margin-bottom:-2px;}
.evt-tab:hover{color:var(--text);}
.evt-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.evt-tab-panel{display:none;}
.evt-tab-panel.active{display:block;}

/* Cards */
.evt-card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:16px;}
.evt-description{line-height:1.7;font-size:14px;color:var(--text);}
.evt-description h2{font-size:17px;font-weight:700;color:var(--text);margin:18px 0 6px;padding-bottom:5px;border-bottom:2px solid var(--border);}
.evt-description h2:first-child{margin-top:0;}
.evt-description h3{font-size:15px;font-weight:700;color:var(--accent);margin:14px 0 4px;}
.evt-description p{margin:0 0 8px;line-height:1.6;}
.evt-description ul{margin:4px 0 8px;padding-left:20px;}
.evt-description li{margin:0 0 3px;line-height:1.5;}
.evt-description a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.evt-description a:hover{opacity:.8;}
.evt-description strong{font-weight:700;}
.evt-description em{font-style:italic;}
.evt-description .wzor-formula-box{text-align:center;padding:18px 14px;margin:8px 0 14px;background:linear-gradient(135deg,rgba(59,47,127,.06),rgba(59,47,127,.12));border-radius:12px;border:2px solid var(--accent);}
.evt-description .wzor-main{font-size:28px;font-weight:800;color:var(--accent);letter-spacing:2px;font-family:Georgia,serif;}
.evt-description .wzor-symbols{width:100%;border-collapse:separate;border-spacing:0;margin:8px 0 12px;border-radius:10px;overflow:hidden;border:1px solid var(--border);}
.evt-description .wzor-symbols td{padding:7px 10px;font-size:13px;border-bottom:1px solid var(--border);}
.evt-description .wzor-sym{font-size:18px;font-weight:800;color:var(--accent);text-align:center;width:45px;font-family:Georgia,serif;}
.evt-description .wzor-name{font-weight:700;width:130px;font-size:13px;}
.evt-description .wzor-desc{color:var(--muted);line-height:1.5;font-size:12px;}
.evt-description .wzor-example{background:var(--dark,#1a1a2e);color:#e9e6f5;padding:12px 16px;border-radius:10px;font-family:'Courier New',monospace;font-size:14px;margin:8px 0 10px;letter-spacing:1px;text-align:center;}
.evt-description .wzor-example strong{color:#a78bfa;}

/* Sidebar */
.evt-sidebar{position:sticky;top:76px;align-self:start;}
.evt-sidebar-img{padding:12px;}
.evt-sidebar-img img{width:100%;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.1);}
.evt-sidebar-img .evt-img-placeholder{width:100%;height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#e9e6f5,#d4cff0);border-radius:10px;color:var(--primary);font-weight:600;font-size:14px;}
.evt-thumbs{display:flex;gap:6px;margin-top:8px;overflow-x:auto;}
.evt-thumb{width:56px;height:56px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent;flex-shrink:0;transition:.2s;}
.evt-thumb.active{border-color:var(--accent);}
.evt-thumb:hover{opacity:.8;}
.evt-sidebar-title{font-size:14px;color:var(--primary);margin:0 0 12px;display:flex;align-items:center;gap:6px;}
.evt-info-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;}
.evt-info-label{color:var(--muted);}
.evt-info-value{font-weight:600;text-align:right;max-width:60%;}

/* ═══════════════════════════════════════
   DUAL TIMELINE (oś wstydu + chwały)
   ═══════════════════════════════════════ */
.dual-tl-wrap{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.dual-tl-col{min-width:0;}
.dual-tl-header{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.dual-tl-header-center{text-align:center;margin-bottom:20px;}
.dual-tl-icon{font-size:32px;}
.dual-tl-title{font-size:22px;font-weight:900;margin:0;}
.dual-tl-sub{font-size:11px;color:var(--muted);}

.mini-tl{position:relative;max-width:500px;margin:0 auto;}
.mini-tl-line{position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);border-radius:2px;}
.mini-tl-line-shame{background:linear-gradient(to bottom,#fecaca,#ef4444,#7f1d1d);}
.mini-tl-line-glory{background:linear-gradient(to bottom,#fde68a,#f59e0b,#6c5ce7);}

/* ─── BIOLOGIA: DNA double helix ─── */
.tl-subject-biologia .mini-tl-line{width:24px;background:none;overflow:visible;}
.tl-subject-biologia .mini-tl-line::before,
.tl-subject-biologia .mini-tl-line::after{
  content:'';position:absolute;top:0;bottom:0;width:3px;border-radius:2px;
  animation:dna-wave 3s ease-in-out infinite;
}
.tl-subject-biologia .mini-tl-line-shame::before{left:2px;background:#22c55e;animation-name:dna-left;}
.tl-subject-biologia .mini-tl-line-shame::after{right:2px;background:#16a34a;animation-name:dna-right;}
.tl-subject-biologia .mini-tl-line-glory::before{left:2px;background:#a78bfa;animation-name:dna-left;}
.tl-subject-biologia .mini-tl-line-glory::after{right:2px;background:#7c3aed;animation-name:dna-right;}
/* Rungs (horizontal bars between strands) */
.tl-subject-biologia .mini-tl-line{
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0px,transparent 26px,
    rgba(34,197,94,.25) 26px,rgba(34,197,94,.25) 28px,
    transparent 28px,transparent 54px
  );
  background-size:100% 54px;
}
.tl-subject-biologia .mini-tl-line-glory{
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0px,transparent 26px,
    rgba(124,58,237,.25) 26px,rgba(124,58,237,.25) 28px,
    transparent 28px,transparent 54px
  );
}
@keyframes dna-left{
  0%,100%{transform:translateX(-4px);}
  50%{transform:translateX(4px);}
}
@keyframes dna-right{
  0%,100%{transform:translateX(4px);}
  50%{transform:translateX(-4px);}
}
/* Dots as molecules */
.tl-subject-biologia .mini-tl-dot{
  background:#22c55e!important;border-color:#bbf7d0!important;
  box-shadow:0 0 6px rgba(34,197,94,.5),0 0 0 2px rgba(34,197,94,.2)!important;
}
.tl-subject-biologia .dual-tl-col:last-child .mini-tl-dot{
  background:#7c3aed!important;border-color:#ddd6fe!important;
  box-shadow:0 0 6px rgba(124,58,237,.5),0 0 0 2px rgba(124,58,237,.2)!important;
}

/* ─── CHEMIA: Mensurka z kreskami pomiarowymi ─── */
.tl-subject-chemia .mini-tl-line{
  width:16px;border-radius:0 0 8px 8px;border:2px solid rgba(76,175,80,.4);border-top:none;
  background:linear-gradient(to top,rgba(76,175,80,.15),rgba(76,175,80,.03))!important;
}
/* Kreski pomiarowe */
.tl-subject-chemia .mini-tl-line::before{
  content:'';position:absolute;top:0;bottom:0;left:0;right:0;
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0px, transparent 38px,
      rgba(76,175,80,.5) 38px, rgba(76,175,80,.5) 40px,
      transparent 40px, transparent 48px,
      rgba(76,175,80,.25) 48px, rgba(76,175,80,.25) 49px,
      transparent 49px, transparent 58px,
      rgba(76,175,80,.25) 58px, rgba(76,175,80,.25) 59px,
      transparent 59px, transparent 68px,
      rgba(76,175,80,.25) 68px, rgba(76,175,80,.25) 69px,
      transparent 69px, transparent 78px,
      rgba(76,175,80,.5) 78px, rgba(76,175,80,.5) 80px
    );
  background-size:100% 80px;
}
/* Długie kreski wystające na lewo */
.tl-subject-chemia .mini-tl-line::after{
  content:'';position:absolute;top:0;bottom:0;width:8px;left:-6px;
  background-image:repeating-linear-gradient(to bottom,
    transparent 0px,transparent 38px,
    rgba(76,175,80,.4) 38px,rgba(76,175,80,.4) 40px,
    transparent 40px,transparent 78px,
    rgba(76,175,80,.4) 78px,rgba(76,175,80,.4) 80px
  );
  background-size:100% 80px;
}
.tl-subject-chemia .mini-tl-line-glory{
  border-color:rgba(33,150,243,.4)!important;
  background:linear-gradient(to top,rgba(33,150,243,.15),rgba(33,150,243,.03))!important;
}
.tl-subject-chemia .mini-tl-line-glory::before{
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0px, transparent 38px,
      rgba(33,150,243,.5) 38px, rgba(33,150,243,.5) 40px,
      transparent 40px, transparent 48px,
      rgba(33,150,243,.25) 48px, rgba(33,150,243,.25) 49px,
      transparent 49px, transparent 58px,
      rgba(33,150,243,.25) 58px, rgba(33,150,243,.25) 59px,
      transparent 59px, transparent 68px,
      rgba(33,150,243,.25) 68px, rgba(33,150,243,.25) 69px,
      transparent 69px, transparent 78px,
      rgba(33,150,243,.5) 78px, rgba(33,150,243,.5) 80px
    )!important;
}
.tl-subject-chemia .mini-tl-line-glory::after{
  background-image:repeating-linear-gradient(to bottom,
    transparent 0px,transparent 38px,
    rgba(33,150,243,.4) 38px,rgba(33,150,243,.4) 40px,
    transparent 40px,transparent 78px,
    rgba(33,150,243,.4) 78px,rgba(33,150,243,.4) 80px
  )!important;
}
/* Bąbelki (dots) */
.tl-subject-chemia .mini-tl-dot{
  background:rgba(76,175,80,.2)!important;border:2px solid rgba(76,175,80,.6)!important;
  box-shadow:inset 0 -2px 4px rgba(76,175,80,.3),0 0 8px rgba(76,175,80,.2)!important;
}
.tl-subject-chemia .dual-tl-col:last-child .mini-tl-dot{
  background:rgba(33,150,243,.2)!important;border:2px solid rgba(33,150,243,.6)!important;
  box-shadow:inset 0 -2px 4px rgba(33,150,243,.3),0 0 8px rgba(33,150,243,.2)!important;
}

/* ─── GEOGRAFIA: Rzeka z falami, kropki jako statki ─── */
.tl-subject-geografia .mini-tl-line{
  width:20px;border-radius:10px;
  background:linear-gradient(90deg,rgba(33,150,243,.1),rgba(33,150,243,.35),rgba(33,150,243,.1))!important;
  border:none;overflow:visible;
}
/* Fale na rzece */
.tl-subject-geografia .mini-tl-line::before{
  content:'';position:absolute;top:0;bottom:0;left:-2px;right:-2px;
  background-image:repeating-linear-gradient(to bottom,
    transparent 0px,transparent 14px,
    rgba(33,150,243,.2) 14px,rgba(33,150,243,.2) 16px,
    transparent 16px,transparent 22px,
    rgba(33,150,243,.12) 22px,rgba(33,150,243,.12) 23px,
    transparent 23px,transparent 30px
  );
  background-size:100% 30px;
  animation:river-flow 2s linear infinite;
}
.tl-subject-geografia .mini-tl-line::after{
  content:'';position:absolute;top:0;bottom:0;left:2px;right:2px;
  background-image:repeating-linear-gradient(to bottom,
    transparent 0px,transparent 8px,
    rgba(255,255,255,.12) 8px,rgba(255,255,255,.12) 10px,
    transparent 10px,transparent 24px,
    rgba(255,255,255,.08) 24px,rgba(255,255,255,.08) 25px,
    transparent 25px,transparent 30px
  );
  background-size:100% 30px;
  animation:river-flow 3s linear infinite;
}
.tl-subject-geografia .mini-tl-line-glory{
  background:linear-gradient(90deg,rgba(76,175,80,.1),rgba(76,175,80,.3),rgba(76,175,80,.1))!important;
}
.tl-subject-geografia .mini-tl-line-glory::before{
  background-image:repeating-linear-gradient(to bottom,
    transparent 0px,transparent 14px,
    rgba(76,175,80,.2) 14px,rgba(76,175,80,.2) 16px,
    transparent 16px,transparent 22px,
    rgba(76,175,80,.12) 22px,rgba(76,175,80,.12) 23px,
    transparent 23px,transparent 30px
  )!important;
}
.tl-subject-geografia .mini-tl-line-glory::after{
  background-image:repeating-linear-gradient(to bottom,
    transparent 0px,transparent 8px,
    rgba(255,255,255,.1) 8px,rgba(255,255,255,.1) 10px,
    transparent 10px,transparent 24px,
    rgba(255,255,255,.06) 24px,rgba(255,255,255,.06) 25px,
    transparent 25px,transparent 30px
  )!important;
}
@keyframes river-flow{
  0%{background-position:0 0;}
  100%{background-position:0 30px;}
}
/* Statki (dots) — trójkątny kształt jak łódka */
.tl-subject-geografia .mini-tl-dot{
  width:16px!important;height:10px!important;border-radius:2px 2px 50% 50%!important;
  background:#2196f3!important;border:2px solid #90caf9!important;
  box-shadow:0 2px 6px rgba(33,150,243,.4)!important;
}
.tl-subject-geografia .dual-tl-col:last-child .mini-tl-dot{
  background:#388e3c!important;border-color:#a5d6a7!important;
  box-shadow:0 2px 6px rgba(56,142,60,.4)!important;
}

/* ─── MATEMATYKA: Liczydło z kulkami ─── */
.tl-subject-matematyka .mini-tl-line{
  width:6px;border-radius:3px;
  background:linear-gradient(90deg,#5d4037,#8d6e63,#5d4037)!important;
  border:none;box-shadow:inset 0 0 2px rgba(0,0,0,.3);
}
/* Poziome pręty liczydła */
.tl-subject-matematyka .mini-tl-line::before{
  content:'';position:absolute;top:0;bottom:0;left:-18px;width:42px;
  background-image:repeating-linear-gradient(to bottom,
    transparent 0px,transparent 28px,
    #8d6e63 28px,#8d6e63 31px,
    transparent 31px,transparent 60px
  );
  background-size:100% 60px;
  border-radius:2px;
}
/* Małe kulki na prętach (dekoracja) */
.tl-subject-matematyka .mini-tl-line::after{
  content:'';position:absolute;top:0;bottom:0;left:-14px;width:34px;
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0px,transparent 22px,
      #e53935 22px,#e53935 28px,
      transparent 28px,transparent 31px,
      transparent 31px,transparent 43px,
      #fdd835 43px,#fdd835 49px,
      transparent 49px,transparent 52px,
      transparent 52px,transparent 54px,
      #43a047 54px,#43a047 60px
    );
  background-size:100% 60px;
  border-radius:4px;
  opacity:.35;
}
.tl-subject-matematyka .mini-tl-line-glory{
  background:linear-gradient(90deg,#4527a0,#7e57c2,#4527a0)!important;
}
.tl-subject-matematyka .mini-tl-line-glory::before{
  background-image:repeating-linear-gradient(to bottom,
    transparent 0px,transparent 28px,
    #7e57c2 28px,#7e57c2 31px,
    transparent 31px,transparent 60px
  )!important;
}
.tl-subject-matematyka .mini-tl-line-glory::after{
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0px,transparent 22px,
      #ab47bc 22px,#ab47bc 28px,
      transparent 28px,transparent 31px,
      transparent 31px,transparent 43px,
      #7c4dff 43px,#7c4dff 49px,
      transparent 49px,transparent 52px,
      transparent 52px,transparent 54px,
      #b388ff 54px,#b388ff 60px
    )!important;
  opacity:.35;
}
/* Kulki (dots) — kolorowe jak na liczydle */
.tl-subject-matematyka .mini-tl-dot{
  width:14px!important;height:14px!important;
  background:radial-gradient(circle at 35% 35%,#ef5350,#c62828)!important;
  border:2px solid #ef9a9a!important;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.3),0 1px 4px rgba(198,40,40,.4)!important;
}
.tl-subject-matematyka .mini-tl-item:nth-child(3n+2) .mini-tl-dot{
  background:radial-gradient(circle at 35% 35%,#fdd835,#f9a825)!important;
  border-color:#fff176!important;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.2),0 1px 4px rgba(249,168,37,.4)!important;
}
.tl-subject-matematyka .mini-tl-item:nth-child(3n+3) .mini-tl-dot{
  background:radial-gradient(circle at 35% 35%,#66bb6a,#2e7d32)!important;
  border-color:#a5d6a7!important;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.3),0 1px 4px rgba(46,125,50,.4)!important;
}
.tl-subject-matematyka .dual-tl-col:last-child .mini-tl-dot{
  background:radial-gradient(circle at 35% 35%,#ab47bc,#6a1b9a)!important;
  border-color:#ce93d8!important;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.3),0 1px 4px rgba(106,27,154,.4)!important;
}
.tl-subject-matematyka .dual-tl-col:last-child .mini-tl-item:nth-child(3n+2) .mini-tl-dot{
  background:radial-gradient(circle at 35% 35%,#7c4dff,#4527a0)!important;
  border-color:#b388ff!important;
}
.tl-subject-matematyka .dual-tl-col:last-child .mini-tl-item:nth-child(3n+3) .mini-tl-dot{
  background:radial-gradient(circle at 35% 35%,#e040fb,#8e24aa)!important;
  border-color:#ea80fc!important;
}

/* ─── JĘZYKI: Kropki jako książki ─── */
.tl-subject-jezyki .mini-tl-dot{
  width:auto!important;height:auto!important;background:none!important;border:none!important;box-shadow:none!important;font-size:16px;line-height:1;
}
.tl-subject-jezyki .mini-tl-dot::after{content:'📕';}
.tl-subject-jezyki .mini-tl-item:nth-child(3n+2) .mini-tl-dot::after{content:'📗';}
.tl-subject-jezyki .mini-tl-item:nth-child(3n+3) .mini-tl-dot::after{content:'📘';}
.tl-subject-jezyki .mini-tl-line-shame{background:linear-gradient(to bottom,#f8bbd0,#e91e63,#880e4f)!important;}
.tl-subject-jezyki .mini-tl-line-glory{background:linear-gradient(to bottom,#c8e6c9,#4caf50,#1b5e20)!important;}

/* ─── LOGIKA: Kropki jako kostki Rubika ─── */
.tl-subject-logika .mini-tl-dot{
  width:16px!important;height:16px!important;border-radius:3px!important;
  background:linear-gradient(135deg,#e53935 25%,#fdd835 25%,#fdd835 50%,#2196f3 50%,#2196f3 75%,#43a047 75%)!important;
  border:2px solid #455a64!important;box-shadow:0 1px 4px rgba(0,0,0,.3)!important;
}
.tl-subject-logika .mini-tl-line-shame{background:linear-gradient(to bottom,#b0bec5,#607d8b,#37474f)!important;}
.tl-subject-logika .mini-tl-line-glory{background:linear-gradient(to bottom,#ce93d8,#9c27b0,#4a148c)!important;}

/* ─── IT: Kropki jako laptopy ─── */
.tl-subject-it .mini-tl-dot{
  width:auto!important;height:auto!important;background:none!important;border:none!important;box-shadow:none!important;font-size:14px;line-height:1;
}
.tl-subject-it .mini-tl-dot::after{content:'💻';}
.tl-subject-it .mini-tl-item:nth-child(3n+2) .mini-tl-dot::after{content:'🖥️';}
.tl-subject-it .mini-tl-item:nth-child(3n+3) .mini-tl-dot::after{content:'⌨️';}
.tl-subject-it .mini-tl-line-shame{background:linear-gradient(to bottom,#b3e5fc,#0288d1,#01579b)!important;}
.tl-subject-it .mini-tl-line-glory{background:linear-gradient(to bottom,#b2dfdb,#00897b,#004d40)!important;}

/* ─── SPORT: Kropki jako piłki ─── */
.tl-subject-sport .mini-tl-dot{
  width:auto!important;height:auto!important;background:none!important;border:none!important;box-shadow:none!important;font-size:16px;line-height:1;
}
.tl-subject-sport .mini-tl-dot::after{content:'⚽';}
.tl-subject-sport .mini-tl-item:nth-child(3n+2) .mini-tl-dot::after{content:'🏀';}
.tl-subject-sport .mini-tl-item:nth-child(3n+3) .mini-tl-dot::after{content:'🎾';}
.tl-subject-sport .mini-tl-line-shame{background:linear-gradient(to bottom,#c8e6c9,#388e3c,#1b5e20)!important;}
.tl-subject-sport .mini-tl-line-glory{background:linear-gradient(to bottom,#fff9c4,#f9a825,#e65100)!important;}

/* ─── FIZYKA: Kropki jako żarówki ─── */
.tl-subject-fizyka .mini-tl-dot{
  width:auto!important;height:auto!important;background:none!important;border:none!important;box-shadow:none!important;font-size:15px;line-height:1;
}
.tl-subject-fizyka .mini-tl-dot::after{content:'💡';}
.tl-subject-fizyka .mini-tl-item:nth-child(3n+2) .mini-tl-dot::after{content:'⚡';}
.tl-subject-fizyka .mini-tl-item:nth-child(3n+3) .mini-tl-dot::after{content:'🔬';}
.tl-subject-fizyka .mini-tl-line-shame{background:linear-gradient(to bottom,#ffe0b2,#ff9800,#e65100)!important;}
.tl-subject-fizyka .mini-tl-line-glory{background:linear-gradient(to bottom,#bbdefb,#1976d2,#0d47a1)!important;}

.mini-tl-item{position:relative;width:50%;padding:6px 20px 12px;}
.mini-tl-left{left:0;text-align:right;padding-right:28px;}
.mini-tl-right{left:50%;text-align:left;padding-left:28px;}

.mini-tl-dot{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.15);z-index:2;top:50%;transform:translateY(-50%);}
.mini-tl-left .mini-tl-dot{right:-6px;}
.mini-tl-right .mini-tl-dot{left:-6px;}
.mini-tl-dot-big{width:16px;height:16px;box-shadow:0 0 0 3px rgba(0,0,0,.15),0 0 8px rgba(0,0,0,.1);}
.mini-tl-left .mini-tl-dot-big{right:-8px;}
.mini-tl-right .mini-tl-dot-big{left:-8px;}

.mini-tl-card{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--card);border-radius:10px;box-shadow:0 1px 6px rgba(0,0,0,.06);border:1px solid var(--border);text-decoration:none;color:inherit;transition:.15s;}
.mini-tl-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.1);transform:translateY(-1px);}
.mini-tl-left .mini-tl-card{flex-direction:row-reverse;text-align:right;}

.mini-tl-img{width:40px;height:40px;border-radius:6px;object-fit:cover;flex-shrink:0;}
.mini-tl-text{flex:1;min-width:0;}
.mini-tl-date{font-size:10px;color:var(--muted);font-weight:600;}
.mini-tl-name{font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-tl-bar{display:flex;height:4px;border-radius:2px;overflow:hidden;margin-top:3px;}
.mini-tl-bar-g{background:#22c55e;height:100%;}
.mini-tl-bar-r{background:#ef4444;height:100%;}
.mini-tl-stats{font-size:10px;margin-top:2px;display:flex;gap:4px;}
.mini-tl-left .mini-tl-stats{justify-content:flex-end;}
.st-red{color:#ef4444;font-weight:700;}
.st-green{color:#22c55e;font-weight:700;}
.st-muted{opacity:.5;}

.mini-tl-medal{font-size:18px;flex-shrink:0;min-width:24px;text-align:center;}
.mini-tl-card-glory{border-left:none;}
.mini-tl-pts{font-size:14px;font-weight:800;color:var(--accent);white-space:nowrap;}

@media(max-width:700px){
  .dual-tl-wrap{grid-template-columns:1fr;gap:24px;}
  .mini-tl-item{width:100%;left:0!important;text-align:left!important;padding:4px 0 10px 36px!important;}
  .mini-tl-line{left:12px;transform:none;}
  .mini-tl-dot,.mini-tl-dot-big{left:-6px!important;right:auto!important;}
  .mini-tl-card{flex-direction:row!important;text-align:left!important;gap:6px;padding:6px 8px;}
  .mini-tl-left .mini-tl-stats{justify-content:flex-start;}
  .mini-tl-img{width:32px;height:32px;}
  .mini-tl-name{font-size:11px;white-space:normal;line-height:1.3;}
  .mini-tl-text{min-width:0;}
  .mini-tl-date{font-size:9px;}
  .mini-tl-stats{font-size:9px;}
  .mini-tl-bar{margin-top:2px;}
  .dual-tl-title{font-size:18px;}
  .dual-tl-icon{font-size:24px;}
}

/* ─── SHAME PAIR CARDS ─── */
.shame-pair-card{flex-direction:column!important;gap:4px;padding:8px 10px!important;text-align:left!important;}
.shame-pair-row{display:flex;align-items:center;gap:4px;min-width:0;}
.shame-pair-link{display:flex;align-items:center;gap:4px;text-decoration:none;color:var(--accent);flex:1;min-width:0;overflow:hidden;}
.shame-pair-img{width:24px;height:24px;border-radius:4px;object-fit:cover;flex-shrink:0;}
.shame-pair-name{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.shame-vs{font-size:9px;color:var(--muted);flex-shrink:0;padding:0 2px;}
.shame-stats-row{display:flex;justify-content:space-between;font-size:10px;}

/* FB Widget */
.evt-card .fb-page{width:100%;overflow:hidden;}

/* ─── LOGIN SPLIT ─── */
/* Mobile-first: single column, hero on top */
.login-split{display:flex;flex-direction:column;min-height:calc(100vh - 60px);}
.login-hero{position:relative;overflow:hidden;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:280px;}
.login-hero>img{width:70%;max-height:160px;object-fit:contain;}
.login-hero-overlay{padding:8px 20px;text-align:center;}
.login-hero-overlay h2{font-size:16px;font-weight:800;margin:0 0 3px;color:var(--primary);}
.login-hero-overlay p{font-size:11px;color:var(--muted);max-width:320px;margin:0 auto;}
.login-form-col{display:flex;align-items:flex-start;justify-content:center;padding:12px 16px;background:var(--bg);flex:1;}
.auth-box{width:100%;max-width:400px;}
.auth-box .auth-logo-wrap{display:none;}
.auth-box h1{display:none;}
.auth-box .sub{display:none;}
/* Desktop: side by side */
@media(min-width:701px){
  .login-split{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 130px);}
  .login-hero{max-height:none;}
  .login-hero>img{width:90%;max-height:65%;}
  .login-hero-overlay{padding:20px 40px;}
  .login-hero-overlay h2{font-size:22px;}
  .login-hero-overlay p{font-size:13px;}
  .login-form-col{align-items:center;padding:40px;}
  .auth-box .auth-logo-wrap{display:block;}
  .auth-box h1{display:block;font-size:22px;font-weight:800;color:var(--primary);margin:0 0 6px;text-align:center;}
  .auth-box .sub{display:block;font-size:13px;color:var(--muted);text-align:center;margin-bottom:20px;}
}
.auth-box .form-group{margin-bottom:14px;}
.auth-box .form-group label{display:block;font-size:13px;font-weight:600;color:var(--primary);margin-bottom:4px;}
.auth-box .form-control{width:100%;padding:10px 14px;border:2px solid var(--border);border-radius:10px;font-size:15px;box-sizing:border-box;transition:.2s;}
.auth-box .form-control:focus{border-color:var(--accent);outline:none;}
.auth-box .btn-full{width:100%;justify-content:center;}
.auth-box .alert-error{background:#fee2e2;color:#991b1b;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:14px;}
.sms-digits{display:flex;gap:6px;justify-content:center;margin-bottom:16px;}
.sms-digits input{width:38px;height:46px;text-align:center;font-size:20px;font-weight:700;border:2px solid var(--border);border-radius:8px;box-sizing:border-box;}
.sms-digits input:focus{border-color:var(--accent);outline:none;}

/* ─── KONTO PAGE ─── */
.konto-header{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:12px;}
.konto-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#e17055);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;flex-shrink:0;overflow:hidden;}
.konto-avatar img{width:100%;height:100%;object-fit:cover;}
.konto-name{font-size:18px;font-weight:800;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.konto-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px;}
.konto-stats .evt-card{text-align:center;padding:12px 6px;}
.konto-stats .evt-card div:first-child{font-size:22px;}
.konto-dual-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.konto-quick-links{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.konto-settings-grid{display:grid;grid-template-columns:80px 1fr;gap:20px;align-items:start;}
@media(max-width:700px){
  .konto-stats{grid-template-columns:repeat(3,1fr);}
  .konto-stats .evt-card div:first-child{font-size:18px;}
  .konto-dual-col{grid-template-columns:1fr;}
  .konto-quick-links{grid-template-columns:repeat(2,1fr);}
  .konto-header{gap:10px;}
  .konto-avatar{width:44px;height:44px;font-size:20px;}
  .konto-name{font-size:16px;}
  .konto-settings-grid{grid-template-columns:1fr;gap:12px;}
}
/* duplicate removed — login mobile rules in main @media(max-width:700px) block above */