:root{
  --accent: #ff6a00;
  --bg: #0b1220;
  --card: #0f1724;
  --muted: #9aa4b2;
  --text: #eef6ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter, system-ui, Arial, sans-serif;margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.header{background:rgba(10,16,24,0.6);backdrop-filter:blur(6px);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.04);position:sticky;top:0;z-index:60;box-shadow:0 6px 18px rgba(0,0,0,0.35)}
.header div{font-weight:700}
.nav a{margin-left:0.5rem;color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:6px;font-weight:600}
.nav a:hover{color:var(--text);background:rgba(255,255,255,0.02)}
.nav a:hover{color:var(--text);background:rgba(255,255,255,0.02)}
.header-right{display:flex;align-items:center;gap:12px}

/* Cart button in header */
.cart-button{position:relative;background:transparent;border:none;color:var(--muted);cursor:pointer;padding:8px;border-radius:8px}
.cart-button:hover{color:var(--text);background:rgba(255,255,255,0.02)}
.cart-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;font-weight:700}.hero{position:relative;padding:3rem;border-radius:10px;margin:1rem 0;overflow:hidden;background:linear-gradient(180deg,rgba(255,106,0,0.06),transparent)}
.hero::before{content:'';position:absolute;inset:0;background-image:url('/assets/printer.svg');background-repeat:no-repeat;background-position:right center;background-size:40%;opacity:0.06;pointer-events:none}
.hero-inner{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:center}
.hero h1{margin:0 0 0.5rem 0;font-size:2rem}
.hero p{color:var(--muted);margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:1rem;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
.card h4{margin:0 0 6px 0}
.footer{padding:2rem;text-align:center;font-size:0.9rem;color:var(--muted)}
.form-row{display:flex;flex-direction:column;margin-bottom:0.75rem}
.label{font-weight:600;margin-bottom:0.25rem;color:var(--text)}
.input,textarea,select{padding:0.6rem;border:1px solid rgba(255,255,255,0.04);border-radius:6px;background:transparent;color:var(--text)}
.search-bar{display:flex;gap:0.5rem;margin-bottom:1rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
@media (max-width:800px){.hero-inner{grid-template-columns:1fr}
.hero::before{background-size:60%;background-position:center bottom}
}

/* Store button styles */
.btn{cursor:pointer;padding:0.5rem 0.75rem;border-radius:6px;border:none;font-weight:600;transition:transform .14s cubic-bezier(.2,.9,.2,1),box-shadow .14s cubic-bezier(.2,.9,.2,1),background .12s ease,opacity .12s;display:inline-block}
.btn:disabled{opacity:0.6;cursor:not-allowed}
.btn--accent{background:var(--accent);color:#fff;box-shadow:0 6px 14px rgba(255,106,0,0.12);margin-top:10px}
/* Hover: slightly larger + orange glow; text weight stays the same; no vertical movement */
.btn--accent:hover{transform:scale(1.06);box-shadow:0 14px 36px rgba(255,106,0,0.18)}
/* Active (while mouse down): slightly smaller and light orange background, persists while holding (no vertical movement) */
.btn--accent:active{transform:scale(0.98);background:#ff8a33;box-shadow:0 6px 18px rgba(255,106,0,0.14)}
.btn--accent.added{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(0.98)}50%{transform:scale(1.08)}100%{transform:scale(1)}}

/* File uploader styles */
.upload-area{border:1px dashed rgba(255,255,255,0.06);padding:12px;border-radius:8px;display:flex;align-items:center;gap:12px;background:transparent;cursor:pointer}
.upload-area.dragover{background:rgba(255,106,0,0.03);box-shadow:0 10px 30px rgba(255,106,0,0.08)}
.uploader-row{position:relative;display:flex;align-items:center;gap:8px}
.scroll-btn{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:6px;border:none;background:rgba(255,255,255,0.02);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6}
.scroll-btn.scroll-left{left:8px}
.scroll-btn.scroll-right{right:8px}
.scroll-btn:disabled{opacity:0.35;cursor:not-allowed}
.file-list{margin-top:10px;display:flex;flex-direction:row;gap:8px;overflow-x:auto;padding:8px 48px;min-height:96px;max-height:120px}
.file-list::-webkit-scrollbar{height:8px}
.file-list::-webkit-scrollbar-thumb{background:rgba(255,106,0,0.14);border-radius:8px}
.file-item{flex:0 0 220px;display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;background:rgba(255,255,255,0.01);border:1px solid rgba(255,255,255,0.02)}
.file-thumb{width:72px;height:72px;object-fit:cover;border-radius:6px}
.doc-icon{width:72px;height:72px;border-radius:6px;background:rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700}
.file-meta{display:flex;flex-direction:column;overflow:hidden}
.file-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-size{font-size:0.85rem;color:var(--muted)}
.file-placeholder{display:flex;align-items:center;justify-content:center;color:var(--muted);height:80px;width:100%;border-radius:6px;background:rgba(255,255,255,0.01);border:1px dashed rgba(255,255,255,0.02)}

/* Material info tooltip */
.info-wrapper{position:relative}
.info-icon{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,0.02);display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;cursor:default}
.info-icon:hover .info-tooltip,.info-icon:focus .info-tooltip{opacity:1;transform:translateY(0);pointer-events:auto}
.info-tooltip{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%) translateY(6px);background:#0f1724;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);min-width:200px;color:var(--muted);opacity:0;transition:opacity .12s ease,transform .12s ease;pointer-events:none;z-index:10}

/* Material selector layout */
.material-row{display:flex;gap:12px;align-items:center;margin-top:8px}
.select-wrapper{position:relative;display:flex;align-items:center}
.material-select{background:var(--card);color:var(--text);padding:0 28px;min-width:220px;height:40px;display:flex;align-items:center}
.select-wrapper .select-arrow{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
/* remove default native arrow on some browsers */
.material-select::-ms-expand{display:none}
.material-select{appearance:none;-webkit-appearance:none}
.material-select option{background:var(--card);color:var(--text)}

.color-column{display:flex;flex-direction:column;gap:6px;justify-content:center}
.color-column .label{margin:0}
.color-picker{display:flex;align-items:center;gap:8px}
.color-box{width:36px;height:36px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,0.2)}
.color-input{position:absolute;left:-9999px}

.info-wrapper{display:flex;align-items:center;height:40px;margin-left:6px}

/* Palette popup */
.palette-popup{position:absolute;top:calc(100% + 8px);left:0;background:var(--card);border:1px solid rgba(255,255,255,0.03);padding:10px;border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,0.5);z-index:30;min-width:160px}
.palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:8px}
.color-swatch{width:36px;height:36px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);cursor:pointer}
.color-swatch.selected{outline:3px solid rgba(255,106,0,0.18);transform:scale(1.05)}