/* =========================================================
   PROFESSIONAL DIGITAL TWIN V1
   LINKEDsys Tim public structured-query experience.
   ========================================================= */

.twin-section{
    padding:78px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.twin-head{
    display:grid;
    grid-template-columns:1fr minmax(300px,.65fr);
    gap:42px;
    align-items:end;
    margin-bottom:18px;
}

.twin-head span{
    color:rgb(var(--world-accent)/.82);
    font:700 .4rem/1 monospace;
    letter-spacing:.09em;
}

.twin-head h2{
    margin:9px 0 0;
    color:#fff;
    font-size:clamp(2rem,3.8vw,4rem);
    line-height:.93;
    letter-spacing:-.055em;
}

.twin-head p{
    margin:0;
    color:var(--ws-muted);
    font-size:.58rem;
    line-height:1.65;
}

.twin-boundary{
    margin-bottom:12px;
    padding:11px 13px;
    border:1px solid rgba(100,247,161,.13);
    border-radius:18px;
    color:rgba(187,255,216,.60);
    background:rgba(100,247,161,.025);
    font:650 .4rem/1.55 monospace;
}

.twin-layout{
    display:grid;
    grid-template-columns:minmax(420px,.92fr) minmax(0,1.08fr);
    gap:10px;
}

/* Constellation */
.twin-constellation{
    position:relative;
    min-height:640px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.075);
    border-radius:30px;
    background:
        radial-gradient(circle at 50% 50%,rgba(100,247,161,.055),transparent 22%),
        radial-gradient(circle at 12% 10%,rgba(91,234,255,.045),transparent 28%),
        radial-gradient(circle at 88% 88%,rgba(173,140,255,.045),transparent 30%),
        linear-gradient(145deg,rgba(255,255,255,.028),rgba(255,255,255,.006)),
        rgba(7,18,28,.72);
    box-shadow:
        0 28px 80px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.04);
    isolation:isolate;
}

.twin-constellation::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.2;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:54px 54px;
    mask-image:radial-gradient(circle at 50% 50%,#000,transparent 82%);
}

.twin-core{
    position:absolute;
    z-index:4;
    left:50%;
    top:50%;
    width:190px;
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    display:grid;
    place-items:center;
    text-align:center;
    border:1px solid rgba(100,247,161,.22);
    border-radius:50%;
    background:
        radial-gradient(circle at 35% 30%,rgba(255,255,255,.08),transparent 34%),
        radial-gradient(circle at center,rgba(100,247,161,.10),rgba(8,19,29,.88) 68%);
    box-shadow:
        0 0 0 12px rgba(100,247,161,.018),
        0 0 70px rgba(100,247,161,.10),
        inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(18px) saturate(160%);
}

.twin-core::before,
.twin-core::after{
    content:"";
    position:absolute;
    border:1px solid rgba(100,247,161,.09);
    border-radius:50%;
}

.twin-core::before{inset:-20px}
.twin-core::after{inset:-42px;border-style:dashed}

.twin-core-copy{
    position:relative;
    z-index:2;
}

.twin-core-copy span{
    color:rgba(100,247,161,.72);
    font:700 .34rem/1 monospace;
    letter-spacing:.08em;
}

.twin-core-copy strong{
    display:block;
    margin-top:8px;
    color:#fff;
    font-size:1rem;
    letter-spacing:-.025em;
}

.twin-core-copy small{
    display:block;
    margin-top:6px;
    color:rgba(255,255,255,.30);
    font:650 .32rem/1.4 monospace;
}

.twin-orbit{
    --x:50%;
    --y:50%;
    --node-accent:91 234 255;
    position:absolute;
    z-index:5;
    left:var(--x);
    top:var(--y);
    width:145px;
    min-height:104px;
    padding:11px;
    transform:translate(-50%,-50%);
    border:1px solid rgba(255,255,255,.07);
    border-radius:20px;
    color:inherit;
    background:
        radial-gradient(circle at 0 0,rgb(var(--node-accent)/.09),transparent 42%),
        linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008)),
        rgba(8,19,29,.80);
    box-shadow:
        0 16px 42px rgba(0,0,0,.13),
        inset 0 1px 0 rgba(255,255,255,.04);
    text-align:left;
    cursor:pointer;
    transition:
        transform .2s var(--ws-ease),
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.twin-orbit:hover,
.twin-orbit.is-active{
    transform:translate(-50%,-50%) scale(1.035);
    border-color:rgb(var(--node-accent)/.28);
    background:
        radial-gradient(circle at 0 0,rgb(var(--node-accent)/.14),transparent 44%),
        rgba(10,23,35,.86);
    box-shadow:
        0 20px 54px rgba(0,0,0,.16),
        0 0 28px rgb(var(--node-accent)/.06),
        inset 0 1px 0 rgba(255,255,255,.055);
}

