:root {
  --bg:#f4f6fb;
  --surface:#ffffff;
  --surface-soft:#f8faff;
  --line:#cbd5e1;
  --line-strong:#94a3b8;
  --text:#000000;
  --text-soft:#1e293b;
  --accent:#0052c9;
  --accent-2:#003b91;
  --danger:#c62828;
  --ok:#0f766e;
  --radius:12px;
}


*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.35;
}

.app-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:.9rem 1.2rem;
  background:#000;
  color:#fff;
  border-bottom:2px solid var(--accent);
}
.brand-logo{display:flex;align-items:center;gap:.6rem}
.brand-mark{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:10px;padding:4px}
.brand-copy{display:grid;gap:.2rem}
.brand-wordmark{display:flex;align-items:baseline;line-height:1}
.brand-climb{font-family:'Times New Roman',Times,serif;font-size:2rem;letter-spacing:-0.04em;font-style:italic;font-weight:400;color:#fff}
.brand-os{font-family:'Be Vietnam Pro',sans-serif;font-size:2rem;letter-spacing:-0.08em;font-weight:800;color:var(--accent);margin-left:.1rem}
.brand-logo p{margin:0;font-size:.68rem;color:#dbeafe;letter-spacing:.08em;font-weight:600}
.header-actions{display:flex;gap:.45rem;align-items:center}

main{max-width:1320px;margin:1rem auto;padding:0 .9rem}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.9rem;
  margin-bottom:.8rem;
  box-shadow:0 2px 10px rgba(30,42,82,.05);
}
.soft{background:var(--surface-soft)}

.grid{display:grid;gap:.8rem}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start}

