:root{--dark:#064c3e;--green:#087a5b;--light:#f3f7f5;--line:#dce8e3;--muted:#6b7e78;--lime:#8dde44}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--light);color:#153b31}
button,input,select,textarea{font:inherit}button{cursor:pointer}
.layout{min-height:100vh;display:grid;grid-template-columns:243px 1fr}
.sidebar{background:var(--dark);color:#fff;padding:18px 13px;display:flex;flex-direction:column;gap:9px;min-height:100vh}
.brand{display:flex;align-items:center;gap:11px;padding:0 4px 20px;border-bottom:1px solid #ffffff22;margin-bottom:12px}
.logo{width:42px;height:42px;background:linear-gradient(135deg,#a7ea55,#50c83b);color:#064536;border-radius:12px;display:grid;place-items:center;font-size:22px;font-weight:900}
.brand b,.brand small{display:block}.brand small{font-size:10px;letter-spacing:1.5px;color:#a4d8ca;margin-top:3px}
.nav{border:0;background:transparent;color:#e2f7f1;border-radius:14px;padding:12px 10px;text-align:left;font-weight:800;font-size:16px;display:grid;grid-template-columns:26px 1fr auto;align-items:center}
.nav.active{background:#0a6b55;box-shadow:inset 4px 0 var(--lime)}.nav i{font-style:normal;background:#ffffff18;padding:4px 7px;border-radius:20px;font-size:11px}
.server-status{margin-top:auto;background:#ffffff12;border-radius:14px;padding:12px 10px;display:flex;gap:10px;align-items:center}
.server-status>span{width:10px;height:10px;background:#55df75;border-radius:50%;box-shadow:0 0 0 6px #55df7522}
.server-status b,.server-status small{display:block}.server-status b{font-size:12px}.server-status small{font-size:10px;color:#8edcc8}
.reload{background:#fff;border:0;border-radius:12px;padding:12px;color:#064c3e;font-weight:800}
main{min-width:0}header{height:78px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 28px;position:sticky;top:0;z-index:5}
header h1{margin:3px 0 0;font-size:25px}header small{color:#6d817a}.head-actions{margin-left:auto;display:flex;gap:10px;align-items:center}
.head-actions button,.import-btn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 16px;font-weight:800;color:#073f35}
.import-btn{position:relative;cursor:pointer}.import-btn input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.head-search,.search{display:flex;gap:9px;align-items:center;background:#eef4f1;border-radius:14px;padding:0 14px}
.head-search{height:46px;width:290px}.head-search input,.search input{border:0;outline:0;background:transparent;width:100%}
.avatar{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:#d8f3e7;color:#087a5b;font-weight:900}
.content{padding:32px 28px}.intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.intro p{color:#687d76}
.primary{background:var(--green)!important;color:#fff!important;border:0!important;box-shadow:0 9px 22px #087a5b33}
.intro button,.modal-actions button{border-radius:12px;padding:12px 18px;font-weight:800;border:1px solid var(--line);background:#fff}
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}.search{height:44px;flex:1;background:#fff}.toolbar select{height:44px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:0 12px}
.link-btn{margin-left:auto;border:0;background:transparent;color:#073f35;font-weight:800}
.table-card{background:#fff;border:1px solid var(--line);border-radius:20px;min-height:300px;overflow:hidden;box-shadow:0 14px 34px #124a3d0d}.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:950px}th{text-align:left;background:#edf4f1;padding:13px 12px;font-size:12px}td{padding:12px;border-top:1px solid #edf2f0;font-size:13px;vertical-align:middle}
.thumb{width:68px;height:53px;object-fit:cover;border-radius:10px;background:#edf4f1}.thumb.placeholder{display:grid;place-items:center;font-size:24px}
.name{font-weight:900;color:#084f40}.desc{max-width:280px;color:#62766f}.badge{display:inline-block;padding:6px 9px;border-radius:20px;font-size:11px;font-weight:900}.available{background:#dcf6e3;color:#16713e}.unavailable{background:#fde5e3;color:#ad342f}
.actions{display:flex;gap:6px}.actions button{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:11px;font-weight:800}.actions .danger{color:#d33a35}
.empty{text-align:center;padding:65px 20px;color:#71847e}.empty>div{font-size:45px}.empty h3{margin:8px 0 4px}.empty p{margin:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.cards article,.recent-panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}.cards span{color:#70837c}.cards b{display:block;font-size:38px;color:var(--green);margin-top:8px}
.recent-panel{margin-top:20px}.recent-list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.recent-card{border:1px solid var(--line);border-radius:14px;overflow:hidden}.recent-card img,.recent-placeholder{width:100%;height:130px;object-fit:cover;background:#edf4f1}.recent-placeholder{display:grid;place-items:center;font-size:38px}.recent-card div:last-child{padding:12px}.recent-card b,.recent-card small{display:block}.recent-card small{color:#71847e;margin-top:3px}
dialog{width:min(720px,calc(100vw - 28px));border:0;border-radius:22px;padding:0;box-shadow:0 22px 60px #063f3533;color:#153b31}dialog::backdrop{background:#03271f88;backdrop-filter:blur(3px)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 24px 16px;border-bottom:1px solid var(--line)}.modal-head h2{margin:3px 0 0}.close{width:38px;height:38px;border-radius:50%;border:0;background:#edf4f1;font-size:25px}
.form-grid{padding:20px 24px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid label{font-size:12px;font-weight:800}.form-grid input,.form-grid select,.form-grid textarea{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fbfdfc}.full{grid-column:1/-1}
.upload{min-height:180px;border:2px dashed #a8c9bd;border-radius:16px;display:grid!important;place-items:center;text-align:center;padding:13px;background:#f8fcfa;cursor:pointer}.upload input{display:none}.upload img{max-width:100%;max-height:260px;border-radius:12px}.upload b,.upload small{display:block}.upload small{margin-top:5px;color:#72847e}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px 22px;border-top:1px solid var(--line)}
.view-content{padding:20px 24px}.view-content>img{width:100%;max-height:360px;object-fit:cover;border-radius:16px;background:#edf4f1}.view-info{display:grid;grid-template-columns:1fr 1fr;gap:12px}.view-info p{background:#f4f8f6;padding:13px;border-radius:12px}.view-info span,.view-info b{display:block}.view-info span{font-size:11px;color:#6b8079}.view-info b{margin-top:4px}
.toast{position:fixed;right:22px;bottom:22px;background:#123f35;color:#fff;padding:13px 16px;border-radius:12px;opacity:0;transform:translateY(12px);transition:.2s}.toast.show{opacity:1;transform:none}.toast.error{background:#a93430}
@media(max-width:950px){.layout{grid-template-columns:1fr}.sidebar{position:relative;min-height:auto}.head-search{display:none}.recent-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){header{height:auto;min-height:72px;flex-wrap:wrap;padding:13px 14px}.head-actions{width:100%;margin:10px 0 0;overflow:auto}.content{padding:22px 14px}.intro{align-items:flex-start;flex-direction:column}.toolbar{flex-wrap:wrap}.search{flex-basis:100%}.cards{grid-template-columns:1fr}.recent-list{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.full{grid-column:1}.view-info{grid-template-columns:1fr}}

.server-status.browser-mode>span{background:#ffd34f;box-shadow:0 0 0 6px #ffd34f22}
.server-status.error-mode>span{background:#ef5350;box-shadow:0 0 0 6px #ef535022}

/* Gambar menu menyesuaikan semua rasio tanpa terpotong atau menjadi hitam. */
.thumb{
  object-fit:contain !important;
  background:#ffffff !important;
  border:1px solid #e3ece8;
}
.view-content>img{
  object-fit:contain !important;
  background:#ffffff !important;
  min-height:260px;
}
.recent-card img{
  object-fit:contain !important;
  background:#ffffff !important;
}
.upload img{
  object-fit:contain !important;
  background:#ffffff !important;
}

/* Tampilan gambar asli: tidak dipaksa menjadi JPEG dan tidak diberi latar hitam. */
.upload,
.view-content>img,
.thumb,
.recent-card img{
  background-color:#ffffff !important;
  background-image:
    linear-gradient(45deg,#f2f5f4 25%,transparent 25%),
    linear-gradient(-45deg,#f2f5f4 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#f2f5f4 75%),
    linear-gradient(-45deg,transparent 75%,#f2f5f4 75%) !important;
  background-size:18px 18px !important;
  background-position:0 0,0 9px,9px -9px,-9px 0 !important;
}
.upload img,
.view-content>img,
.thumb,
.recent-card img{
  object-fit:contain !important;
}
.upload small{
  display:block;
  margin-top:6px;
  color:#71847e;
  font-weight:400;
}