@import url("/shared/tokens.css");
@import url("/shared/base.css");

:root{
  --accent: var(--yard);
  --accent-l: var(--yard-bg);
  --accent-m: #0F6E56;
  --ink: var(--text-primary);
  --ink2: var(--text-secondary);
  --ink3: var(--text-hint);
  --warn: var(--urgent);
  --warn-l: var(--urgent-bg);
  --green: var(--yard);
  --green-l: var(--yard-bg);
  --radius: var(--radius-card);
}

.container{padding-top:0;padding-bottom:24px}

.service-aside{
  background:var(--surface);border:.5px solid var(--border);
  border-radius:var(--radius-card);padding:1.25rem 1.5rem;margin-bottom:12px;
}
.service-aside h2{margin:0 0 8px;font-size:18px;font-weight:600;color:var(--yard)}
.service-aside p{margin:0 0 12px;font-size:14px;color:var(--text-secondary);line-height:1.45}
.service-steps{margin:0;padding-left:1.2rem;font-size:14px;color:var(--text-secondary);line-height:1.6}
.service-steps li{margin-bottom:4px}

#form-map,#showcase-map{
  height:260px;border-radius:var(--radius-btn);overflow:hidden;
  border:1px solid var(--border);
}
@media(min-width:1024px){
  #form-map{height:420px;min-height:420px}
  #showcase-map{height:360px}
}

.map-cluster{
  width:36px;height:36px;border-radius:50%;
  background:var(--urgent);color:#fff;font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.photo-area{
  border:2px dashed var(--border);border-radius:var(--radius-btn);
  padding:20px;text-align:center;cursor:pointer;min-height:44px;
}
.photo-area input{display:none}
.photo-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.photo-preview img{
  width:72px;height:72px;object-fit:cover;border-radius:6px;
  border:1px solid var(--border);
}
.photo-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}

.stats-bar{
  background:var(--yard-bg);border-radius:var(--radius-card);
  padding:16px;text-align:center;margin-bottom:12px;
}
.stats-headline{font-size:22px;font-weight:700;color:var(--yard)}
.stats-sub{font-size:12px;color:var(--text-secondary);margin-top:4px}

.report-item{padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer}
.report-item:last-child{border-bottom:none}
.report-item.active{background:var(--yard-bg);margin:0 -12px;padding:12px;border-radius:var(--radius-btn)}
.report-addr{font-size:14px;font-weight:600}
.report-meta{font-size:11px;color:var(--text-hint);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap}
.badge{
  display:inline-block;padding:2px 8px;border-radius:10px;
  font-size:11px;font-weight:500;
}
.badge-open{background:var(--urgent-bg);color:var(--urgent)}
.badge-resolved{background:var(--yard-bg);color:var(--yard)}

.toolbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.toolbar select{
  font-size:13px;padding:8px 10px;min-height:40px;
  border-radius:var(--radius-btn);border:1px solid var(--border);font:inherit;
}
.my-reports{margin-bottom:12px}
.my-reports a{display:block;padding:10px 0;font-size:14px;min-height:44px}

.suggest-box{
  margin-top:4px;border:1px solid var(--border);border-radius:var(--radius-btn);
  overflow:hidden;background:#fff;
}
.suggest-item{
  padding:12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border);min-height:44px;
}
.suggest-item:last-child{border-bottom:none}
.suggest-item:hover{background:var(--yard-bg)}

.tema-cards{display:grid;gap:10px;margin-bottom:4px}
.tema-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  width:100%;min-height:72px;padding:16px 18px;text-align:left;
  border:1.5px solid var(--border);border-radius:var(--radius-card);background:#fff;
  font:inherit;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;
}
.tema-card:hover,.tema-card:focus-visible{border-color:var(--yard);box-shadow:0 2px 10px rgba(0,0,0,.06);outline:none}
.tema-card-title{font-size:18px;font-weight:600;color:var(--text-primary)}
.tema-card-desc{font-size:14px;color:var(--text-secondary);line-height:1.4}
.tema-switch{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.tema-current{font-size:14px;font-weight:600;color:var(--yard)}
.btn-link{
  border:none;background:none;padding:0;font:inherit;font-size:13px;color:var(--text-secondary);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;min-height:44px;
}
.btn-link:hover{color:var(--yard)}
.problem-chips{display:flex;flex-wrap:wrap;gap:8px}
.problem-chip{
  flex:1 1 calc(50% - 8px);min-width:140px;min-height:48px;
  padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-btn);
  background:#fff;color:var(--text-primary);font:inherit;font-size:15px;font-weight:500;
  cursor:pointer;text-align:center;
}
.problem-chip.active{border-color:var(--yard);background:var(--yard-bg);color:var(--yard)}

.layout-main .card:first-child{margin-top:0}
.showcase-section{margin-top:8px}

@media(max-width:480px){
  .problem-chip{flex:1 1 100%;min-width:0}
}
@media(max-width:1023px){
  .layout-side{display:none}
}
@media(min-width:1024px){
  .layout-side .service-aside{margin-bottom:0}
}

.popup-detail{border:1.5px solid var(--accent,#2a5a3c);background:#fff}
.popup-detail-label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3,#8f8f9a);margin-bottom:6px}