:root { --p-blue:#dc2626; --p-dark:#102a43; --p-muted:#627d98; --p-border:#d9e2ec; --p-bg:#f5f8fc; }
.percentage-button-wrap { width:100%; }
.percentage-button { border:0; background:var(--p-blue); color:#fff; padding:14px 30px; border-radius:12px; cursor:pointer; font:inherit; font-weight:700; min-height:50px; box-shadow:0 8px 20px #246bfd33; transition:.2s; }
.percentage-button:hover { transform:translateY(-2px); box-shadow:0 12px 25px #246bfd44; }
.percentage-hidden { display:none!important; }
#percentage-overlay,.percentage-modal,.percentage-report-view { font-family:Tahoma,Arial,sans-serif; }
#percentage-overlay { position:fixed; inset:0; z-index:999990; background:#102a4388; backdrop-filter:blur(8px); padding:20px; box-sizing:border-box; }
.percentage-dashboard { background:#f8fbff; width:min(980px,100%); height:min(790px,calc(100vh - 40px)); margin:auto; border-radius:24px; overflow:hidden; box-shadow:0 25px 80px #102a4350; display:flex; flex-direction:column; }
.percentage-header { background:#fff; padding:20px 26px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #edf2f7; }
.percentage-header>div { display:flex; align-items:center; gap:13px; }
.percentage-brand-mark { width:44px; height:44px; border-radius:14px; background:#e9f0ff; color:var(--p-blue); display:grid; place-items:center; font-size:25px; font-weight:bold; }
.percentage-header h2,.percentage-header small,.percentage-section-heading h3,.percentage-section-heading p { margin:0; }.percentage-header h2{font-size:18px;color:var(--p-dark)}.percentage-header small{color:var(--p-muted);font-size:11px;display:block;margin-top:4px}
.percentage-close,.percentage-modal-close { border:0; background:#f5f7fa; color:#627d98; border-radius:50%; width:36px;height:36px; font-size:25px; cursor:pointer; line-height:1; }.percentage-close:hover,.percentage-modal-close:hover{background:#fee2e2;color:#dc2626}
.percentage-tabs { display:flex; gap:5px; background:#fff; padding:0 25px; border-bottom:1px solid #e8eef5; }.percentage-tab{border:0;background:transparent;color:var(--p-muted);font:inherit;font-size:14px;font-weight:bold;padding:17px 20px;cursor:pointer;border-bottom:3px solid transparent}.percentage-tab.active{color:var(--p-blue);border-color:var(--p-blue)}
.percentage-content{flex:1;overflow:auto;padding:28px}.percentage-panel{display:none}.percentage-panel.active{display:block}.percentage-section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.percentage-section-heading h3{color:var(--p-dark);font-size:20px}.percentage-section-heading p{color:var(--p-muted);font-size:12px;margin-top:7px}
.percentage-report-filters{display:flex;align-items:end;gap:12px;margin:-6px 0 20px;padding:12px 14px;background:#f1f6fc;border:1px solid #e2eaf3;border-radius:12px}
.percentage-report-filters label{display:flex;align-items:center;gap:8px;color:var(--p-dark);font-size:13px;font-weight:bold}
.percentage-report-filters select{min-width:125px;border:1px solid #d9e2ec;border-radius:8px;background:#fff;color:var(--p-dark);font:inherit;font-size:13px;padding:8px 10px;cursor:pointer}
@media (max-width:700px){.percentage-report-filters{align-items:stretch;flex-wrap:wrap}.percentage-report-filters label{flex:1 1 140px;justify-content:space-between}.percentage-report-filters select{flex:1;min-width:0}}
.percentage-primary{border:0;border-radius:10px;padding:12px 18px;background:var(--p-blue);color:#fff;cursor:pointer;font:inherit;font-size:13px;font-weight:bold;white-space:nowrap;box-shadow:0 6px 15px #246bfd30}.percentage-primary:hover{background:#1855d1}.percentage-primary:disabled{opacity:.6;cursor:wait}.percentage-wide{width:100%;margin-top:20px}
.percentage-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}.percentage-report-card{position:relative;background:#fff;border:1px solid #e7eef7;border-radius:15px;padding:17px 17px 17px 104px;display:flex;align-items:center;gap:12px;box-shadow:0 5px 15px #102a4308}.percentage-report-icon{width:40px;height:40px;border-radius:12px;background:#e9f0ff;color:var(--p-blue);display:grid;place-items:center;font-size:20px;font-weight:bold;flex:0 0 40px}.percentage-report-info{flex:1;min-width:0;padding:0 4px;border-right:1px solid #edf2f7}.percentage-report-info strong{display:-webkit-box;color:var(--p-dark);font-size:14px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer}.percentage-report-info strong:hover{color:var(--p-blue)}.percentage-report-info small{display:block;color:var(--p-muted);font-size:11px;margin-top:5px}.percentage-archive-report,.percentage-restore-report{border:1px solid #fbd38d;background:#fffbeb;color:#9a6700;border-radius:8px;padding:8px 11px;cursor:pointer;font:inherit;font-size:10px;font-weight:bold;white-space:nowrap;flex:0 0 auto;order:-1;margin-left:2px}.percentage-archive-report:hover,.percentage-restore-report:hover{background:#fef3c7;border-color:#f59e0b}.percentage-archive-report:disabled,.percentage-restore-report:disabled{opacity:.55;cursor:wait}.percentage-report-actions{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:7px}.percentage-report-actions button{width:35px;height:35px;border:1px solid #d9e2ec;border-radius:9px;background:#fff;display:grid;place-items:center;cursor:pointer;padding:6px;transition:background .15s ease,transform .15s ease,box-shadow .15s ease}.percentage-report-actions button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.percentage-report-actions .percentage-rename-report{color:#111827}.percentage-report-actions .percentage-rename-report:hover{background:#f3f4f6;color:#000;transform:translateY(-1px);box-shadow:0 3px 8px #11182722}.percentage-report-actions .percentage-delete-report{color:#dc2626}.percentage-report-actions .percentage-delete-report:hover{background:#fee2e2;color:#b91c1c;transform:translateY(-1px);box-shadow:0 3px 8px #dc262622}
.percentage-empty{text-align:center;padding:65px 20px;color:var(--p-muted)}.percentage-empty span{display:block;color:#b9cbe0;font-size:42px}.percentage-empty strong{display:block;color:var(--p-dark);margin:12px 0 7px}.percentage-empty small{font-size:12px}
.percentage-report-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:65px 20px;color:var(--p-muted);font-size:12px}.percentage-spinner{width:22px;height:22px;border:3px solid #dce8f7;border-top-color:var(--p-blue);border-radius:50%;animation:percentage-spin .8s linear infinite}@keyframes percentage-spin{to{transform:rotate(360deg)}}
.percentage-store-list,.percentage-history-list{display:flex;flex-direction:column;gap:10px}.percentage-store-row{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;background:#fff;border:1px solid #e7eef7;border-radius:12px;color:var(--p-dark)}.percentage-store-row>span{display:flex;align-items:center;gap:12px;min-width:0}.percentage-store-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.percentage-store-row b{width:26px;height:26px;border-radius:8px;background:#eff4fa;color:var(--p-muted);display:grid;place-items:center;font-size:11px;flex:0 0 26px}.percentage-store-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}.percentage-rename-store{width:35px;height:35px;border:1px solid #d9e2ec;border-radius:9px;background:#fff;color:#111827;display:grid;place-items:center;cursor:pointer;padding:6px;transition:background .15s ease,transform .15s ease,box-shadow .15s ease}.percentage-rename-store svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.percentage-rename-store:hover{background:#f3f4f6;color:#000;transform:translateY(-1px);box-shadow:0 3px 8px #11182722}.percentage-delete-store{border:0;background:#fff1f2;color:#dc2626;padding:8px 13px;border-radius:8px;cursor:pointer;font:inherit;font-size:11px}
.percentage-modal{position:fixed;inset:0;z-index:100000;background:#102a4388;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(5px)}.percentage-modal-box{width:min(430px,100%);background:#fff;border-radius:18px;box-shadow:0 25px 70px #102a4350;overflow:hidden}.percentage-small-box{width:min(400px,100%)}.percentage-modal-box header{background:#f8fbff;padding:18px 22px;border-bottom:1px solid #e7eef7;display:flex;justify-content:space-between;align-items:center}.percentage-modal-box h3{margin:0;color:var(--p-dark);font-size:16px}.percentage-modal-body{padding:23px}.percentage-modal-body label{display:block;color:var(--p-dark);font-size:13px;font-weight:bold;margin-bottom:12px}.percentage-modal-body input{display:block;box-sizing:border-box;width:100%;margin-top:8px;border:1px solid #d9e2ec;border-radius:10px;padding:13px;font:inherit;outline:none}.percentage-modal-body input:focus,.percentage-date-fields select:focus{border-color:var(--p-blue);box-shadow:0 0 0 3px #246bfd18}.percentage-hint{float:left;color:var(--p-muted);font-weight:normal;font-size:10px}.percentage-date-fields{display:flex;gap:8px}.percentage-date-fields select{flex:1;padding:12px 7px;border:1px solid #d9e2ec;border-radius:10px;background:#fff;font:inherit;color:var(--p-dark);outline:none}
.percentage-report-view{position:fixed;inset:0;z-index:100001;background:#f4f8fc;overflow:auto}.percentage-report-shell{min-width:720px;min-height:100%;padding-bottom:60px}.percentage-report-header{background:#fff;border-bottom:1px solid #e7eef7;padding:18px 30px;display:flex;align-items:center;gap:25px}.percentage-report-header>div:nth-child(2){flex:1}.percentage-report-header h2{margin:0;color:var(--p-dark);font-size:20px}.percentage-report-header small{color:var(--p-muted);font-size:12px;display:block;margin-top:5px}.percentage-back{border:0;background:#eff4fa;color:var(--p-blue);border-radius:10px;padding:11px 16px;cursor:pointer;font:inherit;font-weight:bold}.percentage-export-actions{display:flex;gap:8px}.percentage-export-actions button{border:1px solid #d9e2ec;background:#fff;color:var(--p-dark);border-radius:9px;padding:10px 13px;cursor:pointer;font:inherit;font-size:11px}.percentage-export-actions button:hover{border-color:var(--p-blue);color:var(--p-blue)}.percentage-toolbar{margin:22px auto;max-width:1200px;padding:14px 18px;background:#fff;border:1px solid #e7eef7;border-radius:13px;display:flex;align-items:center;gap:15px;flex-wrap:wrap;color:var(--p-muted);font-size:12px}.percentage-toolbar label{color:var(--p-dark);cursor:pointer}.percentage-toolbar input{accent-color:var(--p-blue);margin-left:4px}.percentage-toolbar .percentage-primary{margin-right:auto;padding:9px 15px;font-size:11px}.percentage-table-wrap{max-width:1200px;margin:0 auto;overflow:auto;background:#fff;border:1px solid #d9e2ec;border-radius:15px;box-shadow:0 5px 18px #102a4308}.percentage-table-wrap table{border-collapse:collapse;width:100%;min-width:900px;direction:rtl}.percentage-table-wrap th,.percentage-table-wrap td{border-left:1px solid #e7eef7;border-bottom:1px solid #e7eef7;padding:12px 10px;text-align:center;white-space:nowrap;font-size:12px}.percentage-table-wrap thead th{background:#246bfd;color:#fff;font-weight:bold;position:sticky;top:0}.percentage-table-wrap tbody th{background:#f8fbff;text-align:right;color:var(--p-dark);min-width:150px}.percentage-table-wrap tbody tr:hover{background:#f8fbff}.percentage-table-wrap input{width:105px;border:1px solid transparent;background:transparent;padding:8px;text-align:center;font:inherit;color:var(--p-dark);border-radius:6px}.percentage-table-wrap input:focus{background:#fff;border-color:var(--p-blue);outline:0}.percentage-no-stores{text-align:center;color:var(--p-muted);padding:50px}
.percentage-login-note{padding:15px;background:#f8fbff;border:1px solid #e7eef7;border-radius:10px;text-align:center}.percentage-toast{position:fixed;z-index:1000020;top:18px;left:50%;right:auto;transform:translateX(-50%);min-width:250px;max-width:min(90vw,420px);padding:14px 20px;background:#102a43;color:#fff;border-radius:12px;box-shadow:0 12px 30px #102a4340;font:13px Tahoma,Arial;text-align:center}.percentage-toast.bad{background:#b42318}.percentage-toast.success{background:#15803d;box-shadow:0 10px 25px rgba(21,128,61,.28)}
@media(max-width:700px){#percentage-overlay{padding:0}.percentage-dashboard{height:100%;width:100%;border-radius:0}.percentage-header{padding:16px}.percentage-tabs{padding:0 8px;overflow:auto}.percentage-tab{padding:14px 12px;font-size:12px;white-space:nowrap}.percentage-content{padding:20px 15px}.percentage-section-heading{align-items:flex-start;flex-direction:column}.percentage-section-heading .percentage-primary{width:100%}.percentage-report-header{padding:15px;flex-wrap:wrap;gap:12px}.percentage-report-header>div:nth-child(2){min-width:150px}.percentage-export-actions{width:100%}.percentage-export-actions button{flex:1}.percentage-toolbar{margin:12px 15px}.percentage-table-wrap{margin:0 15px}.percentage-report-shell{min-width:0}}
.percentage-report-header{position:relative}
.percentage-report-close{position:absolute;left:20px;top:16px;z-index:2}

/* Responsive layout: desktop, tablet/iPad and phones. Keep report numbers
   on one line, while allowing only the table area to scroll horizontally. */
@media (max-width: 1024px) {
  #percentage-overlay { padding: 12px; }
  .percentage-dashboard { width: 100%; height: calc(100vh - 24px); }
  .percentage-content { padding: 22px; }
  .percentage-report-shell { min-width: 0; }
  .percentage-report-header { padding: 18px 24px; }
  .percentage-toolbar { margin: 16px 18px; }
  .percentage-table-wrap { margin: 0 18px; max-width: calc(100% - 36px); overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 700px) {
  #percentage-overlay { padding: 0; }
  .percentage-dashboard { height: 100%; width: 100%; border-radius: 0; }
  .percentage-header { padding: 14px 16px; }
  .percentage-header h2 { font-size: 16px; }
  .percentage-header small { font-size: 10px; }
  .percentage-brand-mark { width: 38px; height: 38px; font-size: 21px; }
  .percentage-tabs { padding: 0 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .percentage-tab { padding: 13px 10px; font-size: 11px; white-space: nowrap; flex: 0 0 auto; }
  .percentage-content { padding: 18px 12px; }
  .percentage-section-heading { align-items: stretch; gap: 13px; margin-bottom: 16px; }
  .percentage-section-heading h3 { font-size: 18px; }
  .percentage-section-heading p { font-size: 11px; line-height: 1.8; }
  .percentage-section-heading .percentage-primary { width: 100%; }
  .percentage-card-grid { grid-template-columns: 1fr; gap: 10px; }
   .percentage-report-card { padding: 13px 12px 13px 102px; gap: 8px; min-width: 0; }
  .percentage-report-icon { width: 34px; height: 34px; flex-basis: 34px; font-size: 17px; }
  .percentage-report-info { min-width: 0; }
  .percentage-report-info strong { font-size: 12px; }
  .percentage-report-info small { font-size: 10px; }
  .percentage-report-actions { left: 9px; gap: 5px; }
  .percentage-report-actions button { width: 34px; height: 34px; padding: 6px; }
  .percentage-report-actions button svg { width: 19px; height: 19px; }
  .percentage-archive-report, .percentage-restore-report { padding: 7px 8px; font-size: 9px; }
  .percentage-store-row { padding: 12px; }
  .percentage-report-header { padding: 60px 14px 14px; display: block; }
  .percentage-report-header h2 { font-size: 17px; padding-left: 36px; }
  .percentage-report-header small { font-size: 10px; padding-left: 36px; }
  .percentage-report-close { left: 14px; top: 14px; }
  .percentage-export-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; }
  .percentage-export-actions button { min-height: 42px; padding: 9px 7px; font-size: 10px; }
  .percentage-toolbar { margin: 12px; padding: 12px; gap: 10px; font-size: 11px; }
  .percentage-toolbar label { font-size: 10px; }
  .percentage-table-wrap { margin: 0 12px; max-width: calc(100% - 24px); border-radius: 11px; }
  .percentage-table-wrap table { min-width: 760px; }
  .percentage-table-wrap th, .percentage-table-wrap td { padding: 11px 9px; font-size: 11px; }
  .percentage-table-wrap input { width: 88px; }
  .percentage-data-form { grid-template-columns: 1fr; }
  .percentage-data-form .percentage-wide { grid-column: 1; }
  .percentage-data-box { width: min(94vw, 600px); }
  .percentage-modal { padding: 12px; }
  .percentage-modal-body { padding: 18px; }
}

/* Fix modal stacking over the dashboard and report view. */
.percentage-modal { z-index: 1000001 !important; }
.percentage-report-view { z-index: 1000000 !important; }

/* Store data action and its entry form. */
.percentage-data-box { width: min(600px, 100%); }
.percentage-modal-box header small { display:block; color:var(--p-muted); font-size:11px; margin-top:5px; }
.percentage-data-form { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 14px; }
.percentage-data-form .percentage-wide { grid-column:1 / -1; }
.percentage-store-name-cell { vertical-align:middle; }
.percentage-add-data { display:inline-grid; place-items:center; width:25px; height:25px; margin-right:10px; border:0; border-radius:8px; background:#e9f0ff; color:var(--p-blue); font-size:19px; line-height:1; cursor:pointer; vertical-align:middle; }
.percentage-add-data:hover { background:var(--p-blue); color:#fff; }
.percentage-store-filters{max-width:1200px;margin:18px auto 0;padding:15px 18px;background:#fff;border:1px solid #e7eef7;border-radius:13px;color:var(--p-dark);font-size:13px}
.percentage-store-filters strong{display:block;margin-bottom:12px;font-size:14px}
.percentage-store-filter-list{display:flex;flex-wrap:wrap;gap:10px}
.percentage-store-filter{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;background:#f8fbff;border:1px solid #d9e2ec;border-radius:9px;cursor:pointer}
.percentage-store-filter input{width:17px;height:17px;accent-color:var(--p-blue);cursor:pointer}
.percentage-store-filter span{font-weight:700}
@media(max-width:700px){.percentage-store-filters{margin:14px 12px 0;padding:13px 12px;font-size:12px}.percentage-store-filters strong{font-size:13px}.percentage-store-filter-list{gap:7px}.percentage-store-filter{padding:8px 9px}}
.percentage-data-actions{max-width:1200px;margin:8px auto 12px;display:flex;justify-content:center;gap:10px}
.percentage-data-actions button{border:1px solid #cbd9e8;border-radius:10px;background:#fff;color:var(--p-dark);padding:10px 22px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease}
.percentage-data-actions button span{color:var(--p-blue);font-size:19px;margin-left:5px}
.percentage-data-actions button:hover{transform:translateY(-2px);background:#eef5ff;border-color:#93c5fd}
.percentage-csv-box{width:min(480px,100%)}
.percentage-csv-box header{align-items:flex-start}
.percentage-csv-box header small{max-width:290px;line-height:1.7}
.percentage-file-drop{display:block;padding:18px;border:2px dashed #b8cbe0;border-radius:12px;background:#f8fbff;text-align:center;color:var(--p-dark);cursor:pointer;font-size:14px;font-weight:800}
.percentage-file-drop input{display:block;width:100%;margin-top:12px;font:inherit;font-size:12px}
.percentage-csv-help{margin:0;color:var(--p-muted);font-size:12px;line-height:2;text-align:right}
@media(max-width:700px){.percentage-data-actions{margin:8px 12px 10px;gap:6px}.percentage-data-actions button{flex:1;padding:10px 5px;font-size:11px}.percentage-data-actions button span{font-size:17px}.percentage-csv-box{width:94vw}}
.percentage-table-wrap tbody th { min-width:190px; font-weight:900; }
.percentage-table-wrap tbody th.percentage-store-name-cell,
.percentage-table-wrap tbody td[data-column="invoices"] { font-weight:900; color:#102a43; }
.percentage-action-header,.percentage-action-cell { width:92px; min-width:92px; text-align:center !important; }
.percentage-action-cell { background:#fbfdff; }
.percentage-table-wrap tbody td { color:var(--p-dark); font-variant-numeric:tabular-nums; }
.percentage-achievement-cell { font-weight:800; text-align:center !important; }
.percentage-table-wrap td[data-column="sales"],
.percentage-table-wrap td[data-column="target"],
.percentage-table-wrap td[data-column="achievement"],
.percentage-table-wrap td[data-column="average_invoice"],
.percentage-table-wrap td[data-column="remaining"] { font-weight:900; font-size:13px; }
.percentage-achievement-cell { color:#000 !important; }
.percentage-primary:hover { background:#b91c1c !important; }
.percentage-table-wrap thead th { background:#dc2626 !important; }
.percentage-button { box-shadow:0 8px 20px #dc262633; }
.percentage-button:hover { box-shadow:0 12px 25px #dc262644; }
.percentage-money-input { direction:ltr; text-align:left !important; letter-spacing:.2px; }
.percentage-data-form input { font-weight:800; font-size:15px; }
.percentage-number-input { direction:ltr; text-align:left !important; }
.percentage-amount-preview { display:block; min-height:17px; margin-top:5px; color:#58718d; font-size:10px; font-weight:normal; line-height:1.7; direction:rtl; text-align:right; }
.percentage-derived-note { grid-column:1 / -1; margin-top:4px; padding:11px 13px; border-radius:9px; background:#eef5ff; color:#3c638f; font-size:11px; line-height:1.8; }
@media(max-width:700px) {
  .percentage-data-form { grid-template-columns:1fr; }
  .percentage-data-form .percentage-wide { grid-column:auto; }
  .percentage-report-shell { min-width:0; }
  .percentage-table-wrap table { min-width:720px; }
  .percentage-table-wrap th, .percentage-table-wrap td { padding:9px 6px; font-size:10px; }
  .percentage-table-wrap tbody th { min-width:120px; }
  .percentage-action-header, .percentage-action-cell { width:58px; min-width:58px; }
  .percentage-add-data { width:23px; height:23px; margin-right:0; }
}

/* Clear, accessible navigation and export actions. */
.percentage-header h2 { font-size:22px; }
.percentage-header small { font-size:13px; }
.percentage-tabs { gap:6px; }
.percentage-tab { display:flex; align-items:center; justify-content:center; gap:8px; font-size:16px; padding:17px 22px; }
.percentage-tab-icon { font-size:21px; line-height:1; }
.percentage-section-heading h3 { font-size:23px; }
.percentage-section-heading p { font-size:14px; }
.percentage-report-header h2 { font-size:24px; }
.percentage-report-header small { font-size:14px; }
.percentage-export-actions button { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:13px; font-weight:bold; padding:11px 14px; white-space:nowrap; }
.percentage-export-actions button span:first-child { font-size:20px; color:var(--p-blue); line-height:1; }
@media (max-width:700px) {
  .percentage-tabs { padding:0; gap:0; overflow:hidden; width:100%; }
  .percentage-tab { flex:1 1 33.333%; min-width:0; padding:14px 5px; font-size:13px; line-height:1.35; white-space:normal; gap:4px; }
  .percentage-tab-icon { font-size:20px; }
  .percentage-header h2 { font-size:20px; }
  .percentage-header small { font-size:12px; }
  .percentage-section-heading h3 { font-size:21px; }
  .percentage-section-heading p { font-size:13px; }
  .percentage-export-actions { display:flex !important; flex-wrap:nowrap; width:100%; gap:4px; }
  .percentage-export-actions button { flex:1 1 0; min-width:0; width:33.333%; padding:10px 2px; font-size:11px; gap:0; }
  .percentage-export-actions button span:first-child { display:none; }
}

/* Report header and report-card readability polish. */
.percentage-report-header > div:nth-child(2) { text-align:center; }
.percentage-report-header h2 { font-size:26px; font-weight:800; line-height:1.5; }
.percentage-report-header small { font-size:15px; font-weight:600; line-height:1.6; }
.percentage-report-close {
  width:48px; height:48px; font-size:32px; font-weight:700;
  background:linear-gradient(145deg,#ffffff,#edf3fa);
  color:var(--p-dark); border:1px solid #d9e2ec;
  box-shadow:0 7px 18px #102a4325;
  transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.percentage-report-close:hover {
  transform:rotate(90deg) scale(1.08);
  background:#fee2e2; color:#dc2626; box-shadow:0 10px 24px #dc262633;
}
.percentage-report-close:focus-visible { outline:3px solid #93c5fd; outline-offset:3px; }
@media (max-width:700px) {
  .percentage-report-header > div:nth-child(2) { text-align:center; width:100%; }
  .percentage-report-header h2 { font-size:22px; padding-left:0; }
  .percentage-report-header small { font-size:13px; padding-left:0; }
  .percentage-report-close { width:50px; height:50px; font-size:33px; left:14px; top:14px; }
}

/* Make store names in the report table prominent and easy to scan. */
.percentage-table-wrap tbody th {
  font-size:15px;
  font-weight:900;
  color:#0b2239;
  letter-spacing:.1px;
}
.percentage-table-wrap tbody th .percentage-store-name-cell {
  display:inline-block;
  font-size:15px;
  font-weight:900;
  line-height:1.6;
  color:#0b2239;
}
@media (max-width:700px) {
  .percentage-table-wrap tbody th { font-size:14px; }
  .percentage-table-wrap tbody th .percentage-store-name-cell { font-size:14px; }
}

/* Organize visible-column controls into a clean two-row grid. */
.percentage-toolbar {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:10px;
}
.percentage-toolbar > span {
  grid-column:1 / -1;
  font-size:14px;
  font-weight:800;
  color:var(--p-dark);
  padding-bottom:2px;
}
.percentage-toolbar label {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:7px 10px;
  border:1px solid #e1eaf4;
  border-radius:9px;
  background:#f8fbff;
  font-size:13px;
  font-weight:700;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.percentage-toolbar label:hover {
  background:#eef5ff;
  border-color:#93c5fd;
  transform:translateY(-1px);
}
.percentage-toolbar label input { width:17px; height:17px; margin:0; }
@media (max-width:700px) {
  .percentage-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .percentage-toolbar > span { font-size:13px; }
  .percentage-toolbar label { min-height:40px; padding:7px 5px; font-size:11px; }
}

/* Keep report controls close to the table and place exports underneath it. */
.percentage-toolbar { margin:12px auto 10px; }
.percentage-sort-toolbar {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:calc(100% - 24px);
  margin:0 auto 12px;
  padding:10px 12px;
  background:#fff;
  border:1px solid #e4ebf3;
  border-radius:12px;
  box-shadow:0 4px 14px rgba(16,42,67,.06);
  color:var(--p-dark);
  white-space:nowrap;
}
.percentage-sort-toolbar label { font-size:13px; font-weight:900; }
.percentage-sort-toolbar select {
  min-width:205px;
  max-width:100%;
  padding:8px 32px 8px 12px;
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#fff;
  color:var(--p-dark);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.percentage-sort-toolbar select:focus {
  outline:2px solid rgba(220,38,38,.2);
  border-color:#dc2626;
}
.percentage-share-report {
  border:1px solid #c7d2fe;
  background:#eef2ff;
  color:#4338ca;
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
  font:inherit;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
  flex:0 0 auto;
}
.percentage-share-report:hover { background:#e0e7ff; border-color:#818cf8; }
.percentage-share-report:disabled,
.percentage-contact-actions button:disabled,
.percentage-shared-actions button:disabled { opacity:.55; cursor:wait; }
.percentage-contact-subtabs {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:100%;
  gap:8px;
  padding:5px;
  background:#f1f5f9;
  border-radius:12px;
  margin-bottom:14px;
  box-sizing:border-box;
}
.percentage-contact-tab-icon {
  display:inline-grid;
  place-items:center;
  width:25px;
  height:25px;
  margin-left:7px;
  border-radius:8px;
  background:linear-gradient(135deg,#e0e7ff,#cffafe);
  color:#4f46e5;
  font-size:16px;
  line-height:1;
  vertical-align:middle;
}
.percentage-contact-subtab {
  width:100%;
  min-width:0;
  border:0;
  border-radius:9px;
  padding:10px 16px;
  background:transparent;
  color:var(--p-muted);
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.percentage-contact-subtab.active { background:#fff; color:var(--p-blue); box-shadow:0 3px 10px rgba(16,42,67,.08); }
.percentage-contact-subtab.active .percentage-contact-tab-icon { background:linear-gradient(135deg,#4f46e5,#06b6d4); color:#fff; box-shadow:0 4px 9px rgba(79,70,229,.22); }
.percentage-contact-panel { max-width:900px; margin:0 auto; }
.percentage-contact-search {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:#fff;
  border:1px solid #d9e2ec;
  border-radius:12px;
  box-shadow:0 4px 14px rgba(16,42,67,.05);
}
.percentage-contact-search span { color:var(--p-blue); font-size:22px; line-height:1; }
.percentage-contact-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--p-dark); font:inherit; font-size:13px; }
.percentage-contact-results,.percentage-contact-list,.percentage-shared-list { display:flex; flex-direction:column; gap:9px; margin-top:12px; }
.percentage-user-result,.percentage-contact-card,.percentage-shared-card {
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 15px;
  background:#fff;
  border:1px solid #e5edf6;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(16,42,67,.04);
}
.percentage-user-result > div,.percentage-contact-card > div:nth-child(1),.percentage-shared-info { min-width:0; flex:1; }
.percentage-user-result strong,.percentage-contact-card strong,.percentage-shared-info strong { display:block; color:var(--p-dark); font-size:13px; font-weight:900; }
.percentage-user-result small,.percentage-contact-card small,.percentage-shared-info small { display:block; margin-top:4px; color:var(--p-muted); font-size:10px; }
.percentage-user-result button,.percentage-contact-actions button,.percentage-shared-actions button {
  border:1px solid #cbd5e1;
  border-radius:8px;
  padding:8px 10px;
  background:#fff;
  color:var(--p-dark);
  font:inherit;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.percentage-user-result button:hover,.percentage-contact-actions .accept,.percentage-shared-actions .accept { background:#ecfdf5; border-color:#86efac; color:#166534; }
.percentage-contact-actions,.percentage-shared-actions { display:flex; gap:6px; flex:0 0 auto; }
.percentage-contact-actions .reject,.percentage-shared-actions .reject { color:#b42318; background:#fff1f2; border-color:#fecdd3; }
.percentage-contact-status,.percentage-share-state { flex:0 0 auto; color:var(--p-muted); font-size:10px; font-weight:700; white-space:nowrap; }
.percentage-contact-status.accepted,.percentage-share-state.accepted { color:#15803d; }
.percentage-share-state.rejected { color:#b42318; }
.percentage-shared-icon { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:11px; background:#eef2ff; color:#4f46e5; font-size:19px; }
.percentage-contact-hint { padding:12px; color:var(--p-muted); text-align:center; font-size:11px; }
.percentage-recipient-list { display:flex; flex-direction:column; gap:8px; max-height:230px; overflow-y:auto; margin-top:8px; padding:2px; }
.percentage-recipient-card { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:1px solid #e2e8f0; border-radius:13px; background:#fff; color:var(--p-dark); font:inherit; text-align:right; cursor:pointer; transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.percentage-recipient-card:hover { border-color:#93c5fd; background:#f8fbff; transform:translateY(-1px); }
.percentage-recipient-card.selected { border-color:var(--p-blue); background:#eff6ff; box-shadow:0 0 0 3px #2563eb18; }
.percentage-recipient-avatar { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border-radius:11px; background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff; font-size:15px; font-weight:900; }
.percentage-recipient-details { min-width:0; flex:1; }
.percentage-recipient-details strong,.percentage-recipient-details small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.percentage-recipient-details strong { font-size:12px; font-weight:900; }
.percentage-recipient-details small { margin-top:3px; color:var(--p-muted); font-size:10px; direction:ltr; text-align:right; }
.percentage-recipient-check { display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; border:1px solid #cbd5e1; border-radius:50%; color:transparent; font-size:13px; font-weight:900; }
.percentage-recipient-card.selected .percentage-recipient-check { border-color:var(--p-blue); background:var(--p-blue); color:#fff; }
.percentage-share-feedback { margin-top:12px; padding:10px 12px; border:1px solid #bbf7d0; border-radius:10px; background:#f0fdf4; color:#166534; font-size:11px; font-weight:800; line-height:1.8; text-align:center; }
@media (max-width:700px) {
  .percentage-share-report { padding:7px 8px; font-size:9px; }
  .percentage-contact-subtabs { gap:5px; padding:4px; }
  .percentage-contact-subtab { padding:9px 6px; font-size:11px; }
  .percentage-contact-tab-icon { width:22px; height:22px; margin-left:5px; font-size:14px; }
  .percentage-user-result,.percentage-contact-card,.percentage-shared-card { padding:11px; gap:8px; }
  .percentage-user-result strong,.percentage-contact-card strong,.percentage-shared-info strong { font-size:11px; }
  .percentage-user-result button,.percentage-contact-actions button,.percentage-shared-actions button { padding:7px 8px; font-size:9px; }
  .percentage-contact-status,.percentage-share-state { font-size:9px; }
  .percentage-shared-card { flex-wrap:wrap; }
  .percentage-shared-actions { width:100%; padding-right:46px; }
  .percentage-recipient-list { max-height:190px; }
}
@media (max-width:700px) {
  .percentage-sort-toolbar { width:calc(100% - 16px); gap:7px; padding:8px; }
  .percentage-sort-toolbar label { font-size:11px; }
  .percentage-sort-toolbar select { min-width:0; flex:1; font-size:11px; }
}
.percentage-export-actions-below {
  max-width:1200px;
  margin:10px auto 8px;
  justify-content:flex-start;
}
.percentage-export-actions-below button { min-height:42px; }
@media (max-width:700px) {
  .percentage-toolbar { margin:10px 12px 8px; }
  .percentage-export-actions-below {
    display:flex !important;
    flex-wrap:nowrap;
    width:calc(100% - 24px);
    margin:10px 12px 6px;
    gap:4px;
  }
  .percentage-export-actions-below button {
    flex:1 1 0;
    width:33.333%;
    min-width:0;
  }
}

/* Summary row at the bottom of every report table. */
.percentage-table-wrap tbody tr.percentage-total-row:hover { background:#fff1f2; }
.percentage-total-row td,
.percentage-total-row th {
  background:#fff1f2 !important;
  border-top:2px solid #102a43;
  font-weight:900;
  color:#102a43;
}
.percentage-total-row th { font-size:14px; }

/* Per-report store removal controls. */
.percentage-data-actions { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.percentage-data-actions button { border:1px solid #d9e2ec; background:#fff; color:#102a43; border-radius:9px; padding:10px 14px; cursor:pointer; font:inherit; font-size:12px; font-weight:700; transition:background .2s ease, border-color .2s ease, transform .2s ease; }
.percentage-data-actions button:hover { background:#f3f7fc; border-color:#93c5fd; transform:translateY(-1px); }
.percentage-data-actions .percentage-danger-action { color:#dc2626; border-color:#fecaca; background:#fff7f7; }
.percentage-data-actions .percentage-danger-action:hover { background:#fee2e2; border-color:#f87171; }
.percentage-data-actions button span { font-size:18px; vertical-align:-2px; margin-left:4px; }
.percentage-slide-panel { animation:percentage-slide-down .22s ease-out; }
#percentage-remove-store-modal { z-index:100002; }
.percentage-remove-store-select { display:block; width:100%; box-sizing:border-box; margin-top:8px; border:1px solid #d9e2ec; border-radius:10px; padding:13px 12px; background:#fff; color:#102a43; font:inherit; outline:none; }
.percentage-remove-store-select:focus { border-color:#dc2626; box-shadow:0 0 0 3px #dc26261c; }
.percentage-remove-store-warning { margin:16px 0 0; padding:12px; border-radius:10px; background:#fff7ed; color:#9a3412; font-size:11px; line-height:1.9; }
.percentage-danger-submit { background:#dc2626; }
.percentage-danger-submit:hover { background:#b91c1c; }
@keyframes percentage-slide-down { from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:translateY(0); } }

/* Keep the store-name column stable while visible numeric columns share the
   remaining width. This lets the table shrink when column filters are used. */
.percentage-table-wrap table { min-width:0; table-layout:fixed; }
.percentage-table-wrap th,
.percentage-table-wrap td { overflow:hidden; text-overflow:ellipsis; }
.percentage-table-wrap th:nth-child(1),
.percentage-table-wrap td:nth-child(1) { width:92px; }
.percentage-table-wrap th:nth-child(2),
.percentage-table-wrap td:nth-child(2) { width:190px; min-width:190px; }
.percentage-table-wrap tbody th { min-width:0; }

@media (max-width:700px) {
  .percentage-data-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
  .percentage-data-actions .percentage-danger-action { grid-column:1 / -1; }
  .percentage-data-actions button { padding:10px 7px; font-size:11px; }
  .percentage-table-wrap table { min-width:0; }
  .percentage-table-wrap th:nth-child(1),
  .percentage-table-wrap td:nth-child(1) { width:58px; }
  .percentage-table-wrap th:nth-child(2),
  .percentage-table-wrap td:nth-child(2) { width:120px; min-width:120px; }
}

/* Stronger table grid lines for desktop and mobile. */
.percentage-table-wrap th,
.percentage-table-wrap td {
  border:1px solid #aebdca !important;
}
.percentage-table-wrap thead th {
  border-color:#64748b !important;
}
.percentage-total-row td,
.percentage-total-row th {
  border-top:3px solid #102a43 !important;
  border-bottom:1px solid #64748b !important;
}

/* Organize report store visibility into a clean two-column checklist. */
.percentage-store-filters {
  padding:18px 20px;
  border-color:#cbd5e1;
  box-shadow:0 5px 16px #102a4310;
}
.percentage-store-filters strong {
  padding-bottom:10px;
  border-bottom:1px solid #e2e8f0;
  margin-bottom:14px;
}
.percentage-store-filter-list {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 14px;
}
.percentage-store-filter {
  width:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  min-height:46px;
  padding:9px 12px;
  border-color:#dbe4ee;
  background:#f8fbff;
  direction:rtl;
}
.percentage-store-filter:hover {
  background:#eef5ff;
  border-color:#93c5fd;
}
.percentage-store-filter input {
  flex:0 0 18px;
  width:18px;
  height:18px;
  margin:0;
}
.percentage-store-filter span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.7;
}
@media (max-width:700px) {
  .percentage-store-filters { padding:14px 12px; }
  .percentage-store-filter-list { gap:8px; }
  .percentage-store-filter { min-height:43px; padding:8px 9px; gap:7px; }
  .percentage-store-filter span { font-size:11px; }
}

/* Let every column size itself from its content and restore horizontal
   scrolling when the report is wider than the available viewport. */
.percentage-table-wrap {
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.percentage-table-wrap table {
  width:max-content;
  min-width:max-content;
  table-layout:auto;
}
.percentage-table-wrap th,
.percentage-table-wrap td {
  overflow:visible;
  text-overflow:clip;
}
.percentage-table-wrap th:nth-child(2),
.percentage-table-wrap td:nth-child(2) {
  width:max-content;
  min-width:190px;
}

@media (max-width:700px) {
  .percentage-table-wrap {
    overflow-x:auto;
    max-width:calc(100% - 24px);
  }
  .percentage-table-wrap table {
    width:max-content;
    min-width:max-content;
  }
  .percentage-table-wrap th:nth-child(2),
  .percentage-table-wrap td:nth-child(2) {
    min-width:120px;
  }
}

/* Colorful animated export buttons below the report table. */
.percentage-export-actions-below {
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:14px;
  margin:16px auto 12px;
  max-width:760px;
}
.percentage-export-actions-below button {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  flex:1 1 0;
  min-height:52px;
  border:0;
  border-radius:15px;
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:900;
  letter-spacing:.1px;
  cursor:pointer;
  box-shadow:0 9px 18px rgba(16,42,67,.16), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
  animation:percentage-export-enter .5s ease both;
}
.percentage-export-actions-below button:nth-child(1) {
  background:linear-gradient(135deg,#059669 0%,#10b981 52%,#34d399 100%);
  animation-delay:.04s;
}
.percentage-export-actions-below button:nth-child(2) {
  background:linear-gradient(135deg,#dc2626 0%,#ef4444 52%,#fb7185 100%);
  animation-delay:.1s;
}
.percentage-export-actions-below button:nth-child(3) {
  background:linear-gradient(135deg,#2563eb 0%,#4f46e5 52%,#8b5cf6 100%);
  animation-delay:.16s;
}
.percentage-export-actions-below button::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.32) 47%,transparent 68%);
  transform:translateX(125%);
  transition:transform .65s ease;
}
.percentage-export-actions-below button:hover {
  transform:translateY(-4px) scale(1.015);
  filter:saturate(1.12) brightness(1.04);
  box-shadow:0 15px 26px rgba(16,42,67,.24), inset 0 1px 0 rgba(255,255,255,.42);
}
.percentage-export-actions-below button:hover::before { transform:translateX(-125%); }
.percentage-export-actions-below button:active {
  transform:translateY(-1px) scale(.98);
  box-shadow:0 6px 12px rgba(16,42,67,.18);
}
.percentage-export-actions-below button:focus-visible {
  outline:3px solid #fbbf24;
  outline-offset:3px;
}
.percentage-export-actions-below button span {
  position:relative;
  z-index:1;
  vertical-align:middle;
}
.percentage-export-actions-below button span:first-child {
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  margin-left:8px;
  border-radius:9px;
  background:rgba(255,255,255,.2);
  color:#fff;
  font-size:19px;
  line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .22s ease, background .22s ease;
}
.percentage-export-actions-below button:hover span:first-child {
  transform:rotate(-8deg) scale(1.12);
  background:rgba(255,255,255,.3);
}
@keyframes percentage-export-enter {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
  .percentage-export-actions-below button { animation:none; transition:none; }
  .percentage-export-actions-below button::before { transition:none; }
}
@media (max-width:700px) {
  .percentage-export-actions-below {
    width:calc(100% - 24px);
    margin:13px 12px 8px;
    gap:7px;
  }
  .percentage-export-actions-below button {
    min-height:48px;
    padding:8px 4px;
    border-radius:12px;
    font-size:10px;
  }
  .percentage-export-actions-below button span:first-child {
    width:24px;
    height:24px;
    margin-left:4px;
    font-size:16px;
    border-radius:7px;
  }
}

/* Glassmorphism visual refresh for the complete plugin interface. */
#percentage-overlay {
  background:
    radial-gradient(circle at 12% 8%, rgba(129,140,248,.34), transparent 34%),
    radial-gradient(circle at 88% 92%, rgba(34,211,238,.25), transparent 32%),
    rgba(15,23,42,.72);
}
.percentage-dashboard,
.percentage-report-shell {
  background:linear-gradient(145deg,rgba(248,250,252,.94),rgba(239,246,255,.88));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 28px 90px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.85);
}
.percentage-header,
.percentage-tabs,
.percentage-report-header {
  background:rgba(255,255,255,.7);
  border-color:rgba(148,163,184,.2);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.percentage-brand-mark {
  background:linear-gradient(135deg,#4f46e5,#06b6d4);
  color:#fff;
  box-shadow:0 9px 20px rgba(79,70,229,.28);
  animation:percentage-glass-float 3.5s ease-in-out infinite;
}
.percentage-tab {
  border-radius:12px 12px 0 0;
  transition:color .2s ease,background .2s ease,transform .2s ease;
}
.percentage-tab:hover {
  color:#4f46e5;
  background:rgba(99,102,241,.08);
  transform:translateY(-2px);
}
.percentage-tab.active {
  color:#4338ca;
  background:rgba(99,102,241,.1);
  border-color:#6366f1;
}
.percentage-primary,
.percentage-primary:hover,
.percentage-primary:active,
.percentage-primary:focus,
.percentage-data-actions button,
.percentage-data-actions button:hover,
.percentage-data-actions button:active,
.percentage-data-actions button:focus,
.percentage-export-actions-below button,
.percentage-export-actions-below button:hover,
.percentage-export-actions-below button:active,
.percentage-export-actions-below button:focus {
  color:#fff !important;
}
.percentage-primary {
  background:linear-gradient(135deg,#4f46e5,#7c3aed 55%,#06b6d4);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 10px 22px rgba(79,70,229,.25),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.percentage-primary:hover {
  background:linear-gradient(135deg,#4338ca,#6d28d9 55%,#0891b2);
  transform:translateY(-3px);
  box-shadow:0 15px 28px rgba(79,70,229,.34),inset 0 1px 0 rgba(255,255,255,.4);
  filter:saturate(1.12);
}
.percentage-report-card,
.percentage-empty,
.percentage-store-card,
.percentage-history-card {
  background:rgba(255,255,255,.64);
  border-color:rgba(148,163,184,.25);
  box-shadow:0 10px 25px rgba(30,41,59,.07),inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.percentage-report-card:hover,
.percentage-store-card:hover,
.percentage-history-card:hover {
  transform:translateY(-5px);
  border-color:rgba(99,102,241,.4);
  box-shadow:0 17px 32px rgba(79,70,229,.14),inset 0 1px 0 rgba(255,255,255,.95);
}
.percentage-report-icon {
  background:linear-gradient(135deg,#6366f1,#06b6d4);
  color:#fff;
  box-shadow:0 8px 16px rgba(6,182,212,.23);
}
.percentage-report-filters,
.percentage-toolbar,
.percentage-store-filters,
.percentage-data-actions {
  background:rgba(255,255,255,.58);
  border:1px solid rgba(148,163,184,.25);
  box-shadow:0 9px 24px rgba(30,41,59,.06),inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.percentage-report-filters select,
.percentage-remove-store-select,
.percentage-data-form input,
.percentage-data-form select,
.percentage-file-drop {
  background:rgba(255,255,255,.78);
  border-color:rgba(99,102,241,.22);
  box-shadow:inset 0 1px 2px rgba(30,41,59,.04);
}
.percentage-report-filters select:focus,
.percentage-remove-store-select:focus,
.percentage-data-form input:focus {
  border-color:#6366f1;
  box-shadow:0 0 0 4px rgba(99,102,241,.13);
}
.percentage-table-wrap {
  border-color:rgba(99,102,241,.22);
  box-shadow:0 14px 32px rgba(30,41,59,.1),inset 0 1px 0 rgba(255,255,255,.85);
}
.percentage-table-wrap thead th {
  background:linear-gradient(135deg,#4338ca,#6366f1 55%,#0891b2) !important;
  border-color:rgba(255,255,255,.25) !important;
}
.percentage-table-wrap tbody tr:hover td,
.percentage-table-wrap tbody tr:hover th {
  background:rgba(224,231,255,.55);
}
.percentage-total-row td,
.percentage-total-row th {
  background:linear-gradient(90deg,rgba(254,226,226,.9),rgba(254,249,195,.78)) !important;
}
.percentage-store-filter {
  background:rgba(255,255,255,.62);
  border-color:rgba(148,163,184,.25);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.percentage-store-filter:hover {
  background:rgba(224,231,255,.72);
  box-shadow:0 6px 14px rgba(79,70,229,.1);
  transform:translateY(-2px);
}
.percentage-modal {
  background:rgba(15,23,42,.58);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.percentage-modal-box {
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,246,255,.9));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 24px 70px rgba(15,23,42,.28),inset 0 1px 0 rgba(255,255,255,.95);
  animation:percentage-modal-pop .25s ease-out;
}
.percentage-modal-box header {
  background:rgba(255,255,255,.5);
  border-bottom-color:rgba(148,163,184,.2);
}
.percentage-close,
.percentage-modal-close {
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.percentage-close:hover,
.percentage-modal-close:hover {
  background:#ef4444;
  color:#fff;
  transform:rotate(90deg) scale(1.08);
}
.percentage-data-actions {
  padding:10px;
  border-radius:15px;
}
.percentage-data-actions button {
  border:1px solid rgba(255,255,255,.35);
  border-radius:12px;
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  box-shadow:0 8px 16px rgba(37,99,235,.2),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.percentage-data-actions button:nth-child(2) {
  background:linear-gradient(135deg,#8b5cf6,#d946ef);
  box-shadow:0 8px 16px rgba(139,92,246,.22),inset 0 1px 0 rgba(255,255,255,.3);
}
.percentage-data-actions button.percentage-danger-action {
  background:linear-gradient(135deg,#f97316,#dc2626);
  border-color:rgba(255,255,255,.35);
  color:#fff !important;
  box-shadow:0 8px 16px rgba(220,38,38,.22),inset 0 1px 0 rgba(255,255,255,.3);
}
.percentage-data-actions button:hover,
.percentage-data-actions button.percentage-danger-action:hover {
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  transform:translateY(-4px) scale(1.02);
  filter:brightness(1.08) saturate(1.12);
  box-shadow:0 14px 24px rgba(30,41,59,.2),inset 0 1px 0 rgba(255,255,255,.45);
}
.percentage-data-actions button:nth-child(2):hover {
  background:linear-gradient(135deg,#8b5cf6,#d946ef);
}
.percentage-data-actions button.percentage-danger-action:hover {
  background:linear-gradient(135deg,#f97316,#dc2626);
}
.percentage-data-actions button span {
  color:#fff !important;
}
@keyframes percentage-glass-float {
  0%,100% { transform:translateY(0) rotate(0); }
  50% { transform:translateY(-4px) rotate(2deg); }
}
@keyframes percentage-modal-pop {
  from { opacity:0; transform:translateY(12px) scale(.97); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion:reduce) {
  .percentage-brand-mark,
  .percentage-modal-box { animation:none; }
}

/* Keep data-entry fields visually stable while they receive focus. Opaque
   fields avoid a compositing flash caused by backdrop-filter behind the modal,
   and fixed sizing prevents the focus ring from shifting the form. */
.percentage-data-form input,
.percentage-data-form select {
  box-sizing:border-box;
  min-height:48px;
  background:#fff !important;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.percentage-data-form input:focus,
.percentage-data-form select:focus {
  background:#fff !important;
  outline:2px solid transparent;
  outline-offset:0;
}

/* Requested final color treatment. Keep these rules last so they override
   the decorative glass gradients without changing the layout behavior. */
.percentage-table-wrap thead th,
.percentage-table-wrap thead th:hover {
  background:#dc2626 !important;
  color:#fff !important;
}
.percentage-total-row td,
.percentage-total-row th,
.percentage-total-row:hover td,
.percentage-total-row:hover th {
  background:#fff !important;
  color:#102a43 !important;
}
.percentage-total-row td[data-column="achievement"] {
  background:#fff !important;
}
.percentage-primary,
.percentage-primary:hover,
.percentage-primary:active,
.percentage-primary:focus {
  background:#dc2626 !important;
  color:#fff !important;
  border-color:#b91c1c !important;
}
.percentage-primary:hover {
  box-shadow:0 14px 28px rgba(220,38,38,.3),inset 0 1px 0 rgba(255,255,255,.4);
}

/* Frosted table surface with subtle alternating row tints. */
.percentage-table-wrap {
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.percentage-table-wrap table {
  background:rgba(255,255,255,.2);
}
.percentage-table-wrap tbody tr:not(.percentage-total-row) td,
.percentage-table-wrap tbody tr:not(.percentage-total-row) th {
  background:rgba(255,255,255,.52);
  transition:background .2s ease;
}
.percentage-table-wrap tbody tr:not(.percentage-total-row):nth-child(even) td,
.percentage-table-wrap tbody tr:not(.percentage-total-row):nth-child(even) th {
  background:rgba(224,242,254,.52);
}
.percentage-table-wrap tbody tr:not(.percentage-total-row):hover td,
.percentage-table-wrap tbody tr:not(.percentage-total-row):hover th {
  background:rgba(199,210,254,.68);
}
.percentage-total-row td,
.percentage-total-row th,
.percentage-total-row:hover td,
.percentage-total-row:hover th {
  background:#fff !important;
}

/* Keep each tab's primary controls visible while its content scrolls. */
.percentage-content {
  position:relative;
}
.percentage-sticky-controls {
  position:sticky;
  top:-28px;
  z-index:30;
  margin:-28px -28px 22px;
  padding:28px 28px 1px;
  background:rgba(239,246,255,.96);
  border-bottom:1px solid rgba(148,163,184,.2);
  box-shadow:0 8px 18px rgba(30,41,59,.06);
}
.percentage-sticky-controls .percentage-section-heading {
  margin-bottom:16px;
}
.percentage-sticky-controls .percentage-report-filters {
  margin-bottom:10px;
}
@media (max-width:700px) {
  .percentage-sticky-controls {
    top:-20px;
    margin:-20px -15px 18px;
    padding:20px 15px 1px;
  }
}

/* Performance mode: all plugin state changes are immediate. Avoid animated
   compositing and backdrop blurs so filtering and opening remain snappy. */
#percentage-overlay *,
#percentage-report-view *,
.percentage-modal * {
  animation:none !important;
  transition:none !important;
  will-change:auto !important;
}
#percentage-overlay,
#percentage-report-view,
.percentage-modal,
#percentage-overlay *,
#percentage-report-view *,
.percentage-modal * {
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.percentage-export-actions-below button::before {
  display:none !important;
}
.percentage-dashboard,
.percentage-report-shell,
.percentage-modal-box,
.percentage-table-wrap {
  box-shadow:0 10px 26px rgba(15,23,42,.14),inset 0 1px 0 rgba(255,255,255,.7);
}

/* Keep the opened plugin above every theme, Elementor, header, menu and
   third-party floating widget on the host page. */
#percentage-overlay,
#percentage-report-view,
.percentage-modal {
  isolation:isolate;
  pointer-events:auto;
}
#percentage-overlay {
  z-index:2147483640 !important;
}
#percentage-report-view {
  z-index:2147483641 !important;
  background:rgba(241,245,249,.98);
}
.percentage-modal {
  z-index:2147483642 !important;
}
#percentage-overlay::before,
#percentage-report-view::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
}