:root {
  --if-font: Inter, "Segoe UI", Tahoma, sans-serif;
  --if-bg: #f6f5fa;
  --if-text: #28223a;
  --if-muted: #857d91;
  --if-surface: #fff;
  --if-border: #eae5f0;
  --if-input-border: #dfd9e7;
  --if-accent: #76508e;
  --if-primary: linear-gradient(110deg, #8754ba, #c653a3);
  --if-soft: #f2e9fc;
  --if-focus: #bf8cda;
  --if-shadow: 0 5px 20px #21193405;
  font-family: var(--if-font);
  color: var(--if-text);
  background: var(--if-bg);
  font-size: 15px;
}
.account-page { margin: 0; background: var(--if-bg); color: var(--if-text); font-family: var(--if-font); }
.account-page * { box-sizing: border-box; }
.account-shell { max-width: 1100px; margin: 34px auto; padding: 0 24px; }
.account-header { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 28px; flex-wrap: wrap; }
.account-header > div:first-child { min-width: 230px; }
.account-header h1, .account-narrow h1 { font-size: 30px; margin: 8px 0; letter-spacing: -.8px; }
.account-header > div > strong { color: var(--if-accent); }
.account-header a, .account-card a, .account-narrow a, .user a { color: var(--if-accent); text-underline-offset: 3px; }
.account-card { background: var(--if-surface); border: 1px solid var(--if-border); border-radius: 17px; padding: 24px; margin-bottom: 24px; box-shadow: var(--if-shadow); }
.account-card h1 { margin-top: 0; }
.account-card h2 { font-size: 19px; }
.account-card input, .account-card select, .account-card textarea, #customer {
  box-sizing: border-box; padding: 12px; border: 1px solid var(--if-input-border); border-radius: 10px;
  font: inherit; color: var(--if-text); background: var(--if-surface); max-width: 100%;
}
.account-card input { width: 100%; margin: 8px 0 18px; }
.account-card button, .account-header button {
  padding: 12px 18px; border: 0; border-radius: 10px; background: var(--if-primary);
  color: white; cursor: pointer; font: inherit; font-weight: 650;
}
.account-card button:hover:not(:disabled), .account-header button:hover:not(:disabled) { filter: brightness(.96); }
.account-card button:disabled, .account-header button:disabled { opacity: .5; cursor: not-allowed; }
.account-page :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--if-focus); outline-offset: 3px; }
.account-card label { display: block; }
.account-narrow { max-width: 520px; margin: 7vh auto; padding: 20px; }
.account-note { color: var(--if-muted); line-height: 1.7; }
.account-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.account-stats strong { display: block; font-size: 32px; color: var(--if-accent); margin-top: 12px; }
.account-table { overflow-x: auto; }
.account-table table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.account-table th, .account-table td { padding: 14px 12px; border-bottom: 1px solid var(--if-border); }
.account-table th { color: var(--if-muted); font-weight: 650; background: #faf8fc; }
.account-table button { margin-right: 8px; }
.account-status { min-height: 24px; color: #9a3412; }
#passwordDialog, #memberDialog { color: var(--if-text); background: var(--if-surface); border: 1px solid var(--if-border); border-radius: 17px; }
#passwordDialog { max-width: 440px; width: calc(100% - 60px); }
#passwordDialog::backdrop, #memberDialog::backdrop { background: #21193488; }
#passwordDialog input { display: block; }
.account-header .user { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: 65%; }
.user span { overflow-wrap: anywhere; }
.user { flex-wrap: wrap; }
.clip-login .account-card button { width: 100%; }
/* Preserve Google's own button branding. */
.clip-login #google-button button { background: white; color: #3c4043; border: 1px solid #dadce0; }
.clip-login #google-status { padding: 12px; background: var(--if-bg); border-radius: 10px; }
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-pager { margin-top: 22px; }
#memberDialog { width: min(680px,calc(100% - 40px)); padding: 0; max-height: 90vh; }
#memberDialog .account-card { margin: 0; border: 0; }
#memberDialog textarea { width: 100%; margin: 10px 0 16px; }
.usage-box { padding: 16px; background: var(--if-soft); border-radius: 12px; }
.admin-history { padding-left: 24px; }
.admin-history li { padding: 12px 0; border-bottom: 1px solid var(--if-border); overflow-wrap: anywhere; }
.admin-history p { margin: 8px 0; white-space: pre-wrap; }
.admin-history small { color: var(--if-muted); }
#detailEmail { overflow-wrap: anywhere; }
#packageFields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
#packageFields fieldset { border: 1px solid var(--if-border); border-radius: 12px; min-width: 0; }
#packageFields legend { color: var(--if-accent); font-weight: 650; }
#packageFields input[type=checkbox] { width: auto; margin-right: 8px; accent-color: #8754ba; }
#orders p { padding: 10px; border-bottom: 1px solid var(--if-border); }
#ledger li, #expiry li { padding: 7px; overflow-wrap: anywhere; }
#qr { max-width: 100%; height: auto; }
@media(max-width:800px) { .account-header .user { max-width: 100%; justify-content: flex-start; } }
@media(max-width:640px) {
  .account-shell { padding: 0 14px; margin: 20px auto; }
  .account-header { align-items: flex-start; flex-direction: column; }
  .account-header h1, .account-narrow h1 { font-size: 24px; }
  .account-card { padding: 17px; }
  .account-stats { grid-template-columns: 1fr; gap: 8px; }
  .account-stats .account-card { padding: 17px; }
  #packageFields { grid-template-columns: 1fr; }
}

/* Shared Clip-style dropdown navigation, using InstaFlow branding. */
.app-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px max(20px,calc((100vw - 1100px)/2));margin:0;background:var(--if-surface);border-bottom:1px solid var(--if-border);position:relative;z-index:20}
.app-identity{min-width:0;display:grid;gap:6px}.app-identity>span{font-size:13px;color:var(--if-muted);overflow-wrap:anywhere}
.app-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--if-text);font-size:23px}.app-mark{display:grid;place-items:center;background:var(--if-primary);color:#fff;width:44px;height:44px;border-radius:12px;font-size:20px;font-weight:750}
.app-menu{position:relative;flex:none}.app-menu summary{list-style:none;cursor:pointer;background:#fff;color:var(--if-accent);border:1px solid var(--if-border);border-radius:10px;padding:11px 15px;font:inherit}.app-menu summary::-webkit-details-marker{display:none}
.app-menu-links{position:absolute;right:0;top:calc(100% + 8px);width:260px;max-width:calc(100vw - 32px);max-height:70vh;overflow-y:auto;background:#fff;border:1px solid var(--if-border);border-radius:16px;box-shadow:0 14px 40px #21193422;padding:8px;display:flex;flex-direction:column;gap:4px}
.app-menu-links a,.app-menu-links button.secondary{display:block;text-align:left;padding:13px 12px;font:inherit;font-weight:600;text-decoration:none;color:var(--if-text);background:transparent;border:0;border-radius:9px;white-space:normal}
.app-menu-links a:hover,.app-menu-links button:hover,.app-menu-links a.current{background:var(--if-soft);color:var(--if-accent)}
.app-menu-links button:last-child{border-top:1px solid var(--if-border);margin-top:5px;color:#a03857}
.app-topbar :focus-visible{outline:2px solid var(--if-focus);outline-offset:3px}
.has-app-menu .sidebar{display:none}.has-app-menu .shell{display:block;min-height:0}.has-app-menu .main{max-width:1160px;margin:0 auto;width:100%}
@media(max-width:640px){.app-topbar{padding:14px 16px}.app-brand{font-size:21px}.app-menu-links{width:245px}}
.review-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--if-border)}.review-row p{overflow-wrap:anywhere;min-width:0}.review-row button{flex:none}#reviews,#customerCredits{scroll-margin-top:20px}@media(max-width:640px){.review-row{align-items:flex-start;flex-direction:column}}

/* Compact typography and shared credit/result feedback. */
body{line-height:1.45}.account-note,.panel p{line-height:1.5}.account-card{padding:20px;margin-bottom:16px}.account-card p{margin:8px 0}.account-card h2,.account-card h3{margin:0 0 10px}.account-card input{margin:5px 0 12px;padding:10px 12px}.account-table td,.account-table th{padding:10px 12px}.account-shell{margin:24px auto}.account-header{margin-bottom:18px}.panel{padding:20px;margin-bottom:16px}.listitem{padding:10px 0}.app-menu-links{gap:2px}.app-menu-links a,.app-menu-links button.secondary{padding:10px 12px;line-height:1.35}
.credit-strip{box-sizing:border-box;max-width:1100px;margin:12px auto 0;padding:12px 16px;background:var(--if-soft);border:1px solid var(--if-border);border-radius:12px;display:grid;gap:6px;font-size:13px}.credit-strip small{color:var(--if-muted)}.credit-strip progress{display:block;width:100%;height:10px;border:0;border-radius:20px;overflow:hidden;appearance:none;background:#e5dcec}.credit-strip progress::-webkit-progress-bar{background:#e5dcec;border-radius:20px}.credit-strip progress::-webkit-progress-value{background:var(--if-primary);border-radius:20px}.credit-strip progress::-moz-progress-bar{background:var(--if-primary)}.credit-strip progress.low::-webkit-progress-value{background:#d99525}.credit-strip progress.low::-moz-progress-bar{background:#d99525}
.result-dialog{border:1px solid var(--if-border);border-radius:18px;padding:24px;width:min(420px,calc(100vw - 32px));color:var(--if-text);box-shadow:0 18px 65px #21193433}.result-dialog::backdrop{background:#21193466}.result-dialog h2{font-size:20px;margin:0 0 12px}.result-dialog p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 20px}.result-dialog button{border:0;border-radius:10px;background:var(--if-primary);color:white;padding:11px 24px;font:inherit;cursor:pointer}
@media(max-width:1140px){.credit-strip{margin:12px 20px 0}}@media(max-width:640px){.account-card,.panel{padding:16px}.credit-strip{margin:10px 14px 0}}
.caption-preview{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--if-bg);border:1px solid var(--if-border);border-radius:12px;padding:14px;color:var(--if-text)!important}#captionStyle{font:inherit;border:1px solid var(--if-input-border);border-radius:10px;padding:10px;width:100%;margin-top:6px}#captionSuggestion{margin-top:14px}#captionTools h3{font-size:15px;margin-top:20px}

.desktop-menu{display:none}
@media(min-width:1024px){
 body.desktop-navigation{padding-left:248px;--desktop-rail:248px}
 body.desktop-navigation.sidebar-collapsed{padding-left:76px;--desktop-rail:76px}
 .desktop-navigation .app-topbar{padding:16px 28px}.desktop-navigation .app-menu{display:none}
 .desktop-navigation .desktop-menu{display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:var(--desktop-rail);box-sizing:border-box;background:#211934;border-right:1px solid #413653;padding:18px 10px;z-index:30;overflow-y:auto}
 .desktop-menu-toggle{flex:none;border:1px solid #514365;border-radius:10px;padding:12px 10px;margin-bottom:14px;background:#302443;color:white;cursor:pointer;font:inherit;text-align:left}
 .desktop-menu .app-menu-links{position:static;width:auto;max-width:none;max-height:none;overflow:visible;box-shadow:none;border:0;border-radius:0;padding:0;background:transparent;gap:4px}
 .desktop-menu .app-menu-links a,.desktop-menu .app-menu-links button.secondary{color:#e3dcec;display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 12px;font-size:14px;line-height:1.4}
 .desktop-menu .app-menu-links a:before,.desktop-menu .app-menu-links button:before{content:attr(data-icon);font-size:18px;min-width:22px;text-align:center}
 .desktop-menu .app-menu-links a:hover,.desktop-menu .app-menu-links button:hover{background:#352a4b;color:white}
 .desktop-menu .app-menu-links a.current{background:var(--if-primary);color:white}
 .desktop-menu .app-menu-links button:last-child{border-color:#514365;color:#f4b6ce}
 .sidebar-collapsed .desktop-menu .app-menu-links a,.sidebar-collapsed .desktop-menu .app-menu-links button.secondary{font-size:0;gap:0;justify-content:center;padding:10px 6px}
 .sidebar-collapsed .desktop-menu-toggle{text-align:center;font-size:20px;padding:9px 4px}
 .desktop-navigation .credit-strip{margin:12px 28px 0;max-width:none}
 .desktop-navigation .account-shell{padding:0 28px}.desktop-menu :focus-visible{outline:2px solid #dba8ef;outline-offset:2px}
}
.selectable-product{min-width:0}.selectable-product .product-card{width:100%}.product-select{display:flex;align-items:center;gap:8px;padding:10px;color:var(--if-accent);font-size:13px}.product-select input{width:18px;height:18px;accent-color:#8754ba}.selectable-product:has(input:checked){outline:2px solid var(--if-focus);border-radius:12px}