/* Eat It U.P. Garden Planner - Photoshop-style dark theme */
:root{
  --app:#1e1e1e; --pasteboard:#232323; --panel:#333333; --panel2:#3a3a3a; --panel3:#2b2b2b;
  --menubar:#252526; --line:#1a1a1a; --line2:#4a4a4a; --ink:#d6d6d6; --muted:#9a9a9a;
  --accent:#1473e6; --accent2:#2d6cdf; --good:#5db37a; --bad:#e06a56;
  --s1:#d59d19; --s2:#3a8f4b; --s3:#2d6cdf; --sf:#8a55a8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Segoe UI",system-ui,Arial,sans-serif;background:var(--app);color:var(--ink);font-size:13px;overflow:hidden}
button,input,select,textarea{font:inherit;color:var(--ink)}
button{background:#454545;border:1px solid #2b2b2b;border-radius:4px;padding:5px 9px;cursor:pointer}
button:hover{background:#525252}
input[type=text],input[type=number],select,textarea,input[list]{width:100%;background:#262626;border:1px solid var(--line2);border-radius:4px;padding:5px 6px;color:var(--ink)}
textarea{resize:vertical}
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=color]{width:100%;height:30px;border:1px solid var(--line2);border-radius:4px;background:#262626;cursor:pointer;padding:2px}
.ps{display:flex;flex-direction:column;height:100vh}

/* menu bar */
.ps-menubar{display:flex;align-items:center;gap:4px;height:30px;background:var(--menubar);border-bottom:1px solid var(--line);padding:0 8px;flex:0 0 auto}
.ps-logo{font-weight:800;color:#fff;background:var(--s2);border-radius:4px;padding:2px 7px;font-size:12px}
.ps-logo span{display:none}
.ps-menus{display:flex;align-items:center;height:100%}
.ps-menu{position:relative;height:100%;display:flex;align-items:center}
.ps-menu>span{padding:0 10px;height:100%;display:flex;align-items:center;cursor:default;color:var(--ink)}
.ps-menu:hover>span{background:#3a3a3a}
.ps-drop{display:none;position:absolute;top:100%;left:0;min-width:210px;background:#2d2d2d;border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:40;padding:5px}
.ps-menu:hover .ps-drop{display:block}
.ps-drop button,.ps-drop .ps-mi{display:block;width:100%;text-align:left;background:none;border:0;border-radius:4px;padding:7px 10px;cursor:pointer;color:var(--ink)}
.ps-drop button:hover,.ps-drop .ps-mi:hover{background:var(--accent);color:#fff}
.ps-drop hr{border:0;border-top:1px solid var(--line2);margin:4px 2px}
.ps-commit{margin-left:10px;background:var(--accent);border-color:#0f5fc0;color:#fff;font-weight:600}
.ps-commit:hover{background:#1f7ff2}
.ps-title{margin-left:auto;color:var(--muted);font-size:12px;padding-right:4px}

/* options bar */
.ps-optionsbar{display:flex;align-items:center;gap:10px;height:36px;background:var(--panel);border-bottom:1px solid var(--line);padding:0 10px;overflow-x:auto;white-space:nowrap;flex:0 0 auto}
.ps-optionsbar::-webkit-scrollbar{height:7px}
.bb-label{color:var(--muted)} .bb-label b{color:#fff}
.bb-sep{width:1px;height:20px;background:var(--line2);display:inline-block}
.bb-group{display:inline-flex;align-items:center;gap:5px;color:var(--muted)}
.bb-group select,.bb-group input[type=text]{width:auto;min-width:92px}
.bb-group input[type=range]{width:90px}
.ps-optionsbar button{padding:4px 9px}
.ps-optionsbar button.active{background:var(--accent);border-color:#0f5fc0;color:#fff}

/* body split */
.ps-body{flex:1 1 auto;display:flex;min-height:0}

/* tool rail */
.ps-tools{flex:0 0 46px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;overflow-y:auto}
.ps-tools .tool{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:5px;padding:0}
.ps-tools .tool svg{width:21px;height:21px;fill:none;stroke:#c7c7c7;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ps-tools .tool:hover{background:#4a4a4a}
.ps-tools .tool.active{background:var(--accent)}
.ps-tools .tool.active svg{stroke:#fff}
.ps-tdiv{width:26px;height:1px;background:var(--line2);margin:3px 0}
.tl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ps-fg{margin-top:4px;width:34px;height:34px;display:block}
.ps-fg input[type=color]{width:34px;height:34px;padding:0;border-radius:5px}

/* stage (canvas + rulers) */
.ps-stage{flex:1 1 auto;display:grid;grid-template-columns:22px 1fr;grid-template-rows:22px 1fr 24px;min-width:0;background:var(--pasteboard)}
.ps-ruler-corner{background:var(--panel3);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.ps-ruler{background:var(--panel3);color:var(--muted)}
.ps-ruler-top{grid-column:2;grid-row:1;border-bottom:1px solid var(--line);background-image:repeating-linear-gradient(90deg,#4a4a4a 0 1px,transparent 1px 10px),repeating-linear-gradient(90deg,#5a5a5a 0 1px,transparent 1px 50px)}
.ps-ruler-left{grid-column:1;grid-row:2;border-right:1px solid var(--line);background-image:repeating-linear-gradient(0deg,#4a4a4a 0 1px,transparent 1px 10px),repeating-linear-gradient(0deg,#5a5a5a 0 1px,transparent 1px 50px)}
.ps-canvashost{grid-column:2;grid-row:2;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:10px}
.canvas-wrap{width:100%;max-height:100%;overflow:hidden;box-shadow:0 0 0 1px #000,0 6px 30px rgba(0,0,0,.5)}
.canvas-wrap canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}
.ps-statusbar{grid-column:1/3;grid-row:3;display:flex;justify-content:space-between;align-items:center;background:var(--panel3);border-top:1px solid var(--line);padding:0 10px;font-size:12px;color:var(--muted)}
.sb-right{display:flex;gap:14px}

/* right docks */
.ps-docks{flex:0 0 288px;background:var(--panel);border-left:1px solid var(--line);overflow-y:auto}
.ps-panel{border-bottom:1px solid var(--line)}
.ps-ph{background:var(--panel2);padding:7px 11px;font-weight:700;font-size:12px;letter-spacing:.3px;border-bottom:1px solid var(--line)}
.ps-pb{padding:11px}
.ps-l{display:block;margin:8px 0;color:var(--muted);font-size:12px}
.ps-l input,.ps-l select,.ps-l textarea{margin-top:4px}
.ps-check{display:flex;align-items:center;gap:8px;margin:8px 0;color:var(--ink)}
.ps-check input{width:auto}
.ps-sub{margin:12px 0 5px;font-weight:700;color:var(--ink);font-size:12px;border-top:1px solid var(--line2);padding-top:9px}
.ps-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.ps-row button{flex:1 1 auto;min-width:40px;padding:5px 6px}
.small-note{font-size:11px;color:var(--muted);margin-top:6px}

/* layers panel */
.ps-layers .ps-layer{display:flex;align-items:center;gap:8px;padding:7px 6px;border:1px solid transparent;border-radius:4px;font-size:12px}
.ps-layers .ps-layer:hover{background:#3d3d3d}
.ps-layer input{width:auto}
.ps-layer .sw{width:13px;height:13px;border-radius:3px;flex:0 0 auto;border:1px solid rgba(0,0,0,.4)}
.sw.s1{background:var(--s1)} .sw.s2{background:var(--s2)} .sw.s3{background:var(--s3)} .sw.sf{background:var(--sf)}

/* brushes panel */
.brush-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.brush-tabs button{padding:4px 9px;font-size:12px;border-radius:999px}
.brush-tabs button.active{background:var(--accent);border-color:#0f5fc0;color:#fff}
.brush-swatches{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:230px;overflow:auto}
.swatch{display:flex;align-items:center;gap:7px;border:1px solid var(--line2);border-radius:6px;padding:6px 8px;cursor:pointer;background:#2b2b2b;font-size:12px}
.swatch:hover{background:#3d3d3d}
.swatch.active{outline:2px solid var(--accent);border-color:var(--accent)}
.swatch .dot{width:15px;height:15px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(0,0,0,.4)}

/* properties */
.selected-info{font-size:12px;color:var(--muted);white-space:pre-line}
.zone-details{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line2)}
.totals{font-size:12px;color:var(--ink)}
.totals .totbreak{margin-top:7px;font-size:11px;color:var(--muted);line-height:1.5}

/* modals */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}
.modal[hidden]{display:none}
.modal-card{background:#2d2d2d;border:1px solid var(--line);border-radius:10px;max-width:460px;width:100%;max-height:82vh;overflow:auto;padding:18px}
.modal-card.wide{max-width:900px}
.modal-card h2{margin:0 0 12px;color:#fff;font-size:17px}
.cloud-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.cloud-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line2);border-radius:8px;padding:9px 11px}
.cloud-row small{color:var(--muted)}
.modal-actions{text-align:right;display:flex;gap:8px;justify-content:flex-end}
button.primary{background:var(--accent);border-color:#0f5fc0;color:#fff;font-weight:600}
button.primary:hover{background:#1f7ff2}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.compare-h{font-weight:700;color:var(--ink);font-size:13px;margin-bottom:5px}
.compare-img{border:1px solid var(--line2);border-radius:8px;background:#1e1e1e;min-height:160px;display:flex;align-items:center;justify-content:center;color:var(--muted);overflow:hidden}
.compare-img img{width:100%;height:auto;display:block}

@media(max-width:920px){
  .ps-docks{flex-basis:230px}
  .compare{grid-template-columns:1fr}
}
@media(max-width:700px){
  body{overflow:auto}
  .ps{height:auto}
  .ps-body{flex-direction:column}
  .ps-tools{flex-direction:row;flex-wrap:wrap;width:100%;flex:0 0 auto}
  .ps-tdiv{display:none}
  .ps-stage{grid-template-columns:1fr;grid-template-rows:1fr 24px}
  .ps-ruler,.ps-ruler-corner{display:none}
  .ps-canvashost{grid-column:1;grid-row:1}
  .ps-statusbar{grid-column:1;grid-row:2}
  .ps-docks{flex-basis:auto;width:100%}
}