.ticket-page{max-width:1120px;margin:0 auto;padding:3.2rem 1.5rem 5rem}
.ticket-hero{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2rem;padding:2rem 2.1rem;border:1px solid var(--border);border-radius:20px;background:linear-gradient(135deg,var(--surface),var(--surface2));overflow:hidden;box-shadow:var(--shadow-sm)}
.ticket-hero:after{content:"";position:absolute;width:260px;height:260px;right:-120px;top:-150px;border:1px solid var(--border);border-radius:50%;box-shadow:0 0 0 35px var(--primary-soft),0 0 0 70px rgba(124,92,255,.035)}
.eyebrow{display:inline-flex;padding:.32rem .68rem;border-radius:100px;background:var(--primary-soft);color:var(--primary-h);font-size:.67rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.7rem}
.ticket-hero h1{font-size:clamp(2rem,5vw,2.7rem);line-height:1.1;margin-bottom:.55rem;letter-spacing:-.03em}
.ticket-hero p{max-width:680px;color:var(--muted);font-size:.9rem;margin:0}
.ticket-hero-mark{position:relative;z-index:1;width:72px;height:72px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:var(--primary-soft);color:var(--primary-h);font-family:var(--mono);font-size:2rem;font-weight:700;border:1px solid var(--border);flex:0 0 auto}
.ticket-toolbar{border-bottom:1px solid var(--border);margin-bottom:1.2rem;overflow:auto}
.ticket-tabs{display:flex;gap:.15rem;min-width:max-content}
.ticket-tab{appearance:none;border:0;background:none;color:var(--muted);font:600 .8rem var(--font);padding:.8rem .85rem;cursor:pointer;position:relative;white-space:nowrap}
.ticket-tab:hover{color:var(--text)}
.ticket-tab:after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:-1px;height:2px;background:transparent;border-radius:2px}
.ticket-tab.is-active{color:var(--primary-h)}
.ticket-tab.is-active:after{background:var(--primary)}
.ticket-tab span{display:inline-flex;min-width:1.25rem;height:1.25rem;align-items:center;justify-content:center;margin-left:.3rem;padding:0 .3rem;border-radius:100px;background:var(--surface3);font-size:.64rem}
.ticket-tab.is-active span{background:var(--primary-soft);color:var(--primary-h)}
.ticket-panel{border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
.ticket-panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.3rem;border-bottom:1px solid var(--border)}
.ticket-panel-head h2{font-size:1.05rem;margin:0}.ticket-panel-head p{font-size:.74rem;color:var(--muted);margin:.2rem 0 0}
.ticket-legend{display:flex;gap:.8rem;color:var(--muted);font-size:.67rem}.ticket-legend span{display:flex;align-items:center;gap:.3rem}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--muted)}.legend-dot.open{background:var(--primary)}.legend-dot.progress{background:var(--warning)}.legend-dot.waiting{background:var(--warning)}
.ticket-list{display:flex;flex-direction:column}
.ticket-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1.1rem 1.3rem;border-bottom:1px solid var(--border);transition:background .16s}.ticket-row:last-child{border-bottom:0}.ticket-row:hover{background:var(--surface2)}
.ticket-main{min-width:0}.ticket-title-line{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}.ticket-title-line strong{font-size:.88rem;font-weight:700}.ticket-meta{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;margin-top:.38rem;color:var(--muted);font-size:.69rem}
.ticket-status{display:inline-flex;align-items:center;font-size:.61rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:.25rem .55rem;border-radius:100px;background:var(--surface3)}.ticket-status.open{color:var(--primary-h);background:var(--primary-soft)}.ticket-status.in-progress{color:var(--warning);background:var(--warning-soft)}.ticket-status.waiting{color:var(--warning);background:var(--warning-soft)}.ticket-status.resolved{color:var(--success);background:var(--success-soft)}.ticket-status.closed{color:var(--muted);background:var(--surface3)}
.ticket-view{white-space:nowrap}.ticket-empty{padding:4.2rem 1.5rem;text-align:center;color:var(--muted)}.ticket-empty .empty-icon{width:48px;height:48px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--surface2);border:1px solid var(--border);font:700 1.1rem var(--mono);color:var(--muted)}.ticket-empty h3{color:var(--text);font-size:1rem;margin-bottom:.35rem}.ticket-empty p{font-size:.78rem;max-width:540px;margin:0 auto;line-height:1.6}
@media(max-width:700px){.ticket-page{padding:2rem 1rem 4rem}.ticket-hero{padding:1.4rem;align-items:flex-start}.ticket-hero-mark{display:none}.ticket-panel-head{align-items:flex-start;flex-direction:column}.ticket-legend{display:none}.ticket-row{grid-template-columns:1fr}.ticket-view{width:100%}}

