diff --git a/css/analysis.css b/css/analysis.css
index 351296c..4573dd9 100644
--- a/css/analysis.css
+++ b/css/analysis.css
@@ -1,7 +1,7 @@
 /* ── Player Grid ─────────────────────────────────────────────────────────── */
 .player-grid {
   display:               grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   gap:                   6px;
 }
 
@@ -9,10 +9,10 @@
   background:    var(--bg2);
   border:        1px solid var(--border);
   border-radius: var(--r);
-  padding:       7px 9px;
+  padding:       9px 11px;
   display:       flex;
   align-items:   center;
-  gap:           7px;
+  gap:           8px;
   cursor:        pointer;
   transition:    opacity 0.15s, border-color 0.15s;
   user-select:   none;
@@ -24,7 +24,7 @@
 .player-card--ref:hover { border-color: rgba(100, 160, 255, 0.7); }
 
 .ref-player-label {
-  font-size:      11px;
+  font-size:      13px;
   color:          var(--t3);
   text-transform: uppercase;
   letter-spacing: 0.06em;
@@ -32,13 +32,13 @@
 }
 
 .player-job-icon {
-  width:           28px;
-  height:          28px;
+  width:           32px;
+  height:          32px;
   border-radius:   50%;
   display:         flex;
   align-items:     center;
   justify-content: center;
-  font-size:       9px;
+  font-size:       11px;
   font-weight:     600;
   font-family:     var(--font-d);
   letter-spacing:  0.03em;
@@ -49,14 +49,14 @@
 .player-job-icon.role-dps    { background: rgba(224,92,92,.15);  color: var(--red);   border: 1px solid rgba(224,92,92,.35);  }
 
 .player-name {
-  font-size:     12px;
+  font-size:     14px;
   color:         var(--t1);
   white-space:   nowrap;
   overflow:      hidden;
   text-overflow: ellipsis;
 }
 .player-type {
-  font-size:  10px;
+  font-size:  12px;
   color:      var(--t2);
   margin-top: 1px;
 }
@@ -71,8 +71,8 @@
 
 .filter-input {
   width:      200px;
-  padding:    4px 9px;
-  font-size:  12px;
+  padding:    5px 10px;
+  font-size:  13px;
   margin-left: auto;
 }
 
@@ -93,16 +93,16 @@
 
 .ref-report-input {
   width:     200px;
-  padding:   4px 9px;
-  font-size: 12px;
+  padding:   5px 10px;
+  font-size: 13px;
 }
 
 /* ── AoE Timeline ────────────────────────────────────────────────────────── */
 .aoe-event {
   display:               grid;
-  grid-template-columns: 52px 1fr;
+  grid-template-columns: 60px 1fr;
   gap:                   14px;
-  padding:               11px 0;
+  padding:               13px 0;
   border-bottom:         1px solid var(--border);
   align-items:           start;
 }
@@ -110,7 +110,7 @@
 
 .aoe-time {
   font-family:    var(--font-d);
-  font-size:      13px;
+  font-size:      15px;
   color:          var(--gold);
   padding-top:    2px;
   letter-spacing: 0.03em;
@@ -120,12 +120,12 @@
   display:       flex;
   align-items:   center;
   gap:           6px;
-  font-size:     13px;
+  font-size:     15px;
   color:         var(--t1);
   margin-bottom: 7px;
 }
 .aoe-total {
-  font-size:   12px;
+  font-size:   14px;
   color:       var(--t2);
   margin-left: 6px;
 }
@@ -149,8 +149,8 @@
   background:    var(--bg3);
   border:        1px solid var(--border);
   border-radius: var(--r);
-  padding:       3px 8px 4px 6px;
-  font-size:     11px;
+  padding:       4px 9px 5px 7px;
+  font-size:     13px;
 }
 
 .aoe-target--dead {
@@ -167,7 +167,7 @@
 }
 
 .aoe-target-overkill {
-  font-size:   9px;
+  font-size:   11px;
   font-family: var(--font-d);
   color:       var(--red);
   font-weight: 600;
@@ -176,7 +176,7 @@
 
 .aoe-target-job {
   font-family:    var(--font-d);
-  font-size:      10px;
+  font-size:      12px;
   font-weight:    600;
   letter-spacing: 0.02em;
   padding-top:    2px;
@@ -206,7 +206,7 @@
 
 /* ── HP Bar ──────────────────────────────────────────────────────────────── */
 .aoe-hp-bar {
-  height:        6px;
+  height:        7px;
   background:    var(--bg0);
   border-radius: 2px;
   overflow:      hidden;
@@ -233,7 +233,7 @@
 }
 
 .aoe-ref-label {
-  font-size:      10px;
+  font-size:      12px;
   color:          var(--t3);
   letter-spacing: 0.05em;
   text-transform: uppercase;
@@ -249,13 +249,13 @@
   background:    var(--bg2);
   border:        1px solid var(--border);
   border-radius: var(--r);
-  padding:       2px 8px 2px 6px;
-  font-size:     11px;
+  padding:       3px 9px 3px 7px;
+  font-size:     13px;
   opacity:       0.75;
 }
 
-.aoe-delta-worse  { font-size: 10px; color: var(--red);   }
-.aoe-delta-better { font-size: 10px; color: var(--green); }
+.aoe-delta-worse  { font-size: 12px; color: var(--red);   }
+.aoe-delta-better { font-size: 12px; color: var(--green); }
 
 .aoe-buff-missing {
   opacity:      0.5;
@@ -278,9 +278,9 @@
 }
 
 .aoe-target-buff-icon {
-  width:         16px;
-  height:        16px;
-  border-radius: 2px;
+  width:         28px;
+  height:        28px;
+  border-radius: 3px;
   object-fit:    cover;
   cursor:        default;
 }
diff --git a/css/base.css b/css/base.css
index 4956e87..f105806 100644
--- a/css/base.css
+++ b/css/base.css
@@ -59,7 +59,7 @@ body {
   background:  var(--bg0);
   color:       var(--t1);
   font-family: var(--font-b);
-  font-size:   14px;
+  font-size:   16px;
   line-height: 1.5;
   min-height:  100vh;
 }
@@ -70,7 +70,7 @@ code {
   background:    var(--bg2);
   padding:       1px 6px;
   border-radius: 3px;
-  font-size:     12px;
+  font-size:     13px;
 }
 
 hr {
@@ -96,7 +96,7 @@ ol li {
   border-radius: var(--r);
   padding:       10px 14px;
   color:         var(--red);
-  font-size:     13px;
+  font-size:     14px;
   margin-bottom: 14px;
 }
 
@@ -106,7 +106,7 @@ ol li {
   border-radius: var(--r);
   padding:       10px 14px;
   color:         var(--green);
-  font-size:     13px;
+  font-size:     14px;
   margin-bottom: 14px;
 }
 
@@ -142,7 +142,7 @@ ol li {
   margin-bottom: 10px;
 }
 .empty h3 {
-  font-size:     14px;
+  font-size:     15px;
   color:         var(--t1);
   margin-bottom: 4px;
 }
diff --git a/css/components.css b/css/components.css
index 8843bd6..02bbfe4 100644
--- a/css/components.css
+++ b/css/components.css
@@ -3,13 +3,13 @@
   background:    var(--bgcard);
   border:        1px solid var(--border);
   border-radius: var(--rl);
-  padding:       18px;
+  padding:       22px;
 }
 .card + .card { margin-top: 16px; }
 
 .card-title {
   font-family:    var(--font-d);
-  font-size:      12px;
+  font-size:      14px;
   color:          var(--gold);
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -22,7 +22,7 @@
   content:       '';
   display:       block;
   width:         3px;
-  height:        13px;
+  height:        15px;
   background:    var(--gold);
   border-radius: 2px;
   flex-shrink:   0;
@@ -35,8 +35,8 @@ input, select, textarea {
   border-radius: var(--r);
   color:         var(--t1);
   font-family:   var(--font-b);
-  font-size:     13px;
-  padding:       7px 11px;
+  font-size:     15px;
+  padding:       8px 13px;
   outline:       none;
   transition:    border-color 0.15s;
   width:         100%;
@@ -50,12 +50,12 @@ select option { background: var(--bg2); }
   display:     inline-flex;
   align-items: center;
   gap:         6px;
-  padding:     7px 16px;
+  padding:     8px 18px;
   border-radius: var(--r);
   border:      1px solid var(--borderem);
   background:  var(--bg2);
   color:       var(--t1);
-  font-size:   13px;
+  font-size:   15px;
   font-family: var(--font-b);
   cursor:      pointer;
   transition:  all 0.15s;
@@ -78,7 +78,7 @@ select option { background: var(--bg2); }
 }
 .btn-red:hover { background: var(--redbg); }
 
-.btn-sm { padding: 4px 11px; font-size: 12px; }
+.btn-sm { padding: 5px 13px; font-size: 13px; }
 
 /* ── Stats row ──────────────────────────────────────────────────────────────── */
 .stats-row {
@@ -96,20 +96,20 @@ select option { background: var(--bg2); }
   padding:       12px 14px;
 }
 .stat-label {
-  font-size:      11px;
+  font-size:      13px;
   color:          var(--t2);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom:  5px;
 }
-.stat-value { font-size: 20px; font-weight: 600; }
-.stat-sub   { font-size: 11px; color: var(--t3); margin-top: 2px; }
+.stat-value { font-size: 24px; font-weight: 600; }
+.stat-sub   { font-size: 13px; color: var(--t3); margin-top: 2px; }
 
 /* ── Badges ─────────────────────────────────────────────────────────────────── */
 .badge {
-  padding:       1px 7px;
+  padding:       2px 8px;
   border-radius: 2px;
-  font-size:     11px;
+  font-size:     12px;
   font-weight:   500;
   border:        1px solid transparent;
 }
@@ -145,8 +145,8 @@ select option { background: var(--bg2); }
   border-radius: var(--r);
   padding:       10px 12px;
 }
-.dmg-box-label { font-size: 11px; color: var(--t2); margin-bottom: 3px; }
-.dmg-box-val   { font-size: 16px; font-weight: 600; }
+.dmg-box-label { font-size: 13px; color: var(--t2); margin-bottom: 3px; }
+.dmg-box-val   { font-size: 18px; font-weight: 600; }
 
 /* ── Mitigation picker ──────────────────────────────────────────────────────── */
 .mitig-picker {
@@ -170,8 +170,8 @@ select option { background: var(--bg2); }
 .mitig-opt:hover      { border-color: var(--borderem); }
 .mitig-opt.sel        { border-color: var(--gold); background: var(--goldbg); }
 .mitig-opt.active-log { opacity: 0.5; cursor: default; }
-.mitig-opt .opt-name  { font-size: 12px; flex: 1; }
-.mitig-opt .opt-dr    { font-size: 11px; color: var(--t2); }
+.mitig-opt .opt-name  { font-size: 13px; flex: 1; }
+.mitig-opt .opt-dr    { font-size: 12px; color: var(--t2); }
 
 /* ── Event Explorer ─────────────────────────────────────────────────────────── */
 .explorer-grid {
@@ -188,7 +188,7 @@ select option { background: var(--bg2); }
 }
 
 .form-group label {
-  font-size:      11px;
+  font-size:      13px;
   color:          var(--t2);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -207,7 +207,7 @@ select option { background: var(--bg2); }
   min-height:    200px;
   white-space:   pre-wrap;
   overflow-x:    auto;
-  font-size:     13px;
+  font-size:     14px;
   line-height:   1.6;
   font-family:   'Courier New', monospace;
 }
diff --git a/css/layout.css b/css/layout.css
index 9edad3b..416ca74 100644
--- a/css/layout.css
+++ b/css/layout.css
@@ -10,8 +10,8 @@
   display:     flex;
   align-items: center;
   gap:         16px;
-  padding:     0 20px;
-  height:      52px;
+  padding:     0 24px;
+  height:      58px;
   background:  var(--bg1);
   border-bottom: 1px solid var(--border);
   position:    sticky;
@@ -22,14 +22,14 @@
 
 .logo {
   font-family:    var(--font-d);
-  font-size:      15px;
+  font-size:      17px;
   color:          var(--gold);
   letter-spacing: 0.05em;
   white-space:    nowrap;
 }
 .logo span {
   font-family: var(--font-b);
-  font-size:   11px;
+  font-size:   12px;
   color:       var(--t3);
   margin-left: 8px;
   font-weight: 400;
@@ -43,11 +43,11 @@
 }
 
 .tab {
-  padding:       5px 14px;
+  padding:       6px 16px;
   border:        none;
   background:    transparent;
   color:         var(--t2);
-  font-size:     13px;
+  font-size:     15px;
   cursor:        pointer;
   border-radius: var(--r);
   font-family:   var(--font-b);
@@ -60,10 +60,10 @@
 /* ── Main content ───────────────────────────────────────────────────────────── */
 #main {
   flex:       1;
-  padding:    20px;
-  max-width:  1360px;
+  padding:    24px;
+  max-width:  1920px;
   margin:     0 auto;
-  width:      100%;
+  width:      min(85%, calc(100% - 40px));
 }
 
 /* ── Two-column panel layout (timeline + detail) ────────────────────────────── */
@@ -94,14 +94,14 @@
   min-width:      120px;
 }
 .fg label {
-  font-size: 11px;
+  font-size: 13px;
   color:     var(--t2);
 }
 
 /* ── Topbar user badge ───────────────────────────────────────────────────────── */
 .topbar-user {
   margin-left: auto;
-  font-size:   12px;
+  font-size:   13px;
   color:       var(--t2);
   white-space: nowrap;
 }