.twin-orbit span{
    color:rgb(var(--node-accent)/.70);
    font:700 .32rem/1 monospace;
    letter-spacing:.06em;
}

.twin-orbit strong{
    display:block;
    margin-top:10px;
    color:#fff;
    font-size:.67rem;
}

.twin-orbit small{
    display:block;
    margin-top:5px;
    color:rgba(255,255,255,.30);
    font:650 .31rem/1.35 monospace;
}

.twin-lines{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
}

.twin-lines line{
    stroke:rgba(100,247,161,.11);
    stroke-width:1;
    vector-effect:non-scaling-stroke;
}

/* Query */
.twin-query{
    min-height:640px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.twin-query-panel{
    padding:16px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:28px;
    background:
        radial-gradient(circle at 0 0,rgb(var(--world-accent)/.055),transparent 36%),
        linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008)),
        rgba(8,19,29,.66);
    box-shadow:
        0 22px 62px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.045);
}

.twin-query-label{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    margin-bottom:11px;
}

.twin-query-label span{
    color:rgb(var(--world-accent)/.74);
    font:700 .38rem/1 monospace;
    letter-spacing:.075em;
}

.twin-query-label i{
    padding:6px 8px;
    border:1px solid rgb(var(--world-accent)/.14);
    border-radius:999px;
    color:rgb(var(--world-accent)/.68);
    background:rgb(var(--world-accent)/.025);
    font:700 .32rem/1 monospace;
    font-style:normal;
}

.twin-search-wrap{
    position:relative;
}

.twin-search{
    width:100%;
    min-height:54px;
    padding:0 48px 0 16px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:999px;
    outline:0;
    color:#fff;
    background:
        linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.01)),
        rgba(7,18,28,.78);
    font-size:.58rem;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

.twin-search::placeholder{color:rgba(255,255,255,.28)}
.twin-search:focus{
    border-color:rgba(100,247,161,.26);
    box-shadow:
        0 0 0 4px rgba(100,247,161,.035),
        inset 0 1px 0 rgba(255,255,255,.055);
}

.twin-search-icon{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    color:rgba(100,247,161,.68);
    font-size:.72rem;
}

.twin-examples{
    margin-top:9px;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

.twin-example{
    min-height:32px;
    padding:0 9px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:999px;
    color:rgba(255,255,255,.38);
    background:rgba(255,255,255,.01);
    cursor:pointer;
    font:650 .33rem/1 monospace;
}

.twin-example:hover{
    color:#fff;
    border-color:rgba(100,247,161,.18);
    background:rgba(100,247,161,.025);
}

.twin-result-meta{
    min-height:22px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    color:rgba(255,255,255,.28);
    font:650 .35rem/1 monospace;
    letter-spacing:.045em;
}

.twin-group-filters{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

.twin-group-filter{
    min-height:32px;
    padding:0 8px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:999px;
    color:rgba(255,255,255,.34);
    background:rgba(255,255,255,.01);
    cursor:pointer;
    font:700 .31rem/1 monospace;
}

.twin-group-filter.is-active,
.twin-group-filter:hover{
    color:#fff;
    border-color:rgba(100,247,161,.18);
    background:rgba(100,247,161,.025);
}

.twin-results{
    display:grid;
    gap:7px;
    max-height:480px;
    overflow:auto;
    padding-right:3px;
}

.twin-result{
    --result-accent:91 234 255;
    min-height:96px;
    padding:12px;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) auto;
    gap:11px;
    align-items:center;
    border:1px solid rgba(255,255,255,.06);
    border-radius:19px;
    background:
        radial-gradient(circle at 0 50%,rgb(var(--result-accent)/.045),transparent 28%),
        rgba(255,255,255,.008);
    transition:
        transform .18s var(--ws-ease),
        border-color .18s ease,
        background .18s ease;
}

.twin-result:hover{
    transform:translateX(2px);
    border-color:rgb(var(--result-accent)/.20);
    background:
        radial-gradient(circle at 0 50%,rgb(var(--result-accent)/.08),transparent 30%),
        rgba(255,255,255,.012);
}

.twin-result-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:1px solid rgb(var(--result-accent)/.15);
    border-radius:15px;
    color:rgb(var(--result-accent)/.76);
    background:rgb(var(--result-accent)/.025);
    font:750 .36rem/1 monospace;
}

.twin-result-copy span{
    color:rgb(var(--result-accent)/.65);
    font:700 .32rem/1 monospace;
    letter-spacing:.055em;
}

