.panel-body { min-height: 100vh; background: #e9dfc9; }
.pin-screen { min-height: 100vh; padding: 2rem 1rem; display: grid; place-items: center; background: radial-gradient(circle at 80% 10%, rgba(130,210,112,.45), transparent 35%), var(--forest); }
.pin-card { width: min(520px, 100%); padding: clamp(1.4rem, 5vw, 3rem); background: var(--bone); border: 2px solid var(--forest); box-shadow: 12px 12px 0 var(--green); }
.pin-card .brand { margin-bottom: 3rem; }
.pin-card h1 { margin: 0 0 1rem; color: var(--forest); font-size: clamp(2.7rem, 8vw, 4.8rem); }
.pin-card > p:not(.section-kicker) { color: #58716b; }
.pin-error { min-height: 1.3rem; margin: .8rem 0 0; color: #9d3728; font-size: .76rem; font-weight: 700; }
.local-warning { margin-top: 1.4rem; padding: 1rem; border: 1px dashed var(--forest); }
.local-warning strong { text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; }
.local-warning p { margin: .4rem 0 0; color: #58716b; font-size: .78rem; }
.return-store { display: inline-block; margin-top: 1.2rem; border-bottom: 1px solid; font-size: .8rem; font-weight: 800; }

.panel-shell { min-height: 100vh; display: grid; grid-template-columns: 255px 1fr; }
.panel-sidebar { position: sticky; top: 0; height: 100vh; padding: 1.4rem; background: var(--forest); color: var(--bone); display: flex; flex-direction: column; }
.panel-brand { color: var(--bone); }
.panel-sidebar nav { margin-top: 4rem; display: grid; }
.panel-sidebar nav a { padding: 1rem 0; border-bottom: 1px solid rgba(244,235,216,.18); font-size: .84rem; font-weight: 700; }
.panel-sidebar nav a:hover { color: var(--green-bright); }
.panel-sidebar-bottom { margin-top: auto; display: grid; gap: .55rem; }
.panel-sidebar-bottom span { color: var(--green-bright); text-transform: uppercase; letter-spacing: .12em; font-size: .58rem; font-weight: 800; }
.panel-sidebar-bottom button { padding: .7rem; border: 1px solid rgba(244,235,216,.4); background: transparent; color: var(--bone); text-align: left; cursor: pointer; }

.panel-main { min-width: 0; padding: clamp(1.25rem, 4vw, 4rem); }
.panel-top { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--forest); }
.panel-top p, .panel-section-head p { margin: 0 0 .25rem; color: #5b756f; text-transform: uppercase; letter-spacing: .13em; font-size: .62rem; font-weight: 800; }
.panel-top h1 { font-size: clamp(2.8rem, 6vw, 5rem); color: var(--forest); }
.panel-top button, .panel-section-head button { min-height: 43px; padding: .7rem 1rem; border: 1px solid var(--forest); background: var(--forest); color: var(--bone); font-weight: 800; cursor: pointer; }
.panel-notice { margin: 1.2rem 0 0; padding: 1rem 1.2rem; background: #fff2c1; border: 1px solid #8d7427; color: #53491f; }
.panel-notice p { margin: .35rem 0 0; font-size: .82rem; }
.panel-section { padding: 3rem 0; border-bottom: 1px solid var(--line); }
.panel-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.4rem; }
.panel-section-head h2 { color: var(--forest); font-size: clamp(2.2rem, 5vw, 4rem); }
.panel-section-head > span { color: #5b756f; font-size: .8rem; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.metric-grid article { min-height: 175px; padding: 1.1rem; border: 1px solid var(--forest); background: var(--bone); display: flex; flex-direction: column; }
.metric-grid span { text-transform: uppercase; letter-spacing: .1em; font-size: .6rem; font-weight: 800; }
.metric-grid strong { margin: auto 0 .2rem; color: var(--forest); font: 600 clamp(2rem, 4vw, 3.5rem)/1 var(--serif); letter-spacing: -.05em; }
.metric-grid small { color: #607872; font-size: .66rem; }

.panel-empty { padding: 4rem 1rem; border: 1px dashed var(--forest); text-align: center; }
.panel-empty img { width: 90px; height: 110px; object-fit: contain; margin: 0 auto 1rem; }
.panel-empty h3 { margin: 0; color: var(--forest); font: 600 1.5rem var(--serif); }
.panel-empty p { margin: .5rem 0 0; color: #607872; }

.request-grid { display: grid; gap: .8rem; }
.request-card { padding: 1.2rem; border: 1px solid var(--forest); background: var(--bone); }
.request-head { display: flex; justify-content: space-between; gap: 1rem; }
.request-status { display: inline-flex; padding: .3rem .55rem; background: var(--green); color: var(--forest); text-transform: uppercase; letter-spacing: .08em; font-size: .58rem; font-weight: 800; }
.request-head small { display: block; margin-top: .5rem; color: #667f79; }
.request-head h3 { margin: .2rem 0; color: var(--forest); font: 600 1.6rem var(--serif); }
.request-head p { margin: 0; color: #607872; font-size: .8rem; }
.request-total { text-align: right; }
.request-total strong { display: block; font: 600 1.4rem var(--serif); color: var(--forest); }
.request-total span { color: #607872; font-size: .72rem; }
.request-items { margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.request-items span { padding: .4rem .55rem; background: #dce7cc; font-size: .7rem; }
.request-notes { padding: .8rem 0; border-block: 1px solid var(--line); white-space: pre-wrap; color: #536d67; font-size: .8rem; }
.request-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; }
.request-actions label { min-width: 180px; margin: 0; }
.request-actions select { min-height: 42px; padding: .55rem; background: white; }
.request-actions button, .request-actions a { min-height: 42px; padding: .65rem .85rem; border: 1px solid var(--forest); background: transparent; color: var(--forest); display: inline-flex; align-items: center; font-size: .72rem; font-weight: 800; cursor: pointer; }
.request-actions .danger { margin-left: auto; color: #943729; border-color: #943729; }

.inventory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.stock-card { padding: 1rem; border: 1px solid var(--forest); background: var(--bone); }
.stock-head { display: flex; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.stock-dot { width: 18px; height: 45px; background: var(--stock-color); border: 1px solid rgba(7,63,52,.25); }
.stock-head small { color: #607872; font-size: .64rem; }
.stock-head h3 { margin: .12rem 0 0; font: 600 1.35rem var(--serif); color: var(--forest); }
.stock-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.stock-card label { margin-bottom: .65rem; }
.stock-card input { min-height: 42px; padding: .6rem; background: white; }
.stock-card button { width: 100%; min-height: 40px; border: 0; background: var(--forest); color: var(--bone); font-weight: 800; cursor: pointer; }

dialog { width: min(560px, calc(100% - 2rem)); padding: 0; border: 2px solid var(--forest); background: var(--bone); color: var(--forest); box-shadow: 12px 12px 0 var(--green); }
dialog::backdrop { background: rgba(3,42,36,.72); backdrop-filter: blur(5px); }
dialog form { position: relative; padding: clamp(1.3rem, 4vw, 2.5rem); }
dialog h2 { margin: 0 0 1.5rem; color: var(--forest); font-size: clamp(2.5rem, 7vw, 4rem); }
.dialog-close { position: absolute; right: 1rem; top: 1rem; width: 40px; height: 40px; border: 1px solid var(--forest); border-radius: 50%; background: transparent; color: var(--forest); font-size: 1.4rem; cursor: pointer; }
#panel-toast { left: auto; right: 1.5rem; transform: translateY(150%); }
#panel-toast.show { transform: translateY(0); }

@media (max-width: 1050px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .inventory-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .panel-shell { grid-template-columns: 1fr; }
  .panel-sidebar { position: static; height: auto; padding: 1rem; display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .panel-sidebar nav { grid-column: 1 / -1; margin: 1rem 0 0; grid-template-columns: repeat(4, 1fr); overflow-x: auto; }
  .panel-sidebar nav a { padding: .75rem .5rem; white-space: nowrap; font-size: .7rem; }
  .panel-sidebar-bottom { display: none; }
  .panel-top { align-items: center; }
  .metric-grid, .inventory-grid { grid-template-columns: 1fr; }
  .request-head { display: grid; }
  .request-total { text-align: left; }
  .request-actions .danger { margin-left: 0; }
}
@media (max-width: 520px) {
  .panel-main { padding: 1rem; }
  .panel-top h1 { font-size: 2.6rem; }
  .panel-top button { padding: .6rem; font-size: .68rem; }
  .panel-section-head { align-items: start; flex-direction: column; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-grid article { min-height: 150px; }
  .request-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .request-actions label { grid-column: 1 / -1; }
  .request-actions .danger { grid-column: 1 / -1; }
  .stock-fields { grid-template-columns: 1fr 1fr; }
}
