/* ============================================================
   AES x TwentyFour — Microsoft 365 sharing demo
   Site chrome:  TwentyFour brand (purple + green, Roboto)
   Demo windows: Windows 11 / Fluent look (Segoe UI)
   ============================================================ */

:root{
    /* TwentyFour brand */
    --tf-purple:      #482865;
    --tf-purple2:     #783A8E;
    --tf-green:       #C3D200;
    --tf-green2:      #8FB22D;
    --tf-greendark:   #0C6C31;
    /* Microsoft / Fluent */
    --ms-accent:      #0067c0;
    --ms-accent-dk:   #005ba1;
    --od-blue:        #0364B8;
    --sp-teal:        #036C70;
    --win-bg:         #f6f6f6;
    --win-chrome:     #fdfdfd;
    --stroke:         #e3e3e3;
    --txt:            #1b1a19;
    --sub:            #605e5c;
    --ok:             #107C10;
    --bad:            #D13438;
    --warnbg:         #FDEDEC;
    --sel:            #e8f2fb;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
    font-family:'Roboto', 'Segoe UI', Arial, sans-serif;
    color:var(--txt);
    background:#fafafa;
    font-size:16px;
    line-height:1.55;
}
img{ max-width:100%; }
button{ font-family:inherit; cursor:pointer; }

/* ================= SITE HEADER ================= */
.site-header{
    background:linear-gradient(180deg, var(--tf-purple) 0%, var(--tf-purple2) 100%);
    color:#fff;
    padding:26px 32px;
}
.header-inner{
    max-width:1240px; margin:0 auto;
    display:flex; align-items:center; gap:28px;
}
.tf-logo{ height:46px; width:auto; flex:0 0 auto; }
.header-title{ flex:1; }
.header-title h1{
    font-weight:900; font-size:30px; line-height:1.15;
    color:var(--tf-green); letter-spacing:.2px;
}
.header-title p{ color:#fff; font-weight:300; margin-top:4px; font-size:15px; }
.client-chip{
    background:#fff; border-radius:12px; padding:10px 18px;
    box-shadow:0 4px 14px rgba(0,0,0,.25);
    flex:0 0 auto;
}
.client-chip img{ height:44px; width:auto; display:block; }

.green-divider{ height:4px; background:var(--tf-green); }

/* ================= NAV ================= */
.site-nav{
    background:var(--tf-green2);
    display:flex; align-items:stretch; gap:2px;
    padding:0 32px; flex-wrap:wrap;
    position:sticky; top:0; z-index:60;
    box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.nav-tab{
    background:transparent; border:none;
    color:var(--tf-purple); font-weight:700; font-size:14.5px;
    padding:13px 16px; display:flex; align-items:center; gap:8px;
    border-bottom:4px solid transparent;
    transition:background .15s;
}
.nav-tab:hover{ background:rgba(255,255,255,.25); }
.nav-tab.active{
    background:var(--tf-purple); color:#fff;
    border-bottom-color:var(--tf-green);
}
.nav-tab.active .nav-num{ background:var(--tf-green); color:var(--tf-purple); }
.nav-num{
    background:var(--tf-purple); color:#fff;
    width:22px; height:22px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:12.5px; font-weight:900; flex:0 0 auto;
}
.notes-toggle{
    margin-left:auto; background:transparent; border:none;
    color:var(--tf-purple); font-weight:700; font-size:13.5px; padding:0 14px;
    opacity:.75;
}
.notes-toggle:hover{ opacity:1; }
body.show-notes .notes-toggle{ opacity:1; text-decoration:underline; }

/* ================= PANELS / COMMON ================= */
.panel{ display:none; max-width:1240px; margin:0 auto; padding:38px 32px 64px; }
.panel.active{ display:block; animation:fadeUp .35s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

.section-intro h2{
    color:var(--tf-purple2); font-weight:700; font-size:26px; margin-bottom:6px;
}
.section-intro > p{ color:#3d3d3d; max-width:880px; font-size:16.5px; }
.section-intro{ margin-bottom:26px; }

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }

.try-pill{
    display:inline-block; background:var(--tf-green); color:var(--tf-purple);
    font-size:12px; font-weight:900; letter-spacing:.4px;
    padding:3px 11px; border-radius:99px; text-transform:uppercase;
    animation:pulse 2.2s ease-in-out infinite;
    vertical-align:middle;
}
@keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.07);} }

