@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap');
:root { --ink:#171b21; --muted:#6d7682; --line:#e2e5e8; --surface:#fff; --canvas:#f3f4f5; --nav:#101318; --coral:#e56f4e; --coral-dark:#b9462f; --coral-soft:#fff0eb; --green:#237557; --shadow:0 18px 45px rgba(18,24,32,.07); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { min-height:100%; margin:0; }
body { background:var(--canvas); color:var(--ink); font-family:"DM Sans",system-ui,sans-serif; }
button,textarea { font:inherit; }
button { cursor:pointer; }
.portal-shell { min-height:100vh; display:grid; grid-template-columns:270px minmax(0,1fr); }
.portal-sidebar { position:sticky; top:0; height:100vh; padding:28px 20px 22px; display:flex; flex-direction:column; color:#fff; background:linear-gradient(160deg,#191e25,#090b0e 74%); }
.portal-brand { display:flex; align-items:center; gap:12px; }
.portal-brand>span { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(135deg,#ef8465,#d44e35); font:700 14px "Manrope",sans-serif; }
.portal-brand strong,.portal-brand small { display:block; }
.portal-brand strong { font:700 18px "Manrope",sans-serif; }
.portal-brand small { margin-top:2px; color:#909aa7; font-size:12px; }
.secure-note { margin:25px 0 20px; padding:12px 13px; display:flex; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.09); border-radius:10px; color:#b7c0cb; font-size:12px; }
.secure-note i { width:7px; height:7px; border-radius:50%; background:#49b184; box-shadow:0 0 0 4px rgba(73,177,132,.12); }
#process-list { display:grid; gap:7px; overflow:auto; }
.process-link { width:100%; padding:11px; display:grid; grid-template-columns:35px minmax(0,1fr); gap:10px; align-items:center; border:1px solid transparent; border-radius:11px; color:#c3cad3; background:transparent; text-align:left; }
.process-link>span { width:35px; height:35px; display:grid; place-items:center; border-radius:9px; color:#e98a6f; background:rgba(229,111,78,.1); font-weight:700; }
.process-link strong,.process-link small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.process-link strong { color:inherit; font-size:13px; }
.process-link small { margin-top:3px; color:#7f8995; font-size:10px; }
.process-link:hover,.process-link.active { border-color:rgba(229,111,78,.25); color:#fff; background:rgba(255,255,255,.055); }
.viewer { margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); }
.viewer small,.viewer strong { display:block; overflow:hidden; text-overflow:ellipsis; }
.viewer small { color:#78838f; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.viewer strong { margin-top:5px; color:#aeb7c1; font-size:11px; white-space:nowrap; }
.portal-main { min-width:0; padding:0 34px 45px; }
.portal-topbar { min-height:112px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.portal-topbar p,.section-head small,.process-heading small,.process-status small,.process-meta small { margin:0; color:var(--coral-dark); font-size:10px; font-weight:800; letter-spacing:.11em; }
.portal-topbar h1 { margin:5px 0 0; font:700 clamp(23px,3vw,32px) "Manrope",sans-serif; letter-spacing:-.035em; }
.source-badge { padding:9px 12px; border:1px solid #cce3d9; border-radius:999px; color:var(--green); background:#eef8f3; font-size:11px; font-weight:700; }
.source-badge.partial,.source-badge.unknown { border-color:#f0d9a8; color:#91610f; background:#fff7e8; }
.source-badge.unavailable { border-color:#efc5be; color:#a33f2f; background:#fff1ee; }
.portal-state { min-height:55vh; display:grid; place-items:center; align-content:center; color:var(--muted); text-align:center; }
.loader { width:34px; height:34px; border:3px solid #e2e5e8; border-top-color:var(--coral); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.empty-state { max-width:420px; }
.empty-state>span { width:54px; height:54px; margin:auto; display:grid; place-items:center; border-radius:15px; color:var(--coral); background:var(--coral-soft); font-weight:800; }
.empty-state h2 { margin:18px 0 6px; font:700 22px "Manrope",sans-serif; color:var(--ink); }
.empty-state p { margin:0; line-height:1.6; }
.process-overview { padding:24px 26px; display:grid; grid-template-columns:minmax(260px,1.1fr) minmax(260px,1fr); gap:24px 34px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }
.client-profile-panel,.brand-request-panel { margin-bottom:22px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); overflow:hidden; }
.client-profile-panel .section-head>button { min-height:34px; padding:0 11px; border:1px solid #bdd5cc; border-radius:8px; color:#21584a; background:#f3f8f6; font-size:11px; font-weight:700; }
.client-profile-summary { padding:17px 22px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.client-profile-summary small,.client-profile-summary strong { display:block; }
.client-profile-summary small { color:var(--muted); font-size:10px; }
.client-profile-summary strong { margin-top:4px; overflow:hidden; color:var(--ink); font-size:12px; text-overflow:ellipsis; }
#client-profile-form { padding:0 22px 18px; display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; }
#client-profile-form[hidden] { display:none; }
#client-profile-form label span,.brand-request-panel label span { display:block; margin-bottom:6px; color:#404852; font-size:11px; font-weight:700; }
#client-profile-form input,.brand-request-panel input,.brand-request-panel textarea { width:100%; padding:10px 11px; border:1px solid #d8dde1; border-radius:9px; outline:0; background:#fff; }
#client-profile-form button,.brand-request-panel form button { min-height:39px; padding:0 14px; border:0; border-radius:9px; color:#fff; background:#173f40; font-size:11px; font-weight:700; }
.brand-request-panel { margin-top:22px; margin-bottom:0; }
.brand-request-list { padding:14px 20px 0; display:grid; gap:8px; }
.brand-request-list>article { padding:11px 12px; display:flex; justify-content:space-between; gap:14px; align-items:center; border:1px solid var(--line); border-radius:10px; background:#fafbfb; }
.brand-request-list strong,.brand-request-list span,.brand-request-list small { display:block; }
.brand-request-list span { margin-top:3px; color:#4f5964; font-size:11px; }
.brand-request-list small { margin-top:3px; color:var(--muted); font-size:9px; }
.brand-request-list b { flex:0 0 auto; padding:5px 8px; border-radius:999px; color:#815d16; background:#fff1d9; font-size:9px; }
.brand-request-list b.converted { color:#23614e; background:#e8f3ef; }
#brand-request-form { padding:18px 20px 20px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
#brand-request-form .wide { grid-column:1/-1; }
#brand-request-form .wide:last-child { display:flex; justify-content:space-between; align-items:center; gap:16px; }
#brand-request-form .wide small { color:var(--muted); font-size:10px; }
.process-heading { display:grid; grid-template-columns:54px minmax(0,1fr); gap:14px; align-items:center; }
.process-heading>span { width:54px; height:54px; display:grid; place-items:center; border-radius:15px; color:#fff; background:linear-gradient(135deg,#ef8465,#ca4932); font:700 20px "Manrope",sans-serif; }
.process-heading h2 { margin:3px 0 2px; font:700 24px "Manrope",sans-serif; letter-spacing:-.035em; }
.process-heading p { margin:0; color:var(--muted); font-size:12px; }
.process-status { padding-left:22px; display:grid; align-content:center; border-left:1px solid var(--line); }
.process-status strong { margin-top:6px; font:700 16px "Manrope",sans-serif; }
.process-status span { margin-top:5px; color:var(--muted); font-size:12px; line-height:1.45; }
.process-meta { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); padding-top:18px; }
.process-meta>div { padding:0 18px; border-right:1px solid var(--line); }
.process-meta>div:first-child { padding-left:0; }
.process-meta>div:last-child { border-right:0; }
.process-meta small,.process-meta strong { display:block; }
.process-meta small { color:var(--muted); }
.process-meta strong { margin-top:5px; font-size:13px; }
.process-time-note { margin-top:18px; padding:18px 20px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:17px; align-items:center; border:1px solid #f0d8cf; border-radius:15px; background:linear-gradient(135deg,#fff8f5,#fff 68%); box-shadow:0 12px 30px rgba(126,65,45,.05); }
.process-time-number { width:68px; height:68px; display:grid; place-content:center; border-radius:18px; color:#fff; background:linear-gradient(145deg,#ec7a5a,#c94832); font:700 24px "Manrope",sans-serif; line-height:.9; text-align:center; box-shadow:0 10px 22px rgba(201,72,50,.2); }
.process-time-number small { margin-top:6px; color:#ffe9e1; font:700 9px "DM Sans",sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.process-time-note strong { display:block; font:700 15px "Manrope",sans-serif; }
.process-time-note p { margin:6px 0 5px; color:#4f5964; font-size:13px; line-height:1.55; }
.process-time-note>div>small { display:block; color:#7a6159; font-size:12px; line-height:1.45; }
.portal-grid { margin-top:22px; display:grid; grid-template-columns:minmax(0,1.32fr) minmax(330px,.68fr); gap:22px; align-items:start; }
.portal-profile-secondary { margin-top:22px; margin-bottom:0; }
.portal-secondary-actions { margin-top:14px; display:grid; gap:9px; }
.secondary-portal-panel { border:1px solid #dfe3e6; border-radius:13px; background:#f9fafb; overflow:hidden; }
.secondary-portal-panel>summary { min-height:62px; padding:13px 17px; display:flex; justify-content:space-between; align-items:center; gap:16px; cursor:pointer; list-style:none; }
.secondary-portal-panel>summary::-webkit-details-marker { display:none; }
.secondary-portal-panel>summary>div small,.secondary-portal-panel>summary>div strong { display:block; }
.secondary-portal-panel>summary>div small { color:#8a6160; font-size:10px; font-weight:800; letter-spacing:.1em; }
.secondary-portal-panel>summary>div strong { margin-top:3px; color:#363e47; font:700 14px "Manrope",sans-serif; }
.secondary-portal-panel>summary>span { margin-left:auto; color:var(--muted); font-size:11px; }
.secondary-portal-panel>summary::after { content:"+"; width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border:1px solid #d7dcdf; border-radius:8px; color:#59636e; background:#fff; font:700 17px "Manrope",sans-serif; }
.secondary-portal-panel[open]>summary::after { content:"−"; }
.secondary-portal-panel[open]>summary { background:#fff; border-bottom:1px solid var(--line); }
.portal-secondary-actions .documents-panel,.portal-secondary-actions .brand-request-panel { margin:0; border:0; border-radius:0; box-shadow:none; }
.feed-panel,.conversation-panel { border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); overflow:hidden; }
.section-head { min-height:78px; padding:19px 22px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.section-head h2 { margin:4px 0 0; font:700 18px "Manrope",sans-serif; }
.section-head>span { color:var(--muted); font-size:11px; }
.feed { padding:6px 22px 18px; }
.feed-item { position:relative; padding:20px 0 20px 48px; display:grid; grid-template-columns:1fr; border-bottom:1px solid var(--line); }
.feed-item:last-child { border-bottom:0; }
.feed-icon { position:absolute; left:0; top:20px; width:32px; height:32px; display:grid; place-items:center; border-radius:9px; color:var(--coral-dark); background:var(--coral-soft); font-size:10px; font-weight:800; }
.feed-kicker { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.feed-kicker b { color:var(--coral-dark); font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.feed-kicker time { color:#8a929c; font-size:10px; }
.feed-item h3 { margin:8px 0 7px; font:700 16px "Manrope",sans-serif; }
.feed-item p { margin:5px 0; color:#4f5964; font-size:13px; line-height:1.55; }
.recommendation { margin-top:12px; padding:11px 13px; border-left:3px solid var(--coral); background:#fff7f4; color:#4c3b36; font-size:12px; line-height:1.5; }
.recommendation small { display:block; margin-bottom:3px; color:var(--coral-dark); font-size:9px; font-weight:800; letter-spacing:.08em; }
.acknowledgement { margin-top:12px; min-height:34px; padding:0 11px; border:1px solid #bad8cb; border-radius:8px; color:#23614e; background:#f1f8f5; font-size:10px; font-weight:700; }
.acknowledgement.confirmed { min-height:0; padding:8px 10px; display:inline-flex; align-items:center; cursor:default; }
.feed-item footer { margin-top:12px; display:flex; flex-wrap:wrap; gap:7px; }
.feed-item footer span { padding:5px 7px; border-radius:6px; color:#68717c; background:#f2f4f5; font-size:9px; font-weight:700; }
.empty-feed { padding:34px 12px; display:grid; gap:5px; color:var(--muted); text-align:center; }
.empty-feed strong { color:var(--ink); font-size:14px; }
.conversation { max-height:390px; padding:18px; overflow:auto; background:#fafafa; }
.conversation .feed-item { margin-bottom:10px; padding:0; border:0; display:flex; gap:9px; }
.conversation .feed-icon { position:static; flex:0 0 auto; width:30px; height:30px; }
.conversation .feed-item>div { padding:10px 11px; border:1px solid var(--line); border-radius:4px 12px 12px 12px; background:#fff; }
.conversation .feed-item.mine { flex-direction:row-reverse; }
.conversation .feed-item.mine>div { border-color:#f1cabc; border-radius:12px 4px 12px 12px; background:#fff5f1; }
.conversation .feed-item p { margin:5px 0 0; }
.empty-conversation { padding:24px 12px; color:var(--muted); font-size:12px; line-height:1.5; text-align:center; }
#message-form { padding:18px; border-top:1px solid var(--line); }
#message-form label { display:block; margin-bottom:7px; color:#404852; font-size:11px; font-weight:700; }
#message-form textarea { width:100%; resize:vertical; min-height:94px; padding:11px 12px; border:1px solid #d8dde1; border-radius:10px; outline:0; color:var(--ink); background:#fff; }
#message-form textarea:focus { border-color:#e79b85; box-shadow:0 0 0 3px rgba(229,111,78,.1); }
#message-form>div { margin-top:10px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
#message-form small { color:var(--muted); font-size:9px; }
#message-form button { min-height:38px; padding:0 14px; border:0; border-radius:9px; color:#fff; background:linear-gradient(135deg,#eb7b5c,#d6563d); font-size:11px; font-weight:700; }
#message-form button:disabled { opacity:.6; cursor:wait; }
.documents-panel { margin-top:22px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); overflow:hidden; }
.client-document-list { padding:14px 20px 4px; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; }
.client-document { min-width:0; padding:12px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:11px; align-items:center; border:1px solid var(--line); border-radius:11px; color:inherit; background:#fafbfb; text-decoration:none; }
.client-document>span { width:42px; height:42px; display:grid; place-items:center; border-radius:9px; color:var(--coral-dark); background:var(--coral-soft); font-size:9px; font-weight:800; }
.client-document strong,.client-document small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.client-document strong { font-size:12px; }
.client-document small { margin-top:4px; color:var(--muted); font-size:9px; }
.client-document>b { color:var(--green); font-size:10px; }
.empty-documents { grid-column:1/-1; padding:12px; color:var(--muted); font-size:12px; text-align:center; }
.client-document-form { margin:14px 20px 20px; padding:14px; border:1px dashed #cdd7d3; border-radius:11px; background:#f7faf9; }
.client-document-form>label { display:block; margin-bottom:8px; font-size:11px; font-weight:700; }
.client-document-form>div { display:flex; gap:10px; align-items:center; }
.client-document-form input { min-width:0; flex:1; padding:9px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:11px; }
.client-document-form button { min-height:38px; padding:0 14px; border:0; border-radius:9px; color:#fff; background:#173f40; font-size:11px; font-weight:700; }
.client-document-form button:disabled { opacity:.55; }
.client-document-form>small { display:block; margin-top:7px; color:var(--muted); font-size:9px; }
.portal-toast { position:fixed; right:22px; bottom:22px; max-width:330px; padding:12px 15px; border-radius:10px; color:#fff; background:#11151a; box-shadow:0 14px 35px rgba(0,0,0,.2); font-size:12px; opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s ease; }
.portal-toast.show { opacity:1; transform:none; }
@media(max-width:980px){.portal-shell{grid-template-columns:1fr}.portal-sidebar{position:static;height:auto;padding:16px;display:grid;grid-template-columns:auto 1fr;gap:12px}.secure-note,.viewer{display:none}#process-list{grid-column:1/-1;display:flex;overflow:auto}.process-link{min-width:210px}.portal-main{padding:0 18px 35px}.portal-grid{grid-template-columns:1fr}.conversation-panel{position:static}}
@media(max-width:680px){.portal-topbar{min-height:92px;align-items:flex-start;padding-top:20px;flex-direction:column;justify-content:center}.source-badge{align-self:flex-start}.process-overview{grid-template-columns:1fr;padding:19px}.process-status{padding:17px 0 0;border-left:0;border-top:1px solid var(--line)}.process-meta{grid-template-columns:1fr;gap:12px}.process-meta>div{padding:0;border:0}.process-time-note{padding:16px;align-items:start}.process-time-number{width:56px;height:56px;border-radius:14px;font-size:20px}.process-time-note p{font-size:12px}.portal-grid{gap:14px}.section-head{padding:17px}.feed{padding:5px 17px 14px}.feed-kicker{align-items:flex-start;flex-direction:column;gap:4px}.client-document-list{grid-template-columns:1fr;padding:12px}.client-document-form{margin:12px}.client-document-form>div{align-items:stretch;flex-direction:column}.client-document-form button{width:100%}.client-profile-summary{grid-template-columns:1fr 1fr;padding:15px}.client-profile-panel .section-head{align-items:flex-start;gap:10px;flex-direction:column}#client-profile-form{grid-template-columns:1fr;padding:0 15px 15px}#brand-request-form{grid-template-columns:1fr;padding:15px}#brand-request-form .wide{grid-column:auto}#brand-request-form .wide:last-child{align-items:stretch;flex-direction:column}.brand-request-list{padding:12px 12px 0}}