/* =============================================
   design.css — КРАСИВЫЙ ДИЗАЙН v2
   Быстрые действия, баннеры, карточки, градиенты
   HappyGo День 5
   ============================================= */

/* ── БЫСТРЫЕ ДЕЙСТВИЯ (главная) ─────────────── */
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 0 2px}
.qa-card{background:linear-gradient(135deg,var(--c1),var(--c2));border:none;border-radius:16px;padding:13px 12px;cursor:pointer;text-align:left;color:#fff;transition:transform .15s;font-family:inherit;display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden}
.qa-card::after{content:'';position:absolute;top:-18px;right:-18px;width:60px;height:60px;background:rgba(255,255,255,.12);border-radius:50%}
.qa-card:active{transform:scale(.95)}
.qa-icon{font-size:24px;margin-bottom:4px;position:relative;z-index:1}
.qa-label{font-weight:800;font-size:13px;position:relative;z-index:1}
.qa-sub{font-size:10px;opacity:.8;position:relative;z-index:1}

/* ── HERO БАННЕРЫ ────────────────────────────── */
.hero-banner{background:linear-gradient(135deg,#10b981,#059669);border-radius:18px;padding:16px;margin:10px 14px;display:flex;align-items:center;justify-content:space-between;color:#fff;flex-shrink:0;position:relative;overflow:hidden}
.hero-banner::before{content:'';position:absolute;top:-20px;right:-20px;width:100px;height:100px;background:rgba(255,255,255,.1);border-radius:50%}
.hero-banner::after{content:'';position:absolute;bottom:-30px;right:40px;width:80px;height:80px;background:rgba(255,255,255,.07);border-radius:50%}
.hero-banner-left{position:relative;z-index:1}
.hero-banner-title{font-weight:900;font-size:16px;margin-bottom:3px}
.hero-banner-sub{font-size:11px;opacity:.85;margin-bottom:10px}
.hero-banner-btn{background:rgba(255,255,255,.25);border:1.5px solid rgba(255,255,255,.5);color:#fff;border-radius:10px;padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.hero-banner-icon{font-size:52px;position:relative;z-index:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}

.hero-blue{background:linear-gradient(135deg,#2563eb,#1d4ed8)}
.hero-orange{background:linear-gradient(135deg,#f59e0b,#d97706)}
.hero-purple{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}

/* ── ПЛАШКА УВЕДОМЛЕНИЯ (промо) ─────────────── */
.promo-strip{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#fef3c7,#fde68a);border-radius:12px;padding:10px 13px;margin:0 14px 10px;cursor:pointer;flex-shrink:0}
.promo-strip-icon{font-size:22px;flex-shrink:0}
.promo-strip-text{font-size:12px;font-weight:700;color:#92400e;flex:1}
.promo-strip-arrow{color:#d97706;font-size:14px}

/* ── ИКОНКА В КРУЖКЕ ─────────────────────────── */
.icon-circle{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.ic-green{background:var(--gp);color:var(--g)}
.ic-blue{background:#dbeafe;color:#2563eb}
.ic-orange{background:#fef3c7;color:#d97706}
.ic-purple{background:#ede9fe;color:#7c3aed}
.ic-red{background:#fee2e2;color:#ef4444}

/* ── МАРШРУТ (от→до) ─────────────────────────── */
.route-row{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:12px;padding:10px 12px}
.route-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.route-dot.from{background:var(--g)}
.route-dot.to{background:var(--r)}
.route-line{width:1px;height:16px;background:var(--br);margin-left:4px}
.route-text{font-size:13px;font-weight:600;flex:1}
.route-arrow{font-size:18px;color:var(--br)}

/* ── ЦЕННИК (красиво) ───────────────────────── */
.price-pill{display:inline-flex;align-items:baseline;gap:3px;background:linear-gradient(135deg,var(--gp),var(--gl));border-radius:20px;padding:4px 12px}
.price-pill b{font-size:18px;font-weight:900;color:var(--g)}
.price-pill span{font-size:11px;color:var(--gd)}

/* ── АНАЛИТИКА: заголовок-дашборд ───────────── */
.analytics-header{background:linear-gradient(135deg,#10b981,#2563eb);padding:18px 16px;color:#fff;flex-shrink:0;position:relative;overflow:hidden}
.analytics-header::after{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:rgba(255,255,255,.08);border-radius:50%}
.analytics-header-title{font-size:18px;font-weight:900;margin-bottom:2px;position:relative;z-index:1}
.analytics-header-sub{font-size:11px;opacity:.85;position:relative;z-index:1}
.analytics-header-stats{display:flex;gap:16px;margin-top:12px;position:relative;z-index:1}
.ah-stat{text-align:center}
.ah-stat b{display:block;font-size:20px;font-weight:900}
.ah-stat span{font-size:10px;opacity:.8}

/* ── ФОРМА ПОСЫЛКИ: шаги ─────────────────────── */
.parcel-steps{display:flex;gap:0;padding:12px 14px 8px;flex-shrink:0;border-bottom:1px solid var(--br)}
.parcel-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
.parcel-step:not(:last-child)::after{content:'';position:absolute;top:12px;left:calc(50% + 12px);right:calc(-50% + 12px);height:2px;background:var(--br)}
.parcel-step.done::after,.parcel-step.active::after{background:var(--g)}
.ps-dot{width:24px;height:24px;border-radius:50%;background:var(--br);color:var(--mu);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.parcel-step.active .ps-dot{background:var(--g);color:#fff}
.parcel-step.done .ps-dot{background:var(--gd);color:#fff}
.ps-label{font-size:9px;font-weight:600;color:var(--mu)}
.parcel-step.active .ps-label{color:var(--g)}

/* ── СПИСОК ФИЧЕЙ ──────────────────────────── */
.feature-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--br)}
.feature-row:last-child{border-bottom:none}
.feature-row-text{flex:1}
.feature-row-title{font-weight:700;font-size:13px;margin-bottom:1px}
.feature-row-sub{font-size:11px;color:var(--mu)}

/* ── ТЁМНЫЙ РЕЖИМ ────────────────────────────── */
body.dark .qa-card::after{background:rgba(255,255,255,.08)}
body.dark .route-row{background:#1a1a2e}
body.dark .promo-strip{background:linear-gradient(90deg,#2d2000,#3d2e00)}
body.dark .promo-strip-text{color:#fbbf24}

/* ── PULSE АНИМАЦИЯ (для GPS) ──────────────── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}