@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}body{margin:0;background:#f4f3ef;color:#111;font-family:Inter,Arial,sans-serif}.hidden{display:none!important}
.login-screen{min-height:100vh;background:#080808;display:flex;align-items:center;justify-content:center;padding:20px}.login-box{width:100%;max-width:420px;background:#111;border:1px solid #292929;padding:40px;color:#fff}.login-logo{text-align:center;margin-bottom:25px}.login-logo img{width:105px;height:105px;object-fit:contain}.login-logo h1{font:900 32px 'Barlow Condensed';margin:5px}.login-logo h1 span{color:#d99d26}.login-logo p{color:#777;font-size:9px;letter-spacing:2px}.login-box label{display:block;margin:17px 0 7px;font-size:10px;letter-spacing:1.5px;color:#999}.login-box input{width:100%;padding:14px;background:#080808;border:1px solid #333;color:#fff;outline:0}.login-box input:focus{border-color:#d99d26}.login-btn,.primary,.save{border:0;background:#d99d26;color:#111;font-weight:800;cursor:pointer}.login-btn{width:100%;margin-top:23px;padding:15px}.forgot{display:block;margin:15px auto 0;background:none;border:0;color:#888;font-size:11px;cursor:pointer}.loginError,#loginError{color:#ff6969;font-size:11px;text-align:center;margin-top:15px}
.sidebar{position:fixed;left:0;top:0;width:240px;height:100vh;background:#080808;color:#aaa;padding:30px 20px;display:flex;flex-direction:column}.admin-brand{display:flex;align-items:center;gap:8px;color:#fff;font:900 25px 'Barlow Condensed';margin:0 5px 50px}.admin-brand img{width:48px;height:48px;object-fit:contain}.admin-brand span{color:#fff}.admin-brand span::first-letter{color:#fff}.sidebar nav{display:flex;flex-direction:column;gap:4px}.nav-item{border:0;background:transparent;color:#aaa;text-align:left;padding:14px 12px;border-radius:4px;font-size:12px;cursor:pointer}.nav-item.active,.nav-item:hover{background:#171717;color:#fff}.nav-item.active{border-left:2px solid #d99d26}.view-store{margin-top:auto;margin-left:12px;color:#777;font-size:11px;text-decoration:none}.main{margin-left:240px;padding:45px 5vw}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px}.topbar p{font-size:9px;letter-spacing:3px;color:#9a701d;margin:0 0 7px}.topbar h1{font:900 48px 'Barlow Condensed';margin:0}.top-actions{display:flex;align-items:center;gap:12px}.admin-email{font-size:10px;color:#777;max-width:220px;overflow:hidden;text-overflow:ellipsis}.logout-btn{background:#111;border:1px solid #333;color:#fff;padding:11px 15px;cursor:pointer}
.page{display:none}.active-page{display:block}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:18px}.card,.panel{background:#fff;border:1px solid #e5e2da;padding:24px;box-shadow:0 8px 30px #00000008}.card span{display:block;font-size:9px;letter-spacing:2px;color:#888;margin-bottom:12px}.card b{display:block;font:800 34px 'Barlow Condensed'}.card small{color:#6c8c62;font-size:9px}.grid{display:grid;grid-template-columns:2fr 1fr;gap:15px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.panel-head h2,.panel h2{font:800 28px 'Barlow Condensed';margin:0}.sub{font-size:10px;color:#888;margin:4px 0 0}.text-btn,.secondary{border:0;background:transparent;color:#777;font-size:9px;letter-spacing:1px;cursor:pointer}.primary{padding:12px 16px;font-size:9px;letter-spacing:1px}.secondary{border:1px solid #ddd;padding:11px 14px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:10px}th{text-align:left;color:#999;font-size:8px;letter-spacing:1px;padding:11px 8px;border-bottom:1px solid #eee;white-space:nowrap}td{padding:14px 8px;border-bottom:1px solid #eee;white-space:nowrap}.empty{text-align:center;color:#999;padding:30px}.status{font-size:7px;padding:5px 7px;background:#eee;color:#555}.status.paid,.status.completed{background:#edf5e9;color:#4d7642}.status.pending{background:#fff4dc;color:#9b711d}.form-wrap{background:#faf9f6;border:1px solid #eee;padding:20px;margin-bottom:20px}.product-form input,.product-form select,.product-form textarea,form input,form select{width:100%;padding:13px;border:1px solid #ddd;background:#fff;margin-bottom:10px;outline:0;font-size:11px}.product-form textarea{min-height:90px;resize:vertical}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.save{width:100%;padding:14px;font-size:10px;letter-spacing:1px}.form-actions{display:flex;gap:10px}.small-btn{border:1px solid #ddd;background:#fff;padding:7px 9px;font-size:8px;cursor:pointer;margin-right:5px}.small-btn.edit:hover{background:#d99d26}.small-btn.danger{color:#a33}.small-btn.danger:hover{background:#fee}.msg{font-size:10px;color:#6c8c62;margin-top:12px}.setting{display:flex;justify-content:space-between;border-bottom:1px solid #eee;padding:18px 0;font-size:11px}.setting b{font-weight:600}.toast{position:fixed;right:25px;bottom:25px;background:#111;color:#fff;padding:13px 18px;font-size:10px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}.toast.good{border-left:3px solid #d99d26}.toast.bad{border-left:3px solid #c44}
@media(max-width:1050px){.sidebar{width:200px}.main{margin-left:200px}.cards{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}}
@media(max-width:680px){.sidebar{position:static;width:100%;height:auto;padding:10px;display:block}.admin-brand{margin:0 5px 10px;font-size:22px}.admin-brand img{width:40px;height:40px}.sidebar nav{flex-direction:row;overflow:auto}.nav-item{white-space:nowrap;padding:10px}.view-store{display:none}.main{margin:0;padding:24px 4vw}.topbar{align-items:flex-start;gap:15px}.topbar h1{font-size:38px}.top-actions{flex-direction:column;align-items:flex-end}.admin-email{max-width:140px}.cards{grid-template-columns:1fr 1fr}.card{padding:17px}.card b{font-size:28px}.grid{grid-template-columns:1fr}.panel{padding:18px}.two{grid-template-columns:1fr}.login-box{padding:28px}.table-wrap{margin:0 -18px;padding:0 18px}}
/* ================================
   MOBILE ADMIN RESPONSIVE
================================ */

@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  .app {
    display: block;
    min-height: 100vh;
  }

  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    padding: 14px 12px;
  }

  .admin-brand {
    justify-content: center;
    margin-bottom: 12px;
  }

  .sidebar nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 11px 14px;
    font-size: 12px;
  }

  .view-store {
    display: block;
    text-align: center;
    margin-top: 10px;
    padding: 10px;
  }

  .main {
    width: 100%;
    min-width: 0;
  }

  .topbar {
    padding: 18px 15px;
    gap: 10px;
  }

  .topbar h1 {
    font-size: 28px;
  }

  .admin-email {
    display: none;
  }

  .logout-btn {
    padding: 9px 12px;
    font-size: 10px;
  }

  .page {
    padding: 15px 12px;
  }

  /* Dashboard cards */
  .cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .card {
    padding: 16px 12px;
  }

  .card b {
    font-size: 24px;
  }

  /* Dashboard grid */
  .grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .panel {
    width: 100%;
    padding: 15px;
    overflow: hidden;
  }

  .panel-head {
    flex-wrap: wrap;
    gap: 12px;
  }

  .panel-head h2 {
    font-size: 20px;
  }

  /* Product form */
  .product-form {
    width: 100%;
  }

  .two {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .product-form input,
  .product-form select,
  .product-form textarea,
  #quickProductForm input,
  #quickProductForm select {
    width: 100%;
    box-sizing: border-box;
  }

  .form-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .form-actions button {
    width: 100%;
  }

  /* Tables */
  .table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 650px;
  }

  /* Product buttons */
  .small-btn {
    padding: 8px 10px;
    font-size: 10px;
  }

  /* Quick add */
  #quickProductForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #quickProductForm .two {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* Settings */
  .setting {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}


