#slp300-app {
    position: fixed;
    left: 208px;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 750;
    overflow: auto;
    background: #000;
    color: #f5f5f5;
    font-family: inherit;
}

#slp300-app * { box-sizing: border-box; }
.slp300-page { padding: 22px 30px 60px; min-height: 100%; background: #000; }
.slp300-pagehead { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.slp300-pagehead h1 { margin:0 0 4px; font-size:24px; color:#fff !important; }
.slp300-pagehead p { margin:0; color:#7f8da3 !important; }
.slp300-head-actions { display:flex; gap:10px; }
.slp300-card { background:#080808; border:1px solid #292929; border-radius:12px; padding:20px; margin-bottom:16px; color:#f5f5f5; }
.slp300-card h2 { margin:0 0 14px; font-size:17px; color:#fff !important; }
.slp300-card p { color:#a3a3a3; }
.slp300-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.slp300-stat { min-height:112px; background:#080808; border:1px solid #292929; border-radius:12px; padding:18px; display:flex; flex-direction:column; justify-content:center; }
.slp300-stat span { font-size:12px; color:#8da0b8; margin-bottom:10px; }
.slp300-stat strong { font-size:24px; color:#fff; }
.slp300-stat small { margin-top:8px; color:#748196; }
.slp300-stat.green strong, .slp300-stat.green span { color:#4ade80 !important; }
.slp300-stat.red strong, .slp300-stat.red span { color:#f87171 !important; }
.slp300-grid2 { display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:16px; }
.slp300-listrow { display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid #252525; }
.slp300-listrow:last-child { border-bottom:0; }
.green-text { color:#4ade80 !important; }
.red-text { color:#f87171 !important; }
.slp300-wide { width:100%; min-height:42px; margin:0 0 10px; background:#111; color:#fff; border:1px solid #333; border-radius:8px; cursor:pointer; text-align:left; padding:0 14px; }
.slp300-wide:hover { background:#1a1a1a; }
.slp300-primary, .slp300-secondary, .slp300-small { border-radius:8px; min-height:38px; padding:0 13px; font-weight:700; cursor:pointer; }
.slp300-primary { background:#2563eb !important; color:#fff !important; border:1px solid #2563eb !important; }
.slp300-primary:hover { background:#1d4ed8 !important; }
.slp300-secondary { background:#151515 !important; color:#fff !important; border:1px solid #3a3a3a !important; }
.slp300-small { min-height:32px; padding:0 10px; background:#151515 !important; color:#fff !important; border:1px solid #3a3a3a !important; }
.slp300-small:hover, .slp300-secondary:hover { background:#222 !important; }
.greenbtn { color:#4ade80 !important; border-color:rgba(34,197,94,.45) !important; background:rgba(34,197,94,.09) !important; }
.redbtn { color:#f87171 !important; border-color:rgba(239,68,68,.45) !important; background:rgba(239,68,68,.08) !important; }
.actions { white-space:nowrap; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.slp300-search, #slp300-app input, #slp300-app select, #slp300-app textarea { background:#111 !important; color:#fff !important; border:1px solid #353535 !important; border-radius:8px; font:inherit; }
.slp300-search { width:min(360px,100%); height:40px; padding:0 12px; margin-bottom:12px; }
#slp300-app input, #slp300-app select { min-height:40px; padding:0 10px; }
#slp300-app textarea { min-height:90px; padding:10px; resize:vertical; }
#slp300-app input:focus, #slp300-app select:focus, #slp300-app textarea:focus { outline:none !important; border-color:#2563eb !important; box-shadow:0 0 0 2px rgba(37,99,235,.15) !important; }
#slp300-app option { background:#111; color:#fff; }
.slp300-tablewrap { width:100%; overflow:auto; border:1px solid #2b2b2b; border-radius:10px; }
#slp300-app table { width:100%; border-collapse:collapse; background:#080808 !important; color:#eee !important; }
#slp300-app thead tr { background:#121212 !important; }
#slp300-app th { text-align:left; font-size:12px; color:#c9d1dc !important; padding:12px 10px; border-bottom:1px solid #303030; background:#121212 !important; white-space:nowrap; }
#slp300-app td { padding:11px 10px; border-bottom:1px solid #222; color:#e9e9e9 !important; background:transparent !important; vertical-align:middle; }
#slp300-app tbody tr:last-child td { border-bottom:0; }
#slp300-app tbody tr:hover { background:#151515 !important; }
#slp300-app .row-green { background:rgba(34,197,94,.10) !important; }
#slp300-app .row-green td { color:#4ade80 !important; border-color:rgba(34,197,94,.15) !important; }
#slp300-app .row-red { background:rgba(239,68,68,.12) !important; }
#slp300-app .row-red td { color:#f87171 !important; border-color:rgba(239,68,68,.17) !important; }
.slp300-badge { display:inline-flex; align-items:center; min-height:24px; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:800; border:1px solid transparent; }
.slp300-badge.green { color:#4ade80; background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.30); }
.slp300-badge.red { color:#f87171; background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.30); }
.slp300-badge.orange { color:#fbbf24; background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.30); }
.slp300-badge.gray { color:#c6c6c6; background:#151515; border-color:#333; }
.slp300-empty { text-align:center !important; color:#777 !important; padding:30px !important; }
.slp300-loading { color:#a8a8a8; }
.slp300-error { color:#f87171; border-color:rgba(239,68,68,.45); }
.slp300-info { background:#0d1826; border:1px solid #1e3a5f; color:#9ec5ff; border-radius:8px; padding:10px 12px; margin-bottom:12px; }
.slp300-toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-bottom:12px; }
.slp300-toolbar label { display:flex; flex-direction:column; gap:5px; color:#aeb8c6; font-size:12px; }
.slp300-toolbar .slp300-search { margin:0; }
.slp300-formgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.slp300-formgrid label { display:flex; flex-direction:column; gap:6px; color:#cbd5e1 !important; font-size:12px; font-weight:700; }
.slp300-formgrid label.full { grid-column:1/-1; }
.slp300-formgrid label.check { flex-direction:row; align-items:center; }
.slp300-formgrid label.check input { width:18px; min-height:18px; }
.slp300-savebar { display:flex; justify-content:flex-end; margin-top:12px; }
.slp300-items { display:flex; flex-direction:column; gap:8px; margin:6px 0 8px; }
.slp300-itemrow { display:grid; grid-template-columns:minmax(200px,1fr) 90px 120px 40px; gap:8px; }
.slp300-categorylist { display:flex; flex-direction:column; gap:8px; }
.slp300-category { display:grid; grid-template-columns:1fr auto; gap:4px 10px; padding:12px; border:1px solid #292929; border-radius:8px; background:#0c0c0c; }
.slp300-category small { grid-column:1/-1; color:#777; }
.block { display:block; color:#7e8a9c; margin-top:4px; }

#slp300-modal { position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center; padding:20px; }
.slp300-modal-bg { position:absolute; inset:0; background:rgba(0,0,0,.82); }
.slp300-modal-card { position:relative; width:min(900px,96vw); max-height:92vh; overflow:auto; background:#080808; color:#fff; border:1px solid #333; border-radius:14px; box-shadow:0 22px 80px rgba(0,0,0,.65); }
.slp300-modal-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #2a2a2a; }
.slp300-modal-head h2 { margin:0; color:#fff !important; }
.slp300-modal-head button { width:34px; height:34px; border-radius:8px; background:#151515 !important; color:#fff !important; border:1px solid #333 !important; cursor:pointer; font-size:20px; }
.slp300-modal-body { padding:20px; }
.slp300-modal-actions { display:flex; justify-content:flex-end; gap:10px; padding:16px 20px; border-top:1px solid #2a2a2a; background:#0b0b0b; }
#slp300-modal input, #slp300-modal select, #slp300-modal textarea { background:#111 !important; color:#fff !important; border:1px solid #353535 !important; border-radius:8px; font:inherit; }
#slp300-modal input, #slp300-modal select { min-height:40px; padding:0 10px; }
#slp300-modal textarea { min-height:90px; padding:10px; }
#slp300-toast { position:fixed; right:24px; bottom:24px; z-index:6000; background:#111; color:#fff; border:1px solid #333; border-radius:10px; padding:12px 16px; box-shadow:0 12px 40px rgba(0,0,0,.45); }
#slp300-toast.green { color:#4ade80; border-color:rgba(34,197,94,.45); }

@media (max-width:1100px) {
    .slp300-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .slp300-grid2 { grid-template-columns:1fr; }
}

@media (max-width:760px) {
    #slp300-app { left:0; top:0; }
    .slp300-page { padding:18px 14px 50px; }
    .slp300-pagehead { flex-direction:column; }
    .slp300-stats { grid-template-columns:1fr; }
    .slp300-formgrid { grid-template-columns:1fr; }
    .slp300-formgrid label.full { grid-column:auto; }
    .slp300-itemrow { grid-template-columns:1fr 80px; }
    .slp300-itemrow .item-price { grid-column:1; }
}