:root{
  --bg:#0f1115; --panel:#171a21; --muted:#8892a6; --text:#e6eaf2; --brand:#6ee7ff; --accent:#a78bfa; --danger:#ff6b6b;
  --card:#11151c; --grid:#1e2430; --stroke:#2b3242;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";background:var(--bg);color:var(--text)}
.app{display:grid; grid-template-columns: var(--sidebar-width, 320px) 4px 1fr; grid-template-rows:auto 1fr; height:100%}
aside{grid-column:1; grid-row:2}
.resize-handle{grid-column:2; grid-row:2}
main{grid-column:3; grid-row:2}
header{grid-column:1/-1; grid-row:1}
.app.sidebar-hidden{grid-template-columns: 0 0 1fr}
.app.sidebar-hidden main{grid-column:1/-1}
.app.sidebar-hidden .resize-handle{display:none}

/* Mobile Mode */
.app.mobile-mode{grid-template-columns: 1fr; grid-template-rows:auto 1fr auto}
.app.mobile-mode aside{position:fixed; top:0; left:0; right:0; bottom:0; z-index:100; transform:translateX(-100%); transition:transform 0.3s ease; overflow:auto; border-right:none; max-width:none; min-width:auto}
.app.mobile-mode aside.mobile-open{transform:translateX(0)}
.app.mobile-mode .resize-handle{display:none}
.app.mobile-mode main{grid-column:1; grid-row:2}
.app.mobile-mode .mobile-overlay{position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:99; display:none}
.app.mobile-mode .mobile-overlay.active{display:block}
header{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--stroke); background:linear-gradient(180deg, rgba(167,139,250,.08), rgba(167,139,250,0)); position:sticky; top:0; z-index:5}
header h1{font-size:18px; margin:0; font-weight:700}
header .pill{padding:4px 10px; border:1px solid var(--stroke); border-radius:999px; color:var(--muted)}

