:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#17243b;background:#f3f6fb;font-synthesis:none;--navy:#10233f;--navy2:#172f50;--gold:#d6a23b;--gold2:#f0c765;--line:#e5eaf2;--muted:#738096;--blue:#2463d8}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:#f3f6fb}button,input,select{font:inherit}button{cursor:pointer}a{text-decoration:none}
.app-shell{min-height:100vh}.app-frame{min-height:100vh;display:grid;grid-template-columns:278px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;min-height:620px;display:flex;flex-direction:column;padding:24px 18px 20px;background:linear-gradient(160deg,#10233f 0%,#142c4b 60%,#0d1c33 100%);color:#fff;overflow:hidden}
.sidebar:after{content:"";position:absolute;width:310px;height:310px;border:1px solid #d6a23b55;border-radius:50%;bottom:-220px;left:-110px;box-shadow:0 0 0 22px #d6a23b0b,0 0 0 48px #d6a23b08;pointer-events:none}
.brand-lockup{padding:8px 8px 22px;border-bottom:1px solid #ffffff22;text-align:center}.brand-lockup img{display:block;width:100%;max-width:238px;height:118px;object-fit:contain;margin:0 auto}.brand-caption{font-size:9px;letter-spacing:.19em;color:#d9b45e;margin-top:10px;font-weight:700}
.sidebar-label{font-size:10px;letter-spacing:.16em;color:#aebbd0;font-weight:800;margin:26px 12px 12px}.side-nav{display:flex;flex-direction:column;gap:7px}.side-link{display:flex;align-items:center;gap:14px;width:100%;border:1px solid transparent;border-radius:12px;padding:13px 14px;background:transparent;color:#e9eff8;text-align:left;font-weight:600;transition:.18s}.side-link:hover{background:#ffffff12}.side-link.active{background:linear-gradient(110deg,#c9952f,#edc45e);color:#18263d;box-shadow:0 8px 22px #0002}.nav-icon{display:grid;place-items:center;width:24px;height:24px;font-size:22px;line-height:1}.sidebar-bottom{margin-top:auto;padding:20px 8px 4px;text-align:center;color:#d8b25a;font-size:11px;letter-spacing:.12em;font-weight:800}.sidebar-bottom small{display:block;margin-top:5px;color:#b9c5d5;letter-spacing:.04em;font-weight:500}.building-mark{width:76px;height:58px;margin:0 auto 12px;display:grid;place-items:center;border:1px solid #d6a23b88;clip-path:polygon(50% 0,100% 28%,100% 100%,0 100%,0 28%);font-family:Georgia,serif;font-size:24px;color:#e5bd5b;background:linear-gradient(145deg,#ffffff0d,#ffffff00)}
.main-wrap{min-width:0;display:flex;flex-direction:column;min-height:100vh}.app-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px clamp(20px,3vw,46px);background:#fff;border-bottom:1px solid var(--line)}.eyebrow{font-size:10px;letter-spacing:.17em;color:#a47a27;font-weight:800;margin-bottom:7px}.header-title{font-size:25px;font-weight:800;letter-spacing:-.035em;color:#142742}.header-subtitle{font-size:13px;color:var(--muted);margin-top:5px}.header-actions{display:flex;align-items:center;gap:11px}.user-avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#edf2fa;color:#18365b;font-weight:800}.user-meta{display:flex;flex-direction:column;gap:3px;white-space:nowrap}.user-meta strong{font-size:13px}.user-meta span{font-size:11px;color:var(--muted)}
.main-content{width:100%;max-width:1700px;margin:0 auto;padding:30px clamp(18px,3vw,44px) 34px;flex:1}.app-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:76px;padding:14px 20px;background:var(--navy);color:#e5c16e;text-align:center;border-top:2px solid var(--gold);font-size:12px}.app-footer strong{font-size:14px;color:#f4d17a}
.page-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.page-intro h1{font-size:25px;margin:0 0 6px}.page-intro p{margin:0}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.stat-card{display:flex;align-items:center;gap:14px;padding:19px 18px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 5px 20px #14274208;min-width:0}.stat-icon{flex:0 0 48px;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:24px;font-weight:800}.stat-icon.blue{background:#eaf2ff;color:#2871db}.stat-icon.green{background:#e7f8ee;color:#1d9b58}.stat-icon.violet{background:#f0eaff;color:#7953cf}.stat-icon.amber{background:#fff2df;color:#cf7b16}.stat-value{font-size:27px;font-weight:850;color:#172c4b;margin-top:3px}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.8fr);gap:18px}.panel,.center-panel{background:#fff;border:1px solid var(--line);border-radius:17px;padding:22px;box-shadow:0 7px 24px #14274208}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.section-heading h2{margin:0 0 5px}.section-heading p{margin:0}.drive-panel{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.drive-mark{width:52px;height:52px;border-radius:16px;background:#eef2ff;color:#6250b7;display:grid;place-items:center;font-size:28px;margin-bottom:14px}.drive-panel h2{margin-bottom:8px}.drive-panel .btn{margin-top:18px}.drive-state{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:30px;font-size:11px;font-weight:700;white-space:nowrap}.drive-state i{width:7px;height:7px;border-radius:50%;background:currentColor}.drive-state.connected{background:#e8f8ee;color:#187b43}.drive-state.disconnected{background:#fff3df;color:#a8660d}
.center-panel{max-width:440px;margin:9vh auto;text-align:left}.center-panel h1{font-size:25px}.spinner{width:26px;height:26px;border:3px solid #e4e8ef;border-top-color:#2563eb;border-radius:50%;animation:spin .8s linear infinite;margin:auto}@keyframes spin{to{transform:rotate(360deg)}}
h1{font-size:23px;margin:0 0 8px}h2{font-size:17px;margin:0 0 16px}.muted{color:var(--muted);font-size:13px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.brand{font-weight:800;letter-spacing:.02em}.user-chip{font-size:13px;color:#566176}
.layout{display:grid;grid-template-columns:minmax(340px,.9fr) minmax(0,1.4fr);gap:18px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}.field label{font-size:13px;font-weight:700;color:#455066}.field input,.field select,.field textarea{width:100%;height:44px;border:1px solid #dce2eb;border-radius:10px;padding:0 12px;background:#fff;color:#172033}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:12px 16px;font-weight:750;background:var(--blue);color:#fff;transition:.15s}.btn:hover{filter:brightness(.96);transform:translateY(-1px)}.btn.secondary{background:#eef2f8;color:#263248;border:1px solid #e1e7f0}.btn.danger{background:#fff0f0;color:#b42318;border:1px solid #ffdada}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn.full{width:100%}.actions{display:flex;gap:8px;flex-wrap:wrap}.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1.5px dashed #9bb8d9;background:#f7faff;border-radius:14px;padding:28px 14px;text-align:center;cursor:pointer;color:#1d3557}.dropzone strong{display:block;margin-bottom:3px}.dropzone input{display:none}
.file-list{display:flex;flex-direction:column;gap:10px;margin:14px 0}.file-row{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:10px;border:1px solid #edf0f4;border-radius:12px;padding:8px}.thumb{width:54px;height:54px;border-radius:8px;object-fit:cover;background:#eef1f5}.file-name{font-size:13px;overflow-wrap:anywhere}.progress{height:5px;background:#e9edf3;border-radius:10px;margin-top:7px;overflow:hidden}.progress>i{display:block;height:100%;background:#16a36a;width:0}.status{font-size:11px;color:#64748b}.status.ok{color:#15803d}.status.bad{color:#b42318}.notice{padding:12px 14px;border-radius:10px;background:#fff7e6;color:#8a5200;font-size:13px;margin:12px 0}.success{background:#eaf8ef;color:#176b36}.error{background:#fff0f0;color:#a61b1b}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}.tab{padding:9px 12px;border:1px solid #e1e6ee;background:#fff;border-radius:9px;color:#455066}.tab.active{background:#172033;color:#fff;border-color:#172033}.table-wrap{overflow:auto;border:1px solid #edf0f4;border-radius:12px}table{border-collapse:collapse;width:100%;font-size:13px}th,td{text-align:left;padding:12px 11px;border-bottom:1px solid #edf0f4;white-space:nowrap}th{color:#687386;font-weight:700;background:#f7f9fc}tbody tr:last-child td{border-bottom:0}.badge{font-size:11px;border-radius:20px;padding:5px 9px;background:#edf2f8;color:#536176}.badge.warn{background:#fff1d6;color:#935900}.badge.green{background:#e6f7ec;color:#18733b}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin:18px 0}.photo-card{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;padding:9px;box-shadow:0 4px 14px #17203308}.photo-preview{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px;background:#eef1f5}.photo-meta{display:flex;flex-direction:column;gap:5px;padding:10px 2px}.photo-meta strong{font-size:12px;overflow-wrap:anywhere}.photo-meta span{font-size:11px;color:var(--muted)}.photo-card .btn{font-size:12px;padding:9px}.empty-state{padding:28px;text-align:center;color:var(--muted);background:#f8fafd;border:1px dashed #dce4ef;border-radius:12px}.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}.thumb-card{border:1px solid #e5e9f0;border-radius:12px;padding:8px}.thumb-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:#eef1f5}.tree button{background:none;border:0;padding:8px;color:#344054;text-align:left}.tree button:hover{background:#f1f5f9}.tree .indent{padding-left:18px}hr{border:0;border-top:1px solid #edf0f4;margin:18px 0}.hidden{display:none!important}
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:1fr}.layout{grid-template-columns:1fr}}
@media(max-width:760px){.app-frame{grid-template-columns:76px minmax(0,1fr)}.sidebar{padding:16px 9px}.brand-lockup{padding:4px 0 16px}.brand-lockup img{height:46px;object-fit:contain}.brand-caption,.sidebar-label,.side-link span:last-child,.sidebar-bottom{display:none}.side-nav{margin-top:16px}.side-link{justify-content:center;padding:12px 5px}.nav-icon{font-size:23px}.app-header{padding:17px 16px;align-items:flex-start}.header-title{font-size:18px}.header-subtitle{font-size:11px;max-width:270px}.user-meta{display:none}.header-actions{gap:6px}.main-content{padding:20px 14px}.stats-grid{gap:9px}.stat-card{padding:13px 11px;gap:9px}.stat-icon{width:38px;height:38px;flex-basis:38px;font-size:19px}.stat-value{font-size:22px}.page-intro{align-items:flex-start;flex-direction:column}.panel{padding:17px}.form-grid{grid-template-columns:1fr}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-footer{font-size:10px}.app-footer strong{font-size:12px}}
@media(max-width:420px){.app-frame{grid-template-columns:62px minmax(0,1fr)}.sidebar{padding:12px 6px}.brand-lockup img{height:36px}.header-title{font-size:16px}.header-actions .btn{padding:9px;font-size:11px}.photo-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.stat-card{flex-direction:column;align-items:flex-start}}
.login-card{margin:8vh auto;padding:34px}.login-logo{display:block;width:100%;max-width:300px;height:125px;object-fit:contain;margin:0 auto 20px}.login-card form{margin-top:22px}

/* Responsive refinements: prevent mobile page-wide horizontal overflow. */
html,body,#app{max-width:100%;min-width:0;overflow-x:hidden}
.app-frame,.main-wrap,.main-content,.panel,.layout,.dashboard-grid{min-width:0;max-width:100%}
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:560px}
.photo-card,.photo-meta{min-width:0}
.photo-preview{max-width:100%}
@media(max-width:760px){
  .app-frame{grid-template-columns:58px minmax(0,1fr)}
  .main-content{padding:14px 10px 22px}
  .panel{padding:14px;border-radius:14px}
  .layout{grid-template-columns:minmax(0,1fr);gap:12px}
  .app-header{min-width:0;padding:14px 12px;gap:8px}
  .header-title{font-size:16px;line-height:1.25}
  .header-subtitle{max-width:100%;font-size:11px;line-height:1.35}
  .eyebrow{font-size:9px;letter-spacing:.1em}
  .header-actions{flex-shrink:0}
  .header-actions .btn{white-space:nowrap}
  .section-heading{align-items:flex-start;flex-direction:column}
  .team-history-panel .table-wrap table{min-width:620px}
  .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .photo-card{padding:7px}
  .photo-meta strong{font-size:11px}
  .photo-meta span{font-size:10px;line-height:1.35}
}
@media(max-width:420px){
  .app-frame{grid-template-columns:52px minmax(0,1fr)}
  .sidebar{padding:10px 5px}
  .side-link{min-height:44px}
  .nav-icon{font-size:20px}
  .main-content{padding:10px 8px 18px}
  .panel{padding:12px}
  .app-header{padding:12px 9px}
  .header-title{font-size:14px}
  .header-actions .btn{font-size:10px;padding:8px 9px}
  .photo-grid{grid-template-columns:1fr}
  .photo-preview{aspect-ratio:16/10}
  .actions .btn{max-width:100%;white-space:normal}
}


/* Mobile touch usability and image viewer */
button, a.btn, input, select, label.dropzone {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button, a.btn { min-height: 44px; }
.actions { gap: 12px; }
.actions > .btn { margin: 2px 0; }
.side-link { min-height: 48px; }
.btn:focus-visible, .side-link:focus-visible, .photo-open:focus-visible {
  outline: 3px solid #e4b64f;
  outline-offset: 2px;
}
@media (hover: none) {
  .btn:hover { filter: none; transform: none; }
  .btn:active { filter: brightness(.94); transform: scale(.985); }
  .side-link:hover { background: transparent; }
  .side-link:active { background: #ffffff20; }
}
.photo-open {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #eef1f5;
  overflow: hidden;
  cursor: zoom-in;
}
.photo-open .photo-preview { cursor: zoom-in; }
.photo-zoom-hint {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 5px 8px;
  border-radius: 20px;
  background: rgba(12,25,48,.78);
  color: white;
  font-size: 10px;
  pointer-events: none;
}
.photo-download { margin-top: 5px; }
.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
}
.image-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,12,24,.88);
}
.image-viewer-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  max-height: min(94dvh, 1000px);
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 70px #0007;
}
.image-viewer-header, .image-viewer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.image-viewer-header { padding-bottom: 10px; }
.image-viewer-header strong { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.image-viewer-stage {
  display: grid;
  place-items: center;
  min-height: 0;
  flex: 1;
  overflow: auto;
  background: #101827;
  border-radius: 10px;
}
.image-viewer-stage img {
  display: block;
  max-width: 100%;
  max-height: 70dvh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.image-viewer-actions { justify-content: flex-end; padding-top: 12px; }
.image-download { background: #2463d8; color: #fff; }
body.viewer-open { overflow: hidden; }
@media(max-width:760px) {
  .actions { gap: 12px; }
  .actions > .btn, .photo-card > .btn, .photo-download { min-height: 48px; }
  .photo-card { gap: 4px; }
  .image-viewer { padding: 8px; }
  .image-viewer-dialog { max-height: 96dvh; padding: 10px; border-radius: 12px; }
  .image-viewer-stage img { max-height: 72dvh; }
  .image-viewer-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .image-viewer-actions > * { width: 100%; }
}