.twin-result-copy strong{
    display:block;
    margin-top:5px;
    color:#fff;
    font-size:.57rem;
}

.twin-result-copy small{
    display:block;
    margin-top:5px;
    color:rgba(255,255,255,.30);
    font-size:.39rem;
    line-height:1.4;
}

.twin-result-arrow{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.06);
    border-radius:50%;
    color:rgb(var(--result-accent)/.66);
}

.twin-empty{
    min-height:160px;
    display:grid;
    place-items:center;
    padding:20px;
    border:1px dashed rgba(255,255,255,.09);
    border-radius:20px;
    color:rgba(255,255,255,.30);
    text-align:center;
    font:650 .46rem/1.55 monospace;
}

.twin-trace{
    padding:13px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:20px;
    background:rgba(255,255,255,.008);
}

.twin-trace span{
    color:rgb(var(--world-accent)/.62);
    font:700 .33rem/1 monospace;
    letter-spacing:.06em;
}

.twin-trace p{
    margin:8px 0 0;
    color:rgba(255,255,255,.32);
    font-size:.42rem;
    line-height:1.52;
}

@media(max-width:1100px){
    .twin-layout{grid-template-columns:1fr}
    .twin-constellation{min-height:620px}
}

@media(max-width:700px){
    .twin-head{grid-template-columns:1fr}
    .twin-constellation{min-height:700px;border-radius:24px}
    .twin-core{width:155px}
    .twin-orbit{width:128px;min-height:94px}
    .twin-query-panel{border-radius:22px}
    .twin-result{
        grid-template-columns:40px minmax(0,1fr) auto;
    }
    .twin-result-icon{width:40px;height:40px;border-radius:13px}
}

/* V13 — PROFESSIONAL TWIN QUERY SURFACE */
.twin-constellation,.twin-query-panel,.twin-trace{border-radius:32px!important}
.twin-example,.twin-group-filter,.twin-result{
  position:relative;overflow:hidden;border-radius:20px!important;isolation:isolate;
  transition:transform .2s var(--ws-ease),border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.twin-result::after,.twin-example::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgb(var(--world-accent)/.12),transparent 62%);
  transition:opacity .2s ease;
}
.twin-result:hover::after,.twin-example:hover::after{opacity:1}
.twin-result:hover,.twin-example:hover{transform:translateY(-2px);border-color:rgb(var(--world-accent)/.22);box-shadow:0 18px 48px rgba(0,0,0,.12)}
.twin-result>*,.twin-example>*{position:relative;z-index:1}
.twin-search{border-radius:999px!important}
.twin-group-filter{border-radius:999px!important}

/* V14 — Explainable query modes */
.twin-query-modes{
    margin-top:10px;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}
.twin-query-mode{
    min-height:34px;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:999px;
    color:rgba(255,255,255,.36);
    background:rgba(255,255,255,.012);
    cursor:pointer;
    font:700 .36rem/1 monospace;
    letter-spacing:.055em;
    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}
.twin-query-mode:hover{
    transform:translateY(-1px);
    color:#fff;
    border-color:rgba(100,247,161,.18);
}
.twin-query-mode.is-active{
    color:#fff;
    border-color:rgba(100,247,161,.24);
    background:
        linear-gradient(135deg,rgba(100,247,161,.075),rgba(91,234,255,.045));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.twin-match-reason{
    display:inline-flex;
    width:max-content;
    max-width:100%;
    margin-top:7px;
    padding:5px 7px;
    border:1px solid rgba(100,247,161,.12);
    border-radius:999px;
    color:rgba(100,247,161,.64);
    background:rgba(100,247,161,.025);
    font:700 .33rem/1 monospace;
    font-style:normal;
    letter-spacing:.045em;
}

/* V2 — shareable Professional Twin views */
.twin-share-actions{
    margin-top:9px;
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.twin-share-action{
    min-height:36px;
    padding:0 11px;
    border:1px solid rgba(255,255,255,.065);
    border-radius:999px;
    color:rgba(255,255,255,.42);
    background:
        linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
    cursor:pointer;
    font:700 .35rem/1 monospace;
    letter-spacing:.055em;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.twin-share-action:first-child{
    color:rgba(100,247,161,.70);
    border-color:rgba(100,247,161,.13);
    background:rgba(100,247,161,.025);
}

.twin-share-action:hover{
    transform:translateY(-1px);
    color:#fff;
    border-color:rgba(100,247,161,.24);
    background:
        linear-gradient(135deg,rgba(100,247,161,.07),rgba(91,234,255,.035));
}

@media(max-width:620px){
    .twin-share-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
}