.ticket-modal-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,.45);backdrop-filter:blur(4px)}
.ticket-modal{position:relative;width:min(680px,100%);max-height:min(760px,90vh);overflow:auto;padding:1.6rem;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-lg)}
.ticket-modal-close{position:absolute;top:.8rem;right:.8rem;width:34px;height:34px;border:1px solid var(--border);border-radius:50%;background:var(--surface2);color:var(--text);font-size:1.3rem;cursor:pointer}
.ticket-modal-top{display:flex;align-items:center;gap:.7rem;color:var(--muted);font-size:.7rem;margin-bottom:1rem}.ticket-modal h2{font-size:1.35rem;line-height:1.3;margin:0 2.5rem .35rem 0}.ticket-modal-date{color:var(--muted);font-size:.72rem;margin:0 0 1.2rem}.ticket-message{padding:1rem;border:1px solid var(--border);border-radius:12px;background:var(--surface2);font-size:.82rem;line-height:1.7;white-space:pre-wrap}.ticket-modal-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem}.btn-danger{background:var(--danger,#d9534f);color:#fff;border-color:transparent}
@media(max-width:600px){.ticket-modal{padding:1.25rem}.ticket-modal-actions{flex-direction:column-reverse}.ticket-modal-actions .btn{width:100%}}

.ticket-page{max-width:1100px;margin:0 auto;padding:3.2rem 1.5rem 5rem}
.ticket-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;padding:1.8rem 0 2rem}
.ticket-hero-copy{max-width:700px}.ticket-hero h1{font-size:clamp(2.1rem,5vw,3.25rem);margin:.35rem 0 .7rem}.ticket-hero p{max-width:650px;color:var(--muted);font-size:.98rem}.ticket-open{flex-shrink:0}
.ticket-toolbar{border:1px solid var(--border);background:rgba(17,24,39,.72);border-radius:var(--r);padding:.45rem;overflow:auto}
.ticket-tabs{display:flex;gap:.25rem;min-width:max-content}.ticket-tab{border:0;background:transparent;color:var(--muted);padding:.65rem .8rem;border-radius:9px;font:600 .75rem var(--font);cursor:pointer;white-space:nowrap}.ticket-tab:hover{background:var(--surface2);color:var(--text)}.ticket-tab.is-active{background:var(--primary-soft);color:var(--primary-h)}.ticket-tab span{display:inline-flex;min-width:1.35rem;justify-content:center;margin-left:.25rem;padding:.1rem .28rem;border-radius:100px;background:var(--surface3);font-size:.64rem;color:var(--text2)}
.ticket-panel{margin-top:1rem;border:1px solid var(--border);border-radius:var(--r);background:rgba(17,24,39,.76);overflow:hidden;box-shadow:var(--shadow)}
.ticket-panel-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 1.3rem;border-bottom:1px solid var(--border);background:rgba(255,255,255,.015)}
.ticket-panel-head h2{font-size:1.05rem}.ticket-panel-head p{font-size:.74rem;color:var(--muted);margin:.2rem 0 0}
.ticket-legend{display:flex;gap:.8rem;color:var(--muted);font-size:.67rem}.ticket-legend span{display:flex;align-items:center;gap:.3rem}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--muted)}.legend-dot.open{background:var(--primary)}.legend-dot.progress,.legend-dot.waiting{background:var(--warning)}
.ticket-list{display:flex;flex-direction:column}.ticket-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1.1rem 1.3rem;border-bottom:1px solid var(--border);transition:background .16s}.ticket-row:last-child{border-bottom:0}.ticket-row:hover{background:var(--surface2)}.ticket-main{min-width:0}.ticket-title-line{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}.ticket-title-line strong{font-size:.88rem;font-weight:700}.ticket-meta{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;margin-top:.38rem;color:var(--muted);font-size:.69rem}.ticket-view{white-space:nowrap}
.ticket-status{display:inline-flex;align-items:center;font-size:.61rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:.25rem .55rem;border-radius:100px;background:var(--surface3)}.ticket-status.open{color:var(--primary-h);background:var(--primary-soft)}.ticket-status.in-progress,.ticket-status.waiting{color:var(--warning);background:var(--warning-soft)}.ticket-status.resolved{color:var(--success);background:var(--success-soft)}.ticket-status.closed{color:var(--muted);background:var(--surface3)}
.ticket-empty{padding:4.5rem 1.5rem;text-align:center;color:var(--muted)}.ticket-empty .empty-icon{width:52px;height:52px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;border-radius:15px;background:var(--surface2);border:1px solid var(--border);font:700 1.1rem var(--mono);color:var(--muted)}.ticket-empty h3{color:var(--text);font-size:1rem;margin-bottom:.35rem}.ticket-empty p{font-size:.78rem;max-width:540px;margin:0 auto;line-height:1.6}
.ticket-modal-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,.58);backdrop-filter:blur(7px)}.ticket-modal{position:relative;width:min(680px,100%);max-height:min(760px,92vh);overflow:auto;padding:1.7rem;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:0 24px 80px rgba(0,0,0,.5)}.ticket-modal-close{position:absolute;top:.9rem;right:.9rem;width:36px;height:36px;border:1px solid var(--border);border-radius:50%;background:var(--surface2);color:var(--text);font-size:1.3rem;cursor:pointer}.ticket-modal-close:hover{background:var(--surface3)}.ticket-modal-top{display:flex;align-items:center;gap:.7rem;color:var(--muted);font-size:.7rem;margin-bottom:1rem}.ticket-modal h2{font-size:1.45rem;line-height:1.3;margin:0 2.5rem .4rem}.ticket-modal-date{color:var(--muted);font-size:.72rem;margin:0 0 1.2rem}.ticket-message{padding:1rem;border:1px solid var(--border);border-radius:12px;background:var(--surface2);font-size:.82rem;line-height:1.7;white-space:pre-wrap}.ticket-modal-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem}.btn-danger{background:var(--danger);color:#fff;border-color:transparent}.ticket-create .eyebrow{display:inline-block;margin-bottom:.45rem}.ticket-create h2{margin-right:2.5rem}.ticket-create-intro{color:var(--muted);font-size:.82rem;margin:-.15rem 0 1.35rem;max-width:560px}.ticket-create form{display:grid;gap:1rem}.ticket-create label{display:grid;gap:.45rem;color:var(--text2);font-size:.75rem;font-weight:700}.ticket-create input,.ticket-create textarea{width:100%;padding:.78rem .9rem;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text);font:400 .85rem var(--font);outline:none;resize:vertical}.ticket-create input:focus,.ticket-create textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.ticket-create-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.25rem}
@media(max-width:700px){.ticket-page{padding:2rem 1rem 4rem}.ticket-hero{align-items:stretch;flex-direction:column;padding-top:1rem}.ticket-open{width:100%}.ticket-legend{display:none}.ticket-panel-head{align-items:flex-start;flex-direction:column}.ticket-row{grid-template-columns:1fr}.ticket-view{width:100%}}
@media(max-width:600px){.ticket-modal{padding:1.3rem}.ticket-modal-actions,.ticket-create-actions{flex-direction:column-reverse}.ticket-modal-actions .btn,.ticket-create-actions .btn{width:100%}}

/* v8 ticket reflow */
.ticket-page,.ticket-panel,.ticket-main,.ticket-modal{min-width:0}
@media(max-width:760px){
  .ticket-page{padding-left:.8rem;padding-right:.8rem}
  .ticket-hero{padding:1.15rem;border-radius:14px}
  .ticket-hero h1{font-size:clamp(1.75rem,9vw,2.4rem)}
  .ticket-toolbar{overflow-x:auto}
  .ticket-panel-head{padding:1rem}
  .ticket-row{padding:1rem;gap:.75rem}
  .ticket-view{width:100%;display:flex;justify-content:center}
}
@media(max-width:420px){
  .ticket-page{padding-left:.65rem;padding-right:.65rem}
  .ticket-tab{padding:.55rem .65rem}
  .ticket-panel-head h2{font-size:.95rem}
  .ticket-modal{padding:1rem;border-radius:14px}
  .ticket-modal h2{font-size:1.2rem}
  .ticket-modal-top{padding-right:2rem}
}

/* Final ticket typography containment: long headings/descriptions must reflow inside the page shell. */
.ticket-hero,
.ticket-hero-copy,
.ticket-hero-copy h1,
.ticket-hero-copy p {
  min-width: 0;
  max-width: 100%;
}
.ticket-hero-copy h1,
.ticket-hero-copy p {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
.ticket-hero-copy {
  flex: 1 1 auto;
}
@media (max-width: 760px) {
  .ticket-hero-copy h1 { font-size: clamp(1.65rem, 8vw, 2.4rem); }
  .ticket-hero-copy p { font-size: .88rem; line-height: 1.55; }
}


/* Keep the ticket hero copy comfortably inset from the hero border. */
.ticket-hero-copy{padding-inline:.7rem;box-sizing:border-box;}

/* Keep the ticket hero copy inside its flex column at every viewport width. */
.ticket-hero{box-sizing:border-box;width:100%;min-width:0;}
.ticket-hero-copy{box-sizing:border-box;min-width:0;max-width:100%;flex:1 1 auto;overflow-wrap:anywhere;}
.ticket-hero-copy h1,.ticket-hero-copy p{box-sizing:border-box;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:normal;}
.ticket-hero-copy p{line-height:1.55;}
.ticket-open{box-sizing:border-box;max-width:100%;min-width:0;}
@media(max-width:700px){.ticket-hero-copy{width:100%;}.ticket-hero-copy h1{font-size:clamp(1.75rem,9vw,2.4rem);}.ticket-hero-copy p{width:100%;}}


/* Ticket action belongs inside the ticket section, with comfortable inset spacing. */
.ticket-panel-head {
  align-items: center;
  gap: 1.25rem;
}
.ticket-panel-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.ticket-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .8rem;
  flex: 0 0 auto;
  padding-left: .25rem;
}
.ticket-panel-actions .ticket-open {
  flex: 0 0 auto;
  min-width: 138px;
}
@media(max-width:760px){
  .ticket-panel-head { align-items: flex-start; }
  .ticket-panel-actions { width: 100%; justify-content: space-between; padding-left: 0; }
  .ticket-panel-actions .ticket-open { min-width: 0; }
}
@media(max-width:600px){
  .ticket-panel-actions { align-items: stretch; flex-direction: column; }
  .ticket-panel-actions .ticket-legend { display: none; }
  .ticket-panel-actions .ticket-open { width: 100%; }
}