.tab-nav{display:flex;gap:.45rem;flex-wrap:wrap;position:sticky;top:.4rem;z-index:8}
.tab-btn{background:#e2e8f0;color:#0f172a;border:1px solid #94a3b8}
.tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.toolbar{display:flex;justify-content:space-between;gap:.8rem;align-items:end;flex-wrap:wrap}
.toolbar.subtle{margin-top:.7rem;padding-top:.55rem;border-top:1px dashed var(--line)}
.toolbar-actions{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}

.grid-filters{display:grid;gap:.42rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));min-width:min(100%,1040px);align-items:end}
.grid-filters > *{min-width:0;max-width:100%}
.filters-collapsed{display:none}
.compact-filters label{display:grid;gap:.18rem;font-size:.81rem;color:var(--text-soft)}
.compact-filters .inline-check{display:flex;align-items:center;gap:.45rem;height:38px;border:1px solid var(--line-strong);border-radius:9px;padding:.45rem .55rem;background:#fff;color:var(--text)}
.compact-filters select[multiple]{min-height:72px}

form{display:grid;gap:.48rem}
label{display:grid;gap:.18rem;color:var(--text-soft);font-size:.9rem}

input,textarea,select,button{
  font:inherit;
  padding:.5rem .6rem;
  border:1px solid var(--line-strong);
  border-radius:9px;
  color:var(--text);
  background:#fff;
}
input:focus,textarea:focus,select:focus{outline:2px solid #c9d3ff;outline-offset:1px;border-color:#9cb0ff}

button{border:0;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}
button:hover{background:var(--accent-2)}
button.secondary{background:#5f6e9f}
button.danger{background:var(--danger)}
button.icon-btn{padding:.28rem .48rem;min-width:2rem}

.route-form{display:grid;gap:.42rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-items:end}
.separated-form{background:var(--surface-soft);border:1px solid var(--line);border-radius:10px;padding:.65rem}
.compact-form{gap:.4rem;max-width:520px}
.compact-form input,.compact-form select{max-width:100%}
.compact-plan-form{gap:.35rem;align-items:start;max-width:340px;align-self:start}
.compact-title{margin:.05rem 0 .2rem}

.inline-csv{display:grid;grid-template-columns:1fr auto;gap:.55rem;align-items:end}
.inline-check{display:flex;align-items:center;gap:.35rem;color:var(--text-soft);font-size:.88rem;line-height:1.1}
.bulk-actions{display:flex;flex-wrap:wrap;gap:.55rem;align-items:end;margin:.45rem 0}

table{width:100%;border-collapse:collapse;margin-top:.7rem;font-size:.9rem}
th,td{border-bottom:1px solid #e5eaf8;padding:.34rem .35rem;text-align:left;vertical-align:top}
th{color:#2a3a73;font-weight:700}
.compact-table th,.compact-table td{padding:.28rem .35rem}

.group-row td{background:#eef2ff;font-weight:700;color:#0f3557;border-top:2px solid #cdd8ff}
.removed-col{display:none}

.route-title{font-weight:600;color:#041c37}
.route-meta{font-size:.76rem;color:#486582}
.small{color:#5a6798;font-size:.81rem}

.color-chip{display:inline-flex;align-items:center;gap:.38rem;padding:.14rem .42rem;border-radius:999px;border:1px solid #ccd7f0;background:#fff}
.color-dot{width:12px;height:12px;border-radius:999px;border:1px solid #5f6e9f;display:inline-block;background-size:100% 100%}

.stars{--rating:0;position:relative;display:inline-block;font-size:15px;line-height:1}
.stars::before{content:'★★★★★';color:#d0d7ee}
.stars::after{content:'★★★★★';color:#f4b400;position:absolute;left:0;top:0;overflow:hidden;width:calc(var(--rating) / 5 * 100%)}

#overviewImageCanvas,#planningCanvas,#pathCanvas,#canvas,.sector-path-preview{width:100%;max-width:560px;height:auto;border:1px solid var(--line);border-radius:10px;background:#fff;display:block}
#distributionChart{display:block;width:100%;max-width:560px;height:140px;border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:.7rem}
#planningImpactChart{display:block;width:100%;max-width:520px;height:120px;border:1px solid var(--line);border-radius:10px;background:#fff;margin-top:.45rem}

.sector-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:.65rem}
.sector-card{border:1px solid var(--line);border-radius:10px;padding:.55rem;background:var(--surface-soft)}
.sector-actions{display:flex;gap:.45rem;margin-top:.35rem}
.sector-path-inline{margin-top:.75rem;padding-top:.55rem;border-top:1px dashed var(--line)}
.sector-image-preview{display:block;width:100%;max-width:560px;max-height:260px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:#fff;margin-top:.35rem}


.planned-route-list{display:grid;gap:.35rem;margin-top:.5rem}
.planned-item{font-size:.86rem;border:1px solid var(--line);padding:.35rem .45rem;border-radius:8px;background:#fff}
.todo-form{grid-template-columns:2fr 1fr 3fr auto;max-width:100%}
.todo-list{display:grid;gap:.35rem;margin-top:.45rem}
.todo-item{display:flex;gap:.4rem;align-items:center;border:1px solid var(--line);padding:.35rem .45rem;border-radius:8px;background:#fff;font-size:.88rem}
.target-dist-editor{display:grid;gap:.35rem;margin-bottom:.45rem}
.target-row{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:.35rem;align-items:center;max-width:460px}

.line-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:.65rem;align-items:start}
.line-card{
  border:1px solid var(--line);
  border-radius:11px;
  padding:.6rem;
  background:linear-gradient(180deg,#fff,#f9fbff);
  color:var(--text);
  box-shadow:0 2px 8px rgba(30,42,82,.06);
  width:100%;
  min-height:148mm;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.line-card ul{margin:.2rem 0 0;padding-left:.75rem}
.line-card h4,.line-card h5,.line-card p{margin:.22rem 0}
.line-card li{margin-bottom:.2rem}
.card-mini{font-size:.8rem;color:#4e5d8f;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
.card-split{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.line-card-title{display:flex;justify-content:space-between;align-items:center;gap:.45rem;flex-wrap:wrap}
.line-hints-pair{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin:.2rem 0 .35rem}
.card-split h5{margin:.08rem 0 .3rem}


.line-hints-grid{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.line-hint-item textarea{min-height:62px}
.card-hint{border:1px dashed var(--line-strong);border-radius:8px;padding:.25rem .4rem;font-size:.84rem;min-height:24px;background:#fff}
.setter-space{margin-top:.45rem;padding-top:.35rem;border-top:1px dashed var(--line);font-size:.82rem}
.setter-lines{height:26px;border-bottom:1px solid #9ca3af;margin-top:6px}

.stats-grid{display:grid;gap:.85rem;grid-template-columns:1fr}
.chart-card{border:1px solid var(--line);border-radius:10px;padding:.7rem;overflow:hidden}
.chart-card canvas{width:100%;height:auto;display:block}

.trend-good{color:#1f7a4d;font-weight:700}
.trend-bad{color:#b42323;font-weight:700}
.trend-neutral{color:#43507f;font-weight:600}
.dev-good{color:#166534;background:#dcfce7;font-weight:700;border-radius:6px;padding:.08rem .2rem}
.dev-warn{color:#a16207;background:#fef9c3;font-weight:700;border-radius:6px;padding:.08rem .2rem}
.dev-bad{color:#991b1b;background:#fee2e2;font-weight:700;border-radius:6px;padding:.08rem .2rem}

.new-badge{display:inline-flex;align-items:center;justify-content:center;font-size:.64rem;font-weight:800;letter-spacing:.06em;margin-left:.35rem;padding:.08rem .38rem;border-radius:999px;background:#b42318;color:#fff;vertical-align:middle;text-transform:uppercase}

.auth-demo-row{display:flex;gap:.8rem;align-items:center;justify-content:space-between;padding:.62rem 1rem}
.action-status{position:fixed;left:1rem;bottom:1rem;background:#000;color:#fff;padding:.55rem .8rem;border-radius:10px;z-index:1000}

details.card > summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary h3{margin:.1rem 0}

.hidden{display:none !important}
.toast{position:fixed;right:1rem;bottom:1rem;background:#000;color:#fff;padding:.58rem .86rem;border-radius:10px}


.info-tab-card{max-width:900px}
.info-tab-card input,.info-tab-card textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.embed-example{background:#0b1220;color:#dbeafe;border:1px solid #1d4ed8;border-radius:10px;padding:.7rem;margin-top:.35rem}
.embed-example pre{margin:0;white-space:pre-wrap;word-break:break-word}
@media (max-width:760px){
  main{padding:0 .5rem}
  .card{padding:.68rem;border-radius:10px}
  .grid-filters{grid-template-columns:1fr}
  .compact-filters input,.compact-filters select{padding:.34rem .45rem;font-size:.86rem}
  .compact-filters select[multiple]{min-height:52px}
  .auth-demo-row{flex-direction:column;align-items:flex-start}

  table,thead,tbody,th,td,tr{display:block;width:100%}
  thead{display:none}
  tbody tr{border:1px solid var(--line);border-radius:10px;margin:.45rem 0;padding:.4rem;background:#fff}
  td{border:0;padding:.18rem 0}
  td::before{content:attr(data-label) ": ";font-weight:700;color:#1f466a}
  td[data-label='Route']::before,td[data-label='Sel']::before,td[data-label='Raus?']::before{content:''}
  .compact-table td::before{content:attr(data-label) ": ";font-weight:700;color:#1f466a}
  .route-title{font-size:.94rem}
  .route-meta{font-size:.71rem}

  .line-cards{grid-template-columns:1fr}
  .line-card{width:100%;min-height:125mm;max-height:none}
  .card-split,.line-hints-pair,.line-card-todo-list{grid-template-columns:1fr}
  .line-card-todo-add{grid-template-columns:1fr}
  #overviewImageCanvas,#planningCanvas,#pathCanvas,#canvas,.sector-path-preview{max-width:100%}
  #planningImpactChart,#distributionChart{height:110px}
}

@media print{
  @page{size:A4 landscape;margin:0}
  body{background:#fff}
  body *{visibility:hidden !important}

  body[data-print-mode='linecards'] #lineCards,
  body[data-print-mode='linecards'] #lineCards *{visibility:visible !important}
  body[data-print-mode='linecards'] #lineCards{position:absolute;left:0;top:0;display:grid !important;grid-template-columns:repeat(2,148.5mm);grid-auto-rows:210mm;gap:0;padding:0;margin:0;width:297mm;align-content:start}
  body[data-print-mode='linecards'] .line-card{break-inside:avoid;page-break-inside:avoid;width:148.5mm;min-height:210mm;max-height:210mm;margin:0;padding:7mm 6mm;border:1px solid #000;background:#fff !important;color:#000 !important;box-shadow:none;font-size:10px;line-height:1.15;overflow:hidden;transform:none}
  body[data-print-mode='linecards'] .line-card:nth-child(2n){break-after:page;page-break-after:always}
  body[data-print-mode='linecards'] .line-card:last-child{break-after:auto;page-break-after:auto}
  body[data-print-mode='linecards'] .no-print{display:none !important}
  body[data-print-mode='linecards'] .line-card-todo-list{grid-template-columns:repeat(2,minmax(0,1fr))}

  body[data-print-mode='todos'] #todoPrintTitle,
  body[data-print-mode='todos'] #todoPrintTitle *,
  body[data-print-mode='todos'] #todoList,
  body[data-print-mode='todos'] #todoList *{visibility:visible !important}
  body[data-print-mode='todos'] #todoPrintTitle{position:absolute;left:0;top:0;right:0;display:block !important}
  body[data-print-mode='todos'] #todoList{position:absolute;left:0;top:10mm;right:0;display:block !important}
  body[data-print-mode='todos'] .todo-item{display:flex;break-inside:avoid;page-break-inside:avoid;border:1px solid #000;margin-bottom:4mm;padding:2mm}
  body[data-print-mode='todos'] .todo-del{display:none !important}
}


.scroll-top-btn{position:sticky;top:4.2rem;float:right;z-index:8;padding:.2rem .5rem;border-radius:999px;min-width:2rem}
.todo-group{border:1px solid var(--line);border-radius:10px;padding:.45rem;background:#f8fafc}
.todo-group h4{margin:.15rem 0 .35rem}
.line-priority{display:inline-block;margin:0;padding:.2rem .45rem;border-radius:999px;background:#fef3c7;border:1px solid #f59e0b;color:#92400e;font-weight:700}

.line-priority select{margin-left:.35rem}
.line-card-todos{margin-top:.35rem}
.line-card-todo-add{display:grid;grid-template-columns:1.2fr 1fr auto;gap:.3rem;margin:.25rem 0}
.line-card-todo-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem}
.line-card-todo-item{display:flex;align-items:center;gap:.35rem;border:1px solid var(--line);border-radius:8px;padding:.25rem .35rem;background:#fff;font-size:.84rem;min-width:0}
.line-card-todo-item .todo-text{flex:1}
.drag-handle{cursor:grab;color:#64748b;font-weight:700}
.todo-template-list{display:grid;gap:.4rem;margin-top:.5rem}
.todo-template-item{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:10px;padding:.4rem .5rem;background:#fff}
.todo-template-task{flex:1;font-weight:500}
.dragging{opacity:.5}