:root {
  /* Dark face */
  --color-base:           #0F172A;
  --color-surface:        #1E293B;
  --color-surface-raised: #334155;
  --color-border:         #475569;
  --color-text-muted:     #94A3B8;
  --color-text-primary:   #F8FAFC;

  /* Light face (client portal) */
  --color-portal-bg:      #FFFFFF;
  --color-portal-surface: #F8FAFC;
  --color-portal-border:  #E2E8F0;
  --color-portal-muted:   #64748B;
  --color-portal-text:    #0F172A;

  /* Accent */
  --color-accent:         #16C97D;
  --color-accent-dim:     #16C97D1A;
  --color-accent-border:  #16C97D4D;
  --color-accent-light:   #0F6E56;
  --color-accent-bg:      #E1F5EE;

  /* Semantic */
  --color-paid-bg:        #EAF3DE;
  --color-paid-text:      #3B6D11;
  --color-paid-border:    #C0DD97;

  --color-pending-bg:     #FAEEDA;
  --color-pending-text:   #854F0B;
  --color-pending-border: #FAC775;

  --color-review-bg:      #E6F1FB;
  --color-review-text:    #185FA5;
  --color-review-border:  #85B7EB;

  --color-draft-bg:       #F1EFE8;
  --color-draft-text:     #5F5E5A;
  --color-draft-border:   #D3D1C7;

  --color-locked-bg:      #FCEBEB;
  --color-locked-text:    #A32D2D;
  --color-locked-border:  #F09595;
}

/* Custom Global Utility Styles for Handoff Workspace Setup */
body {
    background-color: var(--color-base);
    color: var(--color-text-primary);
    font-family: 'Syne', sans-serif;
}

.font-satoshi {
    font-family: 'Satoshi', sans-serif;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

.hairline-border {
    border: 0.5px solid var(--color-border);
}

.hairline-border-b {
    border-bottom: 0.5px solid var(--color-border);
}

.hairline-border-t {
    border-top: 0.5px solid var(--color-border);
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-base);
}

.btn-primary:hover {
    filter: brightness(1.1);
}

.bg-level-0 {
    background-color: var(--color-base);
}

.bg-level-1 {
    background-color: var(--color-surface);
}

.bg-level-2 {
    background-color: var(--color-surface-raised);
}

/* Accordion Component Fixes */
details summary::-webkit-details-marker {
    display: none;
}

details[open] summary span.material-symbols-outlined {
    transform: rotate(180deg);
}

