:root {
    --bg: #0a0e14; --panel: #111722; --panel2: #1a2231; --border: #273246;
    --text: #e9edf5; --muted: #8b97ad;
    --accent: #4f7cff; --accent2: #9b5cf6;
    --grad: linear-gradient(135deg, #4f7cff, #9b5cf6);
    --green: #2ecc71; --orange: #f39c12; --red: #e74c3c; --purple: #9b59b6;
    --ring: rgba(79,124,255,.25);
    --glass: rgba(13,18,28,.72);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
    --shadow-md: 0 4px 12px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.5);
  }
  body.light {
    --bg: #eef1f7; --panel: #ffffff; --panel2: #edf1f8; --border: #d6dded;
    --text: #171d2b; --muted: #5b6880;
    --accent: #4361ee; --accent2: #7c3aed;
    --grad: linear-gradient(135deg, #4361ee, #7c3aed);
    --green: #1f9d57; --orange: #d9820a; --red: #d8392b; --purple: #8042a8;
    --ring: rgba(67,97,238,.18);
    --glass: rgba(255,255,255,.72);
    --shadow-sm: 0 1px 2px rgba(23,29,43,.06), 0 2px 8px rgba(23,29,43,.07);
    --shadow-md: 0 4px 12px rgba(23,29,43,.10), 0 18px 44px rgba(23,29,43,.16);
  }
  body.big { font-size: 18px; }
  body.big input, body.big select, body.big textarea, body.big nav button { font-size: 17px; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background:
      radial-gradient(1100px 500px at 85% -10%, rgba(79,124,255,.07), transparent 60%),
      radial-gradient(900px 500px at -10% 100%, rgba(155,92,246,.05), transparent 60%),
      var(--bg);
    background-attachment: fixed; color: var(--text); font-family: system-ui, -apple-system, sans-serif; padding-bottom: 70px; -webkit-font-smoothing: antialiased; }
  body.light { background:
      radial-gradient(1100px 500px at 85% -10%, rgba(67,97,238,.05), transparent 60%),
      radial-gradient(900px 500px at -10% 100%, rgba(124,58,237,.04), transparent 60%),
      var(--bg);
    background-attachment: fixed; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--muted); }
  ::-webkit-scrollbar-track { background: transparent; }
  header { background: var(--panel); padding: 12px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-sm); }
  header h1 { font-size: 18px; font-weight: 800; letter-spacing: .3px; }
  @supports (-webkit-background-clip: text) {
    header h1 { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  }
  header .logo { font-size: 22px; }
  /* „Atgal" mygtukas — tik mobile (žr. @media), rodomas kai yra view istorija (.show iš updateBackBtn) */
  #back-btn { display: none; background: var(--panel2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 11px; font-size: 17px; line-height: 1; cursor: pointer; flex-shrink: 0; }
  #back-btn:active { transform: translateY(1px); }
  nav { display: flex; gap: 4px; background: var(--panel); padding: 6px; overflow-x: auto; border-bottom: 1px solid var(--border); position: sticky; top: 49px; z-index: 50; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  /* „Stiklo" efektas lipniai galvutei — solid --panel lieka fallback'u */
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    header, nav { background: var(--glass); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
  }
  nav button { background: none; border: none; color: var(--muted); padding: 10px 16px; border-radius: 999px; cursor: pointer; font-size: 14px; white-space: nowrap; font-weight: 600; transition: background .15s, color .15s, box-shadow .15s; }
  nav button:hover { color: var(--text); background: var(--panel2); }
  nav button.active { background: var(--grad); color: #fff; box-shadow: 0 2px 12px var(--ring); }
  main { padding: 14px; max-width: 1100px; margin: 0 auto; }
  h2 { font-size: 19px; margin-bottom: 12px; font-weight: 700; letter-spacing: -.2px; }
  h3 { font-size: 12.5px; margin: 16px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
  .card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
  label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; font-weight: 600; }
  input, select, textarea { width: 100%; background: var(--panel2); border: 1px solid var(--border); color: var(--text); padding: 10px; border-radius: 8px; font-size: 15px; transition: border-color .15s, box-shadow .15s; }
  input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
  textarea { min-height: 70px; resize: vertical; }
  .btn { display: inline-block; background: var(--grad); color: #fff; border: none; padding: 11px 18px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 12px; text-decoration: none; text-align: center; transition: filter .15s, transform .1s, box-shadow .15s; }
  .btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 14px var(--ring); }
  .btn:active { transform: translateY(1px); box-shadow: none; }
  .btn.green { background: var(--green); color: #fff; } .btn.orange { background: var(--orange); color: #fff; }
  .btn.red { background: var(--red); color: #fff; } .btn.gray { background: var(--panel2); color: var(--text); border: 1px solid var(--border); }
  .btn.gray:hover { filter: none; border-color: var(--accent); }
  .btn.sm { padding: 6px 12px; font-size: 13px; margin-top: 0; }
  .row { display: flex; gap: 10px; flex-wrap: wrap; }
  .row > * { flex: 1; min-width: 140px; }
  .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
  .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
  .b-uzregistruota { background: #2c3e50; color: #9fc3e8; }
  .b-daroma { background: #1d4a2e; color: #6ee7a0; }
  .b-laukia_detaliu { background: #4a3a1d; color: #f5c869; }
  .b-atlikta { background: #1d3a4a; color: #6ec8e8; }
  .b-baigta { background: #2a3942; color: #8a99a8; }
  .b-kita { background: #3d2a4a; color: #c89ae8; }
  .b-nezymus { background: #1d4a2e; color: #6ee7a0; }
  .b-tvarkomas { background: #4a3a1d; color: #f5c869; }
  .b-nera_variantu { background: #4a1d1d; color: #f58e8e; }
  .b-radau { background: #1d4a2e; color: #6ee7a0; }
  .b-uzsakyta { background: #4a3a1d; color: #f5c869; }
  .b-laukiam { background: #2c3e50; color: #9fc3e8; }
  body.light .b-uzregistruota { background: #dbeafe; color: #1e5aa8; }
  body.light .b-daroma { background: #d6f5e3; color: #187a45; }
  body.light .b-laukia_detaliu { background: #fdeed2; color: #9a6b08; }
  body.light .b-atlikta { background: #d8f0f9; color: #0f6c8f; }
  body.light .b-baigta { background: #e4e9ee; color: #5a6b7a; }
  body.light .b-kita { background: #efe2f9; color: #6d3f93; }
  body.light .b-nezymus { background: #d6f5e3; color: #187a45; }
  body.light .b-tvarkomas { background: #fdeed2; color: #9a6b08; }
  body.light .b-nera_variantu { background: #fadada; color: #a83b3b; }
  body.light .b-radau { background: #d6f5e3; color: #187a45; }
  body.light .b-uzsakyta { background: #fdeed2; color: #9a6b08; }
  body.light .b-laukiam { background: #dbeafe; color: #1e5aa8; }
  /* Projektų detalės gyvavimo ciklas (serviso pusė) */
  .b-ieskoma { background: #333d47; color: #aab7c4; }
  .b-rasta { background: #1d3a4a; color: #7cc4f5; }
  .b-gauta { background: #1d4a41; color: #5fd4b0; }
  .b-brokas { background: #4a1d1d; color: #f58e8e; }
  .b-nudazyta { background: #3d2a4a; color: #c89ae8; }
  .b-sumontuota { background: #1d4a2e; color: #6ee7a0; }
  body.light .b-ieskoma { background: #e4e9ee; color: #5a6b7a; }
  body.light .b-rasta { background: #dbeafe; color: #1e5aa8; }
  body.light .b-gauta { background: #d2f1e8; color: #0f7a5c; }
  body.light .b-brokas { background: #fadada; color: #a83b3b; }
  body.light .b-nudazyta { background: #efe2f9; color: #6d3f93; }
  body.light .b-sumontuota { background: #d6f5e3; color: #187a45; }
  /* Projektų progreso juosta, komentarai, žymų jungikliai, katalogo pasiūlymai */
  .prog { flex: 1; min-width: 60px; height: 8px; background: var(--panel2); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
  .prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #57e394); transition: width .2s; }
  .kom { border-left: 3px solid var(--border); padding: 6px 10px; margin: 6px 0; background: var(--panel2); border-radius: 0 8px 8px 0; font-size: 13px; }
  .kom.klientas { border-left-color: var(--accent); }
  .kom .kv { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
  details.kom-box summary { cursor: pointer; color: var(--muted); font-size: 13px; user-select: none; }
  .tgl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; user-select: none; }
  .tgl input { width: auto; margin: 0; accent-color: var(--accent); }
  .tgl.on { color: var(--text); border-color: var(--accent); }
  .nuor-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 3px 6px 3px 8px; font-size: 12px; max-width: 100%; }
  .nuor-chip a { text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nuor-chip button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0 2px; }
  .nuor-chip button:hover { color: var(--red); }
  .sugg { position: relative; flex: 2; min-width: 160px; }
  .sugg input { width: 100%; }
  .sugg-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 60; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; max-height: 220px; overflow: auto; box-shadow: var(--shadow-md); }
  .sugg-list div { padding: 8px 10px; cursor: pointer; font-size: 13px; }
  .sugg-list div:hover { background: var(--panel); color: var(--accent); }
  .nav-badge { display: none; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
  .nav-badge.urgent { background: var(--red); }
  /* Paprastas / Pro režimas */
  .mode-switch { display: inline-flex; background: var(--panel2); border: 1px solid var(--border); border-radius: 20px; padding: 2px; flex-shrink: 0; }
  .mode-switch button { background: none; border: none; color: var(--muted); padding: 4px 10px; border-radius: 16px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
  .mode-switch button.on { background: var(--accent); color: #fff; }
  body.simple .pro-only { display: none !important; }
  /* kalendorius */
  .cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .cal-grid .dow { text-align: center; font-size: 11px; color: var(--muted); padding: 4px 0; }
  .cal-day { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; min-height: 64px; padding: 5px; cursor: pointer; font-size: 12px; position: relative; transition: border-color .15s, box-shadow .15s, transform .15s; }
  .cal-day:hover { border-color: var(--accent); box-shadow: 0 2px 10px var(--ring); transform: translateY(-1px); }
  .cal-day.empty { background: none; border: none; cursor: default; box-shadow: none; transform: none; }
  .cal-day.today { border-color: var(--accent); border-width: 2px; }
  .cal-day .num { font-weight: 600; font-size: 13px; }
  .cal-day .load { margin-top: 4px; height: 5px; border-radius: 3px; background: var(--panel2); overflow: hidden; }
  .cal-day .load i { display: block; height: 100%; border-radius: 3px; }
  .cal-day .cnt { color: var(--muted); font-size: 10px; margin-top: 3px; display: block; }
  .cal-day.full { background: #2a1d1d; }
  body.light .cal-day.full { background: #fdeaea; }
  /* automobilių sąrašas */
  .car-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .15s; }
  .car-item:hover { border-color: var(--accent); box-shadow: 0 3px 14px var(--ring); transform: translateY(-1px); }
  .car-item .title { font-weight: 600; font-size: 15px; }
  .car-item .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
  .filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
  .filters button { background: var(--panel2); border: 1px solid var(--border); color: var(--muted); padding: 7px 12px; border-radius: 20px; cursor: pointer; font-size: 13px; font-weight: 600; transition: border-color .15s, color .15s; }
  .filters button:hover { border-color: var(--accent); color: var(--text); }
  .filters button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
  /* mikro-animacijos: render() perrašo #main.innerHTML, openModal() perkuria .modal-bg —
     todėl animacijos suveikia kas view/modalą be jokio JS */
  @keyframes fadeUp { from { opacity: 0; transform: translateY(5px); } }
  @keyframes popIn { from { opacity: 0; transform: scale(.97) translateY(8px); } }
  @keyframes fadeIn { from { opacity: 0; } }
  main > * { animation: fadeUp .18s ease-out; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
  /* modalas */
  .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); z-index: 100; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 10px; animation: fadeIn .15s ease-out; }
  .modal { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 700px; padding: 16px; margin: 10px 0 40px; box-shadow: var(--shadow-md); animation: popIn .18s ease-out; }
  .modal .close { float: right; background: var(--panel2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 12px; cursor: pointer; transition: border-color .15s; }
  .modal .close:hover { border-color: var(--accent); }
  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  td, th { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; }
  th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
  tbody tr:hover td { background: rgba(128,148,255,.04); }
  .fotos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
  .fotos .ph { position: relative; }
  .fotos img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; }
  .fotos .del { position: absolute; top: -6px; right: -6px; background: var(--red); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 12px; }
  .fotos .ph { width: 90px; }
  .foto-koment { width: 90px; font-size: 11px; padding: 3px 4px; margin-top: 3px; }
  .suma-box { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
  .suma-box .s { flex: 1; min-width: 110px; background: var(--panel2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; }
  .suma-box .s b { display: block; font-size: 18px; font-weight: 700; }
  .suma-box .s span { font-size: 12px; color: var(--muted); }
  .estimate { background: #1d3a4a; border: 1px solid #2e5a6e; border-radius: 10px; padding: 10px 12px; margin-top: 12px; font-size: 14px; display: none; }
  body.light .estimate { background: #e3f2fb; border-color: #b9d9f2; }
  .daychips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; }
  .daychip { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; cursor: pointer; font-size: 11px; text-align: center; min-width: 70px; flex-shrink: 0; transition: border-color .15s; }
  .daychip:hover { border-color: var(--accent); }
  .daychip.sel { border-color: var(--accent); background: #1d3a4a; }
  body.light .daychip.sel { background: #e3f2fb; }
  .scanbtn { display: inline-flex; align-items: center; justify-content: center; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; cursor: pointer; font-size: 17px; transition: border-color .15s; }
  .scanbtn:hover { border-color: var(--accent); }
  /* kanban lenta */
  .kb-board { display: flex; gap: 10px; overflow-x: auto; align-items: flex-start; padding-bottom: 10px; }
  .kb-col { flex: 0 0 230px; min-height: 120px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px; transition: border-color .15s, box-shadow .15s; }
  .kb-col.over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
  .kb-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; }
  .kb-card { background: var(--panel2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 8px; cursor: grab; font-size: 14px; transition: border-color .15s, transform .15s, box-shadow .15s; }
  .kb-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 3px 12px var(--ring); }
  .kb-card:active { cursor: grabbing; }
  /* statistika */
  .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
  .stat { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; text-align: center; box-shadow: var(--shadow-sm); }
  .stat b { font-size: 26px; display: block; font-weight: 800; letter-spacing: -.5px; }
  .stat span { font-size: 12px; color: var(--muted); }
  .bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding: 10px 0; }
  .bars .bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
  .bars .bar i { width: 100%; max-width: 50px; background: var(--accent); border-radius: 6px 6px 0 0; min-height: 2px; }
  .bars .bar span { font-size: 11px; color: var(--muted); }
  .bars .bar b { font-size: 12px; }
  .list-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .list-row .grow { flex: 1; }
  .list-row.done .grow { text-decoration: line-through; color: var(--muted); }
  .muted { color: var(--muted); font-size: 13px; }
  /* greita paieška */
  #search-results { position: sticky; top: 49px; z-index: 60; max-width: 1100px; margin: 0 auto; padding: 0 14px; }
  .search-pop { background: var(--panel); border: 1px solid var(--accent); border-radius: 0 0 12px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.4); overflow: hidden; }
  .sr-item { padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 14px; }
  .sr-item:hover { background: var(--panel2); }
  /* šablonų / priminimų kortelės */
  .tmpl-btn { background: var(--panel2); border: 1px solid var(--accent); color: var(--accent); padding: 7px 12px; border-radius: 20px; cursor: pointer; font-size: 13px; margin: 0 6px 6px 0; }
  .remind { border-left: 4px solid var(--orange); }
  @media (max-width: 600px) {
    .cal-day { min-height: 52px; }
    main { padding: 10px; }
    header h1 { display: none; }
    #back-btn.show { display: inline-flex; align-items: center; }
    #globalSearch { margin-left: 6px; }
    #userbox > span { display: none; }   /* vardo tekstas — telpa tik mygtukai */
    #userbox { gap: 6px; }
  }
  /* prisijungimo ekranas (markup — app-core.js showLogin) */
  .login-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 8vh; }
  .login-logo { width: 56px; height: 56px; border-radius: 16px; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 6px 20px var(--ring); margin-bottom: 14px; }
  .login-brand { font-size: 24px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 4px; }
  @supports (-webkit-background-clip: text) {
    .login-brand { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  }
  .login-sub { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
  .login-card { width: 100%; max-width: 380px; box-shadow: var(--shadow-md); }
  /* reporto (ticket) būsenų chipai — su šviesios temos variantais */
  .t-nauja { background: #4a2a00; color: #f5c869; }
  .t-sprendziama { background: #1d3a4a; color: #7cc4f5; }
  .t-issprestas { background: #1d4a2e; color: #6ee7a0; }
  body.light .t-nauja { background: #fdeed2; color: #9a6b08; }
  body.light .t-sprendziama { background: #dbeafe; color: #1e5aa8; }
  body.light .t-issprestas { background: #d6f5e3; color: #187a45; }
  /* Report mygtuko (klaidų pranešimų) admin peržiūros nuotraukų miniatiūros — pats FAB/canvas CSS
     injektuojamas per common.js (veikia visuose 4 puslapiuose, ne tik čia). */
  .rep-thumb { width: 110px; height: 76px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; background: #000; flex-shrink: 0; }
  .rep-thumb-ph { width: 110px; height: 76px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); flex-shrink: 0; border-radius: 8px; border: 1px dashed var(--border); }