/* Small phones */
@media (max-width: 480px) {

  .admin-brand span {
    font-size: 18px;
  }

  .admin-brand img {
    width: 34px;
  }

  .sidebar {
    padding: 10px;
  }

  .nav-item {
    padding: 9px 11px;
    font-size: 11px;
  }

  .topbar {
    padding: 15px 12px;
  }

  .topbar h1 {
    font-size: 24px;
  }

  .cards {
    grid-template-columns: 1fr 1fr;
  }

  .card span {
    font-size: 9px;
  }

  .card b {
    font-size: 20px;
  }

  .card small {
    font-size: 8px;
  }

  .page {
    padding: 10px;
  }

  .panel {
    padding: 12px;
  }

  .primary,
  .secondary,
  .save {
    font-size: 10px;
  }
}
.custom-detail{margin:0 0 20px;padding:18px;background:#faf9f6;border:1px solid #e5e2da}
.custom-detail-grid{display:grid;grid-template-columns:1fr 280px;gap:24px;align-items:start}
.custom-detail h3{font:800 28px 'Barlow Condensed';margin:0 0 12px}
.custom-detail p{font-size:11px;color:#555;line-height:1.6}
.custom-request-image{background:#171717;border:1px solid #333;padding:8px;text-align:center}
.custom-request-image img{display:block;width:100%;max-height:380px;object-fit:contain}
@media(max-width:680px){
  .custom-detail-grid{grid-template-columns:1fr}
  .custom-request-image{max-width:320px}
}