select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23859488'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ─── NEW INTERACTIVE DEMO ─── */
.demo-root{width:88%;max-width:840px;margin:32px auto;background:#1E293B;border-radius:12px;padding:12px;border:0.5px solid #475569;box-shadow:0 20px 40px -12px rgba(0,0,0,0.5);overflow:hidden;}
.top-nav{display:flex;justify-content:center;gap:32px;margin-bottom:12px;border-bottom:1px solid #334155;padding-bottom:12px;}
.top-nav span{color:#94A3B8;font-size:13px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px;}
.top-nav span:hover{color:#F8FAFC;}
.top-nav span.active{color:#16C97D;font-weight:500;}
.layout{display:flex;background:#0F172A;border-radius:10px;height:520px;border:0.5px solid #475569;overflow:hidden;}
.sidebar{width:180px;background:#1E293B;border-right:0.5px solid #334155;padding:14px;display:flex;flex-direction:column;gap:4px;}
.user-box{display:flex;align-items:center;gap:10px;padding:8px;border-bottom:1px solid #334155;margin-bottom:12px;padding-bottom:12px;}
.avatar{width:28px;height:28px;background:#16C97D;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#0F172A;font-weight:700;font-size:11px;}
.uname{font-size:12px;color:#F8FAFC;font-weight:500;}
.nav-lbl{font-size:10px;color:#475569;text-transform:uppercase;letter-spacing:1px;margin:12px 0 6px 4px;}
.tab{display:flex;align-items:center;gap:10px;padding:8px 12px;color:#94A3B8;font-size:12px;cursor:pointer;border-radius:6px;transition:all .15s;}
.tab:hover{background:rgba(255,255,255,.05);color:#F8FAFC;}
.tab.active{background:#334155;color:#16C97D;}
.tab i{font-size:15px;}
.main-view{flex:1;padding:24px;position:relative;overflow-y:auto;}
.screen{display:none;}
.screen.active{display:block;animation:fadeIn .3s ease-out;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.sct{font-size:18px;font-weight:600;color:#F8FAFC;margin-bottom:20px;}
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;}
.kpi-box{background:#1E293B;padding:16px;border-radius:8px;border:0.5px solid #334155;}
.kpi-h{font-size:11px;color:#94A3B8;margin-bottom:4px;}
.kpi-v{font-size:20px;font-weight:600;color:#F8FAFC;}
.proj-box{background:#1E293B;padding:12px 14px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-bottom:16px;border:0.5px solid #334155;font-size:13px;color:#F8FAFC;}
.sb-lbl{font-size:11px;color:#94A3B8;margin:20px 0 8px;}
.dz{border:1px dashed #475569;border-radius:8px;padding:24px;text-align:center;color:#94A3B8;background:rgba(255,255,255,.02);margin-bottom:12px;}
.dz i{font-size:24px;margin-bottom:8px;display:block;}
.dz p{font-size:12px;margin-bottom:4px;}
.dz span{font-size:10px;opacity:.6;}
.f-item{display:flex;align-items:center;gap:12px;padding:10px;background:#1E293B;border-radius:8px;margin-bottom:6px;border:0.5px solid #334155;}
.f-info{flex:1;font-size:12px;color:#F8FAFC;}
.f-meta{font-size:10px;color:#94A3B8;margin-top:2px;font-family:'JetBrains Mono',monospace;}
.pill{padding:3px 8px;border-radius:4px;font-size:9px;font-weight:600;text-transform:uppercase;}
.p-paid{background:#E1F5EE;color:#0F6E56;}
.p-rev{background:#E0E7FF;color:#4338CA;}
.p-lock{background:#FEE2E2;color:#991B1B;display:flex;align-items:center;gap:4px;}
.link-box{background:#1E293B;padding:16px;border-radius:8px;margin-top:24px;border:1px solid #16C97D33;display:flex;align-items:center;}
.copy-btn{background:#16C97D;color:#0F172A;padding:8px 16px;border-radius:6px;font-size:12px;font-weight:600;border:none;cursor:pointer;display:flex;align-items:center;gap:6px;}
.inv-card{background:#F8FAFC;border-radius:8px;padding:32px;color:#0F172A;}
.inv-h{display:flex;justify-content:space-between;border-bottom:1px solid #E2E8F0;padding-bottom:20px;margin-bottom:20px;}
.biz-name{font-weight:700;font-size:16px;}
.biz-meta{font-size:12px;color:#64748B;}
.inv-badge{background:#F1F5F9;padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;}
.b-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;}
.b-lbl{font-size:10px;text-transform:uppercase;color:#64748B;margin-bottom:4px;letter-spacing:1px;}
.b-val{font-weight:600;font-size:13px;}
.i-line{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #F1F5F9;font-size:13px;}
.i-total{display:flex;justify-content:space-between;padding-top:16px;font-weight:700;font-size:16px;color:#16C97D;}
.al-line{display:flex;justify-content:space-between;padding:10px 0;border-bottom:0.5px solid #334155;font-size:12px;}
.al-line span:first-child{color:#94A3B8;font-family:'JetBrains Mono',monospace;}
.al-line span:last-child{color:#F8FAFC;}
.notice{background:rgba(22,201,125,.05);color:#16C97D;padding:12px;border-radius:6px;font-size:11px;margin-top:20px;text-align:center;}
.fg{margin-bottom:16px;}
.fg label{display:block;font-size:11px;color:#94A3B8;margin-bottom:6px;}
.fg input{width:100%;background:#1E293B;border:0.5px solid #475569;border-radius:6px;padding:10px;color:#F8FAFC;font-size:13px;font-family:inherit;}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.btn-row{display:flex;justify-content:flex-end;gap:12px;margin-top:24px;}
.bc{background:transparent;border:0.5px solid #475569;color:#94A3B8;padding:10px 20px;border-radius:6px;font-size:13px;cursor:pointer;}
.bp{background:#16C97D;color:#0F172A;padding:10px 20px;border-radius:6px;font-size:13px;font-weight:600;border:none;cursor:pointer;}
/* Storage widget */
.stor{background:#1E293B;padding:12px;border-radius:8px;margin-top:auto;border:0.5px solid #334155;}
.stor-t{height:4px;background:#334155;border-radius:2px;margin:8px 0;overflow:hidden;}
.stor-f{height:100%;background:#16C97D;}
.pr-ic{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;}

.inv-word {
    font-size: 13px;
    font-weight: 500;
    color: #F8FAFC;
    text-align: right;
    letter-spacing: .06em;
}

.inv-body {
    padding: 14px 16px;
    background: #0F172A;
}

.inv-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 0.5px solid #334155;
}

.inv-pl {
    font-size: 10px;
    color: #94A3B8;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.inv-pv {
    font-size: 11px;
    color: #F8FAFC;
    line-height: 1.6;
}

.inv-li-h {
    display: grid;
    grid-template-columns: 1fr 40px 70px;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 0.5px solid #334155;
    font-size: 10px;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.inv-li {
    display: grid;
    grid-template-columns: 1fr 40px 70px;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 0.5px solid #334155;
    font-size: 11px;
    color: #F8FAFC;
    align-items: start;
}

.inv-li-d {
    color: #94A3B8;
    font-size: 10px;
    margin-top: 2px;
}

.inv-tr {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    padding: 4px 0;
    color: #94A3B8;
}

.inv-tr.grand {
    font-size: 13px;
    font-weight: 500;
    color: #F8FAFC;
    padding-top: 8px;
    border-top: 0.5px solid #334155;
    margin-top: 4px;
}

.inv-legal {
    margin: 10px 16px 14px;
    background: #1E293B;
    border-radius: 8px;
    padding: 10px 12px;
    border-left: 2px solid #334155;
}

.inv-legal p {
    font-size: 10px;
    color: #94A3B8;
    line-height: 1.6;
    margin-bottom: 3px;
}

.inv-legal p:last-child {
    margin-bottom: 0;
}

/* Audit */
.at {
    width: 100%;
    border-collapse: collapse;
}

.at th {
    padding: 5px 7px;
    text-align: left;
    font-size: 9px;
    color: #475569;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 0.5px solid #334155;
    font-weight: 500;
    font-family: 'Syne', sans-serif;
}

.at td {
    padding: 6px 7px;
    border-bottom: 0.5px solid #1E293B;
    vertical-align: top;
}

.at tr:last-child td {
    border-bottom: none;
}

.at tr:hover td {
    background: #1E293B;
}

.aev {
    font-size: 11px;
    font-weight: 500;
    color: #F8FAFC;
}

.adt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #94A3B8;
    margin-top: 2px;
}

.atm {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #475569;
    white-space: nowrap;
}

.ei {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.ex-wrap {
    position: relative;
    display: inline-block;
}

.ex-dd {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #1E293B;
    border: 0.5px solid #475569;
    border-radius: 8px;
    overflow: hidden;
    z-index: 50;
    min-width: 190px;
    display: none;
}

.ex-dd.open {
    display: block;
}

.ex-opt {
    padding: 8px 12px;
    font-size: 11px;
    color: #F8FAFC;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 0.5px solid #334155;
    transition: background .1s;
    font-family: 'Syne', sans-serif;
}

.ex-opt:last-child {
    border-bottom: none;
}

.ex-opt:hover {
    background: #334155;
}

.ex-opt-d {
    font-size: 10px;
    color: #94A3B8;
    margin-top: 1px;
}

.notice {
    background: #1E293B;
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 11px;
    color: #94A3B8;
    display: flex;
    gap: 7px;
    align-items: flex-start;
    line-height: 1.5;
    margin-top: 10px;
}

.notice .ti {
    color: #16C97D;
    font-size: 13px;
    flex-shrink: 0;
    padding-top: 1px;
}

.sec-lbl {
    font-size: 10px;
    font-weight: 500;
    color: #475569;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 6px;
    margin-top: 12px;
}

.sec-lbl:first-child {
    margin-top: 0;
}

/* ─── Callout ────────────────────────────────────── */
.hd-callout {
    position: fixed;
    background: #1E293B;
    border: 0.5px solid #475569;
    border-radius: 10px;
    padding: 11px 14px;
    max-width: 220px;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

.hd-callout.vis {
    opacity: 1;
}

.hd-ctag {
    display: inline-block;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(22, 201, 125, .15);
    color: #16C97D;
    font-weight: 500;
    margin-bottom: 5px;
    font-family: 'Syne', sans-serif;
}

.hd-ct {
    font-size: 11px;
    font-weight: 500;
    color: #F8FAFC;
    margin-bottom: 4px;
    font-family: 'Syne', sans-serif;
}

.hd-cb {
    font-size: 10px;
    color: #94A3B8;
    line-height: 1.55;
    font-family: 'Syne', sans-serif;
}

.hs {
    cursor: pointer;
}

.hr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #334155;
    color: #94A3B8;
    font-size: 8px;
    font-weight: 500;
    margin-left: 3px;
    vertical-align: middle;
    flex-shrink: 0;
    transition: background .1s;
}

.hs:hover .hr {
    background: #16C97D;
    color: #0F172A;
}

/* ─── Client portal ──────────────────────────────── */
.vt {
    display: flex;
    gap: 5px;
    margin-bottom: 12px;
}

.vtb {
    padding: 4px 12px;
    border-radius: 20px;
    border: 0.5px solid #475569;
    font-size: 10px;
    cursor: pointer;
    background: transparent;
    color: #94A3B8;
    font-family: 'Syne', sans-serif;
    transition: all .1s;
}

.vtb.active {
    background: #1E293B;
    color: #F8FAFC;
    font-weight: 500;
    border-color: #334155;
}

.portal-wrap {
    padding: 4px;
}

.portal-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 0.5px solid #e2e8f0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
}

.ph {
    background: #0F172A;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #16C97D;
}

.ph-l {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ph-av {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #16C97D;
    color: #0F172A;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
}

.ph-biz {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    font-family: 'Syne', sans-serif;
}

.ph-tag {
    font-size: 10px;
    color: rgba(255, 255, 255, .4);
    margin-top: 1px;
    font-family: 'Syne', sans-serif;
}

.ph-r {
    text-align: right;
}

.ph-amt {
    font-family: 'Satoshi', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.ph-albl {
    font-size: 10px;
    color: rgba(255, 255, 255, .4);
    font-family: 'Syne', sans-serif;
}

.pb-body {
    padding: 16px 18px;
    background: #fff;
}

.pb-title {
    font-size: 14px;
    font-weight: 500;
    color: #0F172A;
    margin-bottom: 2px;
    font-family: 'Syne', sans-serif;
}

.pb-sub {
    font-size: 11px;
    color: #64748B;
    margin-bottom: 14px;
    font-family: 'Syne', sans-serif;
}

.prev-lbl {
    font-size: 10px;
    font-weight: 500;
    color: #94A3B8;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 7px;
    font-family: 'Syne', sans-serif;
}

.prev-box {
    border: 0.5px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.prev-vid {
    background: #1a1a2e;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    position: relative;
    cursor: pointer;
}

.prev-vid .ti-player-play {
    font-size: 28px;
    color: rgba(255, 255, 255, .55);
}

.prev-vid-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, .35);
}

.prev-q {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 9px;
    background: rgba(0, 0, 0, .5);
    color: rgba(255, 255, 255, .6);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Syne', sans-serif;
}

.sec-div {
    height: 0.5px;
    background: #e2e8f0;
    margin: 12px 0;
}

.lf-section-lbl {
    font-size: 10px;
    font-weight: 500;
    color: #94A3B8;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 7px;
    font-family: 'Syne', sans-serif;
}

.lf-note {
    font-size: 10px;
    color: #CBD5E1;
    margin-left: 4px;
    text-transform: none;
    letter-spacing: 0;
}

.lf-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 0.5px dashed #CBD5E1;
    border-radius: 8px;
    background: #F8FAFC;
    margin-bottom: 5px;
    opacity: .55;
}

.lf-ic {
    font-size: 15px;
    color: #aaa;
}

.lf-info {
    flex: 1;
    min-width: 0;
}

.lf-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lf-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.lf-type {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    background: #e0e0e0;
    color: #666;
    font-weight: 500;
    font-family: 'Syne', sans-serif;
}

.lf-size {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #aaa;
}

.an-field {
    width: 100%;
    padding: 7px 10px;
    border: 0.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 11px;
    color: #333;
    background: #fafafa;
    margin-bottom: 10px;
    resize: none;
    height: 44px;
    font-family: 'Syne', sans-serif;
}

.an-field::placeholder {
    color: #CBD5E1;
}

.pay-btn {
    width: 100%;
    padding: 11px;
    background: #16C97D;
    color: #0F172A;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 7px;
    font-family: 'Syne', sans-serif;
    transition: background .15s;
}

.pay-btn:hover {
    background: #13B36E;
}

.stripe-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 10px;
    color: #94A3B8;
    margin-bottom: 10px;
    font-family: 'Syne', sans-serif;
}

.trust-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.ti-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 4px;
    background: #F8FAFC;
    border: 0.5px solid #E2E8F0;
    border-radius: 7px;
    text-align: center;
}

.ti-cell .ti {
    font-size: 14px;
    color: #94A3B8;
}

.ti-cell span {
    font-size: 9px;
    color: #94A3B8;
    line-height: 1.3;
    font-family: 'Syne', sans-serif;
}

.ul-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: #EAF3DE;
    border-radius: 8px;
    margin-bottom: 12px;
}

.ul-banner .ti {
    color: #3B6D11;
    font-size: 16px;
}

.ul-t {
    font-size: 12px;
    font-weight: 500;
    color: #3B6D11;
    font-family: 'Syne', sans-serif;
}

.ul-s {
    font-size: 10px;
    color: #5A8A30;
    margin-top: 1px;
    font-family: 'JetBrains Mono', monospace;
}

.dl-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 0.5px solid #e8e8e8;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 5px;
}

.dl-ic {
    font-size: 15px;
    color: #888;
}

.dl-inf {
    flex: 1;
    min-width: 0;
}

.dl-nm {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dl-mt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #aaa;
    margin-top: 2px;
}

.dl-btn {
    padding: 5px 12px;
    background: #16C97D;
    color: #0F172A;
    border: none;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Syne', sans-serif;
}

.rcpt-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #16C97D;
    cursor: pointer;
    padding: 6px 0;
    font-family: 'Syne', sans-serif;
}

.after-notice {
    background: #fafafa;
    border: 0.5px solid #e8e8e8;
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 10px;
    color: #94A3B8;
    line-height: 1.6;
    font-family: 'Syne', sans-serif;
    margin-top: 8px;
}