:root{
  --pmap-bg: #f6f8fc;
  --pmap-card: #ffffff;
  --pmap-text: #0f172a;
  --pmap-muted: #64748b;
  --pmap-border: rgba(15, 23, 42, 0.10);
  --pmap-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
  --pmap-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.08);
  --pmap-radius: 16px;
  --pmap-radius-sm: 12px;
  --pmap-focus: rgba(15, 23, 42, 0.15);
  --pmap-font: 'Lato',Helvetica,Arial,Lucida,sans-serif;
}

.pmap-wrap{ max-width: 1200px; }

#pmap-app{
  font-family: var(--pmap-font);
  background: var(--pmap-bg);
  border-radius: var(--pmap-radius);
  padding: 24px;
  border: 1px solid var(--pmap-border);
}

#pmap-app *{
  font-family: var(--pmap-font);
}

.pmap-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

.pmap-panel{
  background: var(--pmap-card);
  border: 1px solid var(--pmap-border);
  border-radius: var(--pmap-radius);
  box-shadow: var(--pmap-shadow);
  overflow: hidden;
}

.pmap-panel__header{ padding: 18px 18px 0 18px; }

.pmap-title{
  margin: 0 0 6px 0;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--pmap-text);
  font-weight: 800;
}

.pmap-subtitle{
  margin: 0 0 14px 0;
  color: var(--pmap-muted);
  font-size: 14px;
  line-height: 1.6;
}

.pmap-panel__body{ padding: 18px; }

.pmap-panel__footer{
  padding: 16px 18px 18px 18px;
  border-top: 1px solid var(--pmap-border);
  background: rgba(15, 23, 42, 0.02);
}

.pmap-label{
  display:block;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: var(--pmap-text);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pmap-input,
.pmap-textarea,
#pmap-import-file{
  width: 100%;
  border: 1px solid var(--pmap-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--pmap-text);
  background: #fff;
  box-shadow: 0 1px 0 rgba(15,23,42,0.02);
}

.pmap-textarea{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  resize: vertical;
}

.pmap-textarea--preview{ min-height: 420px; }

.pmap-input:focus,
.pmap-textarea:focus,
#pmap-import-file:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--pmap-focus);
  border-color: rgba(15,23,42,0.20);
}

.pmap-hint{
  color: var(--pmap-muted);
  font-size: 12px;
  display: inline-block;
  margin-top: 6px;
}

.pmap-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.pmap-row--top{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.pmap-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.pmap-actionbar{
  padding-top: 14px;
  border-top: 1px solid var(--pmap-border);
}

/* Buttons */
.pmap-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  user-select: none;
}

.pmap-btn:active{ transform: translateY(1px); }

.pmap-btn--primary{
  background: #0b0f1a;
  color: #fff;
  box-shadow: var(--pmap-shadow-soft);
}

.pmap-btn--primary:hover{ background: #111827; }

.pmap-btn--secondary{
  background: #fff;
  color: var(--pmap-text);
  border-color: rgba(15,23,42,0.18);
}

.pmap-btn--secondary:hover{ border-color: rgba(15,23,42,0.28); }

.pmap-btn[disabled]{
  opacity: 0.6;
  cursor: not-allowed;
}

.pmap-link-delete{
  background: transparent;
  border: 0;
  color: #b91c1c;
  cursor: pointer;
  padding: 0;
  font-weight: 700;
}

.pmap-link-delete:hover{ text-decoration: underline; }

/* PropertySets */
.pmap-pset{
  border: 1px solid var(--pmap-border);
  border-radius: var(--pmap-radius-sm);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15,23,42,0.06);
  margin-bottom: 14px;
}

.pmap-pset__head{
  background: rgba(15,23,42,0.02);
  padding: 14px;
  border-bottom: 1px solid var(--pmap-border);
}

.pmap-grid{
  display: grid;
  grid-template-columns: 2fr 1fr 3fr 1.6fr;
  gap: 12px;
  align-items: end;
}

@media (max-width: 980px){
  .pmap-grid{ grid-template-columns: 1fr; }
}

.pmap-pset__actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.pmap-pset__props{ padding: 14px; }

.pmap-props-row{
  display: grid;
  grid-template-columns: 2fr 1.5fr 2fr 0.9fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

@media (max-width: 980px){
  .pmap-props-row{ grid-template-columns: 1fr; }
}

.pmap-props-head{
  color: var(--pmap-muted);
  font-size: 12px;
}

/* Notices */
.pmap-notice{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 600;
}

.pmap-notice--error{
  background: #fff1f2;
  border-color: #fecdd3;
  color: #9f1239;
}

.pmap-notice--ok{
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

/* Persistent + copy affordance */
.pmap-notice--persistent{ display:block; }

.pmap-notice--copy{
  cursor: pointer;
  user-select: none;
}

.pmap-notice--copy:hover{ filter: brightness(0.98); }
.pmap-notice--copy:active{ transform: translateY(1px); }

.pmap-notice--copy:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--pmap-focus);
}