.callout{
    border-radius:12px; padding:16px 20px; margin:20px 0;
    font-size:15.5px; border:1px solid transparent;
}
.callout.good{ background:#eef7ee; border-color:#bfe0bf; color:#0b5c0b; }
.callout.warn{ background:var(--warnbg); border-color:#f2c4c2; color:#8f2321; }
.callout.info{ background:#eef4fb; border-color:#c8ddf2; color:#1c4e79; }
.callout strong{ font-weight:700; }

.big-banner{
    background:linear-gradient(135deg, #eef7ee, #f7fbe8);
    border:2px solid var(--tf-green2);
    border-radius:16px; padding:22px 26px; margin:0 0 30px;
    display:flex; gap:18px; align-items:center;
}
.big-banner .tick{
    width:46px; height:46px; border-radius:50%; flex:0 0 auto;
    background:var(--tf-greendark); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:24px; font-weight:900;
}
.big-banner h3{ color:var(--tf-greendark); font-size:19px; margin-bottom:2px; }
.big-banner p{ font-size:15.5px; }

.grid2{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:28px; align-items:start; }
@media (max-width:980px){ .grid2{ grid-template-columns:1fr; } }

.explain-list{ list-style:none; }
.explain-list li{
    padding:10px 0 10px 34px; position:relative; font-size:15.5px;
    border-bottom:1px dashed #e4e4e4;
}
.explain-list li:last-child{ border-bottom:none; }
.explain-list li::before{
    content:""; position:absolute; left:4px; top:15px;
    width:16px; height:16px; border-radius:50%;
    background:var(--tf-green2);
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.5 12L2 7.6l1.4-1.4 3.1 3 6.1-6.1L14 4.5z" fill="black"/></svg>') center/contain no-repeat;
            mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.5 12L2 7.6l1.4-1.4 3.1 3 6.1-6.1L14 4.5z" fill="black"/></svg>') center/contain no-repeat;
}

.pill-link{
    background:none; border:none; padding:0;
    color:var(--tf-purple2); font-weight:700; font-size:inherit;
    text-decoration:underline; text-underline-offset:3px;
}
.pill-link:hover{ color:var(--tf-purple); }

/* presenter notes */
.notes{
    display:none;
    margin-top:34px; border-left:5px solid var(--tf-green);
    background:#f5f2f9; border-radius:0 12px 12px 0;
    padding:16px 22px;
}
body.show-notes .notes{ display:block; }
.notes h4{ color:var(--tf-purple); font-size:13px; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.notes ul{ margin-left:18px; }
.notes li{ font-size:14.5px; margin:4px 0; color:#444; }

/* ================= CONCEPT CARDS (big picture) ================= */
.concept-cards{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
    gap:22px; margin:8px 0 6px;
}
@media (max-width:980px){ .concept-cards{ grid-template-columns:1fr; } }
.concept-card{
    background:#fff; border-radius:16px; overflow:hidden;
    border:1px solid var(--stroke);
    box-shadow:0 10px 26px rgba(40,20,70,.08);
    display:flex; flex-direction:column;
    transition:transform .2s ease, box-shadow .2s ease;
}
.concept-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(40,20,70,.14); }
.concept-top{
    padding:20px 22px 16px; display:flex; align-items:center; gap:14px;
    border-bottom:1px solid #f0f0f0;
}
.concept-card.sp .concept-top{ background:linear-gradient(135deg,#e7f5f5,#f4fbfb); }
.concept-card.od .concept-top{ background:linear-gradient(135deg,#e8f1fb,#f4f9ff); }
.concept-card.em .concept-top{ background:linear-gradient(135deg,#f3eefb,#faf7ff); }
.concept-logo{ height:44px; width:auto; flex:0 0 auto; }
.concept-top h3{ font-size:18px; }
.concept-top .analogy{ display:block; font-size:13.5px; font-weight:400; color:var(--sub); margin-top:1px; }
.concept-body{ padding:16px 22px 20px; flex:1; display:flex; flex-direction:column; gap:10px; }
.concept-body p{ font-size:14.8px; }
.leaves{
    margin-top:auto; border-radius:10px; padding:10px 14px;
    font-size:14px; font-weight:700; display:flex; gap:10px; align-items:center;
}
.leaves.no{ background:var(--warnbg); color:#8f2321; }
.leaves.yes{ background:#eef7ee; color:#0b5c0b; }
.leaves .mark{ font-size:17px; }

.env-ico{
    width:44px; height:44px; border-radius:10px; flex:0 0 auto;
    background:var(--tf-purple2);
    display:flex; align-items:center; justify-content:center;
}
.env-ico svg{ width:26px; height:26px; }

/* ================= WINDOW CHROME (Fluent) ================= */
.win{
    font-family:'Segoe UI', 'Roboto', Arial, sans-serif;
    background:var(--win-bg);
    border:1px solid #d5d5d5; border-radius:10px;
    box-shadow:0 18px 44px rgba(0,0,0,.18);
    overflow:hidden;
}
.win-titlebar{
    background:var(--win-chrome);
    display:flex; align-items:center; gap:10px;
    padding:8px 0 8px 14px; border-bottom:1px solid var(--stroke);
    user-select:none;
}
.win-title{ font-size:12.5px; color:#444; display:flex; align-items:center; gap:8px; }
.win-title img, .win-title svg{ width:16px; height:16px; }
.win-dots{ margin-left:auto; display:flex; }
.win-dots span{
    width:44px; height:30px; display:flex; align-items:center; justify-content:center;
    font-size:11px; color:#555;
}
.win-dots span:hover{ background:#eaeaea; }
.win-dots span.close:hover{ background:#c42b1c; color:#fff; }

/* ================= EXPLORER ================= */
.exp-toolbar{
    display:flex; align-items:center; gap:4px;
    background:var(--win-chrome); padding:7px 12px;
    border-bottom:1px solid var(--stroke); flex-wrap:wrap;
}
.exp-tool{
    background:none; border:none; border-radius:6px;
    font-size:13px; color:#333; padding:6px 10px;
    display:flex; align-items:center; gap:7px;
    font-family:inherit;
}
.exp-tool svg{ width:17px; height:17px; }
.exp-tool:hover{ background:#f0f0f0; }
.exp-sep{ width:1px; height:22px; background:var(--stroke); margin:0 6px; }

.exp-addressbar{
    display:flex; align-items:center; gap:8px;
    background:var(--win-chrome); padding:6px 12px 9px;
    border-bottom:1px solid var(--stroke);
}
.exp-nav-btns{ display:flex; gap:2px; color:#666; }
.exp-nav-btns span{
    width:30px; height:28px; border-radius:6px;
    display:flex; align-items:center; justify-content:center; font-size:14px;
}
.exp-nav-btns span:hover{ background:#f0f0f0; }
.exp-crumbs{
    flex:1; background:#fff; border:1px solid var(--stroke); border-radius:6px;
    display:flex; align-items:center; gap:2px; padding:4px 10px;
    font-size:13px; color:#333; min-height:30px; overflow:hidden; white-space:nowrap;
}
.exp-crumbs .crumb{ display:flex; align-items:center; gap:6px; }
.exp-crumbs .crumb img, .exp-crumbs .crumb svg{ width:15px; height:15px; }
.exp-crumbs .csep{ color:#999; margin:0 4px; font-size:11px; }
.exp-search{
    background:#fff; border:1px solid var(--stroke); border-radius:6px;
    font-size:13px; color:#888; padding:5px 12px; width:190px;
}

.exp-main{ display:flex; min-height:430px; background:#fff; }
.exp-side{
    width:230px; flex:0 0 auto; background:var(--win-bg);
    border-right:1px solid var(--stroke); padding:10px 6px;
    font-size:13.5px;
}
.side-item{
    display:flex; align-items:center; gap:9px;
    padding:6px 10px; border-radius:6px; color:#333;
    cursor:pointer; user-select:none; margin:1px 4px;
}
.side-item:hover{ background:#ececec; }
.side-item.active{ background:#e0e0e0; font-weight:600; }
.side-item .side-ico{ width:17px; height:17px; flex:0 0 auto; display:flex; }
.side-item .side-ico img, .side-item .side-ico svg{ width:17px; height:17px; }
.side-item.sub{ padding-left:34px; font-size:13px; }
.side-gap{ height:10px; }

.exp-files{ flex:1; overflow:auto; }
table.file-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.file-table th{
    text-align:left; font-weight:400; color:#666; font-size:12.5px;
    padding:8px 14px; border-bottom:1px solid var(--stroke);
    position:sticky; top:0; background:#fff;
}
.file-table td{ padding:7px 14px; border-bottom:1px solid #f4f4f4; color:#333; }
.file-row{ cursor:default; user-select:none; }
.file-row:hover td{ background:#f5f9fd; }
.file-row.selected td{ background:var(--sel); }
.name-cell{ display:flex; align-items:center; gap:10px; }
.name-cell .file-ico{ width:20px; height:20px; flex:0 0 auto; }
.status-cell{ width:64px; text-align:center; }
.status-ico{ width:18px; height:18px; display:inline-block; vertical-align:middle; cursor:help; }
.col-status{ width:64px; text-align:center !important; }

.exp-statusbar{
    background:var(--win-chrome); border-top:1px solid var(--stroke);
    font-size:12px; color:#666; padding:5px 14px;
    display:flex; gap:18px;
}

/* legend */
.legend-grid{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px; margin-top:18px;
}
@media (max-width:980px){ .legend-grid{ grid-template-columns:1fr 1fr; } }
.legend-item{
    background:#fff; border:1px solid var(--stroke); border-radius:12px;
    padding:13px 16px; display:flex; gap:13px; align-items:flex-start;
}
.legend-ico{ width:26px; height:26px; flex:0 0 auto; margin-top:2px; }
.legend-name{ font-weight:700; font-size:14.5px; }
.legend-desc{ font-size:13.5px; color:#555; }

/* context menu */
.ctx-menu{
    position:fixed; z-index:400; display:none;
    background:rgba(253,253,253,.97); backdrop-filter:blur(10px);
    border:1px solid #dcdcdc; border-radius:9px;
    box-shadow:0 10px 30px rgba(0,0,0,.22);
    padding:5px; min-width:240px;
    font-family:'Segoe UI', Arial, sans-serif; font-size:13.5px;
}
.ctx-item{
    display:flex; align-items:center; gap:11px;
    padding:7px 12px; border-radius:6px; color:#222; cursor:pointer;
}
.ctx-item:hover{ background:#efefef; }
.ctx-item .ctx-ico{ width:17px; height:17px; display:flex; }
.ctx-item .ctx-ico svg, .ctx-item .ctx-ico img{ width:17px; height:17px; }
.ctx-sep{ height:1px; background:#e6e6e6; margin:5px 8px; }

/* status tooltip */
.status-tip{
    position:fixed; z-index:500; display:none; max-width:270px;
    background:#2b2b2b; color:#fff; font-size:12.5px; line-height:1.4;
    padding:8px 12px; border-radius:7px;
    box-shadow:0 6px 18px rgba(0,0,0,.3);
    pointer-events:none;
    font-family:'Segoe UI', Arial, sans-serif;
}
.status-tip b{ color:var(--tf-green); }

/* toast */
.toast{
    position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(20px);
    background:var(--tf-purple); color:#fff; font-size:14.5px;
    padding:12px 22px; border-radius:99px;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
    opacity:0; pointer-events:none; transition:all .3s ease; z-index:600;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ================= SHARE DIALOG ================= */
.share-card{
    font-family:'Segoe UI', Arial, sans-serif;
    background:#fff; border-radius:14px; border:1px solid #ddd;
    box-shadow:0 18px 44px rgba(0,0,0,.20);
    width:100%; max-width:460px; padding:20px 22px;
}
.share-head{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.share-head img{ width:22px; height:22px; }
.share-head h4{ font-size:16px; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.share-head .gear{ color:#666; font-size:15px; }
.share-sub{ font-size:12.5px; color:var(--sub); margin-bottom:14px; }

.link-setting-row{
    display:flex; align-items:center; gap:10px;
    border:1px solid #d8d8d8; border-radius:8px;
    padding:9px 13px; font-size:13.5px; cursor:pointer; margin-bottom:12px;
    background:#fafafa;
}
.link-setting-row:hover{ background:#f2f2f2; }
.link-setting-row .lk-ico{ width:19px; height:19px; display:flex; }
.link-setting-row .lk-ico svg{ width:19px; height:19px; }
.link-setting-row .lk-text{ flex:1; }
.link-setting-row .lk-text b{ font-weight:600; }
.link-setting-row .lk-text span{ display:block; font-size:11.5px; color:var(--sub); }
.chev{ color:#888; font-size:11px; }

.people-input{
    border:1px solid #bbb; border-radius:8px; padding:8px 10px;
    display:flex; flex-wrap:wrap; gap:6px; align-items:center;
    min-height:42px; margin-bottom:10px; background:#fff;
}
.people-input input{
    border:none; outline:none; font-size:13.5px; flex:1; min-width:140px;
    font-family:inherit; background:transparent;
}
.chip{
    display:inline-flex; align-items:center; gap:7px;
    background:#f0f0f0; border-radius:99px; padding:3px 11px 3px 3px;
    font-size:12.5px;
}
.chip .chip-avatar{
    width:22px; height:22px; border-radius:50%;
    background:var(--tf-purple2); color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:700;
}
.chip.chip-ok{ background:#e7f2e7; }
.chip.chip-ok .chip-avatar{ background:var(--ok); }
.share-msg{
    width:100%; border:1px solid #d8d8d8; border-radius:8px;
    font-family:inherit; font-size:13.5px; padding:9px 12px;
    resize:none; height:58px; color:#444; margin-bottom:14px;
}
.share-actions{ display:flex; align-items:center; gap:10px; }
.share-send{
    background:var(--ms-accent); border:1px solid var(--ms-accent-dk);
    color:#fff; font-size:13.5px; font-weight:600;
    padding:8px 22px; border-radius:6px;
}
.share-send:hover{ background:var(--ms-accent-dk); }
.copylink-btn{
    background:#fff; border:1px solid #bbb; border-radius:6px;
    font-size:13.5px; padding:8px 14px; display:flex; align-items:center; gap:8px;
}
.copylink-btn:hover{ background:#f4f4f4; }
.share-foot{ font-size:11.5px; color:var(--sub); margin-top:12px; }

/* link options (settings view) */
.link-options{ margin:6px 0 12px; }
.link-opt{
    display:flex; gap:12px; align-items:flex-start;
    border:1.5px solid #ddd; border-radius:10px;
    padding:11px 13px; margin-bottom:8px; cursor:pointer;
    font-size:13.5px; position:relative; background:#fff;
}
.link-opt:hover{ border-color:#bbb; }
.link-opt.selected{ border-color:var(--ms-accent); background:#f3f9ff; }
.link-opt.selected::after{
    content:"\2713"; position:absolute; right:12px; top:10px;
    color:var(--ms-accent); font-weight:900;
}
.link-opt.disabled{
    opacity:.55; cursor:not-allowed; background:repeating-linear-gradient(
        45deg, #fafafa, #fafafa 8px, #f3f3f3 8px, #f3f3f3 16px);
}
.link-opt .opt-ico{ width:22px; height:22px; flex:0 0 auto; margin-top:1px; }
.link-opt .opt-ico svg{ width:22px; height:22px; }
.opt-label{ font-weight:600; display:flex; align-items:center; gap:8px; }
.opt-sub{ font-size:12px; color:var(--sub); }
.padlock{ color:var(--bad); font-size:13px; }

.sp-block-banner{
    display:none; background:var(--warnbg); border:1px solid #f0b9b7;
    color:#8f2321; border-radius:8px; padding:10px 14px;
    font-size:13px; margin-bottom:10px;
    animation:fadeUp .25s ease both;
}
.sp-ok-banner{
    display:none; background:#eef7ee; border:1px solid #bfe0bf;
    color:#0b5c0b; border-radius:8px; padding:10px 14px;
    font-size:13px; margin-bottom:10px;
    animation:fadeUp .25s ease both;
}
.suggest-row{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.suggest-btn{
    border:1px dashed #999; background:#fff; border-radius:99px;
    font-size:12.5px; padding:5px 13px; color:#333;
}
.suggest-btn:hover{ background:#f3f3f3; }
.shake{ animation:shake .4s ease; }
@keyframes shake{
    0%,100%{ transform:translateX(0);}
    20%,60%{ transform:translateX(-7px);}
    40%,80%{ transform:translateX(7px);}
}

/* ================= STEPPER ================= */
.stepper{ margin-top:6px; }
.step-dots{
    display:flex; gap:0; margin-bottom:24px; flex-wrap:wrap;
}
.sdot{
    flex:1; min-width:130px; display:flex; align-items:center; gap:9px;
    padding:10px 12px; border:none; background:#efeaf4;
    color:var(--tf-purple); font-size:13px; font-weight:700;
    border-right:2px solid #fff; position:relative;
}
.sdot:first-child{ border-radius:10px 0 0 10px; }
.sdot:last-child{ border-radius:0 10px 10px 0; border-right:none; }
.sdot .n{
    width:24px; height:24px; border-radius:50%; flex:0 0 auto;
    background:#fff; color:var(--tf-purple);
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:900; border:2px solid var(--tf-purple2);
}
.sdot.on{ background:var(--tf-purple); color:#fff; }
.sdot.on .n{ background:var(--tf-green); border-color:var(--tf-green); color:var(--tf-purple); }
.sdot.done{ background:#ddd3e8; }
.sdot.done .n{ background:var(--tf-purple2); border-color:var(--tf-purple2); color:#fff; }

.od-step{ display:none; }
.od-step.on{ display:block; animation:fadeUp .3s ease both; }
.step-vis{ display:flex; justify-content:center; }
.step-side h3{ color:var(--tf-purple2); font-size:19px; margin-bottom:10px; }

.step-nav{ display:flex; gap:12px; margin-top:26px; align-items:center; }
.btn{
    border-radius:8px; font-size:14.5px; font-weight:700;
    padding:10px 24px; border:2px solid var(--tf-purple);
}
.btn.primary{ background:var(--tf-purple); color:#fff; }
.btn.primary:hover{ background:var(--tf-purple2); border-color:var(--tf-purple2); }
.btn.ghost{ background:#fff; color:var(--tf-purple); }
.btn.ghost:hover{ background:#f3eef8; }
.btn:disabled{ opacity:.35; cursor:not-allowed; }
.step-count{ margin-left:auto; color:var(--sub); font-size:13.5px; }

/* two mini frames side by side */
.duo{ display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap; }
.duo .arrow{ font-size:30px; color:var(--tf-green2); font-weight:900; }

/* ================= OUTLOOK ================= */
.win-outlook .ol-topbar{
    background:#0F6CBD; color:#fff; font-size:12.5px;
    display:flex; align-items:center; gap:10px; padding:6px 14px;
}
.ol-toolbar{
    background:var(--win-chrome); border-bottom:1px solid var(--stroke);
    display:flex; gap:6px; padding:7px 12px; align-items:center; position:relative;
    flex-wrap:wrap;
}
.ol-btn{
    background:none; border:1px solid transparent; border-radius:6px;
    font-family:'Segoe UI', Arial, sans-serif;
    font-size:13px; color:#333; padding:6px 11px;
    display:flex; align-items:center; gap:7px;
}
.ol-btn svg{ width:16px; height:16px; }
.ol-btn:hover{ background:#f0f0f0; }
.ol-send-btn{
    background:var(--ms-accent); color:#fff; border-radius:6px;
    border:none; font-size:13px; font-weight:600; padding:7px 20px;
    display:flex; align-items:center; gap:8px;
}
.ol-fields{ background:#fff; padding:4px 16px; }
.ol-field{
    display:flex; align-items:center; gap:12px;
    border-bottom:1px solid #f0f0f0; padding:8px 0; font-size:13.5px;
}
.ol-label{
    color:#555; width:64px; flex:0 0 auto;
    border:1px solid #ccc; border-radius:4px; text-align:center;
    font-size:12.5px; padding:3px 0; background:#fafafa;
}
.ol-field .val{ color:#222; }
.attach-zone{
    background:#fff; padding:10px 16px; display:flex; gap:10px; flex-wrap:wrap;
    min-height:26px;
}
.attach-chip{
    display:flex; align-items:center; gap:9px;
    border:1px solid #dcdcdc; border-radius:8px;
    background:#f8f8f8; padding:7px 12px; font-size:12.5px;
    animation:fadeUp .25s ease both;
    font-family:'Segoe UI', Arial, sans-serif;
}
.attach-chip .file-ico{ width:20px; height:20px; }
.attach-chip .a-name{ font-weight:600; color:#222; }
.attach-chip .a-sub{ color:var(--sub); font-size:11.5px; display:block; }
.attach-chip.link-chip{ background:#eef6ff; border-color:#bcd8f2; }
.attach-x{ color:#888; margin-left:4px; cursor:pointer; font-size:11px; }
.ol-body{
    background:#fff; padding:14px 18px 22px; font-size:14px; color:#222;
    min-height:150px; border-top:1px solid #f4f4f4;
    font-family:'Segoe UI', Arial, sans-serif;
}
.ol-body p{ margin-bottom:10px; }
.ol-sig{ color:#555; }

/* attach dropdown + modal */
.attach-menu{
    position:absolute; top:44px; left:12px; z-index:80; display:none;
    background:#fff; border:1px solid #dcdcdc; border-radius:9px;
    box-shadow:0 12px 30px rgba(0,0,0,.2); padding:6px; width:330px;
    font-family:'Segoe UI', Arial, sans-serif;
}
.attach-menu.open{ display:block; animation:fadeUp .2s ease both; }
.attach-head{ font-size:11.5px; color:var(--sub); padding:6px 10px 2px; text-transform:uppercase; letter-spacing:.5px; }
.attach-item{
    display:flex; gap:10px; align-items:center; width:100%;
    background:none; border:none; border-radius:6px;
    padding:8px 10px; font-size:13px; text-align:left; color:#222;
    font-family:inherit;
}
.attach-item:hover{ background:#f2f2f2; }
.attach-item .file-ico{ width:20px; height:20px; flex:0 0 auto; }
.attach-item .attach-sub{ display:block; font-size:11.5px; color:var(--sub); }

.modal-veil{
    position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:300;
    display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-veil.open{ display:flex; }
.attach-modal{
    background:#fff; border-radius:14px; padding:24px 26px;
    max-width:520px; width:100%;
    box-shadow:0 24px 60px rgba(0,0,0,.35);
    font-family:'Segoe UI', Arial, sans-serif;
    animation:fadeUp .25s ease both;
}
.attach-modal h4{ font-size:17px; margin-bottom:4px; }
.attach-modal .am-sub{ font-size:13px; color:var(--sub); margin-bottom:16px; }
.attach-opts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px){ .attach-opts{ grid-template-columns:1fr; } }
.attach-opt{
    border:1.5px solid #ddd; border-radius:12px; padding:16px 15px;
    background:#fff; text-align:left; font-family:inherit;
    display:flex; flex-direction:column; gap:8px;
}
.attach-opt:hover{ border-color:var(--ms-accent); background:#f5faff; }
.attach-opt .ao-title{ font-weight:700; font-size:14px; display:flex; gap:9px; align-items:center; }
.attach-opt .ao-title svg, .attach-opt .ao-title img{ width:19px; height:19px; }
.attach-opt .ao-sub{ font-size:12.5px; color:var(--sub); }
.attach-opt .ao-tag{ align-self:flex-start; font-size:11px; font-weight:900; border-radius:99px; padding:2px 10px; }
.ao-tag.today{ background:var(--tf-green); color:var(--tf-purple); }
.ao-tag.new{ background:#e3effa; color:#155a96; }

/* ================= RECIPIENT MAIL ================= */
.mail-read{ background:#fff; }
.mail-head{
    padding:16px 20px 12px; border-bottom:1px solid #f0f0f0;
    display:flex; gap:13px; font-family:'Segoe UI', Arial, sans-serif;
}
.mail-avatar{
    width:40px; height:40px; border-radius:50%; flex:0 0 auto;
    background:var(--od-blue); color:#fff; font-weight:700; font-size:14px;
    display:flex; align-items:center; justify-content:center;
}
.mail-meta .m-subj{ font-size:15.5px; font-weight:600; }
.mail-meta .m-from{ font-size:12.5px; color:#444; margin-top:2px; }
.mail-meta .m-to{ font-size:12px; color:var(--sub); }
.share-mail-card{
    margin:22px auto; max-width:400px; text-align:center;
    border:1px solid #e6e6e6; border-radius:12px; padding:26px 26px 22px;
    font-family:'Segoe UI', Arial, sans-serif;
}
.smc-logo{ height:30px; margin:0 auto 14px; display:block; width:auto; }
.share-mail-card h4{ font-size:15.5px; font-weight:600; margin-bottom:16px; }
.smc-file{
    display:flex; align-items:center; gap:11px; justify-content:flex-start;
    border:1px solid #e3e3e3; border-radius:9px; padding:11px 14px;
    font-size:13.5px; margin-bottom:18px; text-align:left;
}
.smc-file .file-ico{ width:24px; height:24px; flex:0 0 auto; }
.smc-open{
    display:inline-block; background:var(--ms-accent); color:#fff;
    font-size:14px; font-weight:600; border:none;
    padding:10px 44px; border-radius:6px;
}
.smc-open:hover{ background:var(--ms-accent-dk); }
.smc-foot{ font-size:11px; color:#999; margin-top:16px; line-height:1.5; }
.mail-footnote{
    font-size:11.5px; color:#999; text-align:center; padding:0 20px 18px;
    font-family:'Segoe UI', Arial, sans-serif;
}

/* ================= BROWSER FRAME ================= */
.browser{ background:#fff; border-radius:10px; overflow:hidden; border:1px solid #d5d5d5; box-shadow:0 18px 44px rgba(0,0,0,.16); font-family:'Segoe UI', Arial, sans-serif; }
.b-top{ background:#e9e9e9; padding:8px 12px 0; display:flex; align-items:flex-end; gap:8px; }
.b-tab{
    background:#fff; border-radius:8px 8px 0 0; font-size:12px; color:#333;
    padding:7px 16px; display:flex; align-items:center; gap:8px; max-width:260px;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.b-tab img, .b-tab svg{ width:14px; height:14px; flex:0 0 auto; }
.b-urlrow{ background:#fff; padding:8px 12px; border-bottom:1px solid var(--stroke); display:flex; gap:10px; align-items:center; }
.b-urlbar{
    flex:1; background:#f1f3f4; border-radius:99px; font-size:12.5px;
    color:#444; padding:7px 16px; display:flex; gap:8px; align-items:center;
}
.b-urlbar .lock{ color:var(--ok); font-size:12px; }
.b-body{ padding:26px; background:#faf9f8; }

/* verify card */
.verify-card{
    max-width:360px; margin:0 auto; background:#fff;
    border:1px solid #e3e3e3; border-radius:12px; padding:26px;
    text-align:center; font-family:'Segoe UI', Arial, sans-serif;
}
.verify-card img{ height:26px; margin-bottom:14px; }
.verify-card h4{ font-size:16px; margin-bottom:6px; }
.verify-card p{ font-size:12.5px; color:var(--sub); margin-bottom:16px; }
.code-boxes{ display:flex; gap:8px; justify-content:center; margin-bottom:16px; }
.code-box{
    width:38px; height:44px; border:1.5px solid #bbb; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:19px; font-weight:700; color:var(--tf-purple);
    background:#fbfbfb;
}
.verify-btn{
    background:var(--ms-accent); color:#fff; border:none; border-radius:6px;
    font-size:13.5px; font-weight:600; padding:9px 34px;
}

/* pdf preview */
.pdf-view{ background:#525659; }
.pdf-bar{
    background:#3c3f41; color:#ddd; font-size:12px;
    display:flex; align-items:center; gap:14px; padding:7px 14px;
    font-family:'Segoe UI', Arial, sans-serif;
}
.pdf-page{
    background:#fff; width:320px; min-height:380px; margin:22px auto;
    box-shadow:0 8px 24px rgba(0,0,0,.5); padding:26px 24px;
    font-family:'Roboto', Arial, sans-serif;
}
.pdf-page .p-head{ border-bottom:3px solid var(--tf-purple2); padding-bottom:10px; margin-bottom:14px; }
.pdf-page .p-head img{ height:26px; }
.pdf-page h5{ font-size:14px; color:var(--tf-purple); margin-bottom:10px; }
.pdf-line{ height:7px; background:#e9e9e9; border-radius:4px; margin:8px 0; }
.pdf-line.w60{ width:60%; } .pdf-line.w80{ width:80%; } .pdf-line.w40{ width:40%; }
.pdf-table{ border:1px solid #e2e2e2; border-radius:6px; margin-top:14px; }
.pdf-table div{ border-bottom:1px solid #eee; height:22px; }
.pdf-table div:last-child{ border-bottom:none; }
.pdf-table div:nth-child(odd){ background:#f7f7f7; }

/* ================= MANAGE ACCESS ================= */
.access-panel{
    background:#fff; border:1px solid #ddd; border-radius:14px;
    max-width:430px; width:100%; padding:20px 22px;
    box-shadow:0 18px 44px rgba(0,0,0,.16);
    font-family:'Segoe UI', Arial, sans-serif;
}
.access-panel h4{ font-size:15.5px; margin-bottom:2px; }
.access-panel .ap-sub{ font-size:12.5px; color:var(--sub); margin-bottom:14px; }
.access-row{
    display:flex; align-items:center; gap:12px;
    border:1px solid #eee; border-radius:10px; padding:10px 13px;
    margin-bottom:9px; font-size:13.5px;
}
.access-avatar{
    width:32px; height:32px; border-radius:50%; flex:0 0 auto;
    background:var(--tf-purple2); color:#fff; font-size:12px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
}
.access-row .who{ flex:1; }
.access-row .who span{ display:block; font-size:11.5px; color:var(--sub); }
.stop-btn{
    background:#fff; border:1.5px solid var(--bad); color:var(--bad);
    font-size:12px; font-weight:700; border-radius:6px; padding:6px 12px;
}
.stop-btn:hover{ background:var(--bad); color:#fff; }
.access-note{ font-size:12px; color:var(--sub); margin-top:10px; }
.access-row.removed{ opacity:.45; }
.access-row.removed .who{ text-decoration:line-through; }

/* ================= CHEAT SHEET ================= */
.cheat-table{
    width:100%; border-collapse:separate; border-spacing:0;
    background:#fff; border:1px solid var(--stroke); border-radius:14px;
    overflow:hidden; margin:8px 0 30px;
    box-shadow:0 10px 26px rgba(40,20,70,.07);
}
.cheat-table th{
    background:var(--tf-purple); color:#fff; text-align:left;
    font-size:14.5px; padding:13px 20px; font-weight:700;
}
.cheat-table td{
    padding:13px 20px; border-top:1px solid #f0f0f0; font-size:15px;
    vertical-align:middle;
}
.cheat-table tr:nth-child(even) td{ background:#faf9fc; }
.tool-tag{
    display:inline-flex; align-items:center; gap:8px;
    font-weight:700; font-size:13.5px; border-radius:99px; padding:5px 14px;
    white-space:nowrap;
}
.tool-tag img{ height:16px; width:auto; }
.tool-tag.email{ background:#f0e9f8; color:var(--tf-purple); }
.tool-tag.od{ background:#e8f1fb; color:var(--od-blue); }
.tool-tag.sp{ background:#e5f3f3; color:var(--sp-teal); }

.rule-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
@media (max-width:980px){ .rule-cards{ grid-template-columns:1fr; } }
.rule-card{
    border-radius:16px; padding:22px 24px; color:#fff;
    background:linear-gradient(150deg, var(--tf-purple), var(--tf-purple2));
    box-shadow:0 12px 30px rgba(40,20,70,.25);
}
.rule-card .rc-num{
    background:var(--tf-green); color:var(--tf-purple);
    width:32px; height:32px; border-radius:50%; font-weight:900;
    display:flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.rule-card h3{ color:var(--tf-green); font-size:17px; margin-bottom:6px; }
.rule-card p{ font-size:14px; font-weight:300; }

.cta-strip{
    margin-top:34px; background:#fff; border:1px solid var(--stroke);
    border-radius:14px; padding:20px 26px; display:flex; gap:16px; align-items:center;
}
.cta-strip img{ height:34px; }
.cta-strip p{ font-size:15px; }

/* ================= FOOTER ================= */
.site-footer{
    background:var(--tf-purple); color:#fff; text-align:center;
    padding:22px 20px 26px;
}
.footer-contact{ font-size:14.5px; font-weight:400; }
.footer-contact .dot{
    display:inline-block; width:7px; height:7px; border-radius:50%;
    background:var(--tf-green); margin:0 14px; vertical-align:middle;
}
.footer-note{ font-size:12px; color:#cbbcdd; margin-top:8px; font-weight:300; }

/* ================= CLIENT SHARE FOLDERS (section 7) ================= */
.cs-tabs{
    display:inline-flex; flex-wrap:wrap; gap:0;
    border:2px solid var(--tf-purple); border-radius:99px;
    overflow:hidden; margin-bottom:24px; background:#fff;
}
.cs-tab{
    border:none; background:transparent;
    color:var(--tf-purple); font-weight:700; font-size:14px;
    padding:10px 20px; border-right:1px solid #e6def0;
    transition:background .15s;
}
.cs-tab:last-child{ border-right:none; }
.cs-tab:hover{ background:#f3eef8; }
.cs-tab.on{ background:var(--tf-purple); color:#fff; }
.cs-tab.on:hover{ background:var(--tf-purple); }

.cs-sub{
    font-size:13.5px; color:var(--sub); margin-bottom:14px;
}
.cs-sub b{ color:var(--txt); }

/* owner / staff tree view */
.tree{
    background:#fff; padding:16px 18px 18px;
    font-family:'Segoe UI', Arial, sans-serif;
}
.tree-root{
    display:flex; align-items:center; gap:10px;
    font-size:14.5px; font-weight:600; padding-bottom:10px;
    border-bottom:1px solid #f0f0f0; margin-bottom:12px;
}
.tree-root .file-ico{ width:22px; height:22px; }
.tree-root .status-ico{ width:17px; height:17px; }
.tree-root small{ font-weight:400; color:var(--sub); }
.tree-folder{
    border:1px solid #ececec; border-radius:12px;
    padding:12px 14px; margin-bottom:12px;
    margin-left:18px; position:relative;
}
.tree-folder::before{
    content:""; position:absolute; left:-13px; top:-13px;
    width:12px; height:36px;
    border-left:2px solid #ddd0ec; border-bottom:2px solid #ddd0ec;
    border-radius:0 0 0 8px;
}
.tf-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.tf-head .file-ico{ width:20px; height:20px; }
.tf-head b{ font-size:14px; }
.tf-head .status-ico{ width:16px; height:16px; }
.sw-chips{ display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; }
.sw-chip{
    font-size:11px; font-weight:700; border-radius:99px; padding:3px 11px;
    white-space:nowrap;
}
.sw-chip.client{ background:#e8f1fb; color:var(--od-blue); }
.sw-chip.staff{ background:#eef4e0; color:#4c6e13; }
.tree-files{ margin:10px 0 0 28px; }
.tree-file{
    display:flex; align-items:center; gap:9px;
    font-size:13px; color:#333; padding:5px 8px; border-radius:6px;
}
.tree-file:hover{ background:#f7f9fc; }
.tree-file .file-ico{ width:17px; height:17px; flex:0 0 auto; }
.tree-file .tf-date{ margin-left:auto; color:var(--sub); font-size:11.5px; white-space:nowrap; }
.tree-file.file-new{
    background:#f4fbe4; outline:1.5px solid var(--tf-green);
    animation:newFlash 1.2s ease;
}
@keyframes newFlash{
    0%{ background:var(--tf-green); }
    100%{ background:#f4fbe4; }
}
.new-tag{
    background:var(--tf-green); color:var(--tf-purple);
    font-size:10px; font-weight:900; border-radius:99px; padding:1px 8px;
    letter-spacing:.5px;
}
.cs-actions{
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    padding:12px 18px 16px; background:#fff; border-top:1px solid #f0f0f0;
    font-family:'Roboto','Segoe UI',Arial,sans-serif;
}
.cs-actions .btn{ font-size:13.5px; padding:9px 18px; }

/* client (external) OneDrive web view */
.odw-head{
    display:flex; align-items:center; gap:11px;
    padding:14px 18px 12px; border-bottom:1px solid #f0f0f0;
}
.odw-head img{ height:24px; }
.odw-head .oh-t{ font-size:14.5px; font-weight:600; }
.odw-head .oh-t span{ display:block; font-size:12px; color:var(--sub); font-weight:400; }
.odw-crumb{
    font-size:12.5px; color:var(--sub); padding:10px 18px 4px;
}
.odw-crumb b{ color:var(--txt); }
.odw-list{ padding:6px 10px 12px; }
.odw-row{
    display:flex; align-items:center; gap:11px;
    padding:9px 10px; border-radius:8px; font-size:13.5px;
}
.odw-row:hover{ background:#f5f9fd; }
.odw-row .file-ico{ width:20px; height:20px; flex:0 0 auto; }
.odw-row .tf-date{ margin-left:auto; color:var(--sub); font-size:12px; white-space:nowrap; }
.odw-row.file-new{
    background:#f4fbe4; outline:1.5px solid var(--tf-green);
    animation:newFlash 1.2s ease;
}
.odw-lock{
    margin:6px 14px 16px; border-radius:10px;
    background:#f6f4fa; border:1px dashed #cbb8e0;
    padding:11px 15px; font-size:12.5px; color:#4b3a5e;
}