:root{ --bg:#0b0f17; --surface: rgba(255,255,255,.06); --surface2: rgba(255,255,255,.09); --stroke: rgba(255,255,255,.12); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.68); --muted2: rgba(255,255,255,.52); --shadow: 0 18px 50px rgba(0,0,0,.35); --shadow2: 0 12px 30px rgba(0,0,0,.28); --pad: 16px; --pad2: 22px; --h: 64px; --chip: 34px; --blur: blur(18px); /* Use Inter (supports Cyrillic) with fallbacks for better Cyrillic rendering */ --font: 'Inter', 'Noto Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --a1: #7c5cff; /* violet */ --a2: #00d3a7; /* teal */ } /* Import a modern font with Cyrillic support */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap&subset=cyrillic'); /* Light theme overrides: set when is present */ html[data-theme="light"] { --bg: #ffffff; --surface: rgba(2,6,23,0.03); --surface2: rgba(2,6,23,0.04); --stroke: rgba(2,6,23,0.06); --text: #0b1a2b; --muted: rgba(11,26,43,0.6); --muted2: rgba(11,26,43,0.4); --shadow: 0 12px 30px rgba(2,6,23,0.06); --shadow2: 0 8px 24px rgba(2,6,23,0.04); --blur: none; } html[data-theme="light"] .kmn-profile-menu{ background: rgba(255,255,255,.96); border-color: rgba(11,26,43,.12); box-shadow: 0 10px 24px rgba(2,6,23,.08); } html[data-theme="light"] .kmn-profile-item{ color: #0b1a2b; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: var(--font); background: radial-gradient(900px 500px at 70% -10%, rgba(124,92,255,.35), transparent 60%), radial-gradient(900px 500px at 10% 0%, rgba(0,211,167,.20), transparent 55%), var(--bg); color: var(--text); } a{color:inherit; text-decoration:none} /* Accessibility */ .kmn-skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .kmn-skip:focus{ left: 12px; top: 12px; width:auto; height:auto; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.45); backdrop-filter: var(--blur); z-index: 1000; } /* ===== Header / Topbar (app-like) ===== */ .topbar{ height: var(--h); display:flex; align-items:center; justify-content:space-between; padding: 0 var(--pad2); border-bottom: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.03)); backdrop-filter: blur(8px) saturate(1.03); position:sticky; top:0; z-index:50; box-shadow: 0 6px 18px rgba(2,6,23,0.06); } .brand{display:flex; align-items:center; min-width: 220px;} .brandLink{display:flex; gap:12px; align-items:center; text-decoration:none} .logo{ width:36px;height:36px; border-radius: 50%; /* круглая иконка */ background: linear-gradient(135deg, rgba(97,84,192,0.95), rgba(0,166,135,0.85)); border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 6px 18px rgba(2,6,23,0.04); } .brandText{display:flex; flex-direction:column; gap:2px} .brandText h1{margin:0; font-size:13px; letter-spacing:.2px; line-height:1.15; font-weight:600; color:var(--text)} .brandText p{margin:0; font-size:12px; color: var(--muted); line-height:1.15;} .actions{ display:flex; gap:8px; align-items:center; min-width: 200px; justify-content:flex-end; } .kmn-profile{ position: relative; display:flex; align-items:center; } .kmn-profile-menu{ position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 160px; background: rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.25); padding: 6px; display: none; z-index: 80; } .kmn-profile-menu::before{ content:""; position:absolute; left: -8px; right: -8px; top: -10px; height: 14px; } .kmn-profile:hover .kmn-profile-menu{ display: block; } .kmn-profile-item{ display:block; padding: 8px 10px; border-radius: 10px; text-decoration: none; font-size: 13px; color: var(--text); } .kmn-profile-item:hover{ background: rgba(255,255,255,.08); } .kmn-logout{ color: #ff6b6b; } .btn{ display:inline-flex; align-items:center; gap:10px; padding: 9px 14px; min-height: 40px; border-radius: 10px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); color: var(--text); cursor:pointer; user-select:none; transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease; font: 500 14px/1 var(--font); } .btn:hover{transform: translateY(-2px); background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.12); box-shadow: 0 6px 18px rgba(2,6,23,0.03)} .btn:active{transform: translateY(0px) scale(.997)} .btn:focus{outline: 3px solid rgba(124,92,255,0.10); outline-offset: 3px} .btn.primary{ background: linear-gradient(135deg, rgba(97,84,192,0.96), rgba(0,166,135,0.9)); border-color: rgba(0,0,0,0.06); color: white; box-shadow: 0 10px 30px rgba(14,24,70,0.08); transform-origin: center; } /* Icon-only buttons */ .btn.icon{ padding: 8px; width:40px; height:40px; justify-content:center } /* Make header feel less 'busy' on small screens */ @media (max-width: 540px){ .brandText h1{font-size:12px} .brandText p{display:none} .logo{width:32px;height:32px} .topbar{padding: 0 12px} } .avatar{ width:34px;height:34px; border-radius: 50%; background: linear-gradient(135deg, rgba(255,120,120,0.12), rgba(255,200,80,0.06)); border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 6px 14px rgba(2,6,23,0.04); } .hideSm{display:inline} /* ===== Minimal page baseline so you instantly see styling ===== */ #kids-map-app{min-height: calc(100vh - var(--h));} .kmn-app{min-height: 100vh;} .kmn-main{padding: 16px;} .kmn-card{ max-width: 980px; margin: 0 auto; border-radius: 24px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); backdrop-filter: var(--blur); box-shadow: var(--shadow); padding: 16px; } .kmn-place-card{ max-width: 920px; padding: 24px; } .kmn-place-title{ margin: 0 0 6px 0; font-size: 28px; } .kmn-place-meta{ color: var(--muted); margin-bottom: 8px; } .kmn-place-address{ color: var(--muted); margin-bottom: 18px; } .kmn-place-reviews{ margin-top: 18px; } .kmn-review-note{ margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--stroke); background: var(--surface); color: var(--muted); } .kmn-muted-sm{ font-size: 12px; color: var(--muted); } .kmn-reviews .kmn-admin-panel{ margin-top: 10px; } .kmn-reviews-table td{ vertical-align: top; } .kmn-actions{ white-space: nowrap; } .kmn-muted{color: var(--muted);} .kmn-slot{ margin-top: 12px; min-height: 360px; border-radius: 20px; border: 1px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,.65); } .kmn-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } /* ===== Login page ===== */ .kmn-login{ min-height: 100vh; position: relative; overflow: hidden; background: linear-gradient(135deg, #6c7ae0 0%, #7a5fd6 50%, #7a4fd0 100%); } .kmn-login::before, .kmn-login::after{ content:""; position:absolute; border-radius:50%; background: rgba(255,255,255,.16); filter: blur(2px); } .kmn-login::before{ width: 320px; height: 320px; top: -120px; left: -120px; } .kmn-login::after{ width: 220px; height: 220px; bottom: -80px; right: -60px; } .kmn-login-main{ min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 24px 16px; } .kmn-login-card{ width: min(420px, 92vw); padding: 26px 22px 22px; border-radius: 26px; background: #ffffff; border: 1px solid rgba(11,26,43,.08); box-shadow: 0 18px 40px rgba(2,6,23,.18); } .kmn-login-logo{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom: 8px; } .kmn-login-logo-badge{ width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(135deg, #6366f1, #ec4899); color: #fff; font-weight: 700; display:flex; align-items:center; justify-content:center; } .kmn-login-logo-text{ font-size: 22px; font-weight: 800; color: #1e293b; } .kmn-login-title{ text-align:center; font-size: 20px; font-weight: 700; color: #1e293b; margin: 8px 0 4px; } .kmn-login-subtitle{ text-align:center; font-size: 13px; color: #6b7280; margin: 0 0 14px; } .kmn-login-actions{ display:flex; flex-direction:column; gap:12px; align-items:stretch; } .kmn-login-actions > *{ margin: 0; } .kmn-login-actions a, .kmn-login-actions button, .kmn-login-actions input[type="button"], .kmn-login-actions input[type="submit"]{ width: 100%; display:flex; align-items:center; justify-content:center; gap:10px; padding: 12px 14px; border-radius: 12px; font-size: 14px; } .kmn-login-actions .nsl-container, .kmn-login-actions .nsl-container-buttons, .kmn-login-actions .openid-connect-login{ width: 100%; } .kmn-login-actions .nsl-button, .kmn-login-actions .openid-connect-login-button, .kmn-login-actions .openid-connect-login a{ width: 100%; border-radius: 12px !important; border: 1px solid #e2e8f0 !important; box-shadow: none !important; } .kmn-login-actions .openid-connect-login-button a{ font-size: 0 !important; } .kmn-login-actions .openid-connect-login-button a::after{ content: "Вход для сотрудников"; font-size: 14px; font-weight: 600; color: #1e293b; } .kmn-login-features{ margin-top: 14px; background: #f7f7fb; border-radius: 14px; padding: 14px 16px; display:flex; flex-direction:column; gap:8px; } .kmn-login-feature{ display:flex; align-items:center; gap:10px; font-size: 13px; color: #6b7280; } .kmn-login-feature span:first-child{ width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, #6366f1, #ec4899); display:flex; align-items:center; justify-content:center; color:#fff; font-size: 12px; } .kmn-login-privacy{ margin-top: 14px; font-size: 11px; text-align:center; color: #6b7280; line-height: 1.5; } .kmn-login-privacy a{ color: #6366f1; text-decoration: none; } .kmn-login-staff{ margin-top: 14px; padding-top: 12px; border-top: 1px solid #e5e7eb; text-align:center; font-size: 12px; color: #6b7280; } body.page-login-v2 .topbar{ display:none; } body.page-login-v2 footer{ display:none; } body.page-login-v2{ overflow: hidden; } /* ===== Map page (map-v2) ===== */ #kids-map-app.kmn-map{ height: calc(100vh - var(--h)); overflow: hidden; } #kids-map-app.kmn-map .main{ height: 100%; display:grid; grid-template-columns: 420px 1fr; overflow:hidden; position:relative; } #kids-map-app.kmn-map .panel{ border-right: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); backdrop-filter: var(--blur); display:flex; flex-direction:column; min-width: 320px; position:relative; z-index:10; } #kids-map-app.kmn-map .panelHeader{ padding: 14px 16px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; border-bottom: 1px solid rgba(255,255,255,.10); } #kids-map-app.kmn-map .panelActions{ display:flex; align-items:center; gap:8px; } #kids-map-app.kmn-map .panelHeader .title{ display:flex; flex-direction:column; gap:2px; } #kids-map-app.kmn-map .panelHeader .title h2{ margin:0; font-size: 16px; letter-spacing: .2px; } #kids-map-app.kmn-map .panelHeader .title span{ font-size: 12px; color: var(--muted); } #kids-map-app.kmn-map .pill{ display:inline-flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); font-size: 12px; color: var(--muted); white-space:nowrap; } #kids-map-app.kmn-map .seg{ display:flex; gap:8px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.10); flex-wrap:wrap; } #kids-map-app.kmn-map .seg button{ height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: var(--text); cursor:pointer; transition: transform .12s ease, background .12s ease, border-color .12s ease; } #kids-map-app.kmn-map .seg button[aria-pressed="true"]{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.12); } #kids-map-app.kmn-map .seg button:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); } #kids-map-app.kmn-map .chips{ padding: 10px 16px 12px; display:flex; gap:8px; flex-wrap:wrap; border-bottom: 1px solid rgba(255,255,255,.10); } #kids-map-app.kmn-map .chip{ height: var(--chip); display:inline-flex; align-items:center; gap:8px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: var(--text); cursor:pointer; user-select:none; transition: background .12s ease, border-color .12s ease, transform .12s ease; font-size: 12px; } #kids-map-app.kmn-map .chip[data-on="true"]{ background: rgba(0,211,167,.14); border-color: rgba(0,211,167,.35); } #kids-map-app.kmn-map .chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); } #kids-map-app.kmn-map .results{ padding: 12px 10px 14px; overflow:auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; } #kids-map-app.kmn-map .cards{ display:flex; flex-direction:column; gap:10px; padding: 0 6px; } #kids-map-app.kmn-map .card{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } #kids-map-app.kmn-map .kmn-list-card{ cursor: pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; } #kids-map-app.kmn-map .kmn-list-card:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); } #kids-map-app.kmn-map .kmn-list-title{ font-weight: 600; } #kids-map-app.kmn-map .kmn-list-sub{ margin-top: 4px; font-size: 12px; color: var(--muted); } #kids-map-app.kmn-map .kmn-list-row{ display:flex; gap:12px; align-items:flex-start; } #kids-map-app.kmn-map .kmn-list-thumb{ width: 84px; height: 84px; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: radial-gradient(120px 120px at 30% 30%, rgba(124,92,255,.35), transparent 60%), radial-gradient(120px 120px at 70% 60%, rgba(0,211,167,.25), transparent 60%), rgba(255,255,255,.04); background-size: cover; background-position:center; flex: 0 0 auto; } #kids-map-app.kmn-map .kmn-list-main{ flex:1; } #kids-map-app.kmn-map .kmn-list-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } #kids-map-app.kmn-map .kmn-pill{ display:inline-flex; align-items:center; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); font-size: 12px; white-space:nowrap; } #kids-map-app.kmn-map .kmn-list-meta{ margin-top: 4px; font-size: 12px; color: var(--muted); } #kids-map-app.kmn-map .kmn-chip.small{ font-size: 12px; padding: 4px 10px; } #kids-map-app.kmn-map .kmn-list-chips{ margin-top: 6px; display:flex; gap:6px; flex-wrap:wrap; } #kids-map-app.kmn-map .kmn-list-actions{ margin-top: 10px; display:flex; align-items:center; gap:8px; } #kids-map-app.kmn-map .kmn-btn-route{ border-radius: 16px; padding: 10px 14px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); } #kids-map-app.kmn-map .kmn-btn-icon{ width: 40px; height: 40px; padding: 0; justify-content:center; border-radius: 14px; } #kids-map-app.kmn-map .kmn-btn-icon.fav{ margin-left: auto; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); } #kids-map-app.kmn-map .map{ position:relative; overflow:hidden; } #kids-map-app.kmn-map .mapCanvas{ position:absolute; inset:0; background: #0b0f17; } #kids-map-app.kmn-map #map{ width:100%; height:100%; } #kids-map-app.kmn-map .mapEmbed{ width:100%; height:100%; border:0; } #kids-map-app.kmn-map .leaflet-container{ font: inherit; } #kids-map-app.kmn-map .leaflet-control-attribution{ background: rgba(0,0,0,.35); color: rgba(255,255,255,.8); border-radius: 10px; padding: 2px 8px; } html[data-theme="light"] #kids-map-app.kmn-map .leaflet-control-attribution{ background: rgba(255,255,255,.7); color: rgba(11,26,43,.7); } #kids-map-app.kmn-map .gridlines{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 90px 90px; opacity:.35; pointer-events:none; } #kids-map-app.kmn-map .mapOver{ position:absolute; left: 16px; right: 16px; top: 12px; z-index:60; display:flex; gap:10px; flex-wrap:wrap; pointer-events:none; } #kids-map-app.kmn-map .mapOver .chip{ pointer-events:auto; background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.28); box-shadow: 0 10px 24px rgba(0,0,0,.28); } #kids-map-app.kmn-map .kmn-map-search{ position:absolute; left: 50%; top: 15px; z-index:65; display:flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.55); backdrop-filter: var(--blur); box-shadow: 0 10px 24px rgba(0,0,0,.28); transform: translateX(-50%); } #kids-map-app.kmn-map .kmn-map-search input{ width: 480px; border: 0; outline: none; background: transparent; color: var(--text); font-size: 13px; } #kids-map-app.kmn-map .kmn-map-search-btn{ width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: var(--text); cursor: pointer; } #kids-map-app.kmn-map .floating{ position:absolute; right: 18px; bottom: 64px; z-index:70; display:flex; flex-direction:column; gap:10px; } #kids-map-app.kmn-map .kmn-panel-toggle{ width: 32px; height: 32px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: var(--text); cursor:pointer; } #kids-map-app.kmn-map .kmn-panel-toggle-map{ position:absolute; left: 16px; top: 15px; z-index:70; display:none; } #kids-map-app.kmn-map.kmn-panel-collapsed .kmn-panel-toggle-map{ display:inline-flex; align-items:center; justify-content:center; } #kids-map-app.kmn-map.kmn-panel-collapsed .panel{ width: 0; min-width: 0; border-right: 0; padding: 0; } #kids-map-app.kmn-map.kmn-panel-collapsed .panel > *{ opacity: 0; pointer-events: none; } #kids-map-app.kmn-map.kmn-panel-collapsed .main{ grid-template-columns: 0 1fr; } #kids-map-app.kmn-map .leaflet-pane, #kids-map-app.kmn-map .leaflet-control{ z-index: 10; } #kids-map-app.kmn-map .fab{ width: 44px; height: 44px; border-radius: 16px; border: 1px solid rgba(255,255,255,.32); background: rgba(0,0,0,.55); backdrop-filter: var(--blur); box-shadow: 0 14px 32px rgba(0,0,0,.35); color: var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition: transform .12s ease, background .12s ease; } #kids-map-app.kmn-map .fab:hover{ transform: translateY(-1px); background: rgba(0,0,0,.68); } #kids-map-app.kmn-map .kmn-map-popup{ position:absolute; left: 0; top: 0; width: 380px; max-width: calc(100% - 32px); border-radius: 22px; border: 1px solid rgba(255,255,255,.12); background: rgba(8,12,18,.92); backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(0,0,0,.45); padding: 16px; z-index: 65; display:none; color: var(--text); } #kids-map-app.kmn-map .kmn-map-popup[data-open="true"]{ display:block; } #kids-map-app.kmn-map .kmn-popup-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } #kids-map-app.kmn-map .kmn-popup-title{ font-weight:600; font-size: 16px; line-height:1.25; } #kids-map-app.kmn-map .kmn-popup-sub{ margin-top: 4px; font-size: 12px; color: var(--muted); } #kids-map-app.kmn-map .kmn-popup-close{ width: 28px; height: 28px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--text); cursor:pointer; } #kids-map-app.kmn-map .kmn-popup-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top: 10px; } #kids-map-app.kmn-map .kmn-chip{ display:inline-flex; align-items:center; gap:6px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); font-size: 12px; } #kids-map-app.kmn-map .kmn-popup-section{ margin-top: 12px; } #kids-map-app.kmn-map .kmn-popup-label{ font-size: 12px; color: var(--muted); margin-bottom: 6px; } #kids-map-app.kmn-map .kmn-tags{ display:flex; flex-wrap:wrap; gap:6px; } #kids-map-app.kmn-map .kmn-tag{ padding: 4px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); font-size: 12px; } #kids-map-app.kmn-map .kmn-muted-sm{ font-size: 12px; color: var(--muted); } #kids-map-app.kmn-map .kmn-photo-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; } #kids-map-app.kmn-map .kmn-photo{ padding: 0; border: 0; background: transparent; cursor: pointer; } #kids-map-app.kmn-map .kmn-photo-grid img{ width:100%; height:64px; object-fit:cover; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); } #kids-map-app.kmn-map .kmn-photo-empty{ padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.18); color: var(--muted); font-size: 12px; } #kids-map-app.kmn-map .kmn-contacts{ display:flex; flex-wrap:wrap; gap:8px; } #kids-map-app.kmn-map .kmn-contacts a{ font-size: 12px; color: var(--text); text-decoration:none; padding: 4px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); } #kids-map-app.kmn-map .kmn-popup-actions{ margin-top: 12px; display:flex; gap:8px; } #kids-map-app.kmn-map .kmn-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--text); text-decoration:none; font-size: 13px; } #kids-map-app.kmn-map .kmn-btn-primary{ background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(0,211,167,.7)); border-color: rgba(255,255,255,.16); color:#fff; } html[data-theme="light"] #kids-map-app.kmn-map .kmn-map-popup{ background: rgba(255,255,255,.98); color: #0b1a2b; border-color: rgba(11,26,43,.12); } html[data-theme="light"] #kids-map-app.kmn-map .kmn-popup-close, html[data-theme="light"] #kids-map-app.kmn-map .kmn-chip, html[data-theme="light"] #kids-map-app.kmn-map .kmn-tag, html[data-theme="light"] #kids-map-app.kmn-map .kmn-contacts a, html[data-theme="light"] #kids-map-app.kmn-map .kmn-btn{ background: rgba(2,6,23,0.04); border-color: rgba(11,26,43,.12); color: #0b1a2b; } #kids-map-app.kmn-map .kmn-lightbox{ position:absolute; inset: 0; display:flex; background: rgba(0,0,0,.7); align-items:center; justify-content:center; z-index: 80; opacity: 0; visibility: hidden; pointer-events: none; } #kids-map-app.kmn-map .kmn-lightbox[data-open="true"]{ opacity: 1; visibility: visible; pointer-events: auto; } #kids-map-app.kmn-map .kmn-lightbox-img{ max-width: min(90%, 920px); max-height: min(90%, 640px); border-radius: 16px; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 24px 60px rgba(0,0,0,.45); } #kids-map-app.kmn-map .kmn-lightbox-close{ position:absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.4); color: #fff; cursor:pointer; font-size: 20px; } #kids-map-app.kmn-map .kmn-lightbox-nav{ position:absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 56px; border-radius: 16px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.4); color: #fff; cursor:pointer; font-size: 28px; } #kids-map-app.kmn-map .kmn-lightbox-nav.prev{ left: 16px; } #kids-map-app.kmn-map .kmn-lightbox-nav.next{ right: 16px; } html[data-theme="light"] #kids-map-app.kmn-map .mapOver .chip{ background: rgba(255,255,255,.92); border-color: rgba(11,26,43,.18); color: #0b1a2b; } html[data-theme="light"] #kids-map-app.kmn-map .fab{ background: rgba(255,255,255,.92); border-color: rgba(11,26,43,.2); color: #0b1a2b; } html[data-theme="light"] #kids-map-app.kmn-map .kmn-panel-toggle{ background: rgba(255,255,255,.92); border-color: rgba(11,26,43,.2); color: #0b1a2b; } html[data-theme="light"] #kids-map-app.kmn-map .kmn-map-search{ background: rgba(255,255,255,.92); border-color: rgba(11,26,43,.18); } html[data-theme="light"] #kids-map-app.kmn-map .kmn-map-search input{ color: #0b1a2b; } html[data-theme="light"] #kids-map-app.kmn-map .kmn-map-search-btn{ background: rgba(2,6,23,0.04); border-color: rgba(11,26,43,.12); color: #0b1a2b; } #kids-map-app.kmn-map .user-pin{ width: 20px; height: 30px; } /* ===== Mobile tweaks ===== */ @media (max-width: 980px){ .topbar{padding: 0 12px;} .brand{min-width:auto} .actions{min-width:auto} .hideSm{display:none} #kids-map-app.kmn-map .main{grid-template-columns: 1fr;} #kids-map-app.kmn-map .panel{display:none;} } @media (prefers-reduced-motion: reduce){ *{transition:none !important} } /* Add place wizard */ .kmn-addplace{ max-width: 1200px; margin: 24px auto 80px; padding: 0 24px; } .kmn-addplace-header{ display: grid; gap: 12px; margin-bottom: 18px; } .kmn-addplace-header h1{ margin: 0; font-size: 28px; } .kmn-alert{ padding: 12px 14px; border-radius: 12px; border: 1px solid var(--stroke); background: rgba(255,255,255,.06); } .kmn-alert.success{color:#1ecf8b; border-color: rgba(30,207,139,.3);} .kmn-alert.error{color:#ff6b6b; border-color: rgba(255,107,107,.3);} .kmn-stepper{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; } .kmn-stepper-item{ display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--stroke); background: rgba(255,255,255,.05); color: var(--muted); } .kmn-stepper-item span{ width: 28px; height: 28px; border-radius: 50%; background: rgba(124,92,255,.15); color: var(--text); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; } .kmn-stepper-item.is-active{ border-color: rgba(124,92,255,.45); color: var(--text); } .kmn-addplace-grid{ display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 20px; } .kmn-addplace-form{ background: rgba(12,16,24,0.9); border: 1px solid var(--stroke); border-radius: 18px; padding: 20px; box-shadow: var(--shadow2); } .kmn-step-panel{ display: none; gap: 16px; } .kmn-step-panel.is-active{ display: grid; } .kmn-type-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .kmn-type-card{ position: relative; border: 1px solid var(--stroke); border-radius: 14px; padding: 16px; display: grid; gap: 6px; text-align: center; cursor: pointer; background: rgba(255,255,255,.04); } .kmn-type-card input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; } .kmn-type-card span{ font-size: 26px; } .kmn-type-card strong{ font-size: 15px; } .kmn-type-card small{ color: var(--muted); } .kmn-type-card input:checked + span, .kmn-type-card input:checked ~ strong{ color: #fff; } .kmn-type-card input:checked ~ small{ color: rgba(255,255,255,.7); } .kmn-type-card input:checked ~ *{ opacity: 1; } .kmn-type-card input:checked ~ strong{ font-weight: 700; } .kmn-type-card input:checked{ box-shadow: none; } .kmn-type-card:has(input:checked){ border-color: rgba(124,92,255,.6); background: rgba(124,92,255,.15); } .kmn-step-panel h2{ margin: 0 0 4px; font-size: 20px; } .kmn-field textarea{ background: rgba(255,255,255,.06); border: 1px solid var(--stroke); color: var(--text); border-radius: 10px; padding: 10px 12px; resize: vertical; } .kmn-field-row{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .kmn-map-search{ display: flex; align-items: center; gap: 12px; } .kmn-add-map{ height: 360px; border-radius: 14px; border: 1px solid var(--stroke); overflow: hidden; } .kmn-location-meta{ display: flex; gap: 20px; color: var(--muted); font-size: 13px; } .kmn-step-actions{ display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; } .kmn-addplace-side{ display: grid; gap: 16px; } .kmn-side-card{ background: rgba(12,16,24,0.85); border: 1px solid var(--stroke); border-radius: 16px; padding: 16px; } .kmn-side-card h3{ margin: 0 0 8px; } .kmn-side-card ul{ margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 6px; } @media (max-width: 980px){ .kmn-addplace-grid{ grid-template-columns: 1fr; } .kmn-stepper{ grid-template-columns: repeat(2, minmax(0,1fr)); } .kmn-type-grid{ grid-template-columns: 1fr; } .kmn-field-row{ grid-template-columns: 1fr; } .kmn-step-actions{ flex-direction: column; } } html[data-theme="light"] .kmn-addplace-form, html[data-theme="light"] .kmn-side-card{ background: #ffffff; box-shadow: 0 10px 24px rgba(2,6,23,0.08); } html[data-theme="light"] .kmn-stepper-item{ background: #ffffff; } .kmn-add-place{ background: linear-gradient(135deg, #15c27a, #12a765); color: #fff; font-weight: 600; border: none; } .kmn-add-place:hover{ filter: brightness(1.05); transform: translateY(-1px); } /* Admin dashboard (profile staff view) */ .kmn-dashboard{ max-width: 1220px; margin: 24px auto 60px; padding: 0 24px; } .kmn-dashboard-head h1{ margin: 0 0 6px; font-size: 28px; } .kmn-stats{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 18px 0 22px; } .kmn-stat{ background: rgba(12,16,24,0.7); border: 1px solid var(--stroke); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow2); } .kmn-stat-link{ display: block; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .kmn-stat-link:hover{ transform: translateY(-2px); border-color: rgba(124,92,255,0.35); box-shadow: 0 14px 32px rgba(0,0,0,.24); } .kmn-stat-value{ font-size: 26px; font-weight: 700; color: var(--a1); } .kmn-stat-label{ font-size: 13px; color: var(--muted); } .kmn-admin-panel{ background: rgba(12,16,24,0.88); border: 1px solid var(--stroke); border-radius: 16px; padding: 16px; box-shadow: var(--shadow2); } .kmn-tabs{ display: inline-flex; gap: 8px; padding: 6px; border-radius: 14px; background: rgba(255,255,255,.04); } .kmn-tab{ border: 1px solid transparent; background: transparent; color: var(--muted); padding: 10px 14px; border-radius: 12px; cursor: pointer; font-weight: 600; } .kmn-tab.is-active{ background: rgba(124,92,255,.18); border-color: rgba(124,92,255,.35); color: var(--text); } .kmn-admin-filters{ display: grid; grid-template-columns: 1fr 180px 180px 160px 160px; gap: 12px; margin: 16px 0; } .kmn-admin-filters select, .kmn-admin-filters input{ width: 100%; background: rgba(255,255,255,.06); border: 1px solid var(--stroke); color: var(--text); padding: 12px 14px; border-radius: 12px; } .kmn-search{ position: relative; } .kmn-search-icon{ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: .7; font-size: 14px; } .kmn-search input{ padding-left: 34px; } .kmn-admin-table table{ width: 100%; border-collapse: collapse; background: rgba(12,16,24,0.78); border-radius: 12px; overflow: hidden; } .kmn-table-place{ display: flex; align-items: center; gap: 10px; } .kmn-table-thumb{ width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,.08); background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.12); } .kmn-admin-table th, .kmn-admin-table td{ text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--stroke); font-size: 14px; } .kmn-admin-table th{ color: var(--muted); font-weight: 600; } .kmn-admin-table tbody tr:hover{ background: rgba(255,255,255,.03); } .kmn-btn-small{ padding: 6px 10px; font-size: 12px; border-radius: 10px; margin-right: 6px; } .kmn-btn-small.kmn-delete{ background: rgba(255,86,86,.14); color: #ff6b6b; border: 1px solid rgba(255,86,86,.3); } .kmn-pagination{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 8px 4px; color: var(--muted); font-size: 13px; } .kmn-page-controls{ display: flex; align-items: center; gap: 6px; } .kmn-page-btn{ min-width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--stroke); background: rgba(255,255,255,.04); color: var(--text); cursor: pointer; font-size: 13px; } .kmn-page-btn.is-active{ background: rgba(124,92,255,.2); border-color: rgba(124,92,255,.4); } .kmn-page-btn[disabled]{ opacity: .4; cursor: default; } .kmn-admin-map{ display: none; height: 520px; border-radius: 14px; overflow: hidden; border: 1px solid var(--stroke); } #kmnAdminMap{ width: 100%; height: 100%; } /* Admin modal */ .kmn-modal{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 2000; } .kmn-modal.is-open{ display: flex; } .kmn-modal-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); } .kmn-modal-card{ position: relative; background: rgba(12,16,24,0.92); border: 1px solid var(--stroke); border-radius: 18px; padding: 20px; width: min(680px, 92vw); max-height: 82vh; overflow: auto; box-shadow: var(--shadow); } .kmn-modal-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .kmn-modal-close{ background: transparent; color: var(--muted); border: 1px solid var(--stroke); border-radius: 10px; width: 34px; height: 34px; cursor: pointer; } .kmn-form-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .kmn-field{ display: grid; gap: 6px; font-size: 12px; color: var(--muted); } .kmn-field input{ background: rgba(255,255,255,.06); border: 1px solid var(--stroke); color: var(--text); border-radius: 10px; padding: 10px 12px; } .kmn-field select{ background: rgba(255,255,255,.06); border: 1px solid var(--stroke); color: var(--text); border-radius: 10px; padding: 10px 12px; } .kmn-photo-manager{ grid-column: 1 / -1; display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--stroke); } .kmn-photo-head{ display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; } .kmn-photo-grid-admin{ display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; } .kmn-photo-item{ position: relative; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); } .kmn-photo-item img{ display: block; width: 100%; height: 80px; object-fit: cover; } .kmn-photo-remove{ position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; } html[data-theme="light"] .kmn-admin-panel{ background: #ffffff; box-shadow: 0 10px 24px rgba(2,6,23,0.08); } html[data-theme="light"] .kmn-stat{ background: #ffffff; } html[data-theme="light"] .kmn-admin-table table{ background: #ffffff; } html[data-theme="light"] .kmn-modal-card{ background: #ffffff; } .kmn-modal-actions{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; } @media (max-width: 960px){ .kmn-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .kmn-admin-filters{ grid-template-columns: 1fr; } .kmn-form-grid{ grid-template-columns: 1fr; } }