*{box-sizing:border-box}body{margin:0;font-family:Arial,Tahoma;background:#f4f7fb;color:#172033}button,input,select{font:inherit}
.hidden{display:none!important}.auth{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0f172a,#1e3a8a)}
.auth-card{width:min(440px,92vw);background:white;padding:30px;border-radius:22px;box-shadow:0 30px 70px #0005}.auth-card h1{margin:0;color:#1e3a8a;font-size:38px}.auth-card p{color:#64748b}.tabs{display:flex;gap:8px;margin:18px 0}.tabs button{flex:1}
form{display:grid;gap:10px}input,select{padding:11px 12px;border:1px solid #d8deea;border-radius:10px;background:white}button{border:0;border-radius:10px;padding:11px 14px;background:#1e3a8a;color:white;cursor:pointer}
#app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}aside{background:#0f172a;color:white;padding:22px;position:sticky;top:0;height:100vh;overflow:auto}aside h2{font-size:30px;margin:0 0 4px}#restaurant{color:#93c5fd;margin-bottom:18px}
nav{display:grid;gap:6px}nav button{text-align:right;background:transparent;color:#dbeafe}nav button:hover,nav button.active{background:#1e293b}.logout{width:100%;margin-top:20px;background:#991b1b}
main{padding:24px;min-width:0}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}header h1{margin:0}header div{display:flex;gap:8px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.card,.panel{background:white;border:1px solid #e5eaf2;border-radius:16px;padding:18px;box-shadow:0 5px 18px #0f172a0a}.metric{font-size:26px;font-weight:bold;margin-top:8px}.muted{color:#64748b}.good{color:#15803d}.bad{color:#b91c1c}
.toolbar{display:flex;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}.panel h3{margin-top:0}.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:16px}
table{width:100%;border-collapse:collapse;background:white;border-radius:14px;overflow:hidden}th,td{padding:11px;border-bottom:1px solid #edf0f5;text-align:right}th{background:#f8fafc}.tag{padding:4px 8px;border-radius:999px;background:#e0e7ff;color:#3730a3;font-size:12px}.low{background:#fee2e2;color:#991b1b}
@media(max-width:850px){#app{grid-template-columns:1fr}aside{position:relative;height:auto}nav{grid-template-columns:repeat(2,1fr)}main{padding:14px}header{align-items:flex-start;gap:10px;flex-direction:column}}

.lang-top{display:flex;justify-content:flex-start}.lang-btn{background:#e8eefc;color:#1e3a8a;padding:7px 10px;font-weight:bold}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand-row h2{margin:0}.brand-row .lang-btn{min-width:46px}
.notice{background:#fff7d6;border:1px solid #f0d778;color:#6b5200;padding:12px 15px;border-radius:12px;margin-bottom:14px}
.danger{background:#b91c1c}.small{padding:6px 9px;font-size:12px}
.table-wrap{overflow-x:auto}
body.ltr aside nav button, body.ltr th, body.ltr td{text-align:left}
body.ltr .auth-card input,body.ltr .auth-card select{text-align:left}

.method-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px;margin:18px 0}
.method-card{border:2px solid #e2e8f0;border-radius:15px;padding:18px;display:grid;gap:8px;cursor:pointer;background:#fff}
.method-card.selected,.method-card:has(input:checked){border-color:#1e3a8a;background:#eef2ff}
.method-card input{width:auto}.method-card strong{font-size:18px}.method-card span{color:#64748b;line-height:1.6}
.file-field{border:1px dashed #94a3b8;border-radius:10px;padding:10px;background:#f8fafc}
.file-field input{display:block;margin-top:6px;padding:4px;border:0}
.link-btn{display:inline-block;background:#e0e7ff;color:#3730a3;padding:6px 9px;border-radius:8px;text-decoration:none}
@media(max-width:700px){.method-grid{grid-template-columns:1fr}}

nav{padding-bottom:30px}

.chart-grid,.integration-grid,.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}.alert-list{display:grid;gap:10px}.alert-box{background:white;border-left:5px solid #f59e0b;padding:14px;border-radius:12px;display:flex;justify-content:space-between;gap:15px}.alert-box.danger{border-color:#dc2626}.alert-box.info{border-color:#2563eb}.alert-box.warning{border-color:#f59e0b}canvas{width:100%;display:block}.integration-grid,.plan-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}@media(max-width:800px){.chart-grid{grid-template-columns:1fr}}


/* Enhanced layout: keeps the original PineCost design while preventing overlap */
.grid-form{align-items:end}
.grid-form input,.grid-form select,.grid-form button{width:100%;min-width:0}
.panel{overflow:hidden}
#content{min-width:0}
.table-wrap{max-width:100%;overflow:auto}
@media(min-width:1200px){
  #app{grid-template-columns:270px minmax(0,1fr)}
  main{padding:26px 30px}
  .grid-form{grid-template-columns:repeat(4,minmax(170px,1fr))}
}
@media(max-width:1100px) and (min-width:851px){
  #app{grid-template-columns:230px minmax(0,1fr)}
  aside{padding:18px}
  main{padding:18px}
  .grid-form{grid-template-columns:repeat(2,minmax(160px,1fr))}
}
@media(max-width:850px){
  .grid-form{grid-template-columns:1fr}
  header div{width:100%;flex-wrap:wrap}
  header input,header select{flex:1;min-width:140px}
}