aside{border-right:1px solid var(--stroke); background:var(--panel); padding:14px; overflow:auto; min-width:200px; max-width:600px}
.mobile-sidebar-header{display:none; padding:12px 16px; border-bottom:1px solid var(--stroke); background:var(--card); justify-content:space-between; align-items:center}
.mobile-sidebar-header h2{margin:0; font-size:16px}
.mobile-mode .mobile-sidebar-header{display:flex}
.mobile-mode aside .section:first-of-type{margin-top:0}
.resize-handle{background:var(--stroke); cursor:col-resize; position:relative; transition:background-color 0.2s}
.resize-handle:hover{background:var(--brand)}
.resize-handle::before{content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:2px; height:20px; background:var(--muted); border-radius:1px}
.section{margin-bottom:16px; background:var(--card); border:1px solid var(--stroke); border-radius:14px; overflow:hidden}
.section h2{margin:0; font-size:14px; letter-spacing:.3px; padding:10px 12px; color:#cbd5e1; border-bottom:1px solid var(--stroke); background:linear-gradient(180deg, rgba(110,231,255,.1), rgba(110,231,255,0)); display:flex; justify-content:space-between; align-items:center}
.section .content{padding:12px}
.collapse-btn{background:none; border:none; color:#cbd5e1; cursor:pointer; font-size:16px; padding:0; width:20px; height:20px; display:flex; align-items:center; justify-content:center}
.collapse-btn:hover{color:#6ee7ff}
.section.collapsed .content{display:none}
.section.collapsed .collapse-btn{transform:rotate(180deg)}
label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}
input[type="text"], textarea{width:100%; padding:10px 12px; background:#0c0f14; color:var(--text); border:1px solid var(--stroke); border-radius:10px}
textarea{min-height:120px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:12.5px}
.row{display:flex; gap:8px; align-items:center}
.btn{appearance:none; border:none; padding:10px 12px; border-radius:10px; font-weight:600; cursor:pointer; background:#0c0f14; color:var(--text); border:1px solid var(--stroke)}
.btn.primary{background:linear-gradient(180deg, #1a2437, #141a27); border-color:#2a3449}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5; cursor:not-allowed}
.muted{color:var(--muted); font-size:12px}
.tip{font-size:12px; color:#b9f7ff}

.stage-wrap{position:relative; overflow:auto; background:repeating-conic-gradient(from 45deg, var(--grid) 0% 25%, transparent 0% 50%) 0 0/20px 20px; min-height:0}
.stage-wrap.panning{cursor:grabbing}
.stage{position:relative; margin:0; display:inline-block; will-change: transform}
.map{display:block; width:auto; height:100vh; user-select:none}
.coords{position:fixed; bottom:12px; right:12px; background:rgba(15,17,21,.75); backdrop-filter: blur(6px); border:1px solid var(--stroke); border-radius:10px; padding:8px 10px; font-family:ui-monospace; font-size:12px; z-index:10}

/* Marker styling */
.marker{position:absolute; cursor:pointer; display:flex; align-items:center; gap:6px}
.marker .icon{width:18px; height:18px; display:block; flex-shrink:0; transform:translate(-50%, -100%)}
.marker .label{background:rgba(0,0,0,.6); border:1px solid var(--stroke); padding:4px 8px; border-radius:8px; font-size:12px; white-space:nowrap; transform:translate(0, -100%)}

/* Mobile Marker Optimizations */
@media (max-width: 768px) and (pointer: coarse){
  .marker .icon{width:12px; height:12px}
  .marker .label{font-size:9px; padding:1px 4px; max-width:60px; overflow:hidden; text-overflow:ellipsis; line-height:1.2}
  .marker:hover .label, .marker:active .label{display:inline-block !important; position:absolute; top:-25px; left:50%; transform:translateX(-50%); z-index:10; white-space:nowrap; max-width:120px; font-size:10px; padding:2px 6px}
}

/* Tooltip / Popover */
.popover{position:absolute; transform:translate(-50%, 8px); min-width:220px; background:var(--panel); border:1px solid var(--stroke); border-radius:12px; padding:10px; z-index:6; box-shadow:0 10px 30px rgba(0,0,0,.35); display:none}
.popover.visible{display:block}
.popover h3{margin:0 0 6px; font-size:14px}
.popover p{margin:0; color:var(--muted); font-size:13px}

/* Table styling */
.table-controls{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.table-container{max-height:300px; overflow:auto; border:1px solid var(--stroke); border-radius:8px; position:relative}
.markers-table{width:100%; border-collapse:collapse; font-size:12px}
.markers-table th{background:var(--card); color:#cbd5e1; padding:8px 6px; text-align:left; border-bottom:1px solid var(--stroke); position:sticky; top:0; z-index:1}
.markers-table th.sortable{cursor:pointer; user-select:none; position:relative}
.markers-table th.sortable:hover{background:rgba(110,231,255,.1)}
.markers-table th.sortable::after{content:'↕'; position:absolute; right:4px; opacity:.5; font-size:10px}
.markers-table th.sortable.asc::after{content:'↑'; opacity:1}
.markers-table th.sortable.desc::after{content:'↓'; opacity:1}
.markers-table td{padding:6px; border-bottom:1px solid rgba(43,50,66,.3); vertical-align:middle; position:relative}
.markers-table tr:hover{background:rgba(110,231,255,.05)}
.markers-table .type-cell{display:table-cell; text-align:center; white-space:nowrap; position:relative; overflow:visible}
.markers-table .type-icon{width:14px; height:14px; flex-shrink:0; display:inline-block; vertical-align:middle; max-width:14px; max-height:14px; overflow:hidden}
.markers-table .type-icon svg{width:14px !important; height:14px !important; max-width:14px !important; max-height:14px !important}
.markers-table .coords-cell{font-family:ui-monospace; font-size:11px; color:var(--muted)}
.markers-table .name-cell{max-width:100px; word-wrap:break-word; white-space:normal}
.markers-table .info-cell{max-width:120px; word-wrap:break-word; white-space:normal}
.markers-table .actions-cell{text-align:center; vertical-align:middle}
.markers-table .btn-small{padding:2px 6px; font-size:10px; border-radius:4px}

/* Mobile Touch Optimizations */
.mobile-mode .stage-wrap{-webkit-overflow-scrolling:touch; touch-action:pan-x pan-y}
.mobile-mode .marker{min-height:44px; min-width:44px} /* iOS touch target size */
.mobile-mode .btn{min-height:44px; padding:12px 16px}
.mobile-mode .markers-table{font-size:14px}
.mobile-mode .markers-table th, .mobile-mode .markers-table td{padding:8px 4px}
.mobile-mode .table-container{max-height:50vh}

/* Mobile Bottom Bar */
.mobile-bottom-bar{display:none; position:fixed; bottom:0; left:0; right:0; background:var(--panel); border-top:1px solid var(--stroke); padding:8px; z-index:1000; transform:translateZ(0) scale(1); will-change:transform; isolation:isolate}
.mobile-mode .mobile-bottom-bar{display:flex; gap:4px; justify-content:center; flex-wrap:wrap}
.mobile-mode .mobile-bottom-bar .btn{flex:1; max-width:45px; min-width:40px; padding:8px 4px; font-size:14px}

/* Responsive Header */
@media (max-width: 768px){
  header{flex-wrap:wrap; gap:6px; padding:6px 8px}
  header h1{font-size:14px}
  header .pill{font-size:10px; padding:2px 4px}
  .btn{font-size:11px; padding:6px 8px; min-width:32px}
  .row .btn{min-width:28px}
}

/* Auto Mobile Detection */
@media (max-width: 768px) and (pointer: coarse){
  .app{grid-template-columns: 1fr; grid-template-rows:auto 1fr auto}
  .app aside{position:fixed; top:0; left:0; right:0; bottom:0; z-index:100; transform:translateX(0); transition:transform 0.3s ease; overflow:auto; border-right:none; max-width:none; min-width:auto}
  .app .resize-handle{display:none}
  .app main{grid-column:1; grid-row:2; padding-bottom:60px}
  .app .mobile-overlay{display:none}
  .mobile-sidebar-header{display:none}
  .mobile-bottom-bar{display:flex !important; position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important; z-index:1000 !important}
  .stage-wrap{-webkit-overflow-scrolling:touch; touch-action:pan-x pan-y; padding-bottom:60px}
  .marker{min-height:32px; min-width:32px}
  .btn{min-height:44px; padding:12px 16px}
  .markers-table{font-size:14px}
  .markers-table th, .markers-table td{padding:8px 4px}
  .table-container{max-height:50vh}
  header{display:none}
  /* Export Button auf Mobile verstecken */
  #btnExportPNG{display:none !important}
}

/* Print */
@media print{
  header, aside, .coords, .mobile-bottom-bar{display:none}
  .stage-wrap{overflow:visible}
  body{background:white; color:black}
  .marker .label{background:rgba(255,255,255,.85); color:#111}
}