/* ===== bundled: app.css ===== */
:root {
    color-scheme: light;
    --bg: #fff5f1;
    --surface: #fffdfb;
    --ink: #1c1513;
    --muted: #756663;
    --line: #efd7d0;
    --accent: #cf1f1f;
    --accent-strong: #a91414;
    --hot: #e1332d;
    --gold: #b8892e;
    --paper: #fffaf7;
    --stamp-soft: #fff0ec;
    --shadow: 0 16px 46px rgba(90, 24, 20, 0.1);
    --bg-dot: rgba(207, 31, 31, 0.055);
    --bg-start: #fffefe;
    --bg-end: #fff8f5;
    --header-bg: rgba(255, 250, 247, 0.94);
    --field-bg: #fffdfb;
    --field-border: #e9cfc7;
    --soft-panel: #fff7f4;
    --button-bg: #fffdfb;
    --subtle-bg: #fff0ec;
    --on-accent: #ffffff;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #141111;
    --surface: #1e1918;
    --ink: #f4ece8;
    --muted: #bcaeaa;
    --line: #3d302d;
    --accent: #ff4a44;
    --accent-strong: #ff7a72;
    --hot: #ff5d55;
    --gold: #d8a84c;
    --paper: #181313;
    --stamp-soft: #2a1d1b;
    --shadow: 0 16px 46px rgba(0, 0, 0, 0.28);
    --bg-dot: rgba(255, 74, 68, 0.11);
    --bg-start: #171313;
    --bg-end: #100d0d;
    --header-bg: rgba(20, 17, 17, 0.94);
    --field-bg: #211b1a;
    --field-border: #51403c;
    --soft-panel: #251a18;
    --button-bg: #211b1a;
    --subtle-bg: #30201d;
    --on-accent: #ffffff;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 1px 1px, var(--bg-dot) 1px, transparent 0) 0 0 / 18px 18px,
        linear-gradient(180deg, var(--bg-start) 0%, var(--bg) 38%, var(--bg-end) 100%);
    color: var(--ink);
    font-family: Inter, "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    letter-spacing: 0;
}

body.lightbox-open {
    overflow: hidden;
}

body.age-gate-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

input,
textarea,
select,
button {
    max-width: 100%;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

input,
textarea,
select {
    min-width: 0;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px clamp(16px, 4vw, 48px);
    border-bottom: 1px solid rgba(207, 31, 31, 0.22);
    background: var(--header-bg);
    backdrop-filter: blur(18px);
}

.brand,
.nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand {
    font-weight: 800;
}

.brand-wordmark {
    display: block;
    width: 260px;
    max-width: 58vw;
    aspect-ratio: 720 / 205;
    background: center / contain no-repeat url("data:image/webp;base64,UklGRkQtAABXRUJQVlA4WAoAAAAQAAAABwIAlAAAQUxQSKERAAARL6CobSM2VTp9rhsREeDfCnS1bc8SW++Hrj4fOj3EoUcj/aBJP0K+8z+Y/IKutbt9RfR/AvDvqbT2Utd52dCKs/fuMBPiTIgrEZEBobX3FgC8iBzwL3s1ZpX6rtq31qxbVM5K/6MwM8826qW2F5GpfxSdeDkxM2FLDhw6+82p5V9DtVrrp+x16iXujEzmOZ1Q/9qUeRH5F+GrMcbKrr86ERn8dGmhG4CwoT9mqNhaR/29FDM/ZP/TbC2BmUkRYXvb5DxPzITZnrkCFNNfSGmtL1Y2N88Sdze6QagIO2UkdYOaa6LXT/n6q3AzW2ut7NP6lH4MzNwyko/vvURna60MCY4pApQkVpG/hdJar7JvJ/b7ae1BEYqVd7t6iYhMMdVShJmQ+Ze4GmOesu/7XetWE6rr9m20McYA6tby6S/BfH0+Lw9rvezWWXvnOAHgejvPYgkbsEz6O2P5VErr51327e7GaEL+LHd6M03BHKGSgVEwfBpljHnKnrXW+mYujPJVpHmzvsnhPPQt5awfhKNX2bONngGAmVFROcZHzFKpwuDrA/Ra32TnkzGGkKuoyhmf8RVBzqFoFmNO76Ji491aL3ueLq1mJhQq5gQTAPW03wDob6EY79prvbpV9mxD06CuYlYAeq1vq8QHfM7AlinW+pR4S3Uzxhgve5601hqbqt6Ekv1Jeq111xYoY6zIQACYdqU4vFprZbfOemfv3DJh26u11kv5J0kqZuaUhAMHlnbTaX3zskOX4YwxDRQBUISNV6l7/Di9kejdmCYFqFmk3YXqjFllp+47cFrrFjuWv8QqodYEIOu6jeJQ64fs2tL1jN1zrQOImd5P0UwRFXEK0QxcRZpavdYPL/udRMQaY/QFb6nXSvpmRI7vNw/+EEFkQtkod6qjrJc9T5qYmfG2P+IrRZs3Gs0heIkkllqKCXVfslNnrSW8feel9kS44Z1/5Bj4jFfgSgj1jd/DpLVu8RFXqeucHZjwCRbnE8u+RtnQWRFr761mwsf0lUTk7boTBYoZ8XVX3aOaW+8NeiZ8VKU3mPSbVczhDFRfpO5F67YjAIzPOsqmd0Of6gJ10Vprqqak0Flr7y0TPvWyjcj0WZy11ko4AGBmBjAPIocKPmXFGNMogmLCp1abuY8yngBwRnIVkWMZ5sjAzEz4+N02rmX+KKHSZYuINGVqDc74S/brJgd8TnWTNoJ+Lfqp5AP6XHwzTcbNy5aOPkgn4iiiUrxNLyLyhc1Vz0x7U9zzw1qRIdXJtgM+4oMSZ8SWmPLn1H2tddxM356rnPe2SjJj3OZOn0EOgZJ7U6BYhthLnBzLlBeRZovRGGMknPbmU+dUV+d7iRE+o6YATEgmWjnHVhH5U4ZeiLHhKpm7u/rEIQWf46xtEKprrPkQFTNOsZ8GVVe5W0ox0wbfe8OcoDoNI9mvkcOHUgkWpkjtVUTOFGPu24e1ljKWjIl2xz6GKgMy1S1w9KEQA5i4RN3tPaW8iHwxgP7mHhJvMrCkmt0p2qTJgVpFzvjYN9Mgrpi15owfEUdlykvmMadLOLxhokmpDEdZWEUa+jTMHMtUN2OM/aZUl7eKyJkBrDlTDpaY0PscU53UmkUIn1UxMz+svVOitw17EZEpQ2UhOBGAzmc4qtG8zzkFn5ImbzQXfNRer5I8xmaRy6mGNAkVNAiXDDnmrH+Bz3jJ8ZL5RREvYi4xTnV5PmPM+cqR9+kkfqjh6FMwA4pXEZFTSknu1EQkh1Kjs7bgEMGa4ZoMnzi8T5NSOXj/Tmutb95Rt0p04sScJUPQicilLUKDTA6+Yq8MOWcs74d0L59kkXizSNy1sc7nSQOgv1wuzGX5q4g0Fb5SKtXsT/kS1ft36rXW+iYi4ihYE1rSXxHlpfAbABQzEMOupgqH/XVSJhm0l67tDzEvmU3wSviMKTJKqWuQXANXa64khw/QJwhgJoCuGdJsozhqrfXOTxEluadA+Vj2d/AqkiFBfpOHiHzVOKceiWZ36pbQ+iYyFTjaZpH8BoD6yZITACwVpAF6qda3kamSWms5imF8E3WzNhGdAIx76STfUbDmOQaoyhHwFc4xdfdy17rdmbRFh52tUnoEoHwGNr0WfAWLFJ4IqMSS62NH4CEhEcAAxruIUAHqDYn5g4yS0W7BNZQvudc6AInJGHPNWDLCWfY0JV7vcVk2kq/U1Vprm7zRl/EsxWdQFQJ8xDEAtRYhPlb5yRnzHMWWfSmt9SoishadS0RrfXNe4gPldFL6B6pfyqZKR2CNTD0B2N0U6/LksLMrBaPE3VJ0BNBlFbqsnwp8lR1JTAFQEj0TzztxdYbYvBnzw1pr/REA/SamOspXk1O7wVGxr/CV8839rewLWfxejgI1Jk4FSmttGgCjJAN0iUOdUeq3GeyLGjVLxSPUGpsA5iVjDdwfBShOgJedfNWRJnKtMRrzFBE5VhhjE9ad2Yli6inFpH4SF631krHETgTgJ2MJ5EsTkDhCvdcQoGyVzEkBnc37jR2xbLQUiXzFXlI8AYhNAKBiE5REJ5RIdNB6kSRlUKyz1n6jxhC7lrjImDhTREmuOwFQPjYES+q1UU3XlN0n4/P+UM45JyzLPwBrDFt2IuJir8BlSBPMiVNE/WTJBIDWmBCgfIyw5l1aTQCU30LOBd/MxLxEugQA9LFjylGwJFSVI9SSobgWVpFzRC1B9hAsBXjlyQHAT+IAjBJ1yFNQiCvjNzhFusQJgKJfEUcYN5EmWGMHVDkDD2utNRJtKo2SwqPIBXPB6Au+AHSJAXjFzoSH1reM3GWDCYoyJkQ7rVtAJRjgjaiaYu579pv8iIiLXYvkAGBMDBEvhe4EqDXmNPnYAVDoLgnk8hZy7wkYY4cYCCjoU1SwxBqMNY6Ispa99GVD1ncwSjkBc0wuvcQbhF0NVHMiIo6BV2xIRH9iTa/17RGj1ITwJ3bEzwbgbcacrmzKOgPAXKEFxsT3LTZgg7lW/LTR3UvmITVE5tRc4xAZG+U34YAiYwUqYanIAHxsWmLNFrDvsMTyj6R8ZAp4Tf2UOQtgOeD3jG2UiMihYPIJ+ZNzAJSvtcRkjTjapFu3aHZ0ZqwRaQGoRINrycWcEDToGrz20iWGNTUB15xOahKAMRGfEJ/roPOfgZREHQeLiDjNAGf0zMyILwhj7RaniPIxt6Qc92viDKjEdAe6mEPo844bQW0zV5nrdLGJMuQbQOyIwgsAVaK11lQJqUdKvk1qyDm1QO8jQhUoca3ms5x/F/5JIFhFZBJH6OpcvwF0TayJeRE55nRVjE9NVSYQ0K1ZryyXUL2vhEWss9/2zMzczyWv2FeWWmq0NUSE8FND9a7l0O9vTUl7q4Kin6wByavU6k5okGT4OsNmhDyU/cl6iYiT6N0YQ5VUcCgQc8s4XGv1eZ3POade1UqvdU4bXTR2RC8ZvIRat0xI7qJln/oaE4cCdUs0gXplON4b1zlUs9baO8IU1WkifGd+EoAl0jIyuYh9BddiTk3VOEEBfjIGpMeY26rPU1XwEzPGGEJ63GYAoHgRERkAFWNkSZHUYKiUmMQZ6BPM/LASnRBVOZTqPo0mZHfbSPu01kp4ALAzTkwAfOqeGAg/MeclM4El1aJI9qQQcXLKe8Ra5KsEciZk5DYZFFOKG8CLex6yfAUhYEmlcwopNicm7E7ltIiJHPKW3TjGXOZQpIx5DoDWrUKWZPSSM1bpqnBsTAz7g8+hPf3UkJaXPYjIF8qrdVXUFl1C6I0cY5smo292NDCgyv5UUDnK52AtA7iGQ3xOnXenJLPd6JhQxp+BLvYVsI8xugptxmETLCJyjiDvWnQmdFusqaHMbQW/DRuohGNm7h9ORAbgJ3bMGgBci86ccDZnqDVEVMIFfcynBsJ1AyVplzHGhh01GQMToGg0qxy6RPZ5P1MDAFdjzAnxYKpGedIAUD6SOZCaawyxnwyhVFfH3vchjGAVkYOqQRuotQSZlOO2QYYC8FsycRXTxF45521mkabkKpltjpM0oYJDkWTwreCLUqolilhjLjthABiLFBddtEZc+Zxpm0XkWKBqZU5VBMCc5yOOANXe8v7AxEZjT21QPdIUUIC1YCCkrL1/c8tgJDvJpsQ1oShDiYjjTdYKwFjmACxZncTPAFhnWGsbZQFWzKvIQNtRlaUE+IlNAAj5v3nHxBybFDP62FVE5JSHvsBXIOBZ9AVgjQ0EYEk4AsCriExPYy6Id+Il/G7fYy7rcgrVmjckXjE5MN/8IVBrjVfBUkWNRYccaQD2eei/tW6UYorczFPiZ9oO0TXRRJQvUtU6yXcUUanoEYDqRURck6VYCtRa9A2gK3EARkn+AbCKOGutPaCikviErbN84hjBYzdzgbSBQoVOolMLyphTXhwD6lriGACWggHAkjoA0FqfUH11t8C9QxO77uYVOyW+qMYJwBgTxy3FntanRCYA4JKBAuXz/qSG/qIJWzPrt6EY1xpyegok6rDEHCMsIABzQr71U5yUR7AUnBGZc5w/Ahgb3QJQhB32GZ3W+kaV5g1QawIHdDuN/gygS80xOdd6pWrHujXvEOPYpLVuO8LOcxYRkUOlcYulkpxbUswPES/BEjura+LrrTDWAB72wjcm7PvCTAC6CANYt5hFxNXqRHyVSetV4g3APtYAPjZQoNacCTtSPuWMQaYi7F2JyLAvqQUvmVnZAHqJOgKWmDsE+M0R2kMbw0NEJn3RusV7By6DUk2lUURcSZP6LRgrzbEBwByTc0T5DBc8NoJKxBUT3pgDH+unWcQh4bDBUHJMjQU/dZSPHQEoHxtUgDUHgPLbTAoflO8AsIo4ZtVPt52tZd1mDugk3gDAGnMUmTOEgKts+4VPqmxK6/4hbs2iDST2mzinsGY4QK1lZ+AaGxD+xGSgAHPKAeqx0eGjxFeRSWsjIpNvUnKoNNc4ZrwyBEC3ljgClti5QI6RLvatW0AtmzhNn4UTzloJHQWzyEVTpXEblTEAUEsRoHyCgrUEj++WmRF9WGvrTYQPqpiZH9ZK7oRQMaN61qvGUvAoo4fEh8gSWe+GYoUMVe8PAV3zfqzDVSrGNq0yZGDOQ1/ypXpJIfyZtNaaCbU3OAB4vZHCeDHGGCvVv3bCEV9DpaZA9QVHjIGz1p4iUUbV34HqOfuNN1UcPmX7ATs5RZbEMQdrQhoA4CXLETqttW6ZsP2vTIDydSZNgNoTM6E3xpin7HU3h8hvlVdqYACYUwMzY8+/IidgqSPBbT+9Db3s+ryXY8FX1jUlFKinMYbwhsoYBUDNNaYWm3c6XIeH5E97mU7YSxNZEo5yxpK375YaA1VjBpQyxqzyzpcGu0HUJ+QrpwuctfYbbz8TQb1qnPMUQTEzt9xb66z1Xt7QiYj11p6eLTP2mTNK2lEG1skYwkd8mQGYM5w1oe4JmdxrbRZ5YyMid3MyxlCHXUcOADqfIYccRYwP+RIH9F4mHbbMSF/vbJ429PLeA7T+JrxjxixJZ+/4yC93b1FZ3tnZ+9Naa8+AwhtHmgyndYsP/ZrMQCUU6d7EeS933TI+ogqOADo/MDPjI3f8tNaLOC5QzARFy/582693ZmbCx0x95E6Hq2QmmJmo1/rmxcu2wzMy9cHdGFL40B9JmbiXYoQ3Y8zzfveyx1b54ARttGYmfOwPwlDM13a21kt1G8pOnbNWAz/3lhkAM+OTB2d6u17rm1xW+YROnAmbFn/T4Ht/ipRiCkYbevmI001rzX0LsMJfNph2x9xrrb18QuudtRf89YNhL6zb3oTyEe86RN/iX3APFFEPa8V5ee+7nNYLR+cW/5AqmOopHS7y1k5E7NMYQ4R/1ojUUCa08uZO67XVWhP+cdUSnGMcf1hrvbyxs9beW2ZmAhQUGP+810Au6LQ2t6cXL289GWNMg3/vMSLWy1tP2mqtdU/4R+9i72mjB/wHVP4tBh0S/ju+djZxSPivqfwO7k9jjGnwX/a1jdNaa1L4z6tsmXXW3u3jzMyE/8w5xhtjLtzgP7heRETrm9Zg/J9QAFZQOCB8GwAAUJ0AnQEqCAKVAD9pmsJYs6q/o7KZ23vwLQlsJzsm7ZVrTMGcDG/GDSHfwA/ECDXf2D8ZvVwC2kHXTmR2wjxYoHfWe/8L3ufTj/at4R/deh+sbDBaP8B6IvIL9vkzRDn2v+cxUD13sJQL3MM8XzfrymRv3suVFj86NOrGOX762NUV25qm1J8vuAuqlE0/YK7tCThnvzRcfugTOkVta8fPTIOsRv0Z6zM8YcMLrGEdTGAUueDo4eCbtWHwtx1G+6+D9jwhCN7CKNw77l4vwBz/xMiNGmWT2q0zNMQEPVwT9WfcBbKUfkaeKmd7Qw2JnrNTXv2vrbRsp9OF+lRDVdgrT6M6hk51ABvyvd++ZKTpyjbOo991K+ObnwsPShztpqspB1ll/97eJ2UQdTEBFzVkGk6TnNsFPB02f2L6kzwLceY7XaLav+I1spE8Whbz5gumh5TNdCZvYzc312RW2s7DY49uD1D4MNHkwgrOqLgeaSv0vOpnLEd+rKnHfqWrwjgoe/1NQJURVqr/bGcum0l6RCDm29882OVjSnS8L6ZmkYyszw1olwWMqxUxve/q/APNqdycHlLbG1rEmtOPa2bnjTxc84KMJ5DsDjwZoFrHdeQUzVsDXSFpyAmiOYJKXmN5Q0JdePpfARhOG5+5LryqTqAVZZoLqlwYVv1XTeVXf1yLRLh0aB2sSgBhuiZvtgQCvzK+F5UI3YaPDKyefvX6yXXUKLugQZy6DBA88zmyaokOXsOq776sKSkuBByyBoIypfXqPapjGB7Bco3aNqc15+LGTIq6RBsYQ3cDwgWwtfkvrw2YGZsTrjIyVcH7D2b+5qS8JEZo0dOujFLZmaF5L0NBytK3h+9duI6uPJQNoYCcg7pDZDC6MSbo28he0AbUcHGb8N4htJMSbqAuvrngBoXaPt8VzSdl+aMY9dRu5PmcReLoPrL01tJoaBMD/xxB911932oWUafo7LOCtQFR0zyeBu19qkI/UgNCnPwh43YQLXgLiGQH2LblWdKFurrbyBTbM0JNk8wDh3sDfu5/iBamqye7HdGAjrDPb+NX/I0E7pEkMC12+zE873+hSnfN0vLGl5+toBxrdMdjwlW+3c/LDFY7/WVLWmlT9aVTEo2lbxPIdjO4nKxSEfozUqBq7rBny7aS6CA/aN6//bTB/oVgMkEFtpzywt1bk1szJgZ7Cq+6Gkg+nfWffd3Kc5MrZMgfG6hSTF0NzJSJpNUgjF8V02dgQ4oRuqsN22gir/vGflpfD/X7aMwpML88yWPMlG1KhgEag6zTEFv+zyqCdm8IOYQHKe+GH5t64/gTVfYQZ6U9aaXLXvopV3GxOzLsp8QFUbwHR91I6i3kvA21zWvCvtgPPMLp/fJ574zueJsfiQ4ZrYisXgHCLmRxryeIn3/DI3Cv11S7GAcnbtT+C4PFY9wKo7h9Lw/WYh/sLqp+VJDDzXWg6l99AgAWVA76nD7UYDE5ubLgAy/hUI6L6Z6/GwGc98UzmZRMhgHHG8//Qe4ebvzRdJNpVK7qtT14aluk9F9gy4doHktz0DdLYs5XheqEbONGLsW1ih1x090Cx6HAtjWbJ0wqw/dXWZ74oD1Dp0UF//ABVHu2pcHJ8vx8b2+rOzOeNvmgIvhQFL9XrlgWj5zBSilMaaXaBS89YvFF5hRTN8Q1hrDWGsNYaw0cAAD+9IGAAHXlt89Rn18Pf+hM0iC7WWHGs9hWu+YKZhwyNHPzElzlxkT2++lmZoFt3MIOkU1roG3Fg7kcOKtn7JYSTx8xXfOqBfUYhHF+7b3OdS/h22Og7ciOpnwga5+E+rPuiD2lQeFt9wh3MtZHjIJ+JeuUx8qnGlmspm68E+eFJ8vAPInTroLFsyVd/7FxN2zBiTn0VXWFuzY8g5evfVNnskvjoB5J60Y9HcyBm55odLx+5+kSF24/qSMUkNgYxSdJcWrRSq6hurxDaqj3vhKG3NIuTsIx3JHVWfZmbksocEMddEdwDdmQtD5BMOtSr7GDSGS2Fr5BzmMmpNcqSWTZUj5ZqqYwC3EP+WXnWccY6mn9yu06ybdOnGLU2a15TEN4BH3sjkSOljT5jc0O5q8oXwKN4hl8Y2JORtAwndchbOCQn7uHLL6SmTBrMG75q9C3EX9t4gfBDqVfbv1vLkhwakw90LpESKeGBLsye5AlXVnh/dbGYej9+mqRxiF8V18dLS2ARCIorWNjyIUhsZzZZmcvteJ+1enM4Z4zuvP9hoHLkizczc9C7GKQQ2eeLT41Txak2nBN2Mw6baYrTQQ3NHhYUwfrQdEMtwcjHtJZXLW7/Qm81B8cKUCxFYf9HrTPW9dmc7ymgqtcCgrO7C2zYs8NKsDYul19jQHqpyZX+GvSDKNatWxAxOSnm/yoOm73ULDFDS4ZF5nrxpGOcA8STzRybHGiNeIOxEAKzv2e4I/FJbx0CiFiX+glAsxXwTNPyWezPhl1Luh8qMdOjQDGBlBzRP7i40950+a7f0IC7EW91ETTyGNY4jcZLrOCjTs6IeNMB1LuuhRrKZjRqw8AAhKa+DaUqporWIV+Pl0IOmRtf2F1il5vbnLl3WUDyVUk7r6T0VsDJIGrOwQdu2uiHLDV/8aYEWITYTwJlC3Yd3xfjFjFAUkg408rE2K90Jr+RSfTDtRVIWArVMjs6UKPYviUKhZh7gDqZCgLACZDz6dYh5AB/LDxYnEI6QYSKy4O9KDTs9Vhwg+YbHZz9GKFqeml+AlH4aYqW52hTH3eTyheII+4UdGxwVtHR2019XTn15ADESI1asPxUPMXISrBufP2p8AjqqoViCn9RpHZbaQ9wYlZu61azDrIiXJTiCKvUpis8DCtR+CmNJX8FnbkGdsjlS2yecobrep8Q0OAAb57Z82e0Ta7HtPai9HkWStzHpx1GCjJif/OL9SWIuLAA1zNwVI3F8tlgGOzyByRxeVnpIZ2fDtI8d66WlAoHLW8F5MMshTANBBvKdsoPdIpUevKjPJqywxYqzl4jvGWLHD7A3P57CpnHDoUfNMXkx0knoWw7O+P2pwYCa6d3wxNk7nR4MVqywzM+k2mjxkVQYww/jFYgEMCJWbwP/fXRZ+OdZIXUqC7AXoqQnH4oAOzI+duml2pvmTpKbGJhmB2RWA4XT/55UskKfKnaceUFLD0eweWHJ/3cBzi41qJKVyEnzpiJZHlyROPYgurBwEho7kRoB2Brl84Mu2DheWzHZgrnj8S9ltJ9lw9Zl/wXM6Nc774uDd6+GxLgUnuy3CMVdGOU4yoLn/4OWG0o9S00ZbPSeZifNekGxxWHkpffWfzrhEME0m+pbJq3plAYhiqUxRwXKBNyKK2nC36btKalYMnaFdRSb9jQXfS7OrufRmgJye2FQ8NTXPCKSqfJnnx+I6PqWqEC8YpHyoANZeIYp1zz26bb8GeIPFr4WECzW3GnbuDWGo4rmUj7sc2bTR10NrVPL0zdCAwWj+E8SQGoAfyN/U/oQbrqaHpbvmhtfL61mukt4AgHIkxZpzE4MBeOpFQlnuBKp0Yzu3DRNTmK6IydqW/uIplIjX+XNCZbRuVKQUuYecrM4qRYPKU2sIq9aAm6/6WfWisVi1GoX3rTBzIJGQVFBhpNw4ALOEHZfpgRs4wyyyBiT+8lwuxmYBFMLIjM2miUDqR78B6JPX59zS+v39/Ts71gOG+0x7+2uM/GbzzGs74Qa98put/3zYcvAa+no8VDLPM3oH/01MXbgyRDjWLmLGnwLs9qCc4rtbolXmBO5W4ywW6HLKVCGGDlMUMDqX3aaKimFGPf/LiLeYAkjPOr7cQK9mkpussbow4l8LqUPoLk+rUZgkgVa82iOu6I3RiIB6Btb0duFX9axCbGzo3xwMBkT+/HZw1/Qfw1ioyqX9G2Rj278lI6L7WgQOFBdtTIuL6bU4EAXTh+P4Pds9HPjMHazfWPKdKD0LVZFaJlrbx8Ga8GDjG24V/1rGSgbfhQlbh1aTdXBo4qPVa3IfEmXmRHK1EdVcfGPH0pgHKyl/2L+4//rDZ2QyO/8bv9TUnxcmYHXXkHQLq4qBvKYedaIdEbvWrPHbjPCvL2DxZjYHFWKtnqqWvoWzPNyDaLZFMV1mTzFMy9lerwzet0rTnpzNkBJvBKORXrOqtJ7540JZSQKdEKRwKgd32Gliep8I1NVGUcJzsksHkXD02hmworZ0f5/BaJo24Mkq8L5onG/gFQreoSyXH6bU+ZZqJkVEClHFnr3IKp/ULUYCXQK60ydYF05OOpwatu5ezHC4hrM4qVBzmWBVjp/8QKpd3ik5LM5e3GvfgOG22Rz+lOySvGJ6hx9s8yfowRwRgyQuvLa7+MzUWNxKF3LEmlBMSZUaUX24vyqeD1RJV7phptrXTjIb/7MU8tRj0P6rC3/szjkb6JhhlmXYMuDIwzGqDt8G9Vt3mpayq6bfFpycWpZI6gg+9BFqzpcr8AkYLnakiqUtLE8niTyKZWs2ofzgHaRDsc2vvU2gE2Csb+HXKtHMcDRfidgpj1MI+ih+p62t2sXmTnU92SJ5vzeB6jOihlB3aB+czP2IFNotnV4VyA1n2WtmIJGR12zwX+NvcyYUIhulrlhBTTVG1ni0JL1hkBqBH3/1GFelyYPuOGyj0BMSuFsex7pi7rusdgwqjKo1ts808pRZrw/t76RHgCgpJXqE8JFd3llDWEsP9NFjBRaMRsj8AiZYpcxbKJBKdAGguAd8xZpzPOup6PzaO+qBcpnhwMp6YxWrS+s/5GXLUmX9BPVlmxZFmNM6CZ+dAJZd/xuCtuUScVt6Bw5Z/k8JdZSTE63P+yoazO597PV0ALtzbgSgIer7obNPPPfpiYUF0LGqueuOVHv6ynYEqTAkr7WEpv6zHTpWLi03UW4unKa9UNXvY2Gc7qLP4i4C9oO36qN/j+IE3wmNThP6enc46uQpse36Ax2A2TpLq0Ipv4FbfjZSfnSQqneMPtVz0fI1p7vVCnMH7GRIrvk6dyDdWRbsAEscB0xKM/8lS2E5aDA24FZrncK85osref0T8c58AfZAW0YxiqjMNVq3fGgs7SZY0/k0gB+qnJDe2pd1aAizqHC1q+nutu2enKMNgYL2r6h2UFor/DR/mFvX1K1OYnPN0P1YuUs7WKygtWY5DirpREngS0L84K3F4LOFptPk2dQiBZtgsdP7qFiM32LEr2W3+UijbOPzK5I5SoObeW2yy04gh7BhKeOwNYa2+S6Reoqb1VvlBuKuNxzcW9UWIurCriy8FWwq2b3bp++kieFbF7vnovqkxdMkF5V+f4sGoRlqjJ6IMzkkRxhTDEN6UjnAjRx0+k544yB7nrLU0NS2JX1JamUcOiY/+lsKlAQY9hlV83ViMESPsOVHPm83BIje/TCZcPFnE6mhbmMEAf00S0b8TBZKOimu0deIakpT+6bB5RQ7QqY4uEJ6kNgM7PVB8lh68pbIq5hC118gjFBh7t3JnmVv96vSFxefmCQn8uGGwjFTMcb3Vq9k8voF/r+VEtSyBQ5UGXhGr+TovM14J5lSLf3OIMWLi/GmjOdeQFxGpTGzr0/ih4WwNxI4GbvO2h7Uwi4Ck+RFJqzVj0BzSa/WF7Gc0iHCNfggohqUQgVE2GlorLC+XC7VSpEBxzndUA1XeYI9GVkHx7nV9Y2thGvlYroKohJLtNkqYfkdZyxouj5EcJyGQK0783uHn8HHujnuVbfsIHLe+WXF4+SmdDpobTIG/i4r7c3Pl1bnaTglkzIviWdyQNX47Sj8eZxkhSHHCb0y0yeOcH+KgQKE1ZVBtghEcZNQmCGI4U3aEqcxhIUyK5QoY+ghH8DsZ45RwNAw3VYiec/Z2OrJRk5PREwqD52P4EF+SiIlJVI3+5ES6098YodfP59VNBnm4Asp5c2YCJlbFd9rz2/AZ2QFxsZ8GfWOAmySBBW8XJSS+Hk2yPeERb/GGCWdpAGFGuvjUM8qDTT1icvUKOx55r8Lr//5oPsMBTy/YDwvBEBLJiyA1XLKhUuftJ+wN9dQDH5KAJp+wIRUZ2gQt4AFILFKRLvQJ2y3nfUYqC2bZ5Uh1Z5RXlWEiaM+KpBufzTBLQHu78KRmYVpJexI+ALaG8sXlWroVe0xI8MEuvDJrkORxxpzURLkd1EVPGheHlSWk+fVEcuOvFR3lJKZvK0+Y0z8MCjejyFZ4ZkBK9UOlPkeTo4b/QTdLnsxGCzPKiv44KCka/led3ePFheCGQFBeD2DsnCtapfDebpxZrsC/oZDlcULOvoEMXRb5HHDhv5b7KHT13S3EGkKAYhxM3GVii0ZLRRE1nUJntyw8l2ZRSgSMo1ZwmJfY+MIf3agAjcex3VtwgfD+5o5OZ6UNk49mEaCdW4NMSHCWm2Jq8NcJfL7NGD6wa8KSSHJIpq4+CC08WmhXg4Y3GJRkJIYDIP3zG/R9OZ+xLHZWMIYUiCIJNQ20isW+75A1fZt1EHlbqORDq0uk0AJyiuX6BED9qYmUhAHCyeqZCIpv/8o2nTe6G/c81OLYgFE3txCDcHOTikNyuzJ97RySnkpRWCCSkshpgDFEcb71tJJVvUMgWtjrA9ohB97iEf+ezSnR7An/+tTIBggvCT8Ac3QarTIdVGSRT7mFdy1XLLoRtLRI6O5Ci/JWpmLAbNFttYLueO6y78ymK9dLIsS2Vsb0TlFUS8ywZvULIgM0DYc83WbkEJ+ukba2nTLFk4ic2cCSR8KCyuWBPm/xCKZRmZsw+wkg4kU8SA/m2uWLoBsAqFp/TTXb8x8cVOjxFC0whBaDM44vkYnFmMn5Jpgg+87eCpysLEed9zgFZ00sQzbgbD+SR+Hs1YPGpFZ/ubDbuAsfAuql4w4mT7Ea8WAoPSsNhNDfTQ8GUu1m90Hry6Vb3yjZ1pulBs/ipv/zFsF0UUFfo82YjHnMUY9CzLK81++lJEal+sSSDLJQjR5VQl+VGLkhYusr22eYoMlnOvJGw90i///TnIyR/oebzxkgyXaEDHBoZMUsbHsVJEsixXPnwoLbWHVxl6BBD7CFnOLoSe3Toq4I7Q4p8x57A6KtvyLfALQf4dyQgi4MkEAxh5TFDhxRX+0alZOC7FOp4LbixD2pbJdyikcnugyNTHmST5RaFlKYoHDN5NG1KX4PmllllxBYoZrZh76k4KDkUyCM41B5C7v+W6W8W1LDL6/HZtWpeJnD34T8O6tp0JSHd9cSpZdsFTHzCbIhp4W0Q0FWCFOyDCg4UXtRDu+aV/LNKj3aZQOOBQeVTowkBOzBjDYzIIvPr7iLbE5MRCIdtLmBye5aTBQ8p8TH8dRlJbc3ryH8XAcr01UVbqkkTMG0mFNT3PV2R1OEESt4FS7Lr+YctTgj2+2jGvckAxgNdPBa7uv30GvfchSVcVywpVlVnIKTz9mEdcgi9KZFks3l6hqPG9ZuzfLoaWBbVzI9gNWGwl50bDO0RB4cKAYu+pMpfgLpZtAC7iD3Exd+V512X6no04YjQOv7YlvbSs9eBVA35jlcvnBEPDEUg8z3tdt55A/QVH8OCcD5CIP6c7XeTR2G0Flk1i47nMEOGtmFtQ2bMUjO6+olPipbIaJdf79odHd7gmeej2qziRsIUNBIlr0v1uK0oFyXqUpI0mqTKba5dPxfXnvzxkrOqh2AIa2uMQmNx17jMQPiINHb3RH3okaAHR5LaVfhZL02sGJL+7Jyl5znv7PiHwg1V1iYCmzIHWBJjGDv9pegmw/acsmt4vTVoN57jp+8qiUOi6uGKdkSqstvsT4qXw3VBwFbJKUVo8IPoBGqI+VQVKwMJx0/uWgXp+tOJX5OKXYgrcZoKz7zQU1vLy9YGznBBC/9Hlz8aZ+E0j7Iyqq+8w8F+/F1ECKnhRVA5qoamSjVJKBr7dnwArzJ0W9ht4w41TAAgWEtaE+p0K0+l0St0S6KFdOrvWKayG/4mA44cvrhec/+IdVLwE73mDT2e/u+Dfxul2JTew0YssiJ9HjEvPH8LkgFG4agI7u/5WRIzt7jQmj/NiYQVtAjc2USdWev5kesnG2lxZqQGBBNw+cMJEKUdrdiMYd4NNp7/Ix1EdsP0fv7mo76tPfhBqsUbDylM1rEBEcpGSK6LD+4Nzm6VA6k1VqVSbzNfFIkRVCZAFNUk5e/wxcgY8Le/CkIsaVKjA9CewqhiN0BSJ40rHNcQdGPAT16XAdRF+xL2UE8a54Ja065Ic5JJp94yc9dhgaKxNYM8TM04IgCCGvp1dkxGORCNn11sp4JMYsrShsIFeyp0tSTdkpzAkdD3D962+c9LA1Y4+iGZKqA/YQ5lkqncDDFp5lWS1T1pMOQhlwCYEuo0ZQzH0oCxUKKO0SdfZ/JjcwFzGuq8F3WxuZtOkWJNX3EeVHrHLAA4v5wiM8xV5PEBSZtfo0p/UYBDJ/p7tbmIcVddCKyHrrZJgP4EgglYW3lxtTdCWrp6dBLXmmJhTl9W0csCHsnMjepr5jc1bfjfgVWE2oSbGMzOC4aQ/kMR7ogVTtSEuXgrW0E2ViZlT7Y0UjScR/bAsEuv3garGWZG1HHNlPowrBIXdZCYjawcwdcvslkikD+945yGqKXpQXi1VU/sI8DW9Nsmi3jLqVuoJAv58wuAzSbaVtFc7o0ynZTpQPuPA0z1enF/3tQ46qCfv0hm8LqUzCTTXOMurC/UXGHJWtigKoBRUIsmgDzC/3l9R6Ml4ff65/lM2kl/NhxKFnsNwuP4Hohn0LG5TdsKDo/r8o4Bv9fwbOWcxErarzfkTZeD90WQ3iFsdsPMJO9Kc6DT9jOmvNGe8q4f1VnOcVPZEANwpHuoQ731SoOp4Y9Oo6koKqic3W9tTcHRImiKxEmuz950BLCD4ZlckVlT7xPNQjY57eawGXykI+fPq45ATfpEXv08VuxIBqCr/1bNJayphutbYWgN1HCO1LaQtcli01S8lYW2B8vpkGyyJGtbZjiTiUo+Oijt6R8XmFo542ZeQISFDD9nDU/8FuH/qGBqde/D03CujNZJ1+d4FAAWvlS2Rwek6k/lkTTYSWEDUve3gLSeMlbwBuy9u8BB99+yXPKl7SlClXh1LQaRz1biWLJVNFnu9lbpE/hGUuyGb7Wk5F5w8Xp93kSnVfZIMe9MMmJaKckAlE5TyZa2tczND4Bs5g6VHPrHPOaklQNudcB9wXWvq+1yiFVZMa15ZAaHbP0EvTgHutqEtZgZtzzgpI5EX6+1WrpJaWu4K615DcKmenSU3JO0CP5lgx6ylxq1ShRtbWCIhcNmJfUEkJuOhzmn1rdVKLriQRQ2RNhOQB5Pi3OSOVQorav4ODEYNdD4WhwyhNwAACcAiAcCGoCjgnhAAAFxgASR7gAswCLNDulmlZYByI9cAAAAAAAAAGyAAAAAA==");
    filter: drop-shadow(0 7px 18px rgba(207, 31, 31, 0.14));
}

.brand-logo {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(207, 31, 31, 0.18);
}

.brand-mark {
    display: none;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 8px;
    background: var(--ink);
    color: #ffffff;
}

.nav a {
    min-height: 36px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 14px;
}

.nav a:hover {
    background: rgba(207, 31, 31, 0.08);
    color: var(--ink);
}

.theme-toggle {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--button-bg);
    color: var(--muted);
    cursor: pointer;
}

.theme-toggle:hover {
    border-color: rgba(207, 31, 31, 0.32);
    background: var(--subtle-bg);
    color: var(--ink);
}

.theme-icon {
    grid-area: 1 / 1;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.theme-icon-sun {
    opacity: 0;
    transform: scale(0.82) rotate(-18deg);
}

[data-theme="dark"] .theme-icon-moon {
    opacity: 0;
    transform: scale(0.82) rotate(18deg);
}

[data-theme="dark"] .theme-icon-sun {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.page-shell {
    --page-content-gutter: clamp(16px, 4vw, 30px);
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 64px;
}

body:not(.admin-app) .page-shell > .filter-bar,
body:not(.admin-app) .page-shell > .search-bar,
body:not(.admin-app) .page-shell > .home-tag-strip,
body:not(.admin-app) .page-shell > .adult-site-notice,
body:not(.admin-app) .page-shell > .result-summary,
body:not(.admin-app) .page-shell > .home-grid,
body:not(.admin-app) .page-shell > .empty-state,
body:not(.admin-app) .page-shell > .liked-posts-page,
body:not(.admin-app) .page-shell > .policy-page {
    margin-inline: var(--page-content-gutter);
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: -4px 0 22px;
}

.filter-bar a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
}

.filter-bar a.active {
    border-color: rgba(207, 31, 31, 0.32);
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 10px 24px rgba(207, 31, 31, 0.18);
}

.filter-bar a.active:hover {
    color: var(--accent-strong);
    background: rgba(207, 31, 31, 0.12);
}

.filter-bar .push {
    margin-left: auto;
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
    /* 選択中ソートチップ(丸ピル)と誤認しないよう、作成アクションは角形+「＋」で分ける */
    border-radius: 10px;
    font-weight: 900;
}

.filter-bar .push::before {
    content: "＋";
    margin-right: 4px;
    font-weight: 900;
}

.filter-bar .sort-start {
    margin-left: 0;
}

.adult-site-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -10px 0 18px;
    padding: 12px 14px;
    border: 1px solid rgba(207, 31, 31, 0.24);
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.adult-site-notice strong {
    flex: 0 0 auto;
    color: var(--accent-strong);
    font-size: 14px;
    font-weight: 900;
}

.adult-site-notice span {
    min-width: 0;
}

.adult-site-notice-summary {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
}

.adult-site-notice-chevron {
    display: none;
}

@media (max-width: 760px) {
main:not(.post-stream-shell) > .adult-site-notice {
        display: block;
        margin-bottom: 12px;
        padding: 6px 12px;
    }

main:not(.post-stream-shell) > .adult-site-notice .adult-site-notice-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 38px;
        cursor: pointer;
    }

main:not(.post-stream-shell) > .adult-site-notice .adult-site-notice-chevron {
        display: inline-block;
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        margin: -4px 4px 0 0;
        border-right: 2px solid var(--accent-strong);
        border-bottom: 2px solid var(--accent-strong);
        transform: rotate(45deg);
        transition: transform .15s ease;
    }

main:not(.post-stream-shell) > .adult-site-notice.is-open .adult-site-notice-chevron {
        margin-top: 4px;
        transform: rotate(-135deg);
    }

main:not(.post-stream-shell) > .adult-site-notice .adult-site-notice-body {
        display: none;
        padding: 2px 0 6px;
    }

main:not(.post-stream-shell) > .adult-site-notice.is-open .adult-site-notice-body {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
.adult-site-notice-chevron {
        transition: none;
    }
}

.age-verification-gate {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    place-items: center;
    padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    background:
        linear-gradient(135deg, rgba(207, 31, 31, 0.26), rgba(7, 6, 6, 0.94) 42%, rgba(7, 6, 6, 0.97)),
        rgba(7, 6, 6, 0.96);
    color: var(--ink);
    backdrop-filter: blur(18px);
}

.age-verification-dialog {
    width: min(520px, 100%);
    padding: clamp(24px, 6vw, 40px);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 96%, white);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.44);
}

.age-verification-site {
    margin: 0 0 12px;
    color: var(--accent-strong);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
}

.age-verification-dialog h1 {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1.15;
    letter-spacing: 0;
}

.age-verification-copy {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

.age-verification-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 24px;
}

.age-verification-actions form {
    min-width: 0;
}

.age-verification-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
}

.age-verification-button-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.age-verification-button-primary:hover,
.age-verification-button-primary:focus-visible {
    border-color: var(--accent-strong);
    background: var(--accent-strong);
}

.age-verification-button-secondary {
    background: var(--button-bg);
    color: var(--muted);
}

.age-verification-button-secondary:hover,
.age-verification-button-secondary:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
    background: var(--subtle-bg);
    color: var(--ink);
}

@media (max-width: 520px) {
.age-verification-actions {
        grid-template-columns: 1fr;
    }

.age-verification-button {
        min-height: 52px;
    }
}

.search-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin: -8px 0 18px;
}

.search-bar input[type="search"] {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--field-bg);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
}

.search-bar input[type="search"]:focus {
    border-color: rgba(207, 31, 31, 0.5);
    outline: 3px solid rgba(207, 31, 31, 0.12);
}

.tag-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: -6px 0 18px;
}

.tag-strip > span {
    margin-right: 2px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.tag-strip a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid rgba(207, 31, 31, 0.14);
    border-radius: 8px;
    background: rgba(207, 31, 31, 0.07);
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 800;
}

.tag-strip a.active {
    border-color: rgba(207, 31, 31, 0.36);
    background: rgba(207, 31, 31, 0.14);
}

.tag-strip em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
}

.result-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -6px 0 18px;
    color: var(--muted);
    font-size: 13px;
}

.result-summary p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.result-summary strong {
    color: var(--ink);
    font-size: 14px;
}

.result-summary em {
    padding: 4px 7px;
    border-radius: 8px;
    background: rgba(207, 31, 31, 0.08);
    color: var(--accent-strong);
    font-style: normal;
    font-weight: 800;
}

.result-summary a {
    flex: 0 0 auto;
    color: var(--accent-strong);
    font-weight: 800;
}

.liked-posts-page {
    display: grid;
    gap: 18px;
}

.saved-content-summary span {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--soft-panel);
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.saved-posts-section {
    display: grid;
    gap: 14px;
}

.liked-posts-empty p {
    color: var(--muted);
}

.eyebrow {
    margin: 0 0 7px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

h1,
h2 {
    margin: 0;
    line-height: 1.1;
    letter-spacing: 0;
}

h1 {
    font-size: clamp(28px, 4vw, 48px);
}

h2 {
    font-size: 20px;
}

.stat-strip,
.metric-pair,
.metric-list {
    display: grid;
    gap: 10px;
}

.stat-strip {
    grid-template-columns: repeat(3, minmax(82px, 1fr));
}

.stat-strip div,
.metric-pair div,
.metric-list div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    box-shadow: inset 0 -3px 0 rgba(207, 31, 31, 0.06);
}

.stat-strip strong,
.metric-pair strong,
.metric-list strong {
    display: block;
    font-size: 22px;
    line-height: 1;
}

.stat-strip span,
.metric-pair span,
.metric-list span,
.muted,
.meta-row {
    color: var(--muted);
    font-size: 13px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 22px 18px;
}

.trailer-card,
.panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.trailer-card {
    overflow: hidden;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.trailer-card:hover {
    border-color: transparent;
    box-shadow: none;
    transform: translateY(-2px);
}

.cover-link {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--stamp-soft);
    box-shadow: 0 10px 26px rgba(24, 20, 18, 0.08);
    overflow: hidden;
}

.cover-link img {
    transition: transform .18s ease;
}

.trailer-card:hover .cover-link img {
    transform: scale(1.025);
}

.cover-link img,
.age-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-placeholder,
.large-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 260px;
    place-items: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(207, 31, 31, 0.16), transparent 23%),
        linear-gradient(135deg, rgba(207, 31, 31, 0.14), transparent 48%),
        linear-gradient(315deg, rgba(28, 21, 19, 0.09), transparent 52%),
        #f3e8e4;
    color: rgba(23, 23, 23, 0.58);
    font-weight: 800;
}

.cover-placeholder {
    gap: 10px;
    grid-template-rows: 1fr auto 1fr;
}

.cover-placeholder span {
    align-self: end;
}

.cover-placeholder em {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    border: 1px solid rgba(23, 23, 23, 0.08);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 58%, transparent);
    color: var(--muted);
    font-size: 22px;
    font-style: normal;
}

.card-body {
    padding: 9px 2px 12px;
}

.page-count-row {
    display: flex;
    height: 44px;
    align-items: start;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 0 8px;
}

.page-count-badge {
    display: grid;
    width: 58px;
    height: 42px;
    align-content: center;
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 7px;
    background: rgba(8, 8, 8, 0.86);
    color: #fff;
    padding: 5px 6px;
    text-align: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.page-count-badge strong {
    font-size: 17px;
    font-weight: 950;
    line-height: 1;
}

.page-count-badge em {
    color: #69c8ff;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.1;
}

.page-count-badge.has-next {
    border-color: rgba(105, 200, 255, 0.62);
    background: rgba(2, 17, 29, 0.9);
}

.card-like-count {
    display: inline-flex;
    min-width: 48px;
    height: 32px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 92%, white);
    color: var(--ink);
    box-shadow: 0 8px 18px rgba(90, 24, 20, 0.14);
    line-height: 1;
}

.card-like-form {
    display: inline-flex;
    margin: 0;
}

.card-like-button {
    position: relative;
    appearance: none;
    font: inherit;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

.card-like-button:hover,
.card-like-button:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    box-shadow: 0 10px 20px rgba(207, 31, 31, 0.18);
    transform: translateY(-1px);
}

.card-like-button:focus-visible {
    outline: 3px solid rgba(207, 31, 31, 0.26);
    outline-offset: 2px;
}

.card-like-button:disabled {
    cursor: wait;
    opacity: .82;
}

.card-like-button.is-liked {
    border-color: color-mix(in srgb, var(--accent) 76%, var(--line));
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent-strong);
    box-shadow: 0 10px 22px rgba(207, 31, 31, 0.2);
}

.card-like-button.is-like-bursting {
    animation: post-like-button-pop .42s cubic-bezier(.2, 1.45, .36, 1);
}

.card-like-count span {
    color: var(--accent);
    font-size: 15px;
    font-weight: 950;
}

.card-like-count strong {
    font-size: 13px;
    font-weight: 950;
}

html[data-theme="dark"] .card-like-count {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(8, 8, 8, 0.78);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.36);
}

html[data-theme="dark"] .card-like-button:hover,
html[data-theme="dark"] .card-like-button:focus-visible,
html[data-theme="dark"] .card-like-button.is-liked {
    border-color: color-mix(in srgb, var(--accent) 72%, rgba(255, 255, 255, 0.2));
    background: color-mix(in srgb, var(--accent) 18%, rgba(8, 8, 8, 0.86));
    color: #fff;
    box-shadow: 0 10px 22px rgba(255, 74, 68, 0.2);
}

.meta-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.meta-row a,
.post-heading .eyebrow a {
    color: var(--accent-strong);
    font-weight: 800;
}

.card-body h2 {
    display: -webkit-box;
    min-height: 2.7em;
    margin: 0 0 7px;
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.card-body h2 a {
    color: inherit;
}

.entity-post-grid .card-body h2 {
    display: -webkit-box;
    min-height: 2.7em;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.card-character {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
}

.card-character-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.character-avatar-stack {
    display: inline-flex;
    min-width: 30px;
    max-width: 54px;
    align-items: center;
}

.character-avatar-stack-link {
    display: inline-flex;
    position: relative;
    flex: 0 0 auto;
    border-radius: 50%;
}

.character-avatar-stack-link + .character-avatar-stack-link {
    margin-left: -8px;
}

.character-avatar-stack-link:nth-child(2) {
    z-index: 1;
}

.character-avatar-stack-link:focus-visible {
    outline: 3px solid rgba(207, 31, 31, 0.32);
    outline-offset: 2px;
}

.character-avatar {
    flex: 0 0 auto;
    display: inline-block;
    position: relative;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border: 1px solid rgba(22, 22, 22, 0.08);
    border-radius: 50%;
    background: var(--surface);
}

.character-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translate(var(--icon-x, 0%), var(--icon-y, 0%)) scale(var(--icon-scale, 1));
    transform-origin: center;
}

.character-avatar.small {
    width: 28px;
    height: 28px;
}

.card-character .character-avatar.small {
    width: 30px;
    height: 30px;
}

.circle-avatar {
    display: inline-block;
    overflow: hidden;
    border-radius: 8px;
    background: var(--surface);
}

.circle-avatar.small {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(207, 31, 31, 0.22);
    box-shadow: none;
}

.circle-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translate(var(--icon-x, 0%), var(--icon-y, 0%)) scale(var(--icon-scale, 1));
    transform-origin: center;
}

.circle-avatar.fallback {
    display: inline-grid;
    place-items: center;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 950;
}

.character-avatar.fallback {
    display: inline-grid;
    place-items: center;
    background:
        linear-gradient(135deg, rgba(207, 31, 31, 0.16), color-mix(in srgb, var(--surface) 88%, transparent)),
        var(--surface);
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 900;
}

.character-line,
.post-character {
    margin: 0 0 8px;
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 800;
}

.post-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 9px;
    border: 1px solid rgba(207, 31, 31, 0.18);
    border-radius: 8px;
    background: var(--soft-panel);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.post-date span {
    color: var(--accent-strong);
}

.post-date time {
    color: var(--ink);
}

.post-like-form {
    display: flex;
    width: auto;
    margin: 0;
}

.post-like-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    border-radius: 50%;
    background:
        radial-gradient(circle at 26% 22%, rgba(255, 98, 98, 0.22), transparent 36%),
        color-mix(in srgb, var(--accent) 8%, var(--surface));
    color: var(--accent-strong);
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(24, 20, 18, 0.11);
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

.post-like-button:hover,
.post-like-button:focus-visible,
.post-like-button.is-liked {
    border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
    background:
        radial-gradient(circle at 26% 22%, rgba(255, 98, 98, 0.34), transparent 38%),
        color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent);
    box-shadow: 0 12px 24px rgba(207, 31, 31, 0.18);
}

.post-like-button:focus-visible {
    outline: 3px solid rgba(207, 31, 31, 0.28);
    outline-offset: 3px;
}

.post-like-button:active {
    transform: translateY(1px);
}

.post-like-button:disabled {
    cursor: wait;
    opacity: .82;
}

.post-like-icon {
    display: inline-grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border-radius: 50%;
    color: var(--accent);
    font-size: 27px;
    font-weight: 900;
    line-height: 1;
}

.post-like-button.is-liked .post-like-icon {
    color: var(--accent);
    text-shadow: 0 6px 16px rgba(207, 31, 31, 0.24);
}

.post-like-button.is-like-bursting {
    animation: post-like-button-pop .42s cubic-bezier(.2, 1.45, .36, 1);
}

.post-like-button.is-like-bursting::before,
.post-like-button.is-like-bursting::after {
    position: absolute;
    inset: 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    content: "";
    pointer-events: none;
}

.post-like-button.is-like-bursting::before {
    border: 1px solid rgba(255, 78, 78, 0.5);
    transform: translate(-50%, -50%);
    animation: post-like-ring .58s ease-out forwards;
}

.post-like-button.is-like-bursting::after {
    background: #ff4b4f;
    box-shadow:
        0 -25px 0 -2px rgba(255, 91, 91, 0.9),
        20px -14px 0 -3px rgba(255, 91, 91, 0.78),
        22px 13px 0 -3px rgba(255, 91, 91, 0.72),
        -20px 15px 0 -3px rgba(255, 91, 91, 0.68),
        -22px -13px 0 -3px rgba(255, 91, 91, 0.7);
    transform: translate(-50%, -50%) scale(.2);
    animation: post-like-sparks .58s ease-out forwards;
}

.post-like-floating {
    position: fixed;
    right: max(14px, calc((100vw - 1180px) / 2 + 16px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    justify-content: flex-end;
    width: auto;
    margin: 0;
}

.post-like-floating .post-like-button {
    position: relative;
    width: 56px;
    height: 56px;
    min-width: 0;
    min-height: 0;
    border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
    background:
        radial-gradient(circle at 24% 20%, rgba(255, 98, 98, 0.34), transparent 38%),
        color-mix(in srgb, var(--surface) 86%, transparent);
    box-shadow: 0 16px 34px rgba(24, 20, 18, 0.2), 0 8px 22px rgba(207, 31, 31, 0.18);
    backdrop-filter: blur(14px);
}

.post-like-floating .post-like-icon {
    font-size: 29px;
}

.card-caption {
    min-height: 3.2em;
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.tags span,
.tags a {
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(207, 31, 31, 0.09);
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 700;
}

.tags a:hover {
    background: rgba(207, 31, 31, 0.16);
}

.card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    width: 100%;
    margin-top: 14px;
    border: 1px solid rgba(207, 31, 31, 0.22);
    border-radius: 8px;
    background: var(--soft-panel);
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 800;
}

.card-action:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 720px) 320px;
    gap: 20px;
    align-items: start;
    justify-content: center;
}

.post-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.post-heading h1 {
    font-size: clamp(22px, 3.2vw, 34px);
    line-height: 1.22;
}

.image-stack {
    display: grid;
    gap: 16px;
    justify-items: center;
}

.image-stack figure {
    width: min(100%, 680px);
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.image-zoom-trigger {
    display: grid;
    width: 100%;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.image-zoom-trigger img {
    width: auto;
    max-height: 82vh;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: filter .16s ease, transform .16s ease;
}

.image-zoom-trigger:hover img {
    filter: brightness(0.96);
}

.post-end-cta {
    display: grid;
    gap: 6px;
    width: min(100%, 680px);
    margin: 10px auto 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.post-end-cta-strip {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 52px;
    overflow: hidden;
    padding: 6px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff3e42, #ff5757 55%, #f12a2f);
    box-shadow: 0 14px 28px rgba(207, 31, 31, 0.24);
    animation: post-cta-breathe 2.4s ease-in-out infinite;
    transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

.post-end-cta-strip::after {
    position: absolute;
    inset: -40% auto -40% -44%;
    width: 38%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: skewX(-18deg);
    animation: post-cta-shine 2.8s ease-in-out infinite;
    pointer-events: none;
}

.post-end-cta-strip:hover,
.post-end-cta-strip:focus-within {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(207, 31, 31, 0.3);
}

.post-end-cta-avatars {
    display: flex;
    position: relative;
    z-index: 1;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.post-end-cta-avatar-link {
    display: inline-flex;
    flex: 0 0 auto;
    border-radius: 50%;
    text-decoration: none;
}

.post-end-cta-avatar-link + .post-end-cta-avatar-link {
    margin-left: 0;
}

.post-end-cta-avatar {
    width: 34px;
    height: 34px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 18px rgba(24, 20, 18, 0.2);
}

.post-end-cta-avatar.fallback {
    font-size: 13px;
}

.post-manga-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 8px;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 950;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s ease;
}

.post-manga-cta:hover,
.post-manga-cta:focus-visible {
    background: rgba(255, 255, 255, 0.08);
}

.post-manga-cta:focus-visible {
    outline: 3px solid rgba(207, 31, 31, 0.28);
    outline-offset: 3px;
}

.post-manga-cta:active {
    transform: none;
}

.post-manga-cta__icon {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    font-size: 13px;
    line-height: 1;
    animation: post-cta-icon-nudge 1.6s ease-in-out infinite;
}

.post-manga-cta__pr {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
}

.post-end-pr {
    position: relative;
    z-index: 1;
    justify-self: end;
    align-self: center;
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1.2;
}

@keyframes post-like-button-pop {
    0%,
    100% {
        transform: scale(1);
    }

    52% {
        transform: scale(1.12);
    }
}

@keyframes post-like-ring {
    0% {
        opacity: .8;
        transform: translate(-50%, -50%) scale(.45);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(4.2);
    }
}

@keyframes post-like-sparks {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(.15) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.05) rotate(24deg);
    }
}

@keyframes post-cta-breathe {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1px);
    }
}

@keyframes post-cta-shine {
    0%,
    42% {
        left: -44%;
    }

    72%,
    100% {
        left: 112%;
    }
}

@keyframes post-cta-icon-nudge {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(2px);
    }
}

@media (prefers-reduced-motion: reduce) {
.post-like-button.is-like-bursting,
    .post-like-button.is-like-bursting::before,
    .post-like-button.is-like-bursting::after,
    .post-end-cta-strip,
    .post-end-cta-strip::after,
    .post-manga-cta__icon {
        animation: none;
    }
}

.post-character-avatar-link {
    display: inline-flex;
    flex: 0 0 auto;
    border-radius: 50%;
}

.post-character-links {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 4px 8px;
    flex-wrap: wrap;
}

.post-character-list {
    display: grid;
    gap: 7px;
}

.post-character-list-label {
    justify-self: start;
}

.post-character-list-items {
    display: grid;
    gap: 8px;
}

.post-character-list-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.post-character-list-item strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-character-avatar-link:focus-visible,
.character-card-link:focus-visible {
    outline: 3px solid rgba(207, 31, 31, 0.32);
    outline-offset: 3px;
}

.image-lightbox[hidden] {
    display: none;
}

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 28px;
}

.image-lightbox__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(17, 17, 17, 0.86);
    cursor: zoom-out;
}

.image-lightbox__frame {
    position: relative;
    z-index: 1;
    display: grid;
    max-width: min(96vw, 1280px);
    max-height: 94vh;
    place-items: center;
}

.image-lightbox__frame img {
    display: block;
    max-width: 100%;
    max-height: 94vh;
    border-radius: 6px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
    object-fit: contain;
}

.image-lightbox__close {
    position: absolute;
    top: -16px;
    right: -16px;
    z-index: 2;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.9);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.post-side {
    position: relative;
}

.sticky-panel {
    position: sticky;
    top: 82px;
}

.post-side .sticky-panel {
    display: grid;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.post-side .character-card {
    width: 100%;
    margin: 0;
    padding: 13px 14px;
}

.post-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
}

.post-nav a {
    min-height: 84px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.post-nav a.next {
    text-align: right;
}

.post-nav span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.post-nav strong {
    display: block;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.4;
}

.related-section {
    margin-top: 34px;
    padding-bottom: var(--page-content-gutter, clamp(16px, 4vw, 30px));
    padding-inline: var(--page-content-gutter, clamp(16px, 4vw, 30px));
}

.related-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.related-heading h2 {
    font-size: 22px;
    line-height: 1.25;
}

.related-grid {
    display: flex;
    gap: 16px;
    margin: 0 -2px;
    padding: 2px 2px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 2px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.related-grid .trailer-card {
    flex: 0 0 clamp(190px, 24vw, 240px);
    scroll-snap-align: start;
}

.panel {
    padding: 18px;
}

.panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.metric-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 16px;
}

.metric-pair.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.caption {
    color: var(--ink);
    line-height: 1.8;
}

.character-card {
    display: grid;
    gap: 10px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid rgba(207, 31, 31, 0.16);
    border-radius: 8px;
    background: var(--soft-panel);
}

.character-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.character-card-link {
    color: inherit;
    text-decoration: none;
}

.character-card-link:hover strong {
    color: var(--accent-strong);
}

.character-card-head > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.character-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.character-card strong {
    color: var(--ink);
    font-size: 18px;
}

.character-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.post-side-actions {
    display: grid;
    gap: 10px;
    margin-top: 0;
}

.post-side-action {
    display: grid;
    gap: 5px;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 17%, var(--line));
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), color-mix(in srgb, var(--surface) 94%, transparent)),
        var(--surface);
    color: var(--ink);
}

.post-side-action.has-avatar {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.post-side-action-avatar {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(207, 31, 31, 0.2);
    box-shadow: 0 8px 18px rgba(24, 20, 18, 0.13);
}

.post-side-action-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.post-side-action span {
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 950;
}

.post-side-action strong {
    color: var(--ink);
    font-size: 17px;
    line-height: 1.35;
}

.post-side-action.has-avatar strong,
.post-side-action.has-avatar em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-side-action em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.affiliate-disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 18px;
    margin: 6px 0 0;
    padding: 3px 7px 2px;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent-strong);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.post-end-pr {
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.post-side-action .affiliate-disclosure {
    margin: 2px 0 0;
    color: var(--accent-strong);
    font-size: 10px;
}

.post-side-action:hover,
.post-side-action:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--surface) 94%, transparent)),
        var(--surface);
    outline: none;
}

.post-side-action.is-manga {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}

.entity-profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}

.entity-hero {
    overflow: hidden;
    display: grid;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.circle-profile-page .entity-hero {
    overflow: visible;
}

.entity-cover {
    min-height: clamp(150px, 23vw, 260px);
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(circle at 18% 24%, rgba(207, 31, 31, 0.08), transparent 28%),
        linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--soft-panel) 70%, #fff) 100%);
}

.circle-profile-page .entity-cover {
    border-radius: 8px;
}

.circle-profile-page {
    --circle-accent: var(--accent);
    --circle-main: var(--circle-accent, var(--accent));
    --circle-accent-text: color-mix(in srgb, var(--circle-accent) 82%, #111);
    --circle-main-soft: color-mix(in srgb, var(--circle-main) 12%, var(--paper, var(--surface)));
    border-radius: 8px;
    background:
        radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--circle-accent) 34%, transparent), transparent 32%),
        radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--circle-main) 22%, transparent), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--circle-main) 34%, var(--paper, var(--surface))), color-mix(in srgb, var(--circle-accent) 15%, var(--paper, var(--surface))));
}

.circle-profile-page .entity-hero,
.circle-profile-edit-preview {
    border-color: color-mix(in srgb, var(--circle-accent) 22%, var(--line));
}

.circle-profile-page .entity-hero,
.circle-profile-builder-preview .entity-hero {
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--circle-accent) 16%, transparent), transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--circle-main, var(--circle-accent, var(--accent))) 42%, var(--surface)) 0%, color-mix(in srgb, var(--circle-main, var(--circle-accent, var(--accent))) 18%, var(--surface)) 58%, var(--surface) 100%);
}

.circle-profile-cover,
.circle-profile-edit-cover {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--circle-accent) 18%, transparent), transparent 30%),
        linear-gradient(135deg, color-mix(in srgb, var(--circle-main, var(--circle-accent)) 18%, #fff), color-mix(in srgb, var(--circle-accent) 14%, var(--soft-panel)));
}

.circle-profile-page .entity-kicker,
.circle-profile-page .circle-link-panel-head span,
.circle-profile-page .circle-link-card em {
    color: var(--circle-accent-text);
}

.circle-profile-page .entity-actions .button.primary {
    border-color: color-mix(in srgb, var(--circle-accent) 76%, #111);
    background: var(--circle-accent);
    color: #fff;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--circle-accent) 24%, transparent);
}

.circle-profile-page .entity-actions .button.subtle,
.circle-profile-page .entity-actions .button.ghost {
    border-color: color-mix(in srgb, var(--circle-accent) 36%, var(--line));
    color: color-mix(in srgb, var(--circle-accent) 72%, var(--ink));
}

.circle-profile-cover::before,
.circle-profile-edit-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--profile-cover-image, none);
    background-position: var(--profile-cover-x, 50%) var(--profile-cover-y, 50%);
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(var(--profile-cover-scale, 1));
    transform-origin: center;
}

.circle-profile-cover::after,
.circle-profile-edit-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 10, 9, 0.02), rgba(12, 10, 9, 0.36));
    pointer-events: none;
}

.circle-theme-gallery .circle-profile-cover,
.circle-theme-gallery .circle-profile-edit-cover {
    background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--circle-accent) 26%, transparent) 0 14px, transparent 14px 28px),
        linear-gradient(135deg, color-mix(in srgb, var(--circle-main) 28%, #fff), color-mix(in srgb, var(--circle-accent) 18%, #f7f4f2));
}

.circle-theme-gallery .circle-profile-cover::after,
.circle-theme-gallery .circle-profile-edit-cover::after {
    background: linear-gradient(90deg, rgba(12, 10, 9, 0.04), rgba(12, 10, 9, 0.42));
}

.circle-theme-minimal .circle-profile-cover,
.circle-theme-minimal .circle-profile-edit-cover {
    background:
        linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--circle-main) 10%, #fff));
}

.circle-theme-minimal .circle-profile-cover::after,
.circle-theme-minimal .circle-profile-edit-cover::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(12, 10, 9, 0.16));
}

.circle-profile-builder-device.is-mobile .circle-profile-cover::before,
.circle-profile-builder-device.is-mobile .circle-profile-edit-cover::before {
    background-image: var(--profile-cover-mobile-image, var(--profile-cover-image, none));
    background-position: var(--profile-cover-mobile-x, 50%) var(--profile-cover-mobile-y, 50%);
    transform: scale(var(--profile-cover-mobile-scale, var(--profile-cover-scale, 1)));
}

@media (max-width: 760px) {
.circle-profile-cover::before,
    .circle-profile-edit-cover::before {
        background-image: var(--profile-cover-mobile-image, var(--profile-cover-image, none));
        background-position: var(--profile-cover-mobile-x, 50%) var(--profile-cover-mobile-y, 50%);
        transform: scale(var(--profile-cover-mobile-scale, var(--profile-cover-scale, 1)));
    }

.circle-theme-gallery .circle-link-hub {
        grid-template-columns: 1fr;
    }
}

.character-entity-hero .entity-cover {
    background:
        radial-gradient(circle at 78% 22%, rgba(207, 31, 31, 0.10), transparent 28%),
        linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--stamp-soft) 62%, #fff) 100%);
}

.entity-cover-mark {
    display: none;
}

.entity-main {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 0 clamp(16px, 4vw, 30px) clamp(18px, 4vw, 28px);
}

.circle-profile-page .entity-main {
    position: relative;
    z-index: 1;
}

.entity-avatar-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    margin-top: -64px;
}

.entity-avatar {
    width: clamp(118px, 17vw, 156px);
    height: clamp(118px, 17vw, 156px);
    aspect-ratio: 1;
    flex: 0 0 auto;
    border: 5px solid var(--surface);
    box-shadow: 0 10px 28px rgba(24, 20, 18, 0.14);
}

.circle-profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 14px;
    background: var(--surface);
}

.circle-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translate(var(--icon-x, 0%), var(--icon-y, 0%)) scale(var(--icon-scale, 1));
    transform-origin: center;
}

.circle-profile-avatar.fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    background: var(--accent);
    color: var(--on-accent);
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 950;
    line-height: 1.12;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    word-break: keep-all;
}

.entity-copy {
    display: grid;
    gap: 7px;
    min-width: 0;
    max-width: 720px;
}

.entity-kicker {
    margin: 0;
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 900;
}

.entity-kicker a {
    color: inherit;
}

.entity-copy h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(28px, 4.8vw, 44px);
    line-height: 1.08;
}

.character-display-name {
    font-family: "Kiwi Maru", "Yu Gothic", "Hiragino Maru Gothic ProN", Meiryo, serif;
    font-feature-settings: "palt";
    font-weight: 700;
    line-height: 1.14;
}

.entity-handle {
    margin: -2px 0 0;
    color: var(--muted);
    font-size: 15px;
    font-weight: 800;
}

.entity-copy > p.entity-bio {
    max-width: 640px;
    margin: 8px 0 0;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.75;
}

.circle-profile-trust-note {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    width: 100%;
    max-width: 1120px;
    margin: 18px auto 0;
    padding: 10px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.6;
}

.circle-profile-trust-note span {
    color: var(--accent-strong);
    font-weight: 950;
}

.circle-profile-trust-note p {
    margin: 0;
}

.entity-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 76px;
}

.entity-actions .button {
    min-height: 44px;
    border-radius: 999px;
    padding: 10px 17px;
}

.circle-affiliate-button .button-pr-mark {
    margin-left: 2px;
    color: color-mix(in srgb, currentColor 76%, var(--muted));
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.entity-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 10px;
}

.entity-stats span {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.entity-stats strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1;
}

.circle-profile-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: clamp(18px, 4vw, 38px);
    align-items: start;
}

.circle-layout-showcase .circle-profile-content {
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
}

.circle-layout-compact .circle-profile-content {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
}

.circle-link-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--circle-accent, var(--accent)) 32%, var(--line));
    border-radius: 12px;
    background:
        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--circle-accent, var(--accent)) 18%, transparent), transparent 38%),
        linear-gradient(180deg, color-mix(in srgb, var(--circle-main, var(--circle-accent, var(--accent))) 14%, var(--paper)), color-mix(in srgb, var(--circle-main, var(--circle-accent, var(--accent))) 5%, var(--paper)));
    box-shadow: 0 18px 46px rgba(24, 20, 18, 0.12);
}

.circle-theme-stamp .circle-link-panel {
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 48%, var(--line));
    background:
        radial-gradient(circle at 96% -4%, color-mix(in srgb, var(--circle-accent, var(--accent)) 30%, transparent), transparent 36%),
        linear-gradient(145deg, color-mix(in srgb, var(--circle-main, var(--circle-accent, var(--accent))) 22%, var(--paper)), var(--surface) 68%);
}

.circle-theme-stamp .circle-link-card {
    border-radius: 12px;
}

.circle-link-panel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.circle-link-panel-head span {
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 950;
}

.circle-link-panel-head strong {
    color: var(--ink);
    font-size: 15px;
}

.circle-link-hub {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
}

.circle-link-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--circle-accent, var(--accent)) 32%, var(--line));
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 900;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.circle-link-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 58%, var(--line));
    box-shadow: 0 12px 26px rgba(24, 20, 18, 0.12);
}

.circle-button-solid .circle-link-card {
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 45%, var(--line));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--circle-accent, var(--accent)) 34%, var(--surface)), color-mix(in srgb, var(--circle-main, var(--circle-accent, var(--accent))) 10%, var(--surface)) 74%);
}

.circle-button-outline .circle-link-card {
    border-width: 2px;
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 58%, var(--line));
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.circle-button-soft .circle-link-card {
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 22%, var(--line));
    background: color-mix(in srgb, var(--circle-accent, var(--accent)) 13%, var(--surface));
}

.circle-theme-gallery .circle-link-panel {
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 48%, var(--line));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--circle-accent, var(--accent)) 18%, #fff), var(--surface) 72%),
        color-mix(in srgb, var(--circle-accent, var(--accent)) 8%, var(--paper));
}

.circle-theme-gallery .circle-link-hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.circle-theme-gallery .circle-link-card {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 96px;
    align-content: space-between;
    border-radius: 14px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--circle-main, var(--circle-accent, var(--accent))) 14%, #fff), color-mix(in srgb, var(--circle-accent, var(--accent)) 13%, var(--surface)));
}

.circle-theme-gallery .circle-link-card em {
    grid-column: 1 / -1;
    justify-self: end;
}

.circle-theme-gallery .circle-link-card.is-emphasis {
    grid-column: 1 / -1;
}

.circle-theme-minimal .circle-link-panel {
    border-color: color-mix(in srgb, var(--circle-main, var(--circle-accent, var(--accent))) 22%, var(--line));
    background: color-mix(in srgb, var(--circle-main, var(--circle-accent, var(--accent))) 5%, var(--paper));
    box-shadow: none;
}

.circle-theme-minimal .circle-link-card {
    min-height: 58px;
    border-radius: 999px;
    border-color: color-mix(in srgb, var(--circle-main, var(--circle-accent, var(--accent))) 28%, var(--line));
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    box-shadow: none;
}

.circle-layout-showcase .circle-link-hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.circle-layout-showcase .circle-link-card.is-emphasis {
    grid-column: 1 / -1;
}

.circle-layout-compact .circle-link-panel {
    max-width: 520px;
}

.circle-profile-linkbio .circle-link-panel {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.circle-profile-linkbio .circle-link-panel-head {
    display: none;
}

.circle-profile-linkbio .circle-link-hub,
.circle-theme-gallery .circle-profile-linkbio .circle-link-hub,
.circle-layout-showcase .circle-profile-linkbio .circle-link-hub {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.circle-profile-linkbio .circle-link-card,
.circle-theme-gallery .circle-profile-linkbio .circle-link-card {
    grid-template-columns: 44px minmax(0, 1fr) 24px;
    min-height: 64px;
    align-content: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(18, 15, 14, .1);
}

.circle-theme-minimal .circle-profile-linkbio .circle-link-card {
    border-radius: 999px;
}

.circle-profile-linkbio .circle-link-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(18, 15, 14, .14);
}

.circle-profile-linkbio .circle-link-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.circle-profile-linkbio .circle-link-copy strong {
    font-size: 14px;
}

.circle-profile-linkbio .circle-link-copy small {
    font-size: 11px;
}

.circle-profile-linkbio .circle-link-card em {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: currentColor;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    opacity: .68;
}

body.circle-profile-landing .site-header {
    padding-block: 5px;
}

body.circle-profile-landing .brand-wordmark {
    width: 205px;
}

body.circle-profile-landing .nav a {
    min-height: 34px;
    padding-block: 7px;
}

body.circle-profile-landing .circle-profile-landing-shell {
    padding-top: 22px;
}

body.circle-profile-landing .adult-site-notice {
    margin-bottom: 16px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 12px;
}

.circle-profile-public-page {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 4vw, 38px);
    border-radius: 0;
    background: transparent;
}

.circle-profile-public-page > #manga,
.circle-profile-public-page > #posts,
.circle-profile-public-page .entity-post-grid {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

@media (min-width: 900px) {
.circle-profile-public-page .entity-post-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.circle-profile-public-page > .circle-profile-hero {
    width: min(680px, calc(100% - 24px));
    margin-inline: auto;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--circle-accent) 18%, var(--line));
    border-radius: 28px;
    background: color-mix(in srgb, var(--circle-main) 7%, var(--surface));
    box-shadow: 0 22px 64px rgba(15, 12, 11, .16);
}

.circle-profile-public-page .circle-profile-cover {
    min-height: clamp(138px, 17vw, 178px);
    border-radius: 0;
}

.circle-profile-public-page .circle-profile-hero.no-profile-cover .circle-profile-cover {
    min-height: 112px;
    background:
        radial-gradient(circle at 16% 14%, color-mix(in srgb, var(--circle-accent) 24%, transparent), transparent 36%),
        radial-gradient(circle at 84% 4%, color-mix(in srgb, var(--circle-main) 30%, transparent), transparent 42%),
        linear-gradient(135deg, color-mix(in srgb, var(--circle-main) 18%, var(--surface)), color-mix(in srgb, var(--circle-accent) 9%, var(--surface)));
}

.circle-profile-public-page .circle-profile-main {
    padding: 0 clamp(18px, 5vw, 36px) clamp(24px, 5vw, 32px);
}

.circle-profile-public-page .entity-avatar-row {
    display: grid;
    justify-items: center;
    justify-content: center;
    margin-top: -52px;
}

.circle-profile-public-page .circle-profile-avatar {
    width: 104px;
    height: 104px;
    border-width: 4px;
    /* サークルアイコンは角丸四角(キャラは正円)。正円だと正方形ロゴが見切れる */
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(15, 12, 11, .2);
}

.circle-profile-public-page .entity-actions {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    justify-content: flex-end;
    margin: 0;
}

.circle-profile-public-page .entity-actions .button {
    min-height: 36px;
    padding: 7px 13px;
    border-color: color-mix(in srgb, var(--circle-accent) 24%, var(--line));
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    font-size: 12px;
    backdrop-filter: blur(12px);
}

.circle-profile-public-page .entity-actions .circle-profile-action-follow {
    justify-items: end;
    margin: 0;
}

.circle-profile-public-page .circle-profile-content,
.circle-profile-public-page.circle-layout-showcase .circle-profile-content,
.circle-profile-public-page.circle-layout-compact .circle-profile-content {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 560px);
    max-width: 560px;
    margin-inline: auto;
    gap: 18px;
}

.circle-profile-public-page .entity-copy {
    justify-items: center;
    max-width: none;
    text-align: center;
}

.circle-profile-public-page .entity-kicker {
    display: none;
}

.circle-profile-public-page .entity-copy h1 {
    font-size: clamp(28px, 4vw, 34px);
    line-height: 1.16;
}

.circle-profile-public-page .entity-handle {
    margin-top: 0;
    font-size: 13px;
}

.circle-profile-public-page .entity-copy > p.entity-bio {
    max-width: 480px;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.65;
}

.circle-profile-public-page .entity-stats {
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
    padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--circle-accent) 14%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 76%, transparent);
}

.circle-profile-public-page .entity-stats span {
    font-size: 11px;
}

.circle-profile-public-page .entity-stats strong {
    font-size: 14px;
}

.circle-profile-public-page .circle-link-panel {
    width: min(100%, 540px);
    margin-inline: auto;
}

.circle-profile-public-page .circle-link-card {
    min-height: 64px;
}

.entity-profile-inline-follow {
    display: grid;
    justify-items: center;
    gap: 5px;
    margin-top: 4px;
}

.entity-profile-inline-follow > small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
}

.character-profile-inline-follow {
    justify-items: start;
    margin-top: 5px;
}

.entity-profile-inline-follow .entity-follow-button {
    min-height: 36px;
    gap: 7px;
    padding: 6px 13px;
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 34%, var(--line));
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    font-size: 11px;
    box-shadow: none;
}

.entity-profile-inline-follow .entity-follow-button small {
    min-width: 19px;
    height: 19px;
    padding-inline: 5px;
    font-size: 9px;
}

.entity-profile-inline-follow[data-builder-preview-follow] .entity-follow-button {
    cursor: default;
}

.entity-follow-form {
    margin: 0;
}

.entity-follow-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 15px;
    border: 1px solid color-mix(in srgb, var(--circle-accent, var(--accent)) 52%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--circle-accent, var(--accent)) 13%, var(--surface));
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.entity-follow-button small {
    display: inline-grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--circle-accent, var(--accent)) 18%, transparent);
    color: inherit;
    font-size: 10px;
}

.entity-follow-button small[hidden] {
    display: none;
}

.entity-follow-button.is-followed {
    border-color: color-mix(in srgb, #2aad68 58%, var(--line));
    background: color-mix(in srgb, #2aad68 15%, var(--surface));
    color: #39bd78;
}

.entity-follow-button:disabled {
    cursor: wait;
    opacity: .68;
}

.followed-posts-section {
    display: grid;
    gap: 14px;
    padding-inline: var(--page-content-gutter, clamp(16px, 4vw, 30px));
}

.followed-posts-empty {
    margin: 0;
    color: var(--muted);
}

.circle-profile-copy-fallback {
    display: grid;
    width: min(100%, 520px);
    justify-self: center;
    gap: 6px;
}

.circle-profile-copy-fallback[hidden] {
    display: none;
}

.circle-profile-copy-fallback label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.circle-profile-copy-fallback input {
    width: 100%;
    min-height: 42px;
    border: 1px solid color-mix(in srgb, var(--circle-accent) 38%, var(--line));
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    padding: 9px 12px;
    font: inherit;
    font-size: 13px;
    text-align: center;
}

.circle-profile-public-page #characters,
.circle-profile-public-page #manga,
.circle-profile-public-page #posts {
    scroll-margin-top: 88px;
}

.circle-posts-pagination-shell {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 18px var(--page-content-gutter, clamp(16px, 4vw, 30px)) 0;
}

.circle-posts-pagination {
    display: grid;
    grid-template-columns: minmax(92px, 1fr) auto minmax(92px, 1fr);
    align-items: center;
    gap: 10px;
    width: min(100%, 520px);
}

.circle-posts-pagination > a,
.circle-posts-pagination > span {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--circle-accent, var(--accent)) 24%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.circle-posts-pagination > a:hover {
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 54%, var(--line));
}

.circle-posts-pagination > .is-disabled {
    color: var(--muted);
    opacity: .42;
}

.circle-posts-pagination .circle-posts-page-status {
    min-width: 74px;
    border-color: transparent;
    background: transparent;
    color: var(--muted);
}

.circle-posts-page-status strong {
    color: var(--ink);
    font-size: 15px;
}

.circle-link-card.is-emphasis {
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 68%, var(--line));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--circle-accent, var(--accent)) 34%, var(--surface)), var(--surface) 72%);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--circle-accent, var(--accent)) 18%, transparent);
}

.circle-button-solid .circle-link-card.is-emphasis {
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 82%, #111);
    background:
        linear-gradient(135deg, var(--circle-accent, var(--accent)), color-mix(in srgb, var(--circle-main, var(--circle-accent, var(--accent))) 38%, #111));
    color: #fff;
}

.circle-button-solid .circle-link-card.is-emphasis .circle-link-icon {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.circle-button-solid .circle-link-card.is-emphasis .circle-link-icon.is-brand-fanza,
.circle-button-solid .circle-link-card.is-emphasis .circle-link-icon.is-brand-dlsite {
    background: #fff;
    color: #d91f1f;
}

.circle-button-solid .circle-link-card.is-emphasis .circle-link-copy small,
.circle-button-solid .circle-link-card.is-emphasis em {
    color: rgba(255, 255, 255, 0.82);
}

.circle-link-card.is-quiet {
    opacity: 0.86;
}

.circle-link-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    min-width: 0;
    overflow: hidden;
    padding: 0 5px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--circle-accent, var(--accent)) 17%, #fff);
    color: var(--circle-accent-text, var(--accent-strong));
    font-size: clamp(12px, 1.45em, 18px);
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.circle-link-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.circle-link-icon.is-brand-x svg,
.circle-link-icon.is-brand-tiktok svg,
.circle-link-icon.is-brand-youtube svg,
.circle-link-icon.is-brand-pixiv svg {
    fill: currentColor;
    stroke: none;
}

.circle-link-icon svg text {
    fill: currentColor;
    stroke: none;
}

.circle-link-icon.is-brand-x {
    background: #0f1419;
    color: #fff;
}

.circle-link-icon.is-brand-instagram {
    background: radial-gradient(circle at 30% 105%, #feda75 0 25%, #fa7e1e 42%, #d62976 62%, #962fbf 80%, #4f5bd5 100%);
    color: #fff;
}

.circle-link-icon.is-brand-youtube {
    background: #ff0033;
    color: #fff;
}

.circle-link-icon.is-brand-tiktok {
    background: #050505;
    color: #fff;
}

.circle-link-icon.is-brand-pixiv {
    background: #0096fa;
    color: #fff;
}

.circle-link-icon.is-brand-fanza,
.circle-link-icon.is-brand-dlsite {
    background: #fff;
    color: #d91f1f;
}

.circle-link-icon.is-brand-dlsite svg {
    width: 38px;
    height: 22px;
}

.circle-review-link-body {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--paper)) 0%, var(--paper) 42%, var(--surface) 100%);
}

.circle-review-link-shell {
    display: grid;
    align-items: start;
    width: min(100%, 720px);
    min-height: 100svh;
    padding: clamp(18px, 5vw, 42px) clamp(14px, 4vw, 24px);
}

.circle-review-link-page {
    width: 100%;
    margin: 0 auto;
    border: 1px solid color-mix(in srgb, var(--circle-accent, var(--accent)) 22%, var(--line));
    box-shadow: 0 20px 56px rgba(24, 20, 18, 0.13);
}

.circle-review-link-page .entity-hero {
    border: 0;
    border-radius: 8px 8px 0 0;
    box-shadow: none;
}

.circle-review-link-page .circle-profile-cover {
    min-height: clamp(118px, 26vw, 190px);
}

.circle-review-link-page .entity-main {
    padding-bottom: clamp(18px, 4vw, 26px);
}

.circle-review-link-page .entity-avatar-row {
    justify-content: center;
}

.circle-review-link-page .circle-profile-avatar {
    border-radius: 20px;
}

.circle-review-link-page .circle-profile-content {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.circle-review-link-page .entity-copy {
    justify-items: center;
    max-width: none;
}

.circle-review-link-page .entity-copy > p.entity-bio {
    max-width: 520px;
}

.circle-review-link-page .circle-review-link-panel {
    width: min(100% - 28px, 560px);
    max-width: 560px;
    margin: 0 auto clamp(18px, 4vw, 28px);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}

.circle-review-link-page .circle-review-link-panel .circle-link-hub {
    gap: 10px;
}

.circle-review-link-page .circle-link-card {
    grid-template-columns: 54px minmax(0, 1fr);
    min-height: 76px;
    padding: 10px;
    border-width: 1px;
    border-radius: 8px;
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.96);
    color: #2b2020;
    box-shadow: 0 8px 18px rgba(24, 20, 18, 0.08);
}

.circle-review-link-page .circle-link-copy strong {
    color: #2b2020;
}

.circle-review-link-page .circle-link-copy small {
    color: #766b69;
}

.circle-review-link-page .circle-link-card em {
    display: none;
}

.circle-review-link-page .circle-link-icon {
    width: 54px;
    height: 54px;
    border-radius: 8px;
}

.circle-link-icon.is-brand-fanza {
    border: 1px solid rgba(217, 31, 31, 0.16);
}

.circle-link-icon.is-brand-fanza svg {
    width: 24px;
    height: 24px;
}

.circle-link-icon.is-brand-mail,
.circle-link-icon.is-brand-website {
    background: color-mix(in srgb, var(--circle-main, var(--circle-accent)) 18%, #fff);
    color: color-mix(in srgb, var(--circle-main, var(--circle-accent)) 76%, #111);
}

.circle-link-icon.is-custom {
    padding: 0;
    background: #fff;
}

.circle-link-icon.is-custom img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translate(var(--icon-x, 0%), var(--icon-y, 0%)) scale(var(--icon-scale, 1));
    transform-origin: center;
}

.circle-link-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.circle-link-copy strong,
.circle-link-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.circle-link-copy strong {
    font-size: 15px;
}

.circle-link-copy small {
    color: var(--muted);
    font-size: 12px;
}

.circle-link-copy .circle-link-disclosure {
    margin: 2px 0 0;
    font-size: 10px;
}

.circle-link-card em {
    color: var(--accent-strong);
    font-size: 12px;
    font-style: normal;
}

.character-circle-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: min(100%, 370px);
    max-width: 100%;
    min-height: 78px;
    margin-top: 10px;
    padding: 9px 12px 9px 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 12px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface));
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(24, 20, 18, 0.1);
}

.character-circle-card span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.character-circle-card em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.character-circle-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.character-circle-card small {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.character-circle-avatar {
    width: 58px;
    height: 58px;
    border: 1px solid rgba(207, 31, 31, 0.22);
}

.entity-section {
    display: grid;
    gap: 14px;
}

.entity-section.is-async-loading {
    opacity: 0.62;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.entity-profile > .entity-section {
    min-width: 0;
    padding-inline: var(--page-content-gutter, clamp(16px, 4vw, 30px));
}

.section-heading.compact {
    margin: 0;
}

.entity-profile .section-heading.compact {
    /* ≤1100px の .section-heading { flex-direction: column } を打ち消し、
       見出しと件数を同じ行に保つ */
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.entity-profile .section-heading.compact > div {
    min-width: min(100%, 220px);
}

.entity-count {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.entity-profile .section-heading.compact > .entity-count {
    margin-left: auto;
    align-self: center;
}

.entity-post-heading-actions {
    display: grid;
    justify-items: start;
    justify-content: start;
    gap: 7px;
}

.entity-sort-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.entity-sort-toggle a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.entity-sort-toggle a.active {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 8px 18px rgba(207, 31, 31, 0.18);
}

.entity-character-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.entity-character-chip {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    justify-items: center;
    min-width: 0;
    padding: 16px 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
}

.entity-character-chip.is-new {
    border-color: rgba(207, 31, 31, 0.36);
    background: linear-gradient(180deg, rgba(207, 31, 31, 0.08), var(--surface) 58%);
}

.entity-character-new-badge {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 8px 20px rgba(207, 31, 31, 0.28);
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0;
}

.entity-character-chip.active {
    border-color: rgba(207, 31, 31, 0.42);
    background: var(--soft-panel);
}

.entity-character-art {
    width: clamp(96px, 9vw, 116px);
    height: clamp(96px, 9vw, 116px);
    border-radius: 50%;
    background: color-mix(in srgb, var(--soft-panel) 72%, #fff);
}

.entity-character-chip span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-character-chip em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}

.entity-tags {
    margin: 0;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--button-bg);
    color: var(--ink);
    font-weight: 800;
    cursor: pointer;
}

.button.compact {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 13px;
}

.button.primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 10px 24px rgba(207, 31, 31, 0.18);
}

.button.ghost {
    background: transparent;
}

.button.share {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--on-accent);
}

.button.subtle {
    min-height: 42px;
    background: var(--subtle-bg);
    color: var(--accent-strong);
}

.button.full {
    width: 100%;
    margin-top: 12px;
}

.copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 12px;
}

.copy-row input {
    min-width: 0;
    font-size: 13px;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.login-shell {
    display: grid;
    min-height: 62vh;
    align-items: center;
}

.age-visual {
    min-height: 520px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--stamp-soft);
}

.login-panel {
    width: min(420px, 100%);
    margin: 0 auto;
}

.oauth-buttons {
    display: grid;
    gap: 10px;
}

.oauth-button {
    display: flex;
    min-height: 46px;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    font: inherit;
    font-weight: 950;
    text-decoration: none;
}

.oauth-mark {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 12px;
    font-weight: 950;
}

.oauth-button.google {
    background: #fff;
    color: #1f1f1f;
}

.oauth-button.discord {
    background: #5865f2;
    color: #fff;
}

.oauth-button.is-disabled {
    color: var(--muted);
    cursor: pointer;
    opacity: 0.86;
    background: rgba(255, 255, 255, 0.025);
}

.oauth-button.is-disabled:hover,
.oauth-button.is-disabled:focus-visible {
    border-color: rgba(32, 160, 226, 0.55);
    background: rgba(32, 160, 226, 0.08);
    color: #dce8f5;
    outline: none;
}

.oauth-button.is-disabled .oauth-mark {
    background: rgba(255, 255, 255, 0.08);
}

.auth-form input,
.legacy-login input {
    min-height: 46px;
}

.auth-form .button.primary {
    border-color: #20a0e2;
    background: #20a0e2;
    color: #fff;
    box-shadow: 0 14px 28px rgba(32, 160, 226, 0.22);
}

.legacy-login {
    border-top: 1px solid var(--line);
    padding-top: 12px;
    opacity: 0.78;
}

.legacy-login summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.profile-logout-form {
    margin: 0;
}

.profile-logout-form button {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 26px;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
}

.profile-logout-form button:hover {
    background: #333;
}

.developer-admin-app .site-header,
.developer-admin-app .site-footer {
    display: none;
}

.developer-admin-app .page-shell {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    padding: 0;
    background: #141414;
}

.developer-inline-form .button.compact {
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
}

.developer-access-pill.is-disabled {
    border-color: rgba(255, 134, 115, .42);
    background: rgba(255, 134, 115, .1);
    color: #ffb2a5;
}

.form-stack {
    display: grid;
    gap: 14px;
}

.form-section {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(207, 31, 31, 0.14);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 68%, transparent);
}

.creator-composer {
    display: grid;
    gap: 18px;
}

.composer-hero,
.creator-account,
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.composer-hero p,
.section-heading span {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.section-heading {
    align-items: end;
}

.form-section h3 {
    margin: 0;
    color: var(--ink);
    font-size: 16px;
}

.character-selection-status {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.character-selection-status.is-multiple {
    color: var(--accent);
}

.character-multiple-toggle {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    user-select: none;
}

.character-multiple-toggle input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
}

.character-multiple-toggle:has(input:checked) {
    color: var(--accent-strong);
}

.inline-character-add {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--button-bg);
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.inline-empty {
    margin-top: 12px;
}

.new-character-panel {
    display: grid;
    gap: 14px;
    padding: 12px;
    border: 1px dashed rgba(207, 31, 31, 0.28);
    border-radius: 8px;
    background: var(--soft-panel);
}

.new-character-panel[hidden] {
    display: none;
}

label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

input,
textarea,
select {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--field-border);
    border-radius: 8px;
    background: var(--field-bg);
    color: var(--ink);
    font: inherit;
    padding: 10px 12px;
}

textarea {
    resize: vertical;
}

fieldset {
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

legend {
    padding: 0 6px;
    color: var(--ink);
    font-weight: 800;
}

.policy-checklist {
    display: grid;
    gap: 10px;
    background: var(--stamp-soft);
}

.check-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    color: var(--ink);
}

.check-row input[type="checkbox"] {
    width: auto;
    min-height: auto;
    margin-top: 3px;
}

.upload-box {
    position: relative;
}

.upload-box input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.upload-drop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 13px 14px;
    border: 1px dashed rgba(207, 31, 31, 0.28);
    border-radius: 8px;
    background: var(--stamp-soft);
    color: var(--muted);
    cursor: pointer;
}

.upload-drop:hover {
    border-color: var(--accent);
    background: var(--subtle-bg);
}

.upload-drop.is-dragging {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 11%, var(--surface));
    box-shadow: inset 0 0 0 2px rgba(207, 31, 31, 0.14);
}

.upload-drop-large {
    min-height: 170px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.upload-drop-large strong {
    font-size: 18px;
}

.creator-upload .upload-preview {
    grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
}

.creator-upload .upload-preview img {
    aspect-ratio: 3 / 4;
}

.upload-drop strong {
    color: var(--accent-strong);
    font-size: 14px;
}

.upload-drop span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.upload-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}

.upload-preview img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.upload-preview.single {
    grid-template-columns: 80px;
}

.compact-upload {
    max-width: 360px;
}

.advanced-fields {
    display: grid;
    gap: 12px;
    border-color: rgba(207, 31, 31, 0.14);
    background: var(--soft-panel);
}

.advanced-fields summary {
    color: var(--accent-strong);
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
}

.two-col,
.admin-grid {
    display: grid;
    gap: 16px;
}

.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-list {
    margin: 16px 0 24px;
}

.metric-list div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.circle-list {
    display: grid;
    gap: 10px;
    margin: 14px 0 24px;
}

.circle-list-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.circle-list-item img,
.circle-list-item .circle-avatar {
    width: 72px;
    height: 72px;
    border-radius: 8px;
}

.circle-list-item img {
    object-fit: cover;
}

.circle-list-item .circle-avatar {
    display: grid;
    place-items: center;
    background: var(--subtle-bg);
    color: var(--accent-strong);
    font-weight: 800;
}

.circle-list-item strong,
.circle-list-item span,
.circle-list-item a {
    display: block;
}

.circle-list-item strong {
    margin-bottom: 4px;
    color: var(--ink);
}

.circle-list-item span,
.circle-list-item a {
    color: var(--muted);
    font-size: 12px;
}

.circle-list-item a {
    margin-top: 5px;
    color: var(--accent-strong);
    font-weight: 800;
}

.current-circle {
    margin: 14px 0 24px;
    background: var(--soft-panel);
}

.admin-app .site-header,
.admin-app .site-footer {
    display: none;
}

.developer-admin-app .site-header {
    display: flex;
}

.admin-setup-card .eyebrow {
    color: #61c4ff;
    font-size: 16px;
    font-weight: 900;
}

.circle-setup-icon-panel {
    display: grid;
    gap: 14px;
    padding: 18px 0 4px;
    border-top: 1px solid #2c2c2c;
    border-bottom: 1px solid #2c2c2c;
}

.circle-setup-icon-head {
    display: grid;
    gap: 6px;
}

.circle-setup-icon-head span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #d8d8d8;
    font-size: 17px;
    font-weight: 900;
}

.circle-setup-icon-head em {
    min-width: 46px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #9aa7b5;
    font-size: 13px;
    font-style: normal;
    text-align: center;
}

.circle-setup-icon-head small {
    color: #98a3af;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.7;
}

.circle-setup-icon-body {
    display: grid;
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
    align-items: center;
    gap: 20px;
}

.admin-setup-actions .button {
    min-height: 54px;
    padding: 13px 22px;
    font-size: 17px;
}

.onboarding-ui-preview {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(32, 160, 226, 0.12), transparent 44%),
        #111;
    padding: 18px;
}

.onboarding-ui-preview::after {
    content: "";
    position: absolute;
    inset: -35% auto auto -20%;
    width: 58%;
    height: 170%;
    transform: rotate(16deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    animation: onboarding-sheen 3.2s ease-in-out infinite;
    pointer-events: none;
}

.preview-topbar,
.preview-post-tabs,
.preview-post-actions,
.preview-flow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-topbar {
    justify-content: space-between;
    margin-bottom: 18px;
    color: #f5f5f5;
    font-size: 12px;
    font-weight: 950;
}

.preview-topbar b {
    color: #9fd7ff;
}

.preview-setup-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 18px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.preview-avatar,
.preview-character-avatar {
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fff;
    color: #111;
    font-weight: 950;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
}

.preview-avatar {
    width: 58px;
    height: 58px;
    font-size: 24px;
    overflow: hidden;
}

.preview-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translate(var(--icon-x, 0%), var(--icon-y, 0%)) scale(var(--icon-scale, 1));
    transform-origin: center;
}

.preview-setup-card small,
.preview-field span,
.preview-split-card span {
    color: #9fd7ff;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.preview-setup-card strong {
    display: block;
    margin-top: 4px;
    font-size: 22px;
}

.preview-setup-card em {
    grid-column: 1 / -1;
    color: #c7c7c7;
    font-size: 12px;
    font-style: normal;
}

.preview-flow {
    margin-top: 16px;
}

.preview-flow span,
.preview-post-tabs span,
.preview-post-actions span {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #c7c7c7;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 900;
}

.preview-flow span.is-active,
.preview-post-tabs span.is-active {
    background: #20a0e2;
    color: #fff;
}

.preview-phone {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    width: min(250px, 100%);
    margin: 0 auto;
    padding: 16px;
    border-radius: 18px;
    background: #202020;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.36);
}

.preview-character-avatar {
    width: 100%;
    height: 126px;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    font-size: 46px;
    background:
        radial-gradient(circle at 68% 28%, #ffd6e5, transparent 28%),
        linear-gradient(135deg, #fff, #d8f2ff);
}

.preview-character-avatar img {
    object-fit: contain;
}

.preview-field {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
}

.preview-field strong {
    font-size: 15px;
    line-height: 1.45;
}

.preview-phone button,
.preview-post-actions b {
    border: 0;
    border-radius: 7px;
    background: #ff4747;
    color: #fff;
    padding: 10px 12px;
    font-weight: 950;
}

.preview-post-tabs {
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.preview-upload-zone {
    display: grid;
    place-items: center;
    min-height: 136px;
    border: 2px dashed rgba(32, 160, 226, 0.45);
    border-radius: 10px;
    background: rgba(32, 160, 226, 0.08);
    text-align: center;
}

.preview-upload-zone strong {
    font-size: 22px;
}

.preview-upload-zone small {
    color: #b9b9b9;
}

.preview-post-actions {
    justify-content: space-between;
    margin-top: 16px;
}

.onboarding-ui-preview-material {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.preview-split-card {
    display: grid;
    align-content: end;
    gap: 7px;
    min-height: 240px;
    border-radius: 10px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.08);
}

.preview-split-card.public {
    background:
        linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5)),
        linear-gradient(135deg, #343434, #171717);
}

.preview-split-card.material {
    background:
        linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.54)),
        linear-gradient(135deg, rgba(32, 160, 226, 0.34), #171717);
}

.preview-split-card strong {
    font-size: 20px;
}

.preview-split-card small {
    color: #c7c7c7;
    line-height: 1.6;
}

@media (max-width: 940px) {
.onboarding-ui-preview {
        min-height: 240px;
    }
}

@keyframes onboarding-dialog-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes onboarding-step-in {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes onboarding-sheen {
    0%, 42% {
        transform: translateX(-80%) rotate(16deg);
    }
    76%, 100% {
        transform: translateX(230%) rotate(16deg);
    }
}

.admin-app .page-shell {
    width: 100%;
    max-width: none;
    padding: 0;
}

.admin-profile-menu {
    position: relative;
}

.admin-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 250px;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    background: #1b1b1b;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.admin-profile-menu.is-open .admin-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.admin-dropdown a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 26px;
    color: #f5f5f5;
    font-weight: 750;
}

.admin-dropdown a:hover {
    background: #333;
}

.mini-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: #8f8f8f;
}

.mini-icon.play {
    clip-path: polygon(20% 0, 100% 50%, 20% 100%);
}

.mini-icon.manga {
    border-radius: 2px;
    background: linear-gradient(90deg, #8f8f8f 45%, transparent 45% 55%, #8f8f8f 55%);
}

.mini-icon.collection {
    box-shadow: 5px 5px 0 #666;
}

.admin-grid-icon,
.view-toggle {
    width: 28px;
    height: 28px;
    border: 0;
    background:
        linear-gradient(#9b9b9b 0 0) 6px 7px / 16px 2px no-repeat,
        linear-gradient(#9b9b9b 0 0) 6px 14px / 16px 2px no-repeat,
        linear-gradient(#9b9b9b 0 0) 6px 21px / 16px 2px no-repeat;
    opacity: 0.88;
}

.admin-grid-icon,
.view-toggle {
    background:
        linear-gradient(#9b9b9b 0 0) 4px 4px / 7px 7px no-repeat,
        linear-gradient(#9b9b9b 0 0) 17px 4px / 7px 7px no-repeat,
        linear-gradient(#9b9b9b 0 0) 4px 17px / 7px 7px no-repeat,
        linear-gradient(#9b9b9b 0 0) 17px 17px / 7px 7px no-repeat;
}

.view-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #333;
    background:
        linear-gradient(#9b9b9b 0 0) 13px 13px / 7px 7px no-repeat,
        linear-gradient(#9b9b9b 0 0) 24px 13px / 7px 7px no-repeat,
        linear-gradient(#9b9b9b 0 0) 13px 24px / 7px 7px no-repeat,
        linear-gradient(#9b9b9b 0 0) 24px 24px / 7px 7px no-repeat,
        #333;
}

.view-toggle.list {
    background:
        linear-gradient(#9b9b9b 0 0) 12px 13px / 20px 3px no-repeat,
        linear-gradient(#9b9b9b 0 0) 12px 21px / 20px 3px no-repeat,
        linear-gradient(#9b9b9b 0 0) 12px 29px / 20px 3px no-repeat,
        #333;
}

.admin-profile-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.admin-profile-trigger b {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-profile-trigger .admin-profile-context {
    max-width: 96px;
    overflow: hidden;
    color: #b8c4d4;
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-profile-trigger img,
.admin-profile-trigger span,
.profile-card img,
.profile-card > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 9px;
    background: #fff;
    color: #111;
    object-fit: cover;
    font-weight: 950;
}

.admin-profile-trigger .developer-profile-mark,
.profile-card > .developer-profile-mark {
    border: 1px solid rgba(255, 210, 63, 0.4);
    background: rgba(255, 210, 63, 0.14);
    color: #ffe38a;
}

.admin-topbar.is-developer-preview .admin-profile-trigger {
    border: 1px solid rgba(255, 210, 63, 0.26);
    border-radius: 999px;
    background: rgba(255, 210, 63, 0.07);
    padding: 5px 10px 5px 5px;
}

.admin-profile-dropdown {
    width: 260px;
    padding: 16px 0;
}

.profile-card {
    display: grid;
    gap: 6px;
    padding: 0 18px 14px;
}

.admin-dropdown .profile-card-link {
    display: grid;
    gap: 6px;
    min-height: 0;
    padding: 0 18px 14px;
    color: inherit;
    text-decoration: none;
}

.admin-dropdown .profile-card-link:hover {
    background: transparent;
}

.profile-card img,
.profile-card > span {
    width: 72px;
    height: 72px;
    border-radius: 12px;
}

.profile-card strong {
    max-width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-card small,
.profile-stats {
    color: #999;
}

.profile-card small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-stats {
    display: flex;
    max-width: 100%;
    gap: 32px;
    margin-top: 6px;
    min-width: 0;
}

.profile-stats b {
    display: block;
    color: #fff;
}

.public-profile-menu {
    display: inline-flex;
    align-items: center;
}

.public-profile-trigger {
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.public-profile-trigger:hover,
.public-profile-trigger:focus-visible {
    background: rgba(207, 31, 31, 0.12);
    outline: none;
}

.public-profile-trigger img,
.public-profile-trigger span {
    width: 30px;
    height: 30px;
    border-radius: 7px;
}

.public-profile-dropdown {
    z-index: 45;
    text-align: left;
}

.public-developer-menu .profile-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 2px 10px;
    padding: 12px 18px 14px;
}

.public-developer-menu .profile-card > span {
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    border-radius: 9px;
}

.creator-material-preview-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0 24px;
    padding: 14px 16px;
    border: 1px solid rgba(20, 153, 232, 0.45);
    border-left: 4px solid #1499e8;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(20, 153, 232, 0.13), rgba(255, 71, 64, 0.08));
}

.creator-material-preview-banner div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.creator-material-preview-banner span {
    color: #9fd7ff;
    font-size: 12px;
    font-weight: 900;
}

.creator-material-preview-banner strong {
    color: #fff;
    font-size: 16px;
}

.creator-material-preview-banner small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.creator-material-preview-banner a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid rgba(255, 71, 64, 0.55);
    border-radius: 999px;
    background: rgba(255, 71, 64, 0.12);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.dashboard-tabs,
.pill-tabs {
    display: flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    gap: 22px;
}

.dashboard-tabs a,
.dashboard-tabs .dashboard-tab-disabled,
.pill-tabs button,
.pill-tabs .pill-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #a9a9a9;
    padding: 0 24px;
    font: inherit;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.dashboard-tabs a.active,
.dashboard-tabs .dashboard-tab-disabled.active,
.pill-tabs button.active,
.pill-tabs .pill-tab.active {
    background: #343434;
    color: #fff;
}

.dashboard-tabs span,
.pill-tabs span {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: 8px;
    border-radius: 999px;
    background: #111;
    font-size: 12px;
    line-height: 20px;
}

.pill-tabs .filter-pill {
    background: #222;
    color: #d7d7d7;
}

.works-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 38px;
}

.sort-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 30px;
    color: #fff;
    font-weight: 900;
}

.sort-row a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border-radius: 999px;
    color: #bcbcbc;
    padding: 0 14px;
}

.sort-row a.active {
    background: #343434;
    color: #fff;
}

.admin-work-card p,
.work-metrics {
    color: #a0a0a0;
    font-size: 13px;
}

.work-card-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 26px;
    margin: auto 0 0;
}

.work-kind-chip {
    display: inline-flex;
    width: fit-content;
    min-height: 22px;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
}

.work-kind-chip.is-affiliate,
.affiliate-feed-status .material-kind.is-linked-post {
    background: rgba(20, 153, 232, 0.14);
    color: #58bdff;
}

.material-detail-actions .button,
.material-detail-actions button {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.material-detail-actions .button.subtle {
    min-width: 128px;
}

.material-detail-actions .button.primary {
    min-width: 88px;
    box-shadow: 0 8px 18px rgba(207, 31, 31, 0.16);
}

.material-detail-delete-form .button {
    min-width: 78px;
    min-height: 46px;
}

@media (max-width: 760px) {
.material-preset-page-head .button {
        width: 100%;
    }
}

.material-assignment-metric small,
.x-checked-at {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.x-checked-at.is-warning {
    color: #d83a3a;
}

.work-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 18px;
    min-height: 88px;
    align-content: start;
    margin-top: 12px;
    color: #f0f0f0;
}

.work-metrics span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    line-height: 1.2;
}

.work-metrics i {
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: #8f8f8f;
}

.metric-view i {
    border: 2px solid currentColor;
    border-radius: 50% 50% 45% 45%;
    transform: scaleX(1.25);
}

.metric-view i::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: currentColor;
}

.metric-like i::before,
.metric-like i::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 13px;
    border-radius: 9px 9px 0 0;
    background: currentColor;
}

.metric-like i::before {
    left: 2px;
    transform: rotate(-45deg);
}

.metric-like i::after {
    right: 2px;
    transform: rotate(45deg);
}

.metric-click i {
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(-45deg);
}

.metric-comment i {
    border-radius: 50%;
    background: currentColor;
}

.metric-comment i::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -2px;
    border-width: 4px 0 0 6px;
    border-style: solid;
    border-color: transparent transparent transparent currentColor;
}

.metric-ctr i {
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
}

.metric-ctr i::after {
    content: "";
    position: absolute;
    right: 0;
    top: 1px;
    width: 7px;
    height: 7px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
}

.metric-pages i {
    border: 2px solid currentColor;
    border-radius: 2px;
    box-shadow: 4px -4px 0 -1px #1f1f1f, 4px -4px 0 1px currentColor;
}

.work-actions {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.work-actions form {
    margin: 0;
}

.work-actions a,
.work-actions button {
    min-height: 30px;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    background: #1c1c1c;
    color: #d6d6d6;
    padding: 4px 9px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
}

.work-actions button.danger,
.material-detail-delete-form button.danger,
.confirm-actions button.danger {
    border-color: rgba(255, 69, 58, 0.42);
    background: rgba(255, 69, 58, 0.12);
    color: #ff8a80;
}

.moderation-confirm {
    display: grid;
    place-items: start center;
    min-height: calc(100vh - 160px);
    padding: 54px 16px;
}

.moderation-confirm-card {
    width: min(100%, 560px);
    border-radius: 12px;
    background: #1f1f1f;
    color: #f4f4f4;
    padding: 24px;
}

.moderation-confirm-card h1 {
    margin: 0 0 18px;
    font-size: 24px;
    line-height: 1.35;
}

.moderation-confirm-card p {
    margin: 16px 0 0;
    color: #aaa;
    line-height: 1.7;
}

.moderation-confirm-card .danger-text {
    color: #ffb0aa;
}

.confirm-work {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    border-radius: 8px;
    background: #181818;
    padding: 12px;
}

.confirm-work a {
    display: grid;
    place-items: center;
    width: 84px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 6px;
    background: #111;
    color: #cf1f1f;
    font-weight: 950;
}

.confirm-work img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.confirm-work strong,
.confirm-work small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.confirm-work small {
    margin-top: 6px;
    color: #999;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.confirm-actions a,
.confirm-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid #3a3a3a;
    border-radius: 999px;
    background: #303030;
    color: #fff;
    padding: 0 18px;
    font: inherit;
    font-weight: 900;
}

.confirm-actions a {
    background: transparent;
    color: #cfcfcf;
}

.nextscene-character-hub {
    width: 100%;
    max-width: none;
    margin-top: 36px;
    color: #f4f4f4;
}

.nextscene-section-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.nextscene-section-head p,
.nextscene-card-label {
    margin: 0 0 6px;
    color: #ff4a42;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0;
}

.nextscene-section-head h2 {
    margin: 0;
    font-size: 21px;
    line-height: 1.35;
}

.nextscene-section-head a,
.character-hub-empty a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 999px;
    background: #343434;
    color: #fff;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.nextscene-section-head a:hover,
.character-hub-empty a:hover {
    background: #444;
}

.character-avatar-file {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    opacity: 0;
    pointer-events: none;
}

.character-defaults-panel {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #343434;
    border-radius: 8px;
    background: #181818;
}

.character-defaults-panel h2 {
    margin: 0;
    color: #fff;
    font-size: 15px;
}

.character-icon-cropper {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid #343434;
    border-radius: 8px;
    background: #181818;
}

.character-icon-cropper[hidden] {
    display: none;
}

.character-icon-cropper-controls-only {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin-top: 2px;
    padding: 12px;
}

.character-icon-cropper-controls-only .character-icon-crop-controls {
    gap: 9px;
}

.character-icon-cropper-controls-only .character-icon-crop-controls label {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
}

.character-icon-cropper-controls-only .character-icon-crop-controls button {
    justify-self: start;
    padding: 8px 12px;
}

.character-icon-crop-preview {
    display: grid;
    place-items: center;
    width: 140px;
    height: 140px;
    overflow: hidden;
    border: 2px solid #333;
    border-radius: 50%;
    background: #101010;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.character-icon-crop-preview.is-dragging {
    cursor: grabbing;
    border-color: #ff4a42;
}

.character-icon-crop-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    will-change: transform;
}

.character-icon-crop-controls {
    display: grid;
    gap: 10px;
}

.character-icon-crop-controls label {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.character-icon-crop-controls input[type="range"] {
    min-height: 28px;
    accent-color: #ff3b35;
}

.character-icon-crop-controls button {
    justify-self: start;
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    background: #2d2d2d;
    color: #f2f2f2;
    padding: 0 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
}

.character-icon-crop-controls button:hover {
    background: #3a3a3a;
}

.summary-panel {
    min-width: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #181818;
    color: #f3f3f3;
}

.summary-panel h2 {
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid #202020;
    font-size: 16px;
}

.summary-panel p {
    margin: 0;
    padding: 20px;
    color: #aaa;
}

.notification-settings-panel {
    margin: 22px 0 28px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(20, 20, 20, 0.82);
    color: #f4f4f4;
}

.notification-settings-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.notification-settings-head h2 {
    margin: 3px 0 6px;
    font-size: 20px;
}

.notification-settings-head p {
    margin: 0;
    max-width: 760px;
    color: #aaa;
    line-height: 1.6;
}

.notification-settings-head a {
    flex: 0 0 auto;
    color: #5eb6f2;
    font-weight: 800;
    text-decoration: none;
}

.notification-channel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.notification-channel-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.notification-channel-card p,
.notification-channel-card small {
    margin: 0;
    color: #aaa;
    line-height: 1.55;
}

.notification-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.notification-toggle-row input {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    accent-color: #5eb6f2;
}

.notification-toggle-row span,
.notification-field {
    min-width: 0;
}

.notification-toggle-row strong {
    display: block;
    color: #fff;
    font-size: 15px;
}

.notification-toggle-row small {
    display: block;
    margin-top: 3px;
    word-break: break-all;
}

.notification-destination {
    display: grid;
    gap: 4px;
    min-width: 0;
    margin-left: 28px;
    padding: 2px 0 2px 12px;
    border-left: 3px solid #5eb6f2;
    background: linear-gradient(90deg, rgba(94, 182, 242, 0.12), rgba(94, 182, 242, 0));
}

.notification-destination-label {
    color: #9fcfff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
}

.notification-destination-value {
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.notification-field {
    display: grid;
    gap: 6px;
}

.notification-field span {
    color: #d8d8d8;
    font-size: 12px;
    font-weight: 900;
}

.notification-field input {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #101010;
    color: #fff;
    padding: 0 12px;
    font: inherit;
}

.notification-discord-connect {
    display: grid;
    gap: 4px;
}

.notification-discord-connect strong {
    color: #fff;
    font-size: 15px;
}

.notification-discord-connect small {
    color: #aaa;
}

.notification-discord-guide {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(94, 182, 242, 0.18);
    border-radius: 8px;
    background: rgba(94, 182, 242, 0.06);
}

.notification-discord-guide strong {
    color: #fff;
    font-size: 13px;
}

.notification-discord-guide ol {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 20px;
    color: #d6d6d6;
    line-height: 1.55;
}

.notification-discord-guide a {
    color: #45b7ff;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.notification-discord-guide a:hover,
.notification-discord-guide a:focus-visible {
    color: #7bd0ff;
}

.notification-discord-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.notification-manual-discord {
    padding-top: 2px;
}

.notification-manual-discord summary {
    cursor: pointer;
    color: #9fcfff;
    font-size: 12px;
    font-weight: 900;
}

.notification-manual-discord[open] {
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 8px;
}

.notification-manual-discord p {
    margin: 0;
}

.notification-error {
    color: #ff8a8a !important;
}

.notification-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
}

.notification-actions small {
    color: #9f9f9f;
    line-height: 1.5;
}

.notification-log-list {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.notification-log-list > strong {
    font-size: 13px;
}

.notification-log-row {
    display: grid;
    grid-template-columns: 130px 90px 76px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #cfcfcf;
    font-size: 12px;
}

.notification-log-row b {
    color: #64d69d;
}

.notification-log-row.is-failed b {
    color: #ff8a8a;
}

.notification-log-row small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.x-followers-filter-row a.active,
.x-followers-group-row a.active {
    border-color: rgba(94, 182, 242, 0.45);
    background: rgba(94, 182, 242, 0.16);
    color: #fff;
}

@media (max-width: 720px) {
.notification-settings-panel {
        padding: 14px;
    }

.notification-settings-head,
    .notification-actions,
    .mutual-likes-head,
    .x-followers-head,
    .x-followers-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

.notification-channel-grid {
        grid-template-columns: 1fr;
    }

.notification-destination {
        margin-left: 0;
    }

.notification-log-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

.notification-log-row small {
        white-space: normal;
    }
}

.summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #202020;
}

.summary-head h2 {
    border: 0;
}

.summary-head a {
    padding-right: 20px;
    color: #a8a8a8;
    font-size: 13px;
    font-weight: 800;
}

.total-reactions dl {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 20px;
}

.total-reactions div {
    display: grid;
    gap: 4px;
}

.total-reactions dt {
    color: #9a9a9a;
    font-size: 13px;
}

.total-reactions dd {
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 950;
}

.recent-work-list {
    display: grid;
    gap: 1px;
    background: #202020;
}

.recent-work {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 16px;
    background: #181818;
}

.recent-work img,
.recent-work a > span {
    width: 88px;
    height: 88px;
    border-radius: 6px;
    object-fit: cover;
    background: #111;
}

.recent-work a > span {
    display: grid;
    place-items: center;
    color: #cf1f1f;
    font-weight: 950;
}

.recent-work strong {
    display: block;
    color: #fff;
}

.recent-work small {
    display: block;
    margin-top: 8px;
    color: #a7a7a7;
}

.creator-snapshot {
    padding-bottom: 18px;
}

.creator-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 18px 20px 8px;
}

.creator-row img,
.creator-row > span {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    background: #fff;
    color: #111;
}

.creator-row > span {
    display: grid;
    place-items: center;
    font-weight: 950;
}

.creator-row strong,
.creator-row small {
    display: block;
}

.creator-row small {
    margin-top: 6px;
    color: #aaa;
}

.follow-numbers {
    display: flex;
    gap: 28px;
    padding: 12px 20px 0;
    color: #aaa;
}

.follow-numbers b {
    display: block;
    color: #fff;
    font-size: 18px;
}

.creator-funnel-periods a.active {
    background: #cf1f3d;
    color: #fff;
}

.creator-provider-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.creator-provider-list small {
    display: inline-flex;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: #ddd;
}

.report-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid #2b2b2b;
}

.report-item a {
    color: #fff;
}

.report-item span {
    color: #aaa;
}

.post-page-backline {
    display: flex;
    width: min(100% - 32px, 810px);
    margin: 18px auto 0;
}

.post-page-backline a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #333;
    border-radius: 999px;
    background: #171717;
    color: #d8eaff;
    font-size: 13px;
    font-weight: 900;
}

.post-page-backline a:hover {
    border-color: #1499e8;
    background: #202020;
    color: #fff;
}

.post-type-tabs span.active {
    background: #565656;
    color: #fff;
}

.pixiv-preview.has-ordered-images,
.upload-preview.has-ordered-images {
    grid-template-columns: repeat(auto-fill, 132px);
    align-items: start;
}

.x-import-section-title.compact strong {
    color: #ff3b14;
    font-size: 14px;
}

.tag-source-input {
    display: none !important;
}

.tag-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid #333;
    border-radius: 4px;
    background: #1f1f1f;
}

.tag-chip {
    display: inline-flex;
    position: static;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    right: auto;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.tag-chip.is-suggested,
.tag-chip.is-manual {
    color: #5eb6f2;
}

.tag-chip button {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: #333;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

.tag-chip button:hover {
    background: #555;
}

.tag-entry-input {
    flex: 1 1 140px;
    min-width: 120px;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    outline: 0;
}

.tag-entry-input::placeholder {
    color: #8f8f8f;
}

.post-form-main {
    display: grid;
    gap: 16px;
    width: min(100% - 32px, 810px);
    margin: 28px auto 80px;
}

.pixiv-submit.compact {
    min-width: 120px;
    min-height: 40px;
}

.character-post-card {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.character-post-card h2 {
    margin: 0;
    color: #fff;
    font-size: 15px;
}

.compact-character-grid {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}

.tag-card {
    padding-bottom: 14px;
}

.recommended-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 14px 18px 0;
}

.recommended-tags strong {
    margin-right: 20px;
    color: #ff3b14;
    font-size: 13px;
}

.recommended-tags button {
    border: 0;
    background: transparent;
    color: #5eb6f2;
    font: inherit;
    font-weight: 800;
    padding: 0;
    cursor: pointer;
}

.recommended-tags button:hover {
    color: #8dd0ff;
}

.tag-lock {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 18px 0;
    padding-top: 14px;
    border-top: 1px solid #333;
    color: #ddd;
    font-size: 14px;
}

.tag-lock input {
    width: 22px;
    min-height: 22px;
    accent-color: #1499e8;
}

.nextscene-link-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-left: 4px solid #cf1f1f;
}

.nextscene-link-card h2 {
    margin: 0;
    color: #fff;
    font-size: 17px;
    line-height: 1.45;
}

.nextscene-link-card p {
    margin: 0;
    color: #aaa;
    font-size: 13px;
    line-height: 1.75;
}

.nextscene-link-card label {
    display: grid;
    gap: 8px;
}

.nextscene-link-card label span {
    color: #ddd;
    font-size: 13px;
    font-weight: 900;
}

.nextscene-link-card input {
    min-height: 46px;
}

.product-history-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.product-history-help kbd {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 1px 8px;
    border: 1px solid #4b5f70;
    border-bottom-color: #2f4150;
    border-radius: 4px;
    background: #101820;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
}

.product-link-type[hidden],
.x-import-image-usage[hidden],
[data-purpose-post][hidden],
[data-purpose-material][hidden],
[data-purpose-post-material][hidden],
.post-guideline[hidden] {
    display: none !important;
}

.healthy-mention-account-list {
    display: grid;
    gap: 6px;
}

.healthy-mention-account {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: min(280px, 62vw);
}

.healthy-mention-account-avatar {
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    width: 34px;
    height: 34px;
    border: 1px solid #2f6c9e;
    border-radius: 999px;
    background: #193248;
    color: #8ac9ff;
    font-size: 14px;
    font-weight: 900;
}

.healthy-mention-account-avatar.is-loading {
    opacity: .68;
}

.healthy-mention-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.healthy-mention-account-text {
    display: grid;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.healthy-mention-account-text strong,
.healthy-mention-account-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.healthy-mention-account-text strong {
    color: #fff;
    font-size: 13px;
}

.healthy-mention-account-text small {
    color: #8ac9ff;
    font-size: 12px;
}

.option-row,
.checklist-card,
.admin-app .policy-checklist {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    min-height: 68px;
    padding: 14px 18px;
    border: 0;
    background: #1f1f1f;
}

.option-row strong {
    min-width: 160px;
    color: #ff3b14;
}

.option-row label,
.checklist-card label,
.admin-app .policy-checklist label {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
}

.option-row input,
.checklist-card input,
.admin-app .policy-checklist input {
    width: 22px;
    min-height: 22px;
    accent-color: #1499e8;
}

.option-row a {
    margin-left: auto;
    color: #62b8f5;
    font-size: 13px;
}

.post-guideline {
    color: #aaa;
    text-align: center;
}

.post-guideline a {
    color: #62b8f5;
}

.promo-option-row {
    display: none !important;
    border-left: 4px solid #1499e8;
}

.promo-option-row span {
    color: #aaa;
    font-size: 12px;
    font-weight: 800;
}

.affiliate-invite-card .button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.circle-profile-edit-head,
.circle-profile-edit-actions {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
}

.circle-profile-edit-head h1 {
    margin: 0;
    color: var(--ink);
    font-size: 30px;
}

.circle-profile-edit-head p:last-child {
    max-width: 720px;
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.7;
}

.admin-app .circle-profile-edit-head .button.ghost,
.admin-app .circle-profile-edit-actions .button.ghost {
    border-color: #4a4a4a;
    background: #252525;
    color: #f5f5f5;
}

.circle-profile-preview-report,
.circle-profile-pattern-report {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #393939;
    border-radius: 8px;
    background: #202020;
    box-shadow: none;
}

.circle-profile-report-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.circle-profile-report-head h2 {
    margin: 0;
    color: #f5f5f5;
    font-size: 20px;
}

.circle-profile-report-head p {
    max-width: 760px;
    margin: 6px 0 0;
    color: #c7c7c7;
    line-height: 1.7;
}

.circle-profile-report-head > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 73, 68, 0.42);
    border-radius: 999px;
    background: rgba(207, 31, 31, 0.18);
    color: #ffd7d5;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.circle-profile-edit-preview .entity-hero {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.circle-profile-edit-preview .entity-cover {
    min-height: clamp(150px, 22vw, 245px);
}

.circle-profile-pattern-preview .entity-hero {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.circle-profile-pattern-preview .entity-cover {
    min-height: 104px;
}

.circle-profile-pattern-preview .entity-main {
    gap: 8px;
    padding: 0 12px 12px;
}

.circle-profile-pattern-preview .entity-avatar-row {
    margin-top: -38px;
}

.circle-profile-pattern-preview .entity-avatar {
    width: 76px;
    height: 76px;
    border-width: 3px;
    border-radius: 10px;
}

.circle-profile-pattern-preview .circle-profile-avatar.fallback {
    padding: 0 6px;
    font-size: 22px;
}

.circle-profile-pattern-preview .circle-profile-content {
    grid-template-columns: 1fr;
    gap: 10px;
}

.circle-profile-pattern-preview .entity-copy {
    gap: 4px;
    max-width: none;
}

.circle-profile-pattern-preview .entity-kicker {
    font-size: 10px;
}

.circle-profile-pattern-preview .entity-copy h1 {
    font-size: 22px;
}

.circle-profile-pattern-preview .entity-handle {
    font-size: 12px;
}

.circle-profile-pattern-preview .entity-copy > p.entity-bio {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.circle-profile-pattern-preview .entity-stats {
    gap: 9px;
    margin-top: 6px;
}

.circle-profile-pattern-preview .entity-stats span {
    font-size: 11px;
}

.circle-profile-pattern-preview .entity-stats strong {
    font-size: 13px;
}

.circle-profile-pattern-preview .circle-link-panel {
    gap: 8px;
    padding: 10px;
    box-shadow: none;
}

.circle-profile-pattern-preview .circle-link-hub {
    gap: 7px;
}

.circle-profile-pattern-preview .circle-link-card {
    position: relative;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 50px;
    padding: 7px 8px;
    border-radius: 8px;
}

.circle-profile-pattern-preview .circle-link-icon {
    width: 34px;
    height: 34px;
    font-size: 13px;
}

.circle-profile-pattern-preview .circle-link-copy strong {
    font-size: 12px;
}

.circle-profile-pattern-preview .circle-link-copy small,
.circle-profile-pattern-preview .circle-link-card em {
    font-size: 10px;
}

.circle-profile-pattern-preview.is-sales .circle-link-panel {
    border-width: 2px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--circle-accent) 15%, #fff), #fff7f5);
}

.circle-profile-pattern-preview.is-sales .circle-link-card:first-child {
    min-height: 78px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    border-color: color-mix(in srgb, var(--circle-accent) 82%, #671010);
    background: linear-gradient(135deg, var(--circle-accent), #8c1515);
    color: #fff;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--circle-accent) 30%, transparent);
}

.circle-profile-pattern-preview.is-sales .circle-link-card:first-child .circle-link-icon {
    background: rgba(255, 255, 255, 0.92);
    color: var(--circle-accent);
}

.circle-profile-pattern-preview.is-sales .circle-link-card:first-child .circle-link-copy small,
.circle-profile-pattern-preview.is-sales .circle-link-card:first-child em {
    color: #fff4f2;
}

.circle-profile-pattern-preview.is-sales .circle-link-card:not(:first-child) {
    margin-left: 12px;
    border-style: dashed;
}

.circle-profile-pattern-preview.is-catalog .entity-cover {
    min-height: 92px;
}

.circle-profile-pattern-preview.is-catalog .circle-link-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(239, 248, 252, 0.96));
}

.circle-profile-pattern-preview.is-catalog .circle-link-hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.circle-profile-pattern-preview.is-catalog .circle-link-card {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: 84px;
    padding: 9px;
}

.circle-profile-pattern-preview.is-catalog .circle-link-card:first-child {
    grid-column: span 2;
    min-height: 58px;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
}

.circle-profile-pattern-preview.is-catalog .circle-link-card:not(:first-child) em {
    justify-self: start;
    padding-top: 4px;
    border-top: 1px solid color-mix(in srgb, var(--circle-accent) 24%, var(--line));
}

.circle-profile-pattern-preview.is-social .entity-cover {
    min-height: 70px;
    border-bottom: 0;
    background:
        linear-gradient(135deg, #f8fbf8, color-mix(in srgb, var(--circle-accent) 12%, #fff));
}

.circle-profile-pattern-preview.is-social .entity-avatar-row {
    justify-content: center;
    margin-top: -36px;
}

.circle-profile-pattern-preview.is-social .circle-profile-content,
.circle-profile-pattern-preview.is-social .entity-copy {
    justify-items: center;
    text-align: center;
}

.circle-profile-pattern-preview.is-social .entity-stats {
    justify-content: center;
}

.circle-profile-pattern-preview.is-social .circle-link-panel {
    width: 100%;
    border-radius: 18px;
    background: #fbfffc;
}

.circle-profile-pattern-preview.is-social .circle-link-card {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    min-height: 42px;
    border-radius: 999px;
    padding: 6px 10px;
    background: #fff;
}

.circle-profile-pattern-preview.is-social .circle-link-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: 11px;
}

.circle-profile-pattern-preview.is-social .circle-link-copy small {
    display: none;
}

.circle-profile-pattern-preview.is-campaign .entity-cover {
    min-height: 82px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(37, 13, 9, 0.42)),
        linear-gradient(135deg, color-mix(in srgb, var(--circle-accent) 28%, #fff), #3b2924);
}

.circle-profile-pattern-preview.is-campaign .circle-link-panel {
    border-width: 2px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--circle-accent) 18%, #fff), #fff8f4);
}

.circle-profile-pattern-preview.is-campaign .circle-link-hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.circle-profile-pattern-preview.is-campaign .circle-link-card:first-child {
    grid-column: 1 / -1;
    min-height: 88px;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    padding: 13px;
    border-color: color-mix(in srgb, var(--circle-accent) 78%, #76210f);
    background:
        linear-gradient(135deg, var(--circle-accent), color-mix(in srgb, var(--circle-accent) 70%, #3b1510));
    color: #fff;
}

.circle-profile-pattern-preview.is-campaign .circle-link-card:first-child .circle-link-icon {
    background: rgba(255, 255, 255, 0.92);
    color: var(--circle-accent);
}

.circle-profile-pattern-preview.is-campaign .circle-link-card:first-child .circle-link-copy small {
    color: #fff6f1;
}

.circle-profile-pattern-preview.is-campaign .circle-link-card:first-child em {
    position: absolute;
    top: 8px;
    right: 10px;
    color: #fff;
}

.circle-profile-pattern-preview.is-campaign .circle-link-card:not(:first-child) {
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 58px;
}

.circle-profile-pattern-preview.is-campaign .circle-link-card:not(:first-child) em {
    display: none;
}

.circle-profile-edit-head-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.admin-app .circle-profile-design-actions .button.ghost {
    border-color: #f2e8e2;
    background: transparent;
    color: #f7f2ef;
}

.circle-profile-builder-header-actions .button {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
}

.circle-profile-builder-device.is-mobile .circle-profile-builder-header-mode-tabs button,
.circle-profile-builder-device.is-mobile .circle-profile-builder-header-actions .button {
    min-height: 28px;
    padding: 5px 8px;
    font-size: 11px;
}

.circle-profile-color-studio {
    display: grid;
    gap: 10px;
}

.circle-profile-color-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
}

.circle-profile-color-swatch,
[data-builder-accent-color-swatches] button,
[data-builder-main-color-swatches] button {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px;
    border: 1px solid #3c3c3c;
    border-radius: 8px;
    background: #171717;
    color: #eeeeee;
    text-align: left;
    cursor: pointer;
    letter-spacing: 0;
}

.circle-profile-color-swatch span,
[data-builder-accent-color-swatches] button span,
[data-builder-main-color-swatches] button span,
.circle-profile-color-current span,
[data-builder-accent-color-current] span,
[data-builder-main-color-current] span {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 999px;
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.circle-profile-color-swatch strong,
[data-builder-accent-color-swatches] button strong,
[data-builder-main-color-swatches] button strong {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.circle-profile-color-swatch.is-active,
[data-builder-accent-color-swatches] button.is-active,
[data-builder-main-color-swatches] button.is-active {
    border-color: color-mix(in srgb, var(--swatch) 72%, #ffffff);
    background: color-mix(in srgb, var(--swatch) 18%, #171717);
}

.circle-profile-color-code {
    display: grid;
    gap: 6px;
    color: #d0d0d0;
    font-size: 12px;
    font-weight: 900;
}

.circle-profile-color-code input {
    width: 100%;
    min-height: 42px;
    border: 1px solid #464646;
    border-radius: 8px;
    background: #101010;
    color: #f6f6f6;
    font: inherit;
    font-weight: 950;
}

.circle-profile-color-code input.is-invalid {
    border-color: #ff4d48;
    box-shadow: 0 0 0 3px rgba(255, 77, 72, 0.16);
}

.circle-profile-color-current,
[data-builder-accent-color-current],
[data-builder-main-color-current] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #3c3c3c;
    border-radius: 8px;
    background: #151515;
    color: #f5f5f5;
    font-size: 12px;
    font-weight: 950;
}

.circle-profile-color-current strong,
[data-builder-accent-color-current] strong,
[data-builder-main-color-current] strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.circle-profile-builder-mobile-header-head .button {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 10px;
}

.circle-profile-builder-mobile-header-head .button:disabled {
    cursor: not-allowed;
    opacity: .36;
}

.circle-profile-builder-preview .entity-hero {
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
}

.circle-profile-builder-preview .entity-main {
    position: relative;
    z-index: 7;
}

.circle-profile-builder-device.is-mobile .circle-profile-builder-preview .circle-profile-content,
.circle-profile-builder-device.is-mobile .circle-profile-builder-preview.circle-layout-showcase .circle-profile-content,
.circle-profile-builder-device.is-mobile .circle-profile-builder-preview.circle-layout-compact .circle-profile-content {
    grid-template-columns: 1fr;
    max-width: none;
}

.circle-profile-builder-device.is-mobile .circle-profile-builder-preview.circle-layout-showcase .circle-link-hub {
    grid-template-columns: 1fr;
}

.circle-profile-builder-device.is-mobile .circle-profile-builder-preview.circle-theme-gallery .circle-link-hub {
    grid-template-columns: 1fr;
}

.circle-profile-builder-preview .circle-link-card {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.circle-profile-builder-preview .circle-link-card.is-draft {
    border-style: dashed;
    opacity: 0.74;
}

.circle-profile-builder-preview .circle-link-card.is-dragging,
.circle-profile-builder-link-row.is-dragging {
    opacity: 0.92;
    cursor: grabbing;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

[data-builder-link-icon-options],
.circle-profile-builder-link-icon-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

[data-builder-link-icon-options] button,
.circle-profile-builder-link-icon-options button,
.circle-profile-builder-link-icon-pill {
    display: inline-grid;
    min-width: 38px;
    min-height: 32px;
    place-items: center;
    padding: 6px 9px;
    border: 1px solid #454545;
    border-radius: 999px;
    background: #151515;
    color: #f5f5f5;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

[data-builder-link-icon-options] button.is-active,
.circle-profile-builder-link-icon-options button.is-active,
.circle-profile-builder-link-icon-pill.is-active {
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 70%, #ffffff);
    background: color-mix(in srgb, var(--circle-accent, var(--accent)) 18%, #151515);
}

.circle-profile-device-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 420px);
    gap: 14px;
    align-items: start;
}

.circle-profile-device,
.circle-profile-mini-device {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.circle-profile-device strong,
.circle-profile-mini-device span {
    color: #f0f0f0;
    font-size: 13px;
    font-weight: 900;
}

.circle-profile-device iframe,
.circle-profile-mini-device iframe {
    display: block;
    width: 100%;
    border: 1px solid #3d3d3d;
    border-radius: 8px;
    background: #101010;
}

.circle-profile-device.is-desktop iframe {
    height: 620px;
}

.circle-profile-device.is-mobile {
    justify-items: center;
}

.circle-profile-device.is-mobile iframe {
    width: 390px;
    max-width: 100%;
    height: 760px;
}

.circle-profile-mini-device.is-desktop iframe {
    height: 420px;
}

.circle-profile-mini-device.is-mobile iframe {
    width: 390px;
    height: 520px;
}

.circle-profile-design-preview-body .entity-profile {
    max-width: 1180px;
    margin: 0 auto;
}

.circle-profile-design-preview-body.is-mobile .entity-profile {
    width: 100%;
    max-width: none;
}

.circle-profile-design-preview-body.is-mobile .circle-profile-content,
.circle-profile-design-preview-body.is-mobile .circle-layout-showcase .circle-profile-content,
.circle-profile-design-preview-body.is-mobile .circle-layout-compact .circle-profile-content {
    grid-template-columns: 1fr;
    max-width: none;
}

.circle-profile-design-preview-body.is-mobile .circle-layout-showcase .circle-link-hub {
    grid-template-columns: 1fr;
}

.circle-profile-design-preview-body.is-mobile .entity-actions {
    justify-content: flex-start;
}

.circle-profile-design-preview-body.is-mobile .circle-link-panel {
    max-width: none;
}

.circle-profile-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.circle-profile-edit-panel {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.circle-profile-edit-panel h2 {
    margin: 0;
    font-size: 18px;
}

.circle-profile-edit-panel p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.circle-profile-edit-panel label,
.circle-header-field {
    display: grid;
    gap: 7px;
}

.circle-profile-edit-panel label > span,
.circle-edit-media-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.circle-profile-edit-panel em {
    font-style: normal;
}

.circle-profile-edit-panel .is-required {
    color: var(--accent-strong);
}

.circle-profile-edit-panel input,
.circle-profile-edit-panel textarea,
.circle-profile-edit-panel select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--field-border);
    border-radius: 8px;
    background: var(--field-bg);
    color: var(--ink);
}

.circle-profile-review-switch {
    gap: 14px;
}

.circle-profile-review-switch-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.circle-profile-review-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid #555;
    border-radius: 999px;
    color: #f5f5f5;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}

.circle-profile-review-status.is-review {
    border-color: rgba(255, 73, 68, 0.45);
    background: rgba(207, 31, 31, 0.18);
    color: #ffd7d5;
}

.circle-profile-review-status.is-profile {
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(52, 211, 153, 0.14);
    color: #c7f9df;
}

.circle-profile-review-switch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.circle-edit-media-grid {
    display: grid;
    grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.circle-header-upload {
    position: relative;
    display: grid;
    place-items: stretch;
    overflow: hidden;
    min-height: 170px;
    border: 1px dashed color-mix(in srgb, var(--circle-accent, var(--accent)) 42%, var(--line));
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--circle-accent, var(--accent)) 10%, transparent), transparent 32%),
        var(--subtle-bg);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.circle-header-upload:hover,
.circle-header-upload:focus-within {
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 68%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--circle-accent, var(--accent)) 13%, transparent);
}

.circle-header-upload.is-dragging {
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 82%, #ffffff);
    background:
        radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--circle-accent, var(--accent)) 18%, transparent), transparent 34%),
        color-mix(in srgb, var(--circle-accent, var(--accent)) 12%, var(--subtle-bg));
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--circle-accent, var(--accent)) 18%, transparent),
        0 18px 38px color-mix(in srgb, var(--circle-accent, var(--accent)) 14%, transparent);
    transform: translateY(-1px);
}

.circle-header-upload input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.circle-header-upload img {
    width: 100%;
    height: 100%;
    min-height: 170px;
    object-fit: cover;
}

.circle-header-upload span {
    display: grid;
    min-height: 170px;
    place-items: center;
    padding: 18px;
    color: var(--accent-strong);
    font-weight: 900;
    line-height: 1.45;
    text-align: center;
}

.circle-remove-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.circle-remove-check input {
    width: auto;
}

.circle-link-edit-list {
    display: grid;
    gap: 8px;
}

.circle-link-edit-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1.3fr);
    gap: 8px;
}

.circle-profile-custom-controls {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #333;
    border-radius: 10px;
    background: #151515;
}

.circle-profile-custom-controls[hidden] {
    display: none;
}

.circle-theme-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.circle-theme-options label {
    display: grid;
    position: relative;
}

.circle-theme-options input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    opacity: 0;
    pointer-events: none;
}

.circle-theme-options span {
    display: grid;
    min-height: 46px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
}

.circle-theme-options input:checked + span {
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 58%, var(--line));
    background: color-mix(in srgb, var(--circle-accent, var(--accent)) 12%, var(--surface));
    color: var(--accent-strong);
}

.circle-color-input {
    min-height: 46px;
    padding: 4px;
}

.compact-copy {
    grid-template-columns: minmax(0, 1fr) 72px;
    margin-top: 4px;
}

.affiliate-filter-form.is-impression-filter .button[type="submit"] {
    width: 100%;
    min-width: 0;
    white-space: nowrap;
}

.usage-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
}

.usage-badge.is-unused {
    background: var(--surface);
    color: var(--muted);
}

.usage-badge.is-used {
    background: rgba(42, 173, 104, 0.16);
    color: #16834a;
}

.sensitive-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
}

.sensitive-badge.is-ok {
    background: rgba(42, 173, 104, 0.16);
    color: #16834a;
}

.sensitive-badge.is-ng {
    background: rgba(255, 75, 75, 0.16);
    color: #d83a3a;
}

.x-visibility-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
}

.x-visibility-badge.is-ok {
    background: rgba(42, 173, 104, 0.14);
    color: #16834a;
}

.x-visibility-badge.is-ng,
.x-visibility-badge.is-sensitive,
.material-warning {
    background: rgba(255, 75, 75, 0.16);
    color: #d83a3a;
}

.x-visibility-badge.is-error {
    background: rgba(245, 158, 11, 0.18);
    color: #a16207;
}

.x-visibility-badge.is-unknown {
    background: var(--surface);
    color: var(--muted);
}

.affiliate-report-nav-button.is-next {
    right: 10px;
}

@media (min-width: 1180px) {
.affiliate-report-nav-button.is-next {
        right: max(18px, calc((100vw - 1040px) / 2 - 82px));
    }
}

.usage-radio-row,
.sensitive-radio-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(118px, 1fr));
    gap: 10px;
}

.usage-radio-row label,
.sensitive-radio-row label,
.affiliate-usage-form label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.usage-radio-row .usage-choice,
.sensitive-radio-row .sensitive-choice {
    position: relative;
    justify-content: flex-start;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
}

.usage-radio-row .usage-choice input,
.sensitive-radio-row .sensitive-choice input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.usage-radio-row .usage-choice::before,
.sensitive-radio-row .sensitive-choice::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(170, 178, 196, 0.78);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.22);
}

.usage-radio-row .usage-choice:has(input[value="used"]:checked) {
    border-color: #2aad68;
    background: rgba(42, 173, 104, 0.14);
    box-shadow: 0 0 0 1px rgba(42, 173, 104, 0.18);
}

.usage-radio-row .usage-choice:has(input[value="used"]:checked)::before {
    border-color: #2aad68;
    background: radial-gradient(circle, #ffffff 0 35%, #2aad68 38% 100%);
    box-shadow: 0 0 0 3px rgba(42, 173, 104, 0.18);
}

.usage-radio-row .usage-choice:has(input[value="unused"]:checked) {
    border-color: var(--accent);
    background: rgba(20, 153, 232, 0.12);
    box-shadow: 0 0 0 1px rgba(20, 153, 232, 0.16);
}

.usage-radio-row .usage-choice:has(input[value="unused"]:checked)::before {
    border-color: var(--accent);
    background: radial-gradient(circle, #ffffff 0 35%, var(--accent) 38% 100%);
    box-shadow: 0 0 0 3px rgba(20, 153, 232, 0.16);
}

.sensitive-radio-row .sensitive-choice.is-ok:has(input:checked) {
    border-color: #2aad68;
    background: rgba(42, 173, 104, 0.14);
    box-shadow: 0 0 0 1px rgba(42, 173, 104, 0.18);
}

.sensitive-radio-row .sensitive-choice.is-ok:has(input:checked)::before {
    border-color: #2aad68;
    background: radial-gradient(circle, #ffffff 0 35%, #2aad68 38% 100%);
    box-shadow: 0 0 0 3px rgba(42, 173, 104, 0.18);
}

.sensitive-radio-row .sensitive-choice.is-ng:has(input:checked) {
    border-color: #ff4b4b;
    background: rgba(255, 75, 75, 0.13);
    box-shadow: 0 0 0 1px rgba(255, 75, 75, 0.18);
}

.sensitive-radio-row .sensitive-choice.is-ng:has(input:checked)::before {
    border-color: #ff4b4b;
    background: radial-gradient(circle, #ffffff 0 35%, #ff4b4b 38% 100%);
    box-shadow: 0 0 0 3px rgba(255, 75, 75, 0.18);
}

.usage-radio-row .usage-choice span,
.sensitive-radio-row .sensitive-choice span {
    color: var(--ink);
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 760px) {
body.circle-profile-landing .site-header,
    body.character-profile-landing .site-header,
    body.circle-profile-landing .adult-site-notice,
    body.character-profile-landing .adult-site-notice {
        display: none;
    }

body.circle-profile-landing .circle-profile-landing-shell,
    body.character-profile-landing .character-profile-landing-shell {
        padding-top: 8px;
    }

body.circle-profile-landing .circle-profile-landing-shell > .flash,
    body.character-profile-landing .character-profile-landing-shell > .flash {
        margin-top: 4px;
    }

.circle-profile-public-page > .circle-profile-hero {
        width: calc(100% - 20px);
        border-radius: 20px;
    }

.circle-profile-public-page .circle-profile-cover {
        min-height: 104px;
    }

.circle-profile-public-page .circle-profile-hero.no-profile-cover .circle-profile-cover {
        min-height: 82px;
    }

.circle-profile-content {
        grid-template-columns: 1fr;
        gap: 18px;
    }

.circle-layout-showcase .circle-link-hub {
        grid-template-columns: 1fr;
    }

.circle-link-panel {
        padding: 12px;
    }

.circle-link-card {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        min-height: 60px;
        padding: 9px 10px;
    }

.circle-link-icon {
        width: 40px;
        height: 40px;
    }

.circle-profile-public-page .entity-avatar-row {
        margin-top: -40px;
    }

.circle-profile-public-page .circle-profile-avatar {
        width: 80px;
        height: 80px;
        border-radius: 18px;
    }

.circle-profile-public-page .circle-profile-main {
        padding-inline: 14px;
        padding-bottom: 16px;
    }

.circle-profile-public-page .circle-profile-content {
        gap: 11px;
    }

.circle-profile-public-page .entity-copy h1 {
        font-size: 25px;
    }

.circle-profile-public-page .entity-copy > p.entity-bio {
        margin-top: 3px;
        font-size: 13px;
        line-height: 1.55;
    }

.circle-profile-public-page .entity-profile-inline-follow,
    body.character-profile-landing .entity-profile-inline-follow {
        margin-top: 3px;
    }

.circle-profile-public-page .entity-actions .circle-profile-action-follow {
        margin-top: 0;
    }

.circle-profile-public-page .entity-profile-inline-follow > small,
    body.character-profile-landing .entity-profile-inline-follow > small {
        display: none;
    }

.circle-profile-public-page .entity-profile-inline-follow .entity-follow-button,
    body.character-profile-landing .entity-profile-inline-follow .entity-follow-button {
        min-height: 40px;
        padding: 7px 14px;
    }

.circle-profile-public-page .entity-stats {
        gap: 10px;
        margin-top: 4px;
        padding: 6px 11px;
    }

.circle-profile-public-page .entity-stats span:last-child,
    body.character-profile-landing .entity-stats span:last-child {
        display: none;
    }

.circle-profile-public-page .entity-actions {
        top: 10px;
        right: 10px;
    }

.circle-profile-public-page .entity-actions .entity-follow-button {
        padding-right: 10px;
        padding-left: 10px;
        font-size: 11.5px;
    }

.circle-profile-public-page .entity-actions .circle-profile-edit-button {
        min-height: 30px;
        padding: 5px 9px;
        font-size: 0;
    }

.circle-profile-public-page .entity-actions .circle-profile-edit-button::before {
        content: "編集";
        font-size: 11px;
        font-weight: 900;
    }

.circle-profile-public-page .circle-profile-linkbio .circle-link-card {
        grid-template-columns: 40px minmax(0, 1fr) 22px;
        min-height: 58px;
        gap: 10px;
        padding: 8px 10px;
    }

.circle-profile-public-page .circle-profile-linkbio .circle-link-icon {
        width: 40px;
        height: 40px;
    }

.circle-profile-public-page #characters,
    .circle-profile-public-page #manga,
    .circle-profile-public-page #posts {
        scroll-margin-top: 16px;
    }

body.character-profile-landing .character-profile-landing-shell {
        padding-bottom: 42px;
    }

body.character-profile-landing .character-entity-hero {
        width: calc(100% - 20px);
        margin-inline: auto;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 20px;
    }

body.character-profile-landing .character-entity-hero .entity-cover {
        min-height: 110px;
    }

body.character-profile-landing .character-entity-hero .entity-main {
        gap: 8px;
        padding: 0 14px 16px;
    }

body.character-profile-landing .character-entity-hero .entity-avatar-row {
        margin-top: -42px;
    }

body.character-profile-landing .character-entity-hero .entity-avatar {
        width: 88px;
        height: 88px;
    }

body.character-profile-landing .character-entity-hero .entity-copy {
        gap: 5px;
    }

body.character-profile-landing .character-entity-hero .entity-copy h1 {
        font-size: 26px;
    }

body.character-profile-landing .character-entity-hero .entity-copy > p.entity-bio {
        margin-top: 4px;
        font-size: 13px;
        line-height: 1.58;
    }

body.character-profile-landing .character-circle-card {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 64px;
        margin-top: 6px;
        padding: 7px 10px 7px 7px;
    }

body.character-profile-landing .character-circle-avatar {
        width: 48px;
        height: 48px;
    }

body.character-profile-landing .entity-stats {
        margin-top: 4px;
    }

.character-circle-card {
        width: 100%;
    }

.circle-profile-edit-head,
    .circle-profile-edit-actions {
        display: grid;
        align-items: start;
    }

.circle-profile-edit-grid {
        order: 1;
    }

.circle-profile-edit-actions {
        position: sticky;
        bottom: 10px;
        z-index: 30;
        order: 2;
        padding: 10px;
        border: 1px solid #3d3d3d;
        border-radius: 12px;
        background: rgba(24, 24, 24, 0.94);
        box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.34);
        backdrop-filter: blur(14px);
    }

.circle-profile-edit-actions .button {
        width: 100%;
        min-height: 44px;
    }

.circle-profile-preview-report {
        order: 3;
    }

.circle-profile-edit-head-actions,
    .circle-profile-design-bridge,
    .circle-profile-design-head,
    .circle-profile-design-section-head {
        display: grid;
        justify-content: stretch;
    }

.circle-profile-review-switch-head {
        display: grid;
        justify-content: stretch;
    }

.circle-profile-review-status {
        justify-self: start;
        white-space: normal;
    }

.circle-profile-design-current,
    .circle-profile-device-grid,
    .circle-profile-design-pattern-grid,
    .circle-profile-design-pattern-card,
    .circle-profile-design-mini-devices {
        grid-template-columns: 1fr;
    }

.circle-profile-builder-mobile-savebar .button {
        width: 100%;
        min-height: 44px;
    }

.circle-profile-builder-device .circle-profile-builder-preview .circle-profile-content,
    .circle-profile-builder-device .circle-profile-builder-preview.circle-layout-showcase .circle-profile-content,
    .circle-profile-builder-device .circle-profile-builder-preview.circle-layout-compact .circle-profile-content,
    .circle-profile-builder-device .circle-profile-builder-preview.circle-layout-showcase .circle-link-hub,
    .circle-profile-builder-device .circle-profile-builder-preview.circle-theme-gallery .circle-link-hub {
        grid-template-columns: 1fr;
        max-width: none;
    }

.circle-profile-builder-preview .circle-link-card {
        touch-action: pan-y;
    }

.circle-profile-device.is-desktop iframe,
    .circle-profile-mini-device.is-desktop iframe {
        height: 440px;
    }

.circle-profile-device.is-mobile iframe {
        width: min(390px, 100%);
        height: 680px;
    }

.circle-profile-mini-device.is-mobile iframe {
        width: min(390px, 100%);
        height: 520px;
    }

.circle-profile-edit-grid,
    .circle-edit-media-grid,
    .circle-link-edit-row {
        grid-template-columns: 1fr;
    }

.circle-profile-preview-report,
    .circle-profile-pattern-report {
        padding: 12px;
    }

.circle-profile-report-head,
    .circle-profile-pattern-grid,
    .circle-profile-pattern-card {
        display: grid;
        grid-template-columns: 1fr;
    }

.circle-profile-edit-preview .entity-actions {
        justify-content: flex-start;
        margin-top: 12px;
    }

.circle-profile-pattern-preview .entity-cover {
        min-height: 96px;
    }

.circle-profile-pattern-preview.is-catalog .circle-link-hub,
    .circle-profile-pattern-preview.is-campaign .circle-link-hub {
        grid-template-columns: 1fr;
    }

.circle-profile-pattern-preview.is-catalog .circle-link-card:first-child,
    .circle-profile-pattern-preview.is-campaign .circle-link-card:first-child {
        grid-column: auto;
    }

.circle-profile-design-presets,
    .circle-theme-options,
    .affiliate-filter-form,
    .affiliate-filter-form.is-impression-filter {
        grid-template-columns: 1fr;
    }

.circle-profile-builder-header-actions .button {
        min-height: 30px;
        padding: 6px 8px;
        font-size: 11px;
    }

.auth-brand > p:not(.eyebrow) {
        width: 100%;
        max-width: 100%;
        font-size: 13px;
        line-height: 1.7;
        overflow-wrap: anywhere;
        word-break: break-all;
    }

.oauth-button,
    .auth-form input {
        min-height: 48px;
    }

.onboarding-ui-preview {
        min-height: 240px;
    }

.onboarding-ui-preview-material {
        grid-template-columns: 1fr;
    }

.preview-split-card {
        min-height: 150px;
    }

.admin-onboarding-actions .button,
    .admin-setup-actions .button {
        flex: 1 1 auto;
    }

.affiliate-report-nav-button.is-next {
        right: 6px;
    }
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

th,
td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

td small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.row-actions form {
    margin: 0;
}

.row-actions a,
.row-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--button-bg);
    color: var(--accent-strong);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.report-panel {
    margin-top: 14px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.report-panel summary {
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}

.report-panel form {
    margin-top: 12px;
}

.compact-form {
    gap: 10px;
}

.policy-page {
    max-width: 820px;
}

.policy-page p,
.policy-page li {
    line-height: 1.8;
}

.policy-notice {
    margin: 24px 0;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.policy-notice h2 {
    margin-top: 0;
}

.operator-info-list {
    display: grid;
    gap: 12px;
    margin: 22px 0;
}

.operator-info-list div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.operator-info-list dt {
    color: var(--muted);
    font-weight: 900;
}

.operator-info-list dd {
    margin: 0;
}

.contact-mailbox {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--accent-strong);
    font-weight: 950;
}

.moderation-table {
    margin-bottom: 22px;
}

.flash {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(32, 160, 226, 0.28);
    background: linear-gradient(135deg, rgba(32, 160, 226, 0.14), rgba(39, 190, 150, 0.08));
    color: #bcecff;
    font-weight: 700;
}

.flash-error {
    border-color: rgba(255, 87, 87, 0.34);
    background: rgba(255, 87, 87, 0.1);
    color: #ff8f86;
}

.flash a {
    color: #45b7ff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.flash a:hover,
.flash a:focus-visible {
    color: #7bd0ff;
}

.flash-success,
.flash-ok {
    border-color: rgba(48, 202, 154, 0.34);
    background: linear-gradient(135deg, rgba(32, 160, 226, 0.13), rgba(48, 202, 154, 0.12));
    color: #a8f0dc;
}

.empty-state {
    margin-top: 20px;
    text-align: center;
}

.button-row.center {
    justify-content: center;
}

.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 24px clamp(16px, 4vw, 48px);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}

.site-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 560px;
}

.site-footer-brand small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 14px;
}

.site-footer-links a {
    color: inherit;
    font-weight: 850;
    text-decoration: none;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1100px) {
.admin-grid-icon,
    .admin-profile-trigger b {
        display: none;
    }

.admin-dropdown {
        right: 0;
        max-width: calc(100vw - 24px);
    }

.dashboard-title-row,
    .works-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

.creator-material-preview-banner {
        align-items: stretch;
        flex-direction: column;
    }

.creator-material-preview-banner a {
        width: 100%;
    }

.dashboard-tabs,
    .pill-tabs {
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
    }

.dashboard-tabs a,
    .dashboard-tabs .dashboard-tab-disabled,
    .pill-tabs button,
    .pill-tabs .pill-tab {
        flex: 0 0 auto;
        padding: 0 16px;
    }

.work-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

.work-actions {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

.moderation-confirm {
        padding: 28px 12px 56px;
    }

.moderation-confirm-card {
        padding: 18px;
    }

.confirm-actions {
        display: grid;
    }

.nextscene-character-hub {
        margin-top: 42px;
    }

.circle-setup-icon-body {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 18px;
    }

.character-icon-cropper {
        grid-template-columns: 1fr;
        justify-items: center;
    }

.character-icon-crop-controls {
        width: 100%;
    }

.character-icon-cropper-controls-only {
        max-width: 100%;
    }

.post-form-main {
        width: calc(100% - 24px);
        margin-top: 20px;
    }

.option-row,
    .checklist-card,
    .admin-app .policy-checklist {
        display: grid;
        gap: 12px;
    }

.option-row strong {
        min-width: 0;
    }

.option-row a {
        margin-left: 0;
    }

.recommended-tags {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.recommended-tags strong {
        grid-column: 1 / -1;
        margin-right: 0;
    }

.nextscene-link-card {
        border-left: 0;
        border-top: 4px solid #cf1f1f;
    }

.mobile-primary {
        align-self: start;
    }

.site-header {
        gap: 8px;
        padding: 6px 12px;
    }

.brand-wordmark {
        width: 190px;
        /* ログイン時(アバター追加)でもナビが2行に折れない幅を確保 */
        max-width: 46vw;
    }

.nav {
        gap: 4px;
    }

.nav a {
        min-height: 34px;
        padding: 8px 9px;
        font-size: 13px;
        white-space: nowrap;
    }

.page-shell {
        --page-content-gutter: 12px;
        width: 100%;
        padding: 14px 0 42px;
    }

.admin-head,
    .composer-hero,
    .section-heading,
    .site-footer {
        align-items: stretch;
        flex-direction: column;
    }

.site-footer-links {
        justify-content: flex-start;
    }

.operator-info-list div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

.stat-strip,
    .post-layout,
    .admin-grid,
    .two-col,
    .metric-pair.three {
        grid-template-columns: 1fr;
    }

.filter-bar .push {
        margin-left: 0;
    }

.filter-bar .sort-start {
        margin-left: 0;
    }

.sticky-panel {
        position: static;
    }

.post-heading {
        padding: 0 12px;
        margin-bottom: 10px;
    }

.post-heading h1 {
        font-size: 22px;
    }

.post-character {
        margin-bottom: 0;
    }

.post-date {
        margin-top: 8px;
    }

.image-stack {
        gap: 10px;
        justify-items: stretch;
    }

.image-stack figure {
        width: 100%;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

.image-zoom-trigger img {
        width: 100%;
        max-height: none;
    }

.post-end-cta {
        width: 100%;
        margin-top: 8px;
    }

.post-like-form {
        width: auto;
        padding: 0;
    }

.post-side {
        display: none;
    }

.post-side-actions {
        display: none;
    }

.sticky-panel {
        border-radius: 8px;
        box-shadow: none;
    }

.button.full {
        min-height: 46px;
    }

.age-visual {
        min-height: 280px;
    }
}

@media (max-width: 560px) {
.post-like-button {
        width: 52px;
        height: 52px;
        min-width: 0;
        padding: 0;
    }

.post-like-floating {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

.post-like-floating .post-like-button {
        width: 52px;
        height: 52px;
        min-width: 0;
        min-height: 0;
    }

.post-like-floating .post-like-icon {
        font-size: 27px;
    }

.post-end-cta-strip {
        gap: 8px;
        padding: 6px 8px;
    }

.post-end-cta-avatars {
        gap: 4px;
    }

.post-end-cta-avatar {
        width: 32px;
        height: 32px;
    }

.post-manga-cta {
        gap: 8px;
        padding: 0 4px;
        font-size: 15px;
    }

.post-manga-cta__icon {
        width: 26px;
        height: 26px;
    }
}

@media (max-width: 520px) {
body {
        overflow-x: hidden;
    }

h1,
    h2,
    h3,
    p,
    a,
    button,
    label,
    input,
    textarea,
    select {
        overflow-wrap: anywhere;
    }

.site-header {
        align-items: center;
        flex-direction: row;
    }

.nav {
        display: flex;
    }

.brand-wordmark {
        width: 170px;
        max-width: 100%;
    }

.nav a {
        text-align: center;
    }

.nav-mypage {
        display: none;
    }

.public-profile-trigger {
        width: 36px;
        height: 36px;
    }

.public-profile-trigger img,
    .public-profile-trigger span {
        width: 28px;
        height: 28px;
    }

.public-profile-menu .public-profile-dropdown {
        position: fixed;
        top: 64px;
        right: 8px;
        left: auto;
        width: min(236px, calc(100vw - 16px));
        min-width: 0;
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
        border-radius: 10px;
        transform-origin: top right;
    }

.public-profile-menu .profile-card {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 2px 10px;
        padding: 12px 14px 10px;
    }

.public-profile-menu .profile-card img,
    .public-profile-menu .profile-card > span {
        grid-row: 1 / span 3;
        width: 48px;
        height: 48px;
        border-radius: 9px;
    }

.public-profile-menu .profile-card strong,
    .public-profile-menu .profile-card small {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.public-profile-menu .profile-stats {
        gap: 18px;
        margin-top: 4px;
    }

.public-profile-menu .admin-dropdown a,
    .public-profile-menu .admin-menu-button {
        min-height: 44px;
        padding: 0 16px;
        font-size: 14px;
    }

.public-profile-menu .admin-dropdown .profile-card-link {
        min-height: 0;
        padding: 12px 14px 10px;
        font-size: inherit;
    }

.grid {
        grid-template-columns: 1fr;
    }

.home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 10px;
        padding: 0 10px;
    }

.entity-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 10px;
    }

.home-tag-strip,
    .entity-tags {
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding: 3px 14px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-padding-inline: 14px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

.home-tag-strip {
        margin: -2px 0 18px;
    }

.entity-tags {
        margin: 0 0 18px;
    }

.home-tag-strip::-webkit-scrollbar,
    .entity-tags::-webkit-scrollbar {
        display: none;
    }

.home-tag-strip > span,
    .home-tag-strip a,
    .entity-tags > span,
    .entity-tags a {
        flex: 0 0 auto;
        white-space: nowrap;
        overflow-wrap: normal;
    }

.home-tag-strip > span,
    .entity-tags > span {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 0 8px 0 0;
        margin-right: 0;
        line-height: 1.2;
        scroll-snap-align: start;
    }

.home-tag-strip a,
    .entity-tags a {
        min-height: 34px;
        padding: 7px 10px;
        line-height: 1.2;
        scroll-snap-align: start;
    }

.cover-link {
        border-radius: 7px;
    }

.card-body {
        padding-top: 7px;
    }

.page-count-row {
        height: 34px;
        margin-bottom: 6px;
    }

.page-count-badge {
        width: 50px;
        height: 34px;
        padding: 4px 5px;
        border-radius: 6px;
    }

.page-count-badge strong {
        font-size: 14px;
    }

.page-count-badge em {
        font-size: 9px;
    }

.card-body h2 {
        min-height: 2.8em;
        margin-bottom: 6px;
        font-size: 13px;
        line-height: 1.4;
    }

.entity-post-grid .card-body h2 {
        display: -webkit-box;
        min-height: 2.8em;
        text-overflow: clip;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

.card-character {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 26px;
        gap: 5px;
        font-size: 12px;
    }

.character-avatar-stack {
        min-width: 24px;
        max-width: 43px;
    }

.character-avatar-stack-link + .character-avatar-stack-link {
        margin-left: -7px;
    }

.card-character .character-avatar.small {
        width: 24px;
        height: 24px;
    }

.page-shell {
        width: 100%;
        padding-top: 10px;
    }

.admin-app .site-header,
    .admin-app .site-footer {
        display: none;
    }

.admin-profile-trigger img,
    .admin-profile-trigger span {
        width: 38px;
        height: 38px;
    }

.dashboard-tabs,
    .pill-tabs,
    .sort-row {
        gap: 8px;
        margin-right: -12px;
        padding-right: 12px;
        overflow-x: auto;
        scrollbar-width: none;
    }

.dashboard-tabs a,
    .dashboard-tabs .dashboard-tab-disabled,
    .pill-tabs button,
    .pill-tabs .pill-tab,
    .sort-row a {
        min-height: 38px;
        border-radius: 999px;
        background: #262626;
        padding: 0 14px;
        font-size: 13px;
        white-space: nowrap;
    }

.dashboard-tabs a.active,
    .dashboard-tabs .dashboard-tab-disabled.active,
    .sort-row a.active,
    .pill-tabs .pill-tab.active {
        background: #3c3c3c;
    }

.nextscene-character-hub {
        margin-top: 22px;
    }

.nextscene-section-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 10px;
        margin-bottom: 12px;
    }

.nextscene-section-head p {
        margin-bottom: 4px;
    }

.nextscene-section-head h2 {
        font-size: 17px;
    }

.nextscene-section-head a {
        min-height: 36px;
        padding: 0 13px;
        font-size: 13px;
    }

.dashboard-tabs::-webkit-scrollbar,
    .pill-tabs::-webkit-scrollbar,
    .sort-row::-webkit-scrollbar,
    .character-hub-grid::-webkit-scrollbar,
    .work-actions::-webkit-scrollbar {
        display: none;
    }

.work-card-flags,
    .affiliate-feed-status,
    .work-metrics {
        grid-column: 2;
    }

.work-card-flags {
        min-height: 0;
        margin: 0;
    }

.work-kind-chip {
        min-height: 20px;
        padding: 2px 7px;
        font-size: 11px;
    }

.work-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        min-height: 0;
        margin-top: 0;
    }

.work-metrics span {
        justify-content: center;
        min-height: 27px;
        border-radius: 6px;
        background: #222;
        font-size: 12px;
    }

.work-metrics i {
        width: 12px;
        height: 12px;
    }

.work-actions {
        grid-column: 1 / -1;
        position: static;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        margin: 5px -2px 0;
        overflow-x: auto;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        scrollbar-width: none;
    }

.work-actions a,
    .work-actions button {
        flex: 0 0 auto;
        min-height: 34px;
        min-width: 76px;
        padding: 4px 10px;
        white-space: nowrap;
    }

.work-actions form {
        flex: 0 0 auto;
    }

.summary-panel {
        border-radius: 10px;
    }

.summary-panel h2,
    .summary-head h2 {
        padding: 13px 14px;
        font-size: 14px;
    }

.post-method-card,
    .pixiv-upload-hero.post-method-panel,
    .post-form-main {
        width: calc(100% - 20px);
    }

.recommended-tags {
        grid-template-columns: 1fr;
    }

.copy-row {
        grid-template-columns: 1fr;
    }

.affiliate-product-actions,
    .affiliate-download-list div,
    .usage-radio-row,
    .sensitive-radio-row {
        grid-template-columns: 1fr;
    }

.search-bar {
        grid-template-columns: 1fr;
    }

.result-summary {
        align-items: flex-start;
        flex-direction: column;
    }

.entity-hero {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

.entity-cover {
        min-height: 132px;
    }

.entity-main {
        padding: 0 12px 18px;
    }

.entity-avatar-row {
        margin-top: -50px;
    }

.entity-avatar {
        width: 104px;
        height: 104px;
        border-width: 4px;
    }

.circle-profile-avatar.fallback {
        padding: 0;
        font-size: clamp(22px, 6.4vw, 28px);
    }

.entity-actions {
        justify-content: flex-start;
        margin-top: 58px;
        gap: 8px;
    }

.entity-actions .button {
        flex: 1 1 auto;
        min-height: 44px;
        padding: 9px 13px;
        font-size: 13px;
    }

.entity-copy h1 {
        font-size: 31px;
    }

.entity-stats {
        gap: 12px;
    }

.entity-section,
    .entity-profile > .entity-section {
        padding: 0 12px;
    }

.entity-post-heading-actions {
        justify-items: stretch;
        width: 100%;
    }

.entity-post-heading-actions .entity-count {
        text-align: left;
    }

.entity-sort-toggle {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 320px;
    }

.entity-sort-toggle a {
        /* タップターゲット44px相当を確保 (視覚は細身のままpaddingで担保) */
        min-height: 40px;
        padding: 0 12px;
    }

.entity-character-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.entity-character-chip {
        padding: 8px;
    }

.entity-character-carousel {
        display: flex;
        grid-template-columns: none;
        gap: 10px;
        margin: 0 -12px;
        padding: 0 12px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-padding-inline: 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

.entity-character-carousel::-webkit-scrollbar {
        display: none;
    }

.entity-character-carousel .entity-character-chip {
        flex: 0 0 min(68vw, 260px);
        grid-template-columns: 68px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        justify-items: start;
        min-height: 94px;
        gap: 4px 10px;
        padding: 12px;
        scroll-snap-align: start;
    }

.entity-character-carousel .entity-character-art {
        grid-row: 1 / span 2;
        width: 68px;
        height: 68px;
        min-width: 68px;
        min-height: 68px;
    }

.entity-character-carousel .entity-character-chip span,
    .entity-character-carousel .entity-character-chip em {
        text-align: left;
    }

.entity-character-carousel .entity-character-chip span {
        align-self: end;
        font-size: 14px;
        line-height: 1.35;
    }

.entity-character-carousel .entity-character-chip em {
        align-self: start;
        font-size: 12px;
    }

.related-section {
        margin-top: 28px;
        padding-inline: 12px;
    }

.related-heading {
        align-items: flex-start;
        margin-bottom: 12px;
    }

.related-heading h2 {
        font-size: 19px;
    }

.related-heading .button {
        min-height: 34px;
        padding: 7px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

.related-grid {
        gap: 10px;
        margin: 0 -12px;
        padding: 0 12px 8px;
        scroll-padding-inline: 12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

.related-grid::-webkit-scrollbar {
        display: none;
    }

.related-grid .trailer-card {
        flex-basis: min(68vw, 238px);
    }

.image-lightbox {
        padding: 12px;
    }

.image-lightbox__close {
        top: 10px;
        right: 10px;
    }

.post-nav {
        grid-template-columns: 1fr;
    }

.post-nav a.next {
        text-align: left;
    }
}

.lp-beta-page .site-header {
    background: rgba(255, 253, 251, 0.96);
}

.lp-beta-cool .site-header {
    border-bottom-color: rgba(255, 255, 255, 0.14);
    background: rgba(18, 16, 15, 0.92);
}

.lp-beta-cool .nav a,
.lp-beta-cool .theme-toggle {
    color: #f4ebe7;
}

.lp-beta-cool .theme-toggle {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
}

.lp-beta-cool .lp-beta-hero .lp-beta-hero-actions .button.ghost {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #fffaf7;
}

.lp-beta-cool .lp-beta-cta .button.ghost {
    border-color: rgba(207, 31, 31, 0.18);
    background: rgba(255, 255, 255, 0.78);
    color: var(--lp-ink);
}

.lp-beta-scene-card.is-primary {
    min-height: 356px;
}

@keyframes lp-beta-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lp-beta-grid-drift {
    from {
        background-position: 0 0, 0 0;
    }
    to {
        background-position: 184px 0, 0 148px;
    }
}

@keyframes lp-beta-frame-float {
    0%,
    100% {
        transform: rotateY(-8deg) rotateX(2deg) translateY(0);
    }
    50% {
        transform: rotateY(-4deg) rotateX(1deg) translateY(-10px);
    }
}

@keyframes lp-beta-product-float {
    0%,
    100% {
        transform: rotateY(-8deg) rotateX(2deg) translateY(0);
    }
    50% {
        transform: rotateY(-4deg) rotateX(1deg) translateY(-10px);
    }
}

@keyframes lp-beta-home-feed {
    0%,
    24% {
        transform: translateY(0);
    }
    52%,
    76% {
        transform: translateY(-128px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes lp-beta-selected-card {
    0%,
    100% {
        filter: brightness(1);
        transform: translateY(0);
    }
    50% {
        filter: brightness(1.08);
        transform: translateY(-5px);
    }
}

@keyframes lp-beta-post-window {
    0%,
    12% {
        opacity: 0;
        transform: translate(24px, 18px) scale(0.96);
    }
    26%,
    82% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0.94;
        transform: translate(0, -6px) scale(1);
    }
}

@keyframes lp-beta-status-pop {
    0%,
    20% {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }
    34%,
    82% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0.9;
        transform: translateY(-4px) scale(1);
    }
}

@keyframes lp-beta-spark {
    0%,
    100% {
        opacity: 0.25;
        transform: scale(0.78);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

@keyframes lp-beta-scan {
    0% {
        top: -22%;
    }
    58% {
        top: 106%;
    }
    100% {
        top: 106%;
    }
}

@keyframes lp-beta-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes lp-beta-card-in {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes lp-beta-card-float {
    0%,
    100% {
        margin-top: 0;
    }
    50% {
        margin-top: -8px;
    }
}

@keyframes lp-beta-bars {
    0%,
    100% {
        transform: scaleY(0.78);
        opacity: 0.48;
    }
    50% {
        transform: scaleY(1.04);
        opacity: 0.95;
    }
}

@keyframes lp-beta-cue {
    0%,
    100% {
        transform: scaleX(0.72);
        transform-origin: left center;
        opacity: 0.5;
    }
    50% {
        transform: scaleX(1);
        opacity: 0.95;
    }
}

@media (max-width: 620px) {
.lp-beta-page .site-header {
        justify-content: flex-start;
    }

.lp-beta-page .nav {
        display: none;
    }

.lp-beta-hero-actions .button {
        width: 100%;
        justify-content: center;
    }

.lp-beta-index-actions .button {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 1101px) {
body.circle-profile-landing .circle-profile-landing-shell,
    body.character-profile-landing .character-profile-landing-shell {
        max-width: 1080px;
        margin-inline: auto;
    }

body.character-profile-landing .character-entity-hero .entity-cover {
        min-height: 180px;
    }
}

/* ===== マイページ: フォロー中リスト ===== */
.following-section {
    display: grid;
    gap: 12px;
}

.following-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 10px;
}

.following-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.following-item-link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.following-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
}

.following-avatar-circle {
    border-radius: 12px;
    overflow: hidden;
}

.following-item-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.following-item-copy strong {
    overflow: hidden;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.following-item-copy small {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
}

.following-item .entity-follow-form {
    flex: 0 0 auto;
}

.following-item .entity-follow-button {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 12px;
}

.following-item .entity-follow-button small {
    display: none;
}

/* フォロー中の新着があるときの「保存」ナビのドット */
.nav a.nav-likes {
    position: relative;
}

.nav a.nav-likes.has-new::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 1px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--surface);
}

/* フォロー中フィードの新着マーク */
.card-new-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: 999px;
    background: #2aad68;
    color: #fff;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .04em;
}

.followed-new-note {
    display: block;
    margin-top: 2px;
    color: #2aad68;
    font-size: 12px;
    font-weight: 800;
}

/* ===== bundled: backstage.css ===== */
/* backstage.css — admin / affiliate / developer / auth / LP 専用スタイル。
   公開閲覧ページには読み込まない (render_layout がルートで出し分け)。 */

.external-x-impression-add {
    margin: 14px 0;
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: 8px;
    background: #fff;
    padding: 12px 14px;
}

.external-x-impression-add summary {
    cursor: pointer;
    font-weight: 700;
    color: #111827;
}

.external-x-impression-form {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(240px, 1.6fr) minmax(160px, 1fr) minmax(160px, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin-top: 12px;
}

.external-x-impression-form label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.external-x-impression-form span {
    font-size: 12px;
    font-weight: 700;
    color: #4b5563;
}

.external-x-impression-form input,
.external-x-impression-form select {
    width: 100%;
    min-width: 0;
}

.affiliate-admin-material-card.is-external-x-post .affiliate-material-title-row > a:not([target]) {
    display: none;
}

.affiliate-external-x-preview {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 240px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    color: #fff;
    background: #111827;
}

.affiliate-external-x-preview.has-preview-image {
    justify-content: flex-start;
    background: #0b0f16;
    padding: 44px 12px 82px;
}

.affiliate-external-x-preview.has-preview-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(5, 8, 14, 0.42), rgba(5, 8, 14, 0.04) 38%, rgba(5, 8, 14, 0.72)),
        linear-gradient(90deg, rgba(5, 8, 14, 0.34), rgba(5, 8, 14, 0));
    pointer-events: none;
}

.affiliate-external-x-preview-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.affiliate-external-x-preview .affiliate-external-x-label {
    position: relative;
    z-index: 2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #93c5fd;
}

.affiliate-external-x-preview strong {
    position: relative;
    z-index: 2;
    font-size: 24px;
    line-height: 1.15;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.58);
}

.affiliate-external-x-preview.has-preview-image strong {
    font-size: 18px;
}

.affiliate-external-x-preview small {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.68);
    overflow-wrap: anywhere;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.58);
}

.affiliate-external-x-preview.has-preview-image .affiliate-material-status,
.affiliate-external-x-preview.has-preview-image .affiliate-gallery-impression-badge {
    z-index: 3;
}

.external-x-delete-form {
    margin-top: 8px;
}

@media (max-width: 760px) {
.external-x-impression-form {
        grid-template-columns: 1fr;
    }
}

.admin-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.circle-setup-avatar.character-edit-avatar,
.circle-setup-avatar.character-edit-avatar-upload,
.circle-setup-avatar .character-edit-avatar-preview,
.circle-setup-avatar .character-edit-avatar-preview img {
    border-radius: 12px;
}

.auth-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
    align-items: center;
    gap: 0;
    min-height: calc(100vh - 150px);
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(34px, 6vw, 72px) 18px;
}

.auth-brand {
    display: none;
    align-content: center;
    gap: 20px;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(32, 160, 226, 0.12), rgba(255, 255, 255, 0.035) 52%, rgba(255, 255, 255, 0.02)),
        rgba(18, 20, 24, 0.9);
    color: #f6f8fb;
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.32);
}

.auth-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    color: #f6f8fb;
    font-size: 18px;
    font-weight: 950;
    text-decoration: none;
}

.auth-logo img {
    width: 46px;
    height: 46px;
    border-radius: 9px;
    background: #fff;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.auth-brand h1 {
    max-width: 680px;
    margin: 0;
    font-size: clamp(32px, 4.7vw, 54px);
    line-height: 1.12;
    letter-spacing: 0;
    color: #f6f8fb;
}

.auth-brand p {
    max-width: 560px;
    margin: 0;
    color: #c4ccd6;
    font-weight: 800;
    line-height: 1.9;
}

.auth-trust-list {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.auth-trust-list div {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 12px;
    row-gap: 3px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
}

.auth-trust-list span {
    grid-row: span 2;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 999px;
    background: rgba(32, 160, 226, 0.16);
    color: #73cdfc;
    font-size: 12px;
    font-weight: 950;
}

.auth-trust-list strong {
    color: var(--ink);
    font-size: 14px;
}

.auth-trust-list p {
    max-width: none;
    color: #b5bec8;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.auth-panel {
    position: relative;
    display: grid;
    gap: 18px;
    width: 100%;
    align-content: start;
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(20, 22, 26, 0.96);
    color: #f6f8fb;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.auth-panel::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, #20a0e2, rgba(32, 160, 226, 0.08));
    content: "";
}

.affiliate-auth-shell .auth-panel::before {
    background: linear-gradient(90deg, #ff4944, rgba(255, 73, 68, 0.08));
}

.account-choice-shell {
    grid-template-columns: minmax(0, 620px);
    max-width: 780px;
}

.account-choice-panel {
    width: 100%;
    justify-self: center;
    align-content: center;
}

.account-choice-grid {
    display: grid;
    gap: 12px;
}

.account-choice-card {
    display: grid;
    gap: 8px;
    min-height: 158px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
        rgba(255, 255, 255, 0.035);
    color: #f6f8fb;
    text-decoration: none;
}

.account-choice-card span {
    color: #9fdfff;
    font-size: 12px;
    font-weight: 950;
}

.account-choice-card strong {
    color: #fff;
    font-size: 25px;
    line-height: 1.2;
}

.account-choice-card p {
    margin: 0;
    color: #bfc8d3;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.7;
}

.account-choice-card b {
    align-self: end;
    color: #fff;
    font-size: 13px;
}

.account-choice-card:hover,
.account-choice-card:focus-visible {
    border-color: rgba(32, 160, 226, 0.72);
    background:
        linear-gradient(135deg, rgba(32, 160, 226, 0.16), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.045);
    outline: none;
}

.account-choice-card.is-affiliate:hover,
.account-choice-card.is-affiliate:focus-visible {
    border-color: rgba(255, 73, 68, 0.72);
    background:
        linear-gradient(135deg, rgba(255, 73, 68, 0.16), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.045);
}

.auth-panel-header {
    display: grid;
    gap: 7px;
}

.auth-panel-header h2 {
    margin: 0;
    color: #f6f8fb;
    font-size: 28px;
    line-height: 1.25;
}

.auth-panel-header p {
    margin: 0;
    color: #b5bec8;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.7;
}

.auth-destination {
    display: grid;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid rgba(32, 160, 226, 0.42);
    border-radius: 8px;
    background: rgba(32, 160, 226, 0.1);
}

.auth-destination strong {
    color: #f6f8fb;
    font-size: 13px;
    font-weight: 950;
}

.auth-destination p {
    margin: 0;
    color: #cfefff;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.6;
}

.auth-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
}

.auth-tabs a {
    display: grid;
    min-height: 40px;
    place-items: center;
    border-radius: 999px;
    color: var(--muted);
    font-weight: 950;
}

.auth-tabs a.is-active {
    background: rgba(255, 255, 255, 0.11);
    color: #f6f8fb;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 20px rgba(0, 0, 0, 0.12);
}

.auth-oauth-note {
    margin: -2px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(32, 160, 226, 0.34);
    border-radius: 8px;
    background: rgba(32, 160, 226, 0.09);
    color: #cfefff;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.6;
}

.auth-oauth-note[hidden] {
    display: none;
}

.auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.auth-divider::before,
.auth-divider::after {
    height: 1px;
    background: var(--line);
    content: "";
}

.auth-password-field {
    position: relative;
    display: block;
}

.auth-field {
    display: grid;
    gap: 8px;
}

.auth-field > label {
    color: #c7d0dc;
}

.auth-password-field input {
    width: 100%;
    padding-right: 82px;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    min-width: 58px;
    min-height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #dce8f5;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-50%);
    cursor: pointer;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
    border-color: rgba(32, 160, 226, 0.8);
    background: rgba(32, 160, 226, 0.16);
    color: #fff;
    outline: none;
}

.auth-form label {
    gap: 8px;
}

.auth-form label > span,
.auth-panel label > span,
.auth-field > label {
    color: #c7d0dc;
}

.auth-form input:focus-visible {
    border-color: rgba(32, 160, 226, 0.86);
    box-shadow: 0 0 0 3px rgba(32, 160, 226, 0.16);
    outline: none;
}

.auth-inline-error {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 124, 136, 0.36);
    border-radius: 8px;
    background: rgba(255, 92, 104, 0.08);
    color: #ffd8dd;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.65;
}

.auth-inline-error[hidden] {
    display: none;
}

.auth-inline-error strong {
    color: #fff3f5;
    font-size: 13px;
}

.auth-inline-error ul {
    display: grid;
    gap: 3px;
    margin: 0;
    padding-left: 18px;
}

.auth-form .is-invalid input,
.auth-form input[aria-invalid="true"] {
    border-color: rgba(255, 124, 136, 0.68);
    background: rgba(255, 92, 104, 0.06);
}

.auth-form .is-invalid input:focus-visible,
.auth-form input[aria-invalid="true"]:focus-visible {
    border-color: rgba(255, 144, 154, 0.9);
    box-shadow: 0 0 0 3px rgba(255, 92, 104, 0.14);
}

.auth-form-note,
.auth-legal,
.auth-assist-link {
    margin: 0;
    color: #aeb7c2;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.7;
}

.auth-assist-link {
    display: inline-flex;
    justify-self: start;
    color: #73cdfc;
}

.auth-legal a,
.auth-assist-link:hover {
    color: #8ed9ff;
}

.auth-message-panel h2 {
    margin: 0;
    font-size: 22px;
}

.auth-message-panel {
    align-self: center;
}

.auth-email {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(32, 160, 226, 0.36);
    border-radius: 8px;
    background: rgba(32, 160, 226, 0.1);
    color: #b8e6ff;
    font-weight: 950;
}

.auth-debug-box {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(32, 160, 226, 0.34);
    border-radius: 8px;
    background: rgba(32, 160, 226, 0.08);
}

.auth-debug-box p {
    margin: 0;
}

.auth-mail-preview {
    display: grid;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
}

.auth-mail-preview summary {
    width: max-content;
    color: #e7f6ff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 950;
}

.auth-mail-preview dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.auth-mail-preview dl div {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
}

.auth-mail-preview dt {
    color: #86d7ff;
    font-size: 12px;
    font-weight: 950;
}

.auth-mail-preview dd {
    margin: 0;
    color: #d9edf8;
    overflow-wrap: anywhere;
    font-size: 12px;
}

.auth-mail-preview pre {
    max-height: 240px;
    overflow: auto;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    color: #f4fbff;
    padding: 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.developer-gate {
    width: min(520px, calc(100% - 32px));
    margin: 80px auto;
}

.developer-gate-card {
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.developer-gate-card h1,
.developer-gate-card p {
    margin: 0;
}

.developer-gate-card p {
    color: var(--muted);
    line-height: 1.7;
}

.developer-gate-warning {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(255, 180, 0, 0.35);
    border-radius: 8px;
    background: rgba(255, 180, 0, 0.08);
}

.developer-gate-back {
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.developer-standalone {
    display: grid;
    min-height: 100vh;
    margin: 0 auto;
    align-items: center;
}

.developer-dashboard {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
    padding: 36px 0 72px;
    color: #f5f5f5;
}

.developer-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 24px;
    align-items: end;
    margin-bottom: 18px;
}

.developer-dashboard-hero h1 {
    margin: 4px 0 8px;
    font-size: 42px;
    line-height: 1.08;
    letter-spacing: 0;
}

.developer-dashboard-hero p {
    max-width: 720px;
    margin: 0;
    color: #b9b9b9;
    line-height: 1.8;
}

.developer-session-card {
    display: grid;
    gap: 7px;
    padding: 14px;
    border: 1px solid rgba(20, 153, 232, 0.35);
    border-radius: 8px;
    background: #202020;
}

.developer-session-card span,
.developer-session-card a,
.developer-session-card small {
    color: #9fd7ff;
    font-size: 12px;
    font-weight: 900;
}

.developer-session-card > a {
    display: none;
}

.developer-session-card form {
    order: 5;
    margin: 0;
}

.developer-session-card button {
    width: 100%;
    border: 1px solid rgba(20, 153, 232, 0.45);
    border-radius: 6px;
    background: rgba(20, 153, 232, 0.12);
    color: #9fd7ff;
    cursor: pointer;
    font-weight: 900;
    padding: 9px 10px;
}

.developer-session-card strong {
    order: 2;
    font-size: 22px;
}

.developer-session-card small {
    order: 3;
    color: #aaa;
}

.developer-tutorial-button {
    order: 4;
}

.developer-session-card span {
    order: 1;
}

.developer-management-shell {
    min-height: 100vh;
    padding-bottom: 80px;
    color: #f5f5f5;
}

.developer-management-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 76px;
    padding: 16px 32px;
    border-bottom: 1px solid #2f2f2f;
    background: rgba(20, 20, 20, 0.96);
    backdrop-filter: blur(12px);
}

.developer-management-brand {
    display: grid;
    gap: 2px;
    color: #fff;
}

.developer-management-brand span {
    color: #ff4a42;
    font-size: 12px;
    font-weight: 950;
}

.developer-management-brand strong {
    font-size: 20px;
}

.developer-management-topbar nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.developer-management-topbar a,
.developer-management-topbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid #3a3a3a;
    border-radius: 999px;
    background: #242424;
    color: #f5f5f5;
    padding: 0 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.developer-management-topbar button {
    color: #ffb8b4;
}

.developer-management-topbar form {
    margin: 0;
}

.developer-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.developer-stat-grid div,
.developer-section {
    border: 1px solid #303030;
    border-radius: 8px;
    background: #1f1f1f;
}

.developer-stat-grid div {
    display: grid;
    gap: 4px;
    min-height: 94px;
    padding: 13px;
}

.developer-stat-grid span {
    color: #9a9a9a;
    font-size: 12px;
    font-weight: 900;
}

.developer-stat-grid strong {
    font-size: 23px;
    letter-spacing: 0;
}

.developer-stat-grid small {
    color: #7f8791;
    font-size: 11px;
    font-weight: 900;
}

.developer-section {
    display: grid;
    gap: 16px;
    margin-top: 14px;
    padding: 18px;
}

.developer-section-head {
    display: grid;
    gap: 6px;
}

.developer-section-head h2 {
    margin: 0;
    font-size: 19px;
    letter-spacing: 0;
}

.developer-section-head p {
    margin: 0;
    color: #aaa;
    line-height: 1.7;
}

.developer-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

.developer-link-card {
    display: grid;
    gap: 8px;
    min-height: 132px;
    padding: 14px;
    border: 1px solid #383838;
    border-radius: 8px;
    background: #181818;
    color: #f5f5f5;
    text-decoration: none;
}

.developer-link-card:hover {
    border-color: rgba(20, 153, 232, 0.75);
    background: #1b2228;
}

.developer-link-card span {
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(20, 153, 232, 0.14);
    color: #58bdff;
    font-size: 11px;
    font-weight: 900;
}

.developer-link-card strong {
    font-size: 17px;
}

.developer-link-card small {
    color: #b5b5b5;
    line-height: 1.6;
}

.developer-db-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 14px;
    align-items: start;
}

.developer-db-panel {
    min-width: 0;
}

.developer-db-panel-wide {
    overflow: hidden;
}

.developer-health-list,
.developer-link-list,
.developer-record-list {
    display: grid;
    gap: 8px;
}

.developer-health-item,
.developer-link-row,
.developer-record-list article {
    display: grid;
    min-width: 0;
    border: 1px solid #383838;
    border-radius: 8px;
    background: #181818;
}

.developer-health-item,
.developer-link-row {
    color: #f5f5f5;
    text-decoration: none;
}

.developer-health-item {
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 8px 12px;
    align-items: center;
    padding: 11px 12px;
}

.developer-health-item span,
.developer-link-row span,
.developer-record-list span {
    color: #9fd7ff;
    font-size: 12px;
    font-weight: 950;
}

.developer-health-item strong {
    grid-row: 1 / span 2;
    grid-column: 2;
    justify-self: end;
    color: #fff;
    font-size: 24px;
}

.developer-health-item small,
.developer-link-row small,
.developer-record-list small {
    min-width: 0;
    color: #a9a9a9;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.55;
}

.developer-health-item.is-good {
    border-color: rgba(73, 181, 129, .34);
}

.developer-health-item.is-watch {
    border-color: rgba(255, 183, 77, .46);
    background: #211d17;
}

.developer-health-item.is-alert {
    border-color: rgba(255, 86, 86, .58);
    background: #241818;
}

.developer-link-row {
    grid-template-columns: 68px minmax(120px, .45fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 10px 12px;
}

.developer-link-row:hover,
.developer-health-item:hover {
    border-color: rgba(20, 153, 232, .78);
    background: #1b2228;
}

.developer-link-row span {
    display: inline-flex;
    justify-content: center;
    border-radius: 999px;
    background: rgba(20, 153, 232, 0.14);
    padding: 4px 8px;
}

.developer-link-row strong,
.developer-record-list strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.developer-db-table-wrap {
    overflow-x: auto;
    border: 1px solid #343434;
    border-radius: 8px;
    background: #181818;
}

.developer-db-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 13px;
}

.developer-db-table th,
.developer-db-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #2b2b2b;
    text-align: left;
    vertical-align: middle;
}

.developer-db-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #202020;
    color: #8fcfff;
    font-size: 11px;
    font-weight: 950;
}

.developer-db-table td {
    color: #e9e9e9;
    font-weight: 850;
}

.developer-db-table tr:last-child td {
    border-bottom: 0;
}

.developer-db-table td:first-child {
    min-width: 210px;
}

.developer-db-table a {
    color: #fff;
    text-decoration: none;
}

.developer-db-table strong,
.developer-db-table small {
    display: block;
    min-width: 0;
}

.developer-db-table small {
    margin-top: 3px;
    color: #8f98a8;
    font-size: 11px;
    font-weight: 850;
}

.developer-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: max-content;
    margin: 0;
}

.developer-access-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 24px;
    border: 1px solid #484848;
    border-radius: 999px;
    background: #232323;
    color: #b8b8b8;
    font-size: 11px;
    font-weight: 950;
}

.developer-access-pill.is-enabled {
    border-color: rgba(73, 181, 129, .55);
    background: rgba(73, 181, 129, .14);
    color: #a9f0ca;
}

.developer-flow-page {
    width: min(1440px, calc(100% - 40px));
    margin: 0 auto;
    padding: 34px 0 72px;
    color: #f5f5f5;
}

.developer-flow-hero {
    margin-bottom: 16px;
}

.developer-flow-shell {
    overflow: hidden;
    display: grid;
    gap: 0;
    min-height: clamp(620px, 70vw, 860px);
    border: 1px solid #313842;
    border-radius: 8px;
    background:
        radial-gradient(circle at 1px 1px, rgba(89, 206, 255, 0.08) 1px, transparent 0) 0 0 / 22px 22px,
        linear-gradient(180deg, #111722, #0c1018 72%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}

.developer-flow-shell .developer-flow-loading {
    min-height: 360px;
}

.flow-visualizer__shell {
    display: grid;
    min-height: clamp(620px, 70vw, 860px);
}

.flow-visualizer__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(90, 121, 150, 0.26);
    background: rgba(9, 13, 20, 0.74);
}

.flow-visualizer__title {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.flow-visualizer__title h3 {
    margin: 0;
    color: #fff;
    font-size: 21px;
}

.flow-visualizer__title p {
    margin: 0;
    color: #aeb9c8;
    line-height: 1.65;
}

.flow-visualizer__counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 34px;
    border: 1px solid rgba(255, 211, 77, 0.42);
    border-radius: 999px;
    background: rgba(255, 211, 77, 0.10);
    color: #ffe083;
    font-weight: 950;
}

.flow-visualizer__viewport {
    position: relative;
    min-height: clamp(520px, 58vw, 760px);
    overflow: hidden;
}

.flow-visualizer__edges {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.flow-visualizer__edge {
    stroke: rgba(110, 132, 154, 0.38);
    stroke-width: 2;
    fill: none;
    transition: opacity 0.18s ease, stroke 0.18s ease, stroke-width 0.18s ease;
}

.flow-visualizer__edge.is-active {
    stroke: #ffd23f;
    stroke-width: 3.2;
    filter: drop-shadow(0 0 7px rgba(255, 210, 63, 0.42));
}

.flow-visualizer__edge.is-dim {
    opacity: 0.13;
}

.flow-visualizer__nodes {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.flow-visualizer__node {
    position: absolute;
    display: grid;
    gap: 5px;
    width: clamp(118px, 10.8vw, 158px);
    min-height: 70px;
    border: 1px solid rgba(111, 130, 151, 0.44);
    border-radius: 8px;
    background: rgba(22, 31, 45, 0.88);
    color: #eef6ff;
    padding: 9px 10px;
    text-align: left;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.flow-visualizer__node:hover,
.flow-visualizer__node:focus-visible {
    border-color: #ffd23f;
    box-shadow: 0 0 0 2px rgba(255, 210, 63, 0.14), 0 18px 38px rgba(0, 0, 0, 0.28), 0 0 22px rgba(255, 210, 63, 0.18);
    outline: none;
}

.flow-visualizer__node.is-linked {
    padding-right: 44px;
}

.flow-visualizer__node.is-linked::after {
    position: absolute;
    top: 8px;
    right: 8px;
    border: 1px solid rgba(255, 210, 63, 0.42);
    border-radius: 999px;
    background: rgba(255, 210, 63, 0.13);
    color: #ffe68a;
    content: "開く";
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    padding: 4px 7px;
}

.flow-visualizer__node-label {
    overflow: hidden;
    font-size: 14px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-visualizer__node-group {
    width: fit-content;
    border-radius: 999px;
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.08);
    color: #9fd7ff;
    font-size: 10px;
    font-weight: 950;
}

.flow-visualizer__node-note {
    display: -webkit-box;
    overflow: hidden;
    color: #aab6c4;
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.flow-visualizer__node.is-active {
    border-color: #ffd23f;
    box-shadow: 0 0 0 2px rgba(255, 210, 63, 0.16), 0 18px 38px rgba(0, 0, 0, 0.26), 0 0 26px rgba(255, 210, 63, 0.22);
    transform: translate(-50%, -50%) scale(1.04);
}

.flow-visualizer__node.is-dim {
    opacity: 0.22;
}

.flow-visualizer__node[data-flow-node-kind="入口"] {
    border-color: rgba(58, 126, 255, 0.5);
    background: rgba(21, 45, 92, 0.88);
}

.flow-visualizer__node[data-flow-node-kind="登録前"] {
    border-color: rgba(99, 161, 255, 0.54);
    background: rgba(24, 42, 73, 0.88);
}

.flow-visualizer__node[data-flow-node-kind="登録"] {
    border-color: rgba(255, 211, 77, 0.52);
    background: rgba(78, 62, 20, 0.88);
}

.flow-visualizer__node[data-flow-node-kind="入力"] {
    border-color: rgba(67, 195, 245, 0.48);
    background: rgba(17, 58, 82, 0.88);
}

.flow-visualizer__node[data-flow-node-kind="クリエイター"] {
    border-color: rgba(89, 206, 255, 0.54);
    background: rgba(19, 62, 92, 0.88);
}

.flow-visualizer__node[data-flow-node-kind="運営"] {
    border-color: rgba(255, 95, 95, 0.58);
    background: rgba(88, 31, 38, 0.88);
}

.flow-visualizer__node[data-flow-node-kind="DB"] {
    border-color: rgba(66, 210, 111, 0.48);
    background: rgba(17, 72, 45, 0.86);
}

.flow-visualizer__node[data-flow-node-kind="公開"] {
    border-color: rgba(255, 101, 73, 0.52);
    background: rgba(96, 38, 28, 0.88);
}

.flow-visualizer__node[data-flow-node-kind="配布"] {
    border-color: rgba(226, 75, 180, 0.54);
    background: rgba(82, 28, 74, 0.88);
}

.flow-visualizer__node[data-flow-node-kind="アフィリエイター"] {
    border-color: rgba(66, 210, 180, 0.54);
    background: rgba(17, 70, 66, 0.88);
}

.flow-visualizer__node[data-flow-node-kind="外部"] {
    border-color: rgba(255, 190, 69, 0.56);
    background: rgba(92, 64, 16, 0.88);
}

.flow-visualizer__mini-map {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, 12px);
    gap: 5px;
    padding: 10px;
    border: 1px solid rgba(93, 120, 148, 0.36);
    border-radius: 8px;
    background: rgba(7, 11, 17, 0.76);
}

.flow-visualizer__mini-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: #31445c;
}

.flow-visualizer__mini-dot.is-active {
    background: #ffd23f;
}

.flow-visualizer__mini-dot.is-dim {
    opacity: 0.35;
}

.flow-visualizer__step {
    display: grid;
    gap: 5px;
    min-height: 104px;
    padding: 16px 18px;
    border-top: 1px solid rgba(90, 121, 150, 0.24);
    background: rgba(9, 13, 20, 0.82);
}

.flow-visualizer__step-kicker {
    color: #ffd24a;
    font-size: 12px;
    font-weight: 950;
}

.flow-visualizer__step-title {
    color: #fff;
    font-size: 19px;
}

.flow-visualizer__step-description {
    max-width: 820px;
    margin: 0;
    color: #aeb9c8;
    line-height: 1.7;
}

.flow-visualizer__controls {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0 18px 12px;
    background: rgba(9, 13, 20, 0.82);
}

.flow-visualizer__control {
    min-height: 38px;
    min-width: 78px;
    border: 1px solid rgba(255, 211, 77, 0.42);
    border-radius: 999px;
    background: rgba(255, 211, 77, 0.12);
    color: #ffe083;
    padding: 0 14px;
    font-weight: 950;
    cursor: pointer;
}

.flow-visualizer__control[data-flow-play] {
    border-color: #ffd23f;
    background: #ffd23f;
    color: #18120a;
}

.flow-visualizer__steps {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(90, 121, 150, 0.24);
    background: rgba(7, 11, 17, 0.64);
}

.flow-visualizer__step-button {
    flex: 0 0 168px;
    min-height: 50px;
    border: 1px solid rgba(105, 128, 151, 0.42);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: #bcc8d7;
    padding: 9px 10px;
    text-align: left;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.flow-visualizer__step-button.is-active {
    border-color: #ffd23f;
    background: rgba(255, 210, 63, 0.14);
    color: #ffe28a;
}

.flow-visualizer__error {
    min-height: 220px;
    display: grid;
    place-items: center;
    margin: 0;
    color: #ff9b95;
    font-weight: 900;
}

.developer-flow-note-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.developer-flow-note-grid article {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #383838;
    border-radius: 8px;
    background: #181818;
}

.developer-flow-note-grid span {
    color: #ffd23f;
    font-size: 12px;
    font-weight: 950;
}

.developer-flow-note-grid strong {
    color: #fff;
}

.developer-flow-note-grid p {
    margin: 0;
    color: #aaa;
    line-height: 1.65;
}

.developer-record-list article {
    gap: 4px;
    padding: 11px 12px;
}

.developer-affiliate-list {
    display: grid;
    gap: 8px;
}

.developer-affiliate-list article,
.developer-current-circle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #383838;
    border-radius: 8px;
    background: #181818;
}

.developer-affiliate-list article div {
    display: grid;
    gap: 3px;
}

.developer-affiliate-list span,
.developer-current-circle span,
.developer-empty {
    color: #aaa;
    font-size: 12px;
    font-weight: 850;
}

.developer-affiliate-list a,
.developer-affiliate-list button,
.developer-current-circle a {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    background: #202020;
    color: #f5f5f5;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.developer-affiliate-list button {
    cursor: pointer;
}

.developer-current-circle {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.composer-hero {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.composer-hero h2 {
    margin: 3px 0 4px;
    font-size: clamp(24px, 3.2vw, 34px);
}

.creator-account {
    justify-content: flex-start;
    padding: 12px;
    border: 1px solid rgba(207, 31, 31, 0.16);
    border-radius: 8px;
    background: var(--soft-panel);
}

.creator-account-avatar,
.creator-account-avatar img,
.creator-account-avatar span {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 8px;
}

.creator-account-avatar img {
    display: block;
    object-fit: cover;
}

.creator-account-avatar span {
    display: grid;
    place-items: center;
    background: var(--subtle-bg);
    color: var(--accent-strong);
    font-weight: 900;
}

.creator-account span,
.creator-account a {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.creator-account strong {
    display: block;
    margin: 2px 0 4px;
    color: var(--ink);
    font-size: 18px;
}

.character-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 10px;
}

.character-choice {
    position: relative;
    display: grid;
    min-height: 156px;
    align-content: center;
    justify-items: center;
    gap: 7px;
    padding: 14px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    text-align: center;
    cursor: pointer;
}

.character-choice:hover {
    border-color: rgba(207, 31, 31, 0.42);
    background: var(--soft-panel);
}

.character-choice:has(input[name="character_ids[]"]:checked),
.character-choice.create-choice:has(input[type="radio"]:checked) {
    border-color: var(--accent);
    background: #fff2ea;
    box-shadow: inset 0 0 0 2px rgba(207, 31, 31, 0.18), 0 8px 22px rgba(207, 31, 31, 0.12);
}

.character-choice input[type="radio"],
.character-choice input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.character-choice:has(input[type="checkbox"]:checked)::after {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(207, 31, 31, 0.24);
}

.character-choice-avatar,
.character-choice-fallback {
    width: 62px;
    height: 62px;
    border-radius: 50%;
}

.character-choice-avatar {
    display: block;
    overflow: hidden;
    background: var(--subtle-bg);
}

.character-choice-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translate(var(--icon-x, 0%), var(--icon-y, 0%)) scale(var(--icon-scale, 1));
    transform-origin: center;
}

.character-choice-grid.is-creating-character .character-choice[data-existing-character-choice] .character-choice-avatar {
    display: none;
}

.character-choice-grid.is-creating-character .character-choice[data-existing-character-choice]::before {
    content: "既存";
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    color: var(--muted);
    background: var(--subtle-bg);
    font-size: 12px;
    font-weight: 800;
}

.character-choice-fallback {
    display: grid;
    place-items: center;
    background: var(--subtle-bg);
    color: var(--accent-strong);
    font-weight: 900;
}

.character-choice-fallback.plus {
    border: 1px dashed rgba(207, 31, 31, 0.42);
    font-size: 30px;
}

.character-choice strong {
    max-width: 100%;
    overflow: hidden;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.character-choice small {
    color: var(--muted);
}

.character-edit-card .compact-upload {
    max-width: none;
}

.admin-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    align-items: start;
}

body.admin-app {
    background: #1f1f1f;
    color: #f5f5f5;
}

.admin-setup-page {
    display: grid;
    min-height: 62vh;
    place-items: start center;
    padding: clamp(24px, 5vw, 54px) 16px;
}

.admin-setup-card {
    display: grid;
    width: min(760px, 100%);
    gap: 22px;
    padding: clamp(30px, 4vw, 44px);
    border: 1px solid #2c2c2c;
    border-radius: 8px;
    background: #1f1f1f;
    color: #fff;
    font-size: 18px;
}

.admin-setup-card h1 {
    margin: 0;
    font-size: clamp(40px, 5.5vw, 54px);
    line-height: 1.14;
}

.admin-setup-card p {
    margin: 0;
    color: #bcbcbc;
    font-size: 18px;
    line-height: 1.85;
}

.admin-setup-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-setup-steps span {
    padding: 9px 14px;
    border-radius: 999px;
    background: #141414;
    color: #aaa;
    font-size: 15px;
    font-weight: 900;
}

.admin-setup-steps span.is-active {
    background: #12364f;
    color: #61c4ff;
}

.admin-circle-setup-form > label {
    display: grid;
    gap: 10px;
}

.admin-circle-setup-form > label > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #d8d8d8;
    font-size: 17px;
    font-weight: 900;
}

.admin-circle-setup-form > label em {
    min-width: 46px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #9aa7b5;
    font-size: 13px;
    font-style: normal;
    text-align: center;
}

.admin-circle-setup-form > label em.is-required {
    color: #9bdcff;
}

.admin-circle-setup-form {
    width: min(920px, 100%);
}

.circle-setup-icon-panel .character-edit-icon-column {
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
}

.admin-circle-setup-form input,
.admin-circle-setup-form textarea {
    width: 100%;
    min-height: 58px;
    border: 1px solid #383838;
    border-radius: 8px;
    background: #151515;
    color: #fff;
    font-size: 18px;
    line-height: 1.6;
}

.admin-circle-setup-form .character-icon-crop-controls input[type="range"] {
    min-height: 28px;
    border: 0;
    background: transparent;
    padding: 0;
}

.admin-circle-setup-form textarea {
    resize: vertical;
}

.admin-circle-setup-form small {
    color: #98a3af;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.7;
}

.admin-setup-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 4px;
}

.admin-onboarding {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 18px;
}

.admin-onboarding[hidden] {
    display: none;
}

.admin-onboarding-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(8px);
}

.admin-onboarding-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(880px, calc(100% - 32px));
    gap: 20px;
    padding: clamp(20px, 4vw, 34px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background:
        radial-gradient(circle at 92% 12%, rgba(32, 160, 226, 0.16), transparent 30%),
        linear-gradient(145deg, #222, #171717);
    color: #fff;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55);
    animation: onboarding-dialog-in 260ms ease-out;
}

.admin-onboarding-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid #444;
    border-radius: 50%;
    background: #151515;
    color: #fff;
    cursor: pointer;
}

.admin-onboarding-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #61c4ff;
    font-size: 13px;
    font-weight: 950;
}

.admin-onboarding-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.admin-onboarding-dots i {
    width: 26px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    transition: background 180ms ease, width 180ms ease;
}

.admin-onboarding-dots i.is-active {
    width: 42px;
    background: #20a0e2;
}

.admin-onboarding-step {
    display: none;
    grid-template-columns: minmax(0, 0.92fr) minmax(280px, 1fr);
    gap: clamp(18px, 4vw, 32px);
    align-items: center;
}

.admin-onboarding-step.is-active {
    display: grid;
    animation: onboarding-step-in 260ms ease-out;
}

.admin-onboarding-copy {
    display: grid;
    gap: 14px;
}

.admin-onboarding-step h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1.16;
    letter-spacing: 0;
    word-break: keep-all;
    overflow-wrap: normal;
}

.admin-onboarding-step p {
    margin: 0;
    color: #c7c7c7;
    line-height: 1.8;
}

.admin-onboarding-tip {
    position: relative;
    padding-left: 26px;
    color: #c7eefe !important;
    font-size: 13px;
    font-weight: 850;
}

.admin-onboarding-tip::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #20a0e2;
    box-shadow: 0 0 0 7px rgba(32, 160, 226, 0.13);
}

.admin-onboarding-checklist {
    display: grid;
    gap: 8px;
}

.admin-onboarding-checklist span {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
    color: #f4f7fb;
    font-size: 13px;
    font-weight: 900;
}

.admin-onboarding-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 940px) {
.admin-onboarding-dialog {
        max-height: calc(100vh - 24px);
        overflow-y: auto;
    }

.admin-onboarding-step {
        grid-template-columns: 1fr;
    }

.admin-onboarding-step h2 {
        font-size: 30px;
    }
}

.admin-product-shell {
    min-height: 100vh;
    background: #1f1f1f;
    color: #f5f5f5;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 210px minmax(340px, 620px) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    min-height: 82px;
    padding: 16px 36px 10px;
    background: #202020;
}

.admin-logo {
    color: #cf1f1f;
    font-size: 28px;
    font-weight: 950;
    letter-spacing: 0;
}

.admin-setup-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 76px;
    padding: 18px 36px 12px;
}

.admin-setup-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    color: #fff;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: 0;
}

.admin-setup-brand .brand-wordmark {
    width: clamp(172px, 20vw, 236px);
    border-radius: 0;
}

.admin-setup-logout {
    min-height: 38px;
    border: 1px solid #3d3d3d;
    border-radius: 999px;
    background: #2b2b2b;
    color: #dcdcdc;
    padding: 0 16px;
    font-weight: 900;
    cursor: pointer;
}

.admin-setup-logout:hover,
.admin-setup-logout:focus-visible {
    border-color: #555;
    background: #363636;
    color: #fff;
    outline: none;
}

.admin-search {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    max-width: 620px;
    min-height: 44px;
    padding: 0 8px 0 14px;
    border-radius: 4px;
    background: #333;
}

.admin-search span {
    width: 10px;
    height: 10px;
    border: 2px solid #777;
    border-radius: 50%;
    box-shadow: 6px 6px 0 -4px #777;
}

.admin-search input {
    min-height: 38px;
    border: 0;
    background: transparent;
    color: #f5f5f5;
}

.admin-search button {
    min-height: 32px;
    border: 0;
    border-radius: 16px;
    background: #555;
    color: #fff;
    padding: 0 14px;
    font-weight: 800;
}

.admin-actions {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 16px;
    min-width: 0;
}

.admin-home-button,
.admin-post-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: #4a4a4a;
    color: #fff;
    font-weight: 900;
    line-height: 1;
}

.admin-home-button {
    padding: 0 18px;
    background: #2f2f2f;
}

.admin-home-button:hover,
.admin-home-button.is-active {
    background: #404040;
}

.admin-post-button:hover,
.admin-post-button.is-active {
    background: #5a5a5a;
}

.admin-menu-button {
    display: flex;
    align-items: center;
    min-height: 52px;
    width: 100%;
    padding: 0 26px;
    border: 0;
    background: transparent;
    color: #f5f5f5;
    font: inherit;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
}

.admin-menu-button:hover {
    background: #333;
}

.pixiv-dashboard {
    padding: 54px 48px 96px 72px;
}

.dashboard-title-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 24px;
}

.dashboard-title-row h1 {
    margin: 0 0 22px;
    color: #fff;
    font-size: 24px;
    letter-spacing: 0;
}

.dashboard-tabs .dashboard-tab-disabled {
    gap: 8px;
    color: #777;
    cursor: default;
    opacity: 0.76;
}

.dashboard-tabs .dashboard-tab-disabled small {
    display: inline-grid;
    min-height: 20px;
    place-items: center;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: #9a9a9a;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.dashboard-page-section {
    width: 100%;
    max-width: 1420px;
    margin-top: 24px;
}

.dashboard-page-section .dashboard-home-summary {
    margin-top: 0;
}

.dashboard-notification-page {
    max-width: 1120px;
}

.dashboard-notification-page .notification-settings-panel {
    margin-top: 0;
}

.dashboard-reaction-summary {
    grid-template-columns: minmax(0, 520px);
}

.dashboard-mutual-likes-page {
    max-width: 1120px;
}

.mutual-likes-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.mutual-likes-head h2 {
    margin: 3px 0 8px;
    color: #fff;
    font-size: 28px;
    line-height: 1.2;
}

.mutual-likes-head p {
    margin: 0;
    max-width: 680px;
    color: #aaa;
    line-height: 1.7;
}

.mutual-likes-head > a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #f4f4f4;
    font-size: 13px;
    font-weight: 900;
}

.mutual-likes-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 18px;
    color: #9f9f9f;
    font-size: 13px;
    font-weight: 800;
}

.mutual-likes-status span,
.mutual-likes-status small {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: #171717;
    padding: 0 11px;
}

.mutual-likes-status span:first-child {
    border-color: rgba(255, 71, 64, 0.45);
    background: rgba(255, 71, 64, 0.13);
    color: #fff;
}

.mutual-likes-status small {
    border-color: rgba(255, 183, 64, 0.28);
    color: #ffd37a;
}

.mutual-likes-status.is-stale span:first-child {
    border-color: rgba(255, 183, 64, 0.42);
    background: rgba(255, 183, 64, 0.13);
}

.mutual-likes-order {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: -4px 0 18px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: #151515;
}

.mutual-likes-order span,
.mutual-likes-order a {
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    line-height: 30px;
    white-space: nowrap;
}

.mutual-likes-order span {
    color: #8f8f8f;
}

.mutual-likes-order a {
    color: #e9e9e9;
}

.mutual-likes-order a.is-active {
    background: #f4f4f4;
    color: #111;
}

.mutual-likes-list {
    display: grid;
    gap: 12px;
}

.mutual-like-card {
    display: grid;
    grid-template-columns: 40px 104px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: #171717;
}

.mutual-like-card.is-expired {
    opacity: 0.72;
}

.mutual-like-card.is-completed {
    border-color: rgba(114, 255, 186, 0.2);
    background: #121713;
}

.mutual-like-card.is-completed .mutual-like-number {
    background: rgba(114, 255, 186, 0.18);
    color: #a6ffd0;
}

.mutual-like-card.is-completed .mutual-like-main {
    opacity: 0.78;
}

.mutual-like-number {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #2f2f2f;
    color: #fff;
    font-weight: 950;
}

.mutual-like-media {
    position: relative;
    display: block;
    width: 104px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: #202020;
}

.mutual-like-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mutual-like-media span {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 950;
}

.mutual-like-media.is-empty {
    display: grid;
    place-items: center;
    color: #8f8f8f;
    font-size: 12px;
    font-weight: 900;
}

.mutual-like-media.is-empty span {
    position: static;
    min-height: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    padding: 0;
}

.mutual-like-main {
    min-width: 0;
}

.mutual-like-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.mutual-like-title h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
    line-height: 1.35;
}

.mutual-like-title span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 183, 64, 0.13);
    color: #ffd37a;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 900;
}

.mutual-like-title em {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border-radius: 999px;
    background: rgba(114, 255, 186, 0.14);
    color: #a6ffd0;
    padding: 0 9px;
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
}

.mutual-like-url {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 6px;
    color: #7ab8ff;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mutual-like-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    color: #aaa;
    font-size: 13px;
}

.mutual-like-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mutual-like-completion-form {
    margin: 0;
}

.mutual-like-completion-form.is-pending {
    pointer-events: none;
}

.mutual-like-completion-form button {
    white-space: nowrap;
}

.dashboard-empty-panel {
    max-width: 720px;
    padding: 24px;
    border-radius: 8px;
    background: #171717;
    color: #f3f3f3;
}

.dashboard-empty-panel h2 {
    margin: 0 0 10px;
    font-size: 20px;
}

.dashboard-empty-panel p {
    margin: 0;
    color: #aaa;
    line-height: 1.7;
}

.admin-work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(166px, 190px));
    gap: 34px 24px;
    width: 100%;
    max-width: none;
    align-items: stretch;
}

.admin-work-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: 8px;
    padding-bottom: 78px;
    margin: -8px;
    border: 1px solid transparent;
    border-radius: 8px;
    position: relative;
}

.admin-work-cover {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 6px;
    background: #171717;
    color: #cf1f1f;
    font-size: 36px;
    font-weight: 950;
}

.admin-work-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-work-cover em,
.admin-work-cover b {
    position: absolute;
    top: 7px;
    min-height: 20px;
    border-radius: 4px;
    background: #0b0b0b;
    color: #fff;
    padding: 2px 5px;
    font-size: 11px;
    font-style: normal;
    line-height: 16px;
}

.admin-work-cover em {
    left: 7px;
}

.admin-work-cover b {
    right: 7px;
}

.admin-work-card h2 {
    margin: 12px 0 5px;
    min-height: 44px;
    font-size: 15px;
    line-height: 1.45;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.admin-work-card h2 a {
    color: #fff;
}

.admin-work-card p {
    margin: 0 0 6px;
    min-height: 18px;
}

.admin-work-card .work-status {
    color: #8e8e8e;
    font-size: 12px;
    min-height: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.affiliate-feed-status .material-kind.is-material-only {
    background: rgba(255, 183, 64, 0.14);
    color: #ffd37a;
}

.affiliate-feed-card {
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    padding-bottom: 10px;
}

.affiliate-material-cover {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.affiliate-material-cover em {
    background: #1499e8;
    color: #fff;
}

.affiliate-material-cover b {
    background: #101922;
    color: #9fd7ff;
}

.affiliate-feed-card.is-unassigned .affiliate-material-cover b {
    background: #3a2700;
    color: #ffd37a;
}

.affiliate-feed-card.is-used .affiliate-material-cover b {
    background: #14351f;
    color: #8df0a8;
}

.affiliate-feed-image-count {
    position: absolute;
    right: 7px;
    bottom: 7px;
    min-height: 22px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 12px;
    font-weight: 950;
    line-height: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.36);
}

.affiliate-feed-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    min-height: 68px;
    margin-top: auto;
    color: #b7c7d7;
    font-size: 12px;
    font-weight: 850;
}

.affiliate-feed-status span {
    display: inline-flex;
    width: 100%;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #202020;
    padding: 2px 8px;
    white-space: nowrap;
}

.affiliate-feed-status .affiliate-x-link,
.affiliate-feed-status .affiliate-x-metric {
    display: inline-flex;
    width: 100%;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(20, 153, 232, 0.12);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.affiliate-feed-status.has-final-impressions .affiliate-x-link {
    grid-column: 1 / -1;
    min-height: 20px;
    background: transparent;
    color: #86cfff;
    border: 1px solid rgba(20, 153, 232, 0.24);
}

.affiliate-feed-status .affiliate-final-impressions {
    display: grid;
    grid-column: 1 / -1;
    min-height: 46px;
    align-content: center;
    justify-items: center;
    gap: 2px;
    border: 1px solid rgba(255, 211, 122, 0.38);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 211, 122, 0.18), rgba(20, 153, 232, 0.14)),
        #171717;
    color: #ffd37a;
    padding: 6px 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.affiliate-final-impressions small {
    color: #b7c7d7;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
}

.affiliate-final-impressions strong {
    color: #fff;
    font-size: 20px;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.material-detail-page {
    width: min(1240px, calc(100% - 32px));
    margin: 28px auto 80px;
}

.material-detail-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.material-detail-head h1 {
    max-width: 760px;
    margin: 0;
    color: var(--ink);
    font-size: 30px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.material-detail-actions,
.material-detail-badges,
.material-detail-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.material-detail-actions {
    align-items: center;
    gap: 10px;
}

.material-detail-delete-form {
    margin: 0;
}

.material-edit-form {
    margin: 0;
}

.material-edit-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.material-edit-fields {
    display: grid;
    gap: 12px;
}

.material-edit-fields .material-detail-panel {
    align-content: start;
}

.material-edit-fields .product-title-field label,
.material-edit-fields .product-link-field label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.material-edit-fields input,
.material-edit-fields textarea {
    width: 100%;
    min-width: 0;
    color: var(--ink);
    font: inherit;
}

.material-edit-fields .product-title-field input,
.material-edit-fields .product-link-field input[type="url"] {
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    padding: 11px 12px;
}

.material-edit-fields .product-link-type input {
    width: auto;
    min-height: 0;
}

.material-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.material-edit-hint {
    color: var(--muted);
}

.material-preset-page {
    display: grid;
    gap: 18px;
}

.material-preset-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.material-preset-page-head h1 {
    margin: 4px 0 8px;
}

.material-preset-page-head p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.material-preset-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.material-preset-panel,
.material-preset-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 16px;
}

.material-preset-panel h2,
.material-preset-card h3 {
    margin: 0 0 12px;
}

.material-preset-list {
    display: grid;
    gap: 12px;
}

.material-preset-form {
    display: grid;
    gap: 12px;
}

.material-preset-form label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.material-preset-form input,
.material-preset-form textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    padding: 10px 12px;
}

.material-preset-form .product-link-type {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.material-preset-form .product-link-type label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 10px;
}

.material-preset-form .product-link-type input {
    width: auto;
    min-height: 0;
}

.material-preset-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.material-preset-meta,
.material-preset-empty,
.material-preset-picker small {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.material-preset-card.is-archived,
.material-preset-form.is-archived {
    opacity: 0.68;
}

.material-preset-archive {
    margin-top: 16px;
}

.material-preset-archive summary {
    cursor: pointer;
    color: var(--muted);
    font-weight: 900;
}

.material-preset-picker {
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 14px;
}

.material-preset-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.material-preset-picker-head span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.material-preset-picker-head strong {
    display: block;
    margin-top: 2px;
}

.material-preset-picker-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.material-preset-picker-head a {
    color: var(--accent);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.material-preset-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.material-preset-chip {
    display: grid;
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    padding: 8px 12px;
    text-align: left;
    cursor: pointer;
}

.material-preset-chip strong,
.material-preset-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-preset-chip span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.material-preset-chip:hover,
.material-preset-chip:focus-visible {
    border-color: var(--accent);
}

@media (max-width: 760px) {
.material-preset-page-head,
    .material-preset-layout {
        display: grid;
        grid-template-columns: 1fr;
    }

.material-preset-page-head .material-detail-actions {
        justify-content: stretch;
    }
}

.material-detail-badges {
    margin-top: 10px;
}

.material-detail-badges span,
.material-detail-badge {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--muted);
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 900;
}

.material-detail-badge.is-unassigned {
    border-color: rgba(255, 190, 88, 0.35);
    background: rgba(255, 190, 88, 0.12);
    color: #ffd37a;
}

.material-detail-badge.is-assigned {
    border-color: rgba(20, 153, 232, 0.45);
    background: rgba(20, 153, 232, 0.12);
    color: #9fd7ff;
}

.material-detail-badge.is-used {
    border-color: rgba(87, 220, 120, 0.4);
    background: rgba(87, 220, 120, 0.12);
    color: #8df0a8;
}

.material-detail-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.material-detail-preview,
.material-detail-panel,
.material-stat-grid > div {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.material-detail-preview {
    position: sticky;
    top: 82px;
    min-width: 0;
    overflow: hidden;
    padding: 12px;
}

.material-detail-preview img {
    display: block;
    width: 100%;
    max-height: 640px;
    border-radius: 6px;
    object-fit: contain;
    background: #111;
}

.external-x-detail-preview img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.external-x-detail-placeholder {
    display: grid;
    min-height: 320px;
    align-content: center;
    gap: 8px;
    border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 6%, var(--paper));
    color: var(--muted);
    padding: 18px;
    text-align: center;
}

.external-x-detail-placeholder strong {
    color: var(--ink);
    font-size: 18px;
}

.external-x-detail-page .material-metric-row span {
    overflow-wrap: anywhere;
}

.material-detail-image-set {
    display: grid;
    gap: 10px;
}

.material-detail-image-set.has-multiple {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.material-detail-image-set figure {
    display: grid;
    gap: 6px;
    margin: 0;
}

.material-detail-image-set figcaption {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.material-detail-preview-actions {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.material-detail-main,
.material-detail-panel,
.material-detail-list,
.material-assignment-list,
.material-metric-table {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.material-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.material-stat-grid > div {
    min-height: 84px;
    padding: 14px;
}

.material-stat-grid span,
.material-stat-grid small,
.material-detail-muted {
    color: var(--muted);
}

.material-stat-grid span,
.material-stat-grid small {
    display: block;
    font-size: 12px;
    font-weight: 850;
}

.material-stat-grid strong {
    display: block;
    margin-top: 8px;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.material-detail-panel {
    padding: 16px;
}

.material-detail-panel h2,
.material-detail-section-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 18px;
}

.material-detail-note {
    margin: 0;
    color: var(--ink);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.material-detail-list {
    margin: 0;
}

.material-detail-list div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.material-detail-list dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.material-detail-list dd {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
    color: var(--ink);
    font-weight: 850;
    overflow-wrap: anywhere;
}

.material-detail-list button,
.material-detail-list a {
    min-height: 26px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 900;
}

.material-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.material-detail-section-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.material-assignment-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.2fr) auto minmax(120px, 0.9fr) minmax(90px, auto);
    gap: 10px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    padding: 10px;
}

.material-assignment-row.is-creator-safe {
    grid-template-columns: minmax(150px, 1fr) auto minmax(130px, 0.8fr) minmax(90px, auto);
}

.material-assignment-row strong,
.material-assignment-row small {
    display: block;
}

.material-assignment-row small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.material-assignment-date span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.material-assignment-date strong {
    margin-top: 2px;
    color: var(--ink);
    font-size: 13px;
}

.material-assignment-status-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.material-assignment-metric {
    text-align: right;
}

.material-assignment-metric strong {
    color: var(--ink);
    font-size: 18px;
}

.material-assignment-metric span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.material-metric-head,
.material-metric-row {
    display: grid;
    grid-template-columns: 170px minmax(120px, 1fr) minmax(90px, auto) minmax(170px, 1fr);
    gap: 10px;
    align-items: center;
}

.material-metric-table.is-creator-safe .material-metric-head,
.material-metric-table.is-creator-safe .material-metric-row {
    grid-template-columns: minmax(170px, 1fr) minmax(90px, auto);
}

.material-metric-head {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.material-metric-row {
    border-top: 1px solid var(--line);
    padding-top: 10px;
    color: var(--muted);
    font-size: 13px;
}

.material-metric-row strong {
    color: var(--ink);
    font-size: 16px;
}

.material-metric-source {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-left: 8px;
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.material-metric-source.is-manual {
    border-color: rgba(32, 201, 113, 0.34);
    background: rgba(32, 201, 113, 0.12);
    color: #78f2ad;
}

.material-metric-source.is-gallery {
    border-color: rgba(255, 191, 71, 0.34);
    background: rgba(255, 191, 71, 0.12);
    color: #ffd37a;
}

.material-metric-source.is-scheduled {
    border-color: rgba(83, 176, 255, 0.34);
    background: rgba(83, 176, 255, 0.12);
    color: #8fd0ff;
}

.affiliate-feed-status .material-state {
    background: rgba(20, 153, 232, 0.16);
    color: #58bdff;
}

.affiliate-feed-card.is-unassigned .material-state {
    background: rgba(255, 183, 64, 0.14);
    color: #ffd37a;
}

.affiliate-feed-card.is-used .material-state {
    background: rgba(83, 221, 126, 0.14);
    color: #8df0a8;
}

.admin-work-card:not(:has(.work-card-flags)) .work-metrics {
    margin-top: auto;
}

.affiliate-feed-card .work-actions {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    margin-top: 10px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.admin-work-card:hover .work-actions,
.admin-work-card:focus-within .work-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.pixiv-dashboard.is-async-loading {
    opacity: 0.72;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.character-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 250px));
    gap: 12px;
    width: 100%;
}

.character-hub-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #181818;
    padding: 12px;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.character-hub-card:hover {
    border-color: rgba(20, 153, 232, 0.58);
    background: #20242a;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}

.character-hub-card:focus-visible {
    outline: 2px solid #1499e8;
    outline-offset: 3px;
}

.character-hub-card.is-active {
    outline: 2px solid #1499e8;
    background: #202734;
}

.character-hub-card.is-active:hover {
    background: #243044;
}

.character-hub-card-all {
    background: #141f25;
}

.character-hub-card-all:hover {
    background: #182b35;
}

.character-hub-avatar {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: 50%;
    background: #262626;
    color: #ff4a42;
    font-size: 20px;
    font-weight: 950;
}

.character-hub-avatar-all {
    background: linear-gradient(135deg, #1499e8, #344b5a);
    color: #fff;
}

.character-hub-avatar:hover {
    box-shadow: 0 0 0 3px rgba(20, 153, 232, 0.28);
}

.character-hub-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translate(var(--icon-x, 0%), var(--icon-y, 0%)) scale(var(--icon-scale, 1));
    transform-origin: center;
}

.character-hub-card strong,
.character-hub-card small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.character-hub-card small {
    margin-top: 4px;
    color: #9b9b9b;
    font-size: 13px;
}

.character-hub-action {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 6px;
    background: #232323;
    color: #d7d7d7;
    font-size: 13px;
    font-weight: 900;
}

.character-hub-action.secondary {
    background: transparent;
    color: #aeb4bc;
}

.character-hub-action:hover {
    background: #2e2e2e;
    color: #fff;
}

.character-hub-action.secondary:hover {
    background: #232323;
}

.character-edit-page {
    display: grid;
    place-items: start center;
    padding: clamp(34px, 5vw, 58px) 16px 80px;
}

.character-edit-card {
    display: grid;
    gap: 22px;
    width: min(100%, 760px);
    padding: clamp(30px, 4vw, 44px);
    font-size: 18px;
}

.character-edit-head {
    display: grid;
    grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
    align-items: stretch;
    gap: 26px;
    margin-bottom: 4px;
}

.character-edit-icon-column {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    min-height: 250px;
    padding: 20px;
    border: 1px solid rgba(255, 74, 66, 0.18);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 74, 66, 0.12), transparent 52%),
        #181818;
}

.character-edit-avatar-kicker {
    color: #ff6b64;
    font-size: 15px;
    font-weight: 950;
    letter-spacing: 0;
}

.character-edit-avatar-shell {
    position: relative;
    display: grid;
    place-items: center;
}

.character-edit-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 168px;
    height: 168px;
    overflow: hidden;
    border-radius: 50%;
    background: #181818;
    color: #ff4a42;
    font-size: 38px;
    font-weight: 950;
}

.character-edit-avatar-upload {
    cursor: pointer;
    border: 1px dashed rgba(255, 110, 104, 0.5);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 18px 40px rgba(0, 0, 0, 0.24);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.character-edit-avatar-upload:hover,
.character-edit-avatar-upload.is-dragging {
    border-color: #ff4a42;
    background: rgba(255, 74, 66, 0.1);
    transform: translateY(-1px);
}

.has-character-icon .character-edit-avatar-upload {
    width: 184px;
    height: 184px;
    cursor: grab;
}

.has-character-icon .character-edit-avatar-upload:hover {
    transform: none;
}

.has-character-icon .character-edit-avatar-upload.is-dragging {
    cursor: grabbing;
}

.admin-circle-setup-form .character-avatar-file {
    min-height: 0;
}

.character-edit-avatar-preview,
.character-edit-avatar-preview img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.character-edit-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translate(var(--icon-x, 0%), var(--icon-y, 0%)) scale(var(--icon-scale, 1));
    transform-origin: center;
}

.character-edit-avatar img[src=""] {
    display: none;
}

.character-edit-avatar-plus {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.78);
    color: #fff;
    font-size: 34px;
    line-height: 1;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.character-edit-avatar-status {
    display: block;
    width: 100%;
    max-width: 220px;
    color: #aaa;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: keep-all;
    text-align: center;
}

.has-character-icon .character-edit-avatar-plus {
    display: none;
}

.character-edit-avatar-clear {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 4;
    display: none;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #101010;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.36);
    cursor: pointer;
}

.character-edit-avatar-clear svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.character-edit-avatar-clear:hover {
    background: #242424;
}

.has-character-icon .character-edit-avatar-clear {
    display: grid;
}

.character-edit-head h1 {
    margin: 0;
    font-size: clamp(38px, 5vw, 52px);
    line-height: 1.14;
}

.character-edit-head p:last-child {
    margin: 10px 0 0;
    color: #aaa;
    font-size: 18px;
    line-height: 1.8;
}

.character-edit-card .nextscene-card-label {
    font-size: 16px;
}

.character-edit-card > label {
    display: grid;
    gap: 10px;
}

.character-edit-card > label > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #ddd;
    font-size: 17px;
    font-weight: 900;
}

.character-edit-card > label em {
    min-width: 46px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #9aa7b5;
    font-size: 13px;
    font-style: normal;
    text-align: center;
}

.character-edit-card > label em.is-required {
    color: #9bdcff;
}

.character-edit-card input,
.character-edit-card textarea {
    min-height: 58px;
    font-size: 18px;
    line-height: 1.6;
}

.character-edit-card .upload-drop {
    border-color: rgba(255, 74, 66, 0.35);
    background: #1e1e1e;
}

.character-edit-card .upload-drop:hover,
.character-edit-card .upload-drop.is-dragging {
    border-color: #ff4a42;
    background: rgba(255, 74, 66, 0.1);
}

.character-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

.character-edit-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    border-radius: 999px;
    color: #cfcfcf;
    padding: 0 22px;
    font-size: 17px;
    font-weight: 900;
}

.character-edit-actions .pixiv-submit {
    min-height: 54px;
    font-size: 17px;
}

.character-hub-empty {
    display: grid;
    gap: 14px;
    justify-items: start;
    border-radius: 8px;
    background: #181818;
    padding: 18px;
}

.character-hub-empty p {
    max-width: 680px;
    margin: 0;
    color: #aaa;
    line-height: 1.7;
}

.dashboard-home-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    max-width: 1420px;
    margin-top: 70px;
}

.x-followers-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.x-followers-head h2 {
    margin: 3px 0 6px;
    font-size: 20px;
}

.x-followers-head p {
    margin: 0;
    color: #aaa;
    line-height: 1.6;
}

.x-followers-head a {
    flex: 0 0 auto;
    color: #5eb6f2;
    font-weight: 900;
    text-decoration: none;
}

.x-followers-register-card {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.x-followers-register-card p {
    margin: 0;
    color: #aaa;
    font-size: 13px;
    line-height: 1.5;
}

.x-followers-register-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) minmax(160px, 0.9fr) auto;
    gap: 10px;
    align-items: end;
}

.x-followers-register-form label {
    display: grid;
    gap: 6px;
}

.x-followers-register-form span {
    color: #c8c8c8;
    font-size: 12px;
    font-weight: 900;
}

.x-followers-register-form input {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #1c1c1c;
    color: #fff;
    padding: 0 12px;
    font: inherit;
}

.x-followers-account-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 8px;
}

.x-followers-account-item {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(150px, 0.95fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
}

.x-followers-account-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.x-followers-account-item strong {
    color: #fff;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.x-followers-account-item small {
    color: #aaa;
    font-size: 11px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.x-followers-account-folder-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    min-width: 0;
}

.x-followers-account-folder-form input {
    width: 100%;
    min-height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #181818;
    color: #fff;
    padding: 0 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
}

.x-followers-account-item button {
    min-height: 28px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #eee;
    padding: 0 10px;
    font-weight: 900;
    cursor: pointer;
}

.x-followers-toolbar,
.x-followers-filter-row,
.x-followers-group-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.x-followers-toolbar {
    justify-content: space-between;
    margin-bottom: 12px;
}

.x-followers-filter-row a,
.x-followers-group-row a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #c8c8c8;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    text-decoration: none;
}

.x-followers-group-row {
    margin-bottom: 14px;
}

.x-followers-group-row span {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 11px;
}

.x-followers-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.x-followers-summary div {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.x-followers-summary span,
.x-follower-metric span,
.x-follower-meta span {
    color: #aaa;
    font-size: 12px;
    font-weight: 800;
}

.x-followers-summary strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 24px;
    line-height: 1.1;
}

.x-followers-list {
    display: grid;
    gap: 10px;
}

.x-follower-card {
    display: grid;
    grid-template-columns: 52px minmax(210px, 1fr) minmax(116px, 140px) minmax(94px, 118px) 190px minmax(120px, 160px);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.x-follower-avatar {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: #2b2b2b;
    color: #fff;
    font-weight: 900;
}

.x-follower-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.x-follower-identity {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.x-follower-identity strong {
    color: #fff;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.x-follower-identity a {
    color: #9fcfff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.x-follower-identity small {
    color: #aaa;
    line-height: 1.35;
}

.x-follower-metric {
    display: grid;
    gap: 4px;
}

.x-follower-metric strong {
    color: #fff;
    font-size: 20px;
    line-height: 1.1;
}

.x-followers-summary strong.is-up,
.x-follower-metric strong.is-up {
    color: #8ee6a1;
}

.x-followers-summary strong.is-down,
.x-follower-metric strong.is-down {
    color: #ff9a91;
}

.x-follower-spark {
    min-width: 0;
}

.x-follower-spark svg {
    display: block;
    width: 180px;
    height: 46px;
}

.x-follower-spark polyline {
    fill: none;
    stroke: #5eb6f2;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.x-follower-spark span {
    color: #777;
    font-size: 12px;
    font-weight: 800;
}

.x-follower-meta {
    display: grid;
    gap: 4px;
}

@media (max-width: 720px) {
.x-followers-filter-row,
    .x-followers-group-row {
        flex-wrap: nowrap;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

.x-followers-filter-row::-webkit-scrollbar,
    .x-followers-group-row::-webkit-scrollbar {
        display: none;
    }

.x-followers-summary {
        grid-template-columns: 1fr;
    }

.x-followers-register-form {
        grid-template-columns: 1fr;
    }

.x-followers-account-list {
        display: grid;
        grid-template-columns: 1fr;
    }

.x-followers-account-item {
        grid-template-columns: 1fr;
        justify-content: space-between;
        border-radius: 8px;
    }

.x-followers-account-folder-form {
        grid-template-columns: minmax(0, 1fr) auto;
    }

.x-followers-account-remove-form {
        justify-self: start;
    }

.mutual-like-card {
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        padding: 14px;
    }

.mutual-like-media {
        grid-column: 2;
        width: min(100%, 180px);
    }

.mutual-like-main {
        grid-column: 2;
    }

.mutual-like-actions {
        grid-column: 2;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

.mutual-like-title {
        align-items: flex-start;
    }

.x-follower-card {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 10px;
    }

.x-follower-avatar {
        width: 46px;
        height: 46px;
    }

.x-follower-metric,
    .x-follower-spark,
    .x-follower-meta {
        grid-column: 2;
    }

.x-follower-spark svg {
        width: 100%;
        max-width: 220px;
    }
}

.material-snapshot dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0 20px 20px;
}

.material-snapshot div {
    padding: 12px;
    border: 1px solid #262626;
    border-radius: 8px;
    background: #111;
}

.material-snapshot dt {
    color: #9a9a9a;
    font-size: 12px;
    font-weight: 900;
}

.material-snapshot dd {
    margin: 6px 0 0;
    color: #fff;
    font-size: 22px;
    font-weight: 950;
}

.creator-funnel-dashboard {
    display: grid;
    gap: 18px;
}

.creator-funnel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.creator-funnel-head h2 {
    margin: 4px 0 6px;
    color: #fff;
    font-size: clamp(22px, 2.4vw, 30px);
}

.creator-funnel-head p:last-child {
    max-width: 760px;
    margin: 0;
    color: #aaa;
    line-height: 1.6;
}

.creator-funnel-periods {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
}

.creator-funnel-periods a {
    min-width: 54px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #999;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.creator-funnel-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 15px;
    border: 1px solid rgba(207, 31, 61, .36);
    border-radius: 12px;
    background: rgba(207, 31, 61, .08);
}

.creator-funnel-share div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.creator-funnel-share > div:first-child { flex: 1 1 320px; }

.creator-funnel-share span {
    color: #ff8fa2;
    font-size: 11px;
    font-weight: 900;
}

.creator-funnel-share code {
    overflow: hidden;
    color: #ddd;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creator-funnel-share-copy {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
}

.creator-funnel-share-copy span { color: inherit; }

.creator-funnel-share-copy.is-copied { border-color: rgba(255, 143, 162, .65); background: rgba(207, 31, 61, .22); }

.creator-funnel-share > .circle-profile-copy-fallback { flex-basis: 100%; }

.creator-funnel-steps {
    display: grid;
    grid-template-columns: repeat(7, minmax(108px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.creator-funnel-steps li {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 4px;
    padding: 13px 12px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
}

.creator-funnel-steps li > small {
    color: #cf1f3d;
    font-size: 10px;
    font-weight: 950;
}

.creator-funnel-steps li > span {
    overflow: hidden;
    color: #aaa;
    font-size: 11px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creator-funnel-steps strong {
    color: #fff;
    font-size: 25px;
    line-height: 1.1;
}

.creator-funnel-steps em {
    color: #777;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.creator-funnel-branches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.creator-funnel-branches article {
    display: grid;
    gap: 6px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
}

.creator-funnel-branches article > span {
    color: #aaa;
    font-size: 12px;
    font-weight: 850;
}

.creator-funnel-branches article > strong {
    color: #fff;
    font-size: 26px;
}

.creator-funnel-branches article > small {
    color: #777;
    font-size: 11px;
}

.creator-funnel-works {
    display: grid;
    gap: 10px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}

.creator-funnel-works .summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.creator-funnel-works .summary-head h2 {
    margin: 0;
    color: #fff;
    font-size: 17px;
}

.creator-funnel-works .summary-head span {
    color: #888;
    font-size: 11px;
    font-weight: 800;
}

.creator-funnel-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.creator-funnel-table-wrap table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

.creator-funnel-table-wrap th,
.creator-funnel-table-wrap td {
    padding: 10px 9px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: #ddd;
    font-size: 12px;
    text-align: right;
}

.creator-funnel-table-wrap thead th {
    border-top: 0;
    color: #777;
    font-size: 10px;
    font-weight: 900;
}

.creator-funnel-table-wrap th:first-child {
    max-width: 340px;
    text-align: left;
}

.creator-funnel-table-wrap tbody th {
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creator-funnel-table-wrap td small {
    display: block;
    color: #777;
    font-size: 9px;
}

@media (max-width: 900px) {
.creator-funnel-head,
    .creator-funnel-share {
        align-items: stretch;
        flex-direction: column;
    }

.creator-funnel-periods { align-self: flex-start; }

.creator-funnel-steps {
        grid-auto-columns: minmax(132px, 42vw);
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }

.creator-funnel-steps li { scroll-snap-align: start; }

.creator-funnel-branches { grid-template-columns: 1fr; }
}

.admin-empty-work,
.admin-report-strip {
    max-width: 760px;
    margin-top: 36px;
    padding: 24px;
    border-radius: 8px;
    background: #171717;
}

.admin-report-strip h2,
.admin-empty-work h2 {
    margin-top: 0;
    color: #fff;
}

.admin-report-strip p,
.admin-empty-work p {
    color: #aaa;
}

.pixiv-post-page {
    min-height: calc(100vh - 64px);
    background: #000;
}

.post-type-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    background: #404040;
}

.post-type-tabs span {
    display: grid;
    place-items: center;
    min-height: 50px;
    color: #d0d0d0;
    font-weight: 900;
}

.pixiv-upload-hero {
    display: grid;
    grid-template-columns: minmax(280px, 640px);
    place-content: center;
    align-items: center;
    gap: 38px;
    min-height: 220px;
    background: #2f2f2f;
    padding: 38px 20px;
}

.pixiv-upload-box {
    width: min(100%, 560px);
}

.pixiv-add-image {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 78px;
    border-radius: 999px;
    background: #1499e8;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.pixiv-add-image:hover,
.pixiv-add-image.is-dragging {
    background: #23a8f5;
}

.pixiv-add-image strong {
    font-size: 16px;
}

.pixiv-add-image span {
    max-width: 90%;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pixiv-preview {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    margin-top: 14px;
}

.pixiv-preview img {
    aspect-ratio: 3 / 4;
    border-color: #333;
    object-fit: cover;
}

.post-method-card {
    display: grid;
    gap: 16px;
    width: min(100% - 32px, 810px);
    margin: 20px auto 0;
    padding: 18px;
    border-radius: 4px;
    background: #1f1f1f;
}

.post-method-head {
    display: grid;
    gap: 4px;
}

.post-method-head strong {
    color: #fff;
    font-size: 17px;
}

.post-method-head span {
    color: #aaa;
    font-size: 13px;
    font-weight: 800;
}

.post-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.post-method-choice {
    display: grid;
    gap: 8px;
    min-height: 106px;
    padding: 16px;
    border: 1px solid #333;
    border-radius: 6px;
    background: #181818;
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.post-method-choice:hover,
.post-method-choice.is-active {
    border-color: #1499e8;
    box-shadow: 0 0 0 1px rgba(20, 153, 232, 0.35);
}

.post-method-choice strong {
    font-size: 16px;
}

.post-method-choice span {
    color: #aaa;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.post-method-panel[hidden] {
    display: none;
}

.creation-mode-card {
    display: grid;
    gap: 14px;
}

.pixiv-post-page > .creation-mode-card {
    width: min(100% - 32px, 810px);
    margin: 12px auto 0;
    padding: 18px;
}

.x-import-review-form > .creation-mode-card {
    width: min(100% - 32px, 810px);
    margin: 20px auto 0;
    padding: 18px;
}

.creation-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.creation-mode-choice {
    position: relative;
    display: grid;
    gap: 7px;
    min-height: 98px;
    padding: 14px;
    border: 1px solid #333;
    border-radius: 6px;
    background: #181818;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
}

.creation-mode-choice:hover,
.creation-mode-choice.is-active {
    border-color: #1499e8;
    box-shadow: 0 0 0 1px rgba(20, 153, 232, 0.28);
}

.creation-mode-choice:active {
    transform: translateY(1px);
}

.creation-mode-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.creation-mode-choice strong {
    color: #fff;
    font-size: 15px;
}

.creation-mode-choice span {
    color: #aaa;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
}

.pixiv-upload-hero.post-method-panel {
    grid-template-columns: 1fr;
    width: min(100% - 32px, 810px);
    min-height: 0;
    margin: 14px auto 0;
    padding: 14px;
    place-content: stretch;
    border-radius: 4px;
    background: #1f1f1f;
}

.pixiv-upload-hero.post-method-panel .pixiv-upload-box {
    width: 100%;
}

.pixiv-upload-hero.post-method-panel .pixiv-add-image {
    gap: 8px;
    min-height: 86px;
    border: 1px dashed rgba(20, 153, 232, 0.72);
    border-radius: 6px;
    background: #181818;
    color: #fff;
}

.pixiv-upload-hero.post-method-panel .pixiv-add-image:hover,
.pixiv-upload-hero.post-method-panel .pixiv-add-image.is-dragging {
    background: #202d36;
    box-shadow: inset 0 0 0 1px rgba(20, 153, 232, 0.28);
}

.pixiv-upload-hero.post-method-panel .pixiv-add-image strong {
    color: #5eb6f2;
    font-size: 15px;
}

.pixiv-upload-hero.post-method-panel .pixiv-add-image span {
    color: #aaa;
    font-size: 12px;
}

.x-import-loaded-media {
    display: grid;
    gap: 12px;
    width: min(100%, 640px);
}

.x-import-loaded-media strong {
    color: #fff;
    font-size: 16px;
    text-align: center;
}

.x-import-loaded-media > span {
    color: #ddd;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.x-import-remote-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 10px;
}

.x-import-image-card {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.x-import-image-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.x-import-image-card-head strong,
.x-import-image-card-head span {
    display: block;
}

.x-import-image-card-head strong {
    color: #fff;
    font-size: 16px;
}

.x-import-image-card-head span {
    margin-top: 4px;
    color: #aaa;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.6;
}

.x-import-image-card-head em {
    flex: 0 0 auto;
    color: #62b8f5;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
}

.x-import-image-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

.x-import-image-item {
    position: relative;
    width: 132px;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 10px;
    border: 1px solid #363636;
    border-radius: 6px;
    background: #181818;
    cursor: grab;
    touch-action: none;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease, background 120ms ease;
    user-select: none;
}

.x-import-image-item:hover {
    border-color: rgba(20, 153, 232, 0.62);
    box-shadow: 0 0 0 1px rgba(20, 153, 232, 0.16);
}

.x-import-image-item.is-dragging {
    border-color: #1499e8;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.34), 0 0 0 2px rgba(20, 153, 232, 0.28);
    cursor: grabbing;
    opacity: 0.92;
    transition: none;
}

.x-import-image-item.is-upload {
    border-color: rgba(20, 153, 232, 0.48);
}

.x-import-image-item.is-material-only {
    border-color: rgba(255, 177, 66, 0.72);
    background: #201b14;
}

.x-import-image-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    color: #aaa;
    font-size: 11px;
    font-weight: 900;
}

.x-import-drag-handle {
    display: inline-grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(2, 3px);
    gap: 3px;
    margin-left: auto;
    padding: 5px 6px;
    border: 1px solid #343434;
    border-radius: 4px;
    background: #222;
}

.x-import-drag-handle::before,
.x-import-drag-handle::after {
    content: "";
    width: 3px;
    height: 16px;
    border-top: 3px solid #8f8f8f;
    border-bottom: 3px solid #8f8f8f;
    background: #8f8f8f;
    box-shadow: 0 6px 0 #8f8f8f;
}

.x-import-image-item:hover .x-import-drag-handle,
.x-import-image-item.is-dragging .x-import-drag-handle {
    border-color: rgba(20, 153, 232, 0.65);
    background: rgba(20, 153, 232, 0.12);
}

.x-import-image-item:hover .x-import-drag-handle::before,
.x-import-image-item:hover .x-import-drag-handle::after,
.x-import-image-item.is-dragging .x-import-drag-handle::before,
.x-import-image-item.is-dragging .x-import-drag-handle::after {
    border-color: #6ec3ff;
    background: #6ec3ff;
    box-shadow: 0 6px 0 #6ec3ff;
}

.x-import-image-order {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 22px;
    border-radius: 999px;
    background: #1499e8;
    color: #fff;
    font-size: 12px;
}

.x-import-image-item img {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 4px;
    object-fit: cover;
    pointer-events: none;
}

.x-import-image-item button {
    min-height: 32px;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    background: #242424;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.x-import-image-item button:hover {
    border-color: #1499e8;
}

.x-import-image-item [data-x-import-remove] {
    min-height: 24px;
    padding: 0 8px;
    border-color: rgba(255, 80, 48, 0.35);
    background: rgba(255, 80, 48, 0.08);
    color: #ff8a73;
    font-size: 11px;
}

.x-import-image-usage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.x-import-image-usage button {
    min-height: 28px;
    padding: 0 6px;
    font-size: 11px;
}

.x-import-image-usage button.is-active {
    border-color: #1499e8;
    background: rgba(20, 153, 232, 0.16);
    color: #6ec3ff;
}

.x-import-image-item.is-material-only .x-import-image-usage button.is-active {
    border-color: rgba(255, 177, 66, 0.8);
    background: rgba(255, 177, 66, 0.14);
    color: #ffbf5f;
}

.x-import-extra-upload {
    width: 100%;
}

.x-import-content-card,
.x-import-tag-card {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.x-import-section-title {
    display: grid;
    gap: 4px;
}

.x-import-section-title strong {
    color: #fff;
    font-size: 16px;
}

.x-import-section-title span {
    color: #aaa;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.6;
}

.x-import-field-label {
    display: block;
    margin-bottom: 8px;
    color: #cfcfcf;
    font-size: 13px;
    font-weight: 900;
}

.x-import-content-card .pixiv-line-input input,
.x-import-tag-card .pixiv-line-input input {
    border: 1px solid #333;
}

.x-import-content-card .pixiv-textarea textarea {
    border: 1px solid #333;
}

.x-import-content-card .pixiv-line-input input,
.x-import-content-card .pixiv-textarea textarea {
    padding-right: 12px;
}

.pixiv-line-input .tag-chip {
    position: static;
    right: auto;
    color: #5eb6f2;
}

.x-import-duplicate-card {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.x-import-duplicate-card strong {
    color: #ff8a73;
}

.x-import-review-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.x-import-review-actions a {
    color: #fff;
    font-weight: 900;
}

.pixiv-form-card {
    position: relative;
    border-radius: 4px;
    background: #1f1f1f;
    color: #f4f4f4;
}

.pixiv-form-card input,
.pixiv-form-card textarea,
.pixiv-form-card select {
    border-color: #333;
    border-radius: 4px;
    background: #1f1f1f;
    color: #f4f4f4;
}

.x-import-card {
    width: min(100% - 32px, 810px);
    margin: 20px auto 0;
    padding: 18px;
    border-left: 4px solid #1499e8;
}

.x-import-form {
    display: grid;
    gap: 14px;
}

.x-import-heading,
.x-import-controls {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
}

.x-import-heading strong,
.x-import-heading span,
.x-import-card label span {
    display: block;
}

.x-import-heading strong {
    margin-bottom: 4px;
    color: #fff;
    font-size: 16px;
}

.x-import-heading span,
.x-import-card label span {
    color: #aaa;
    font-size: 12px;
    font-weight: 800;
}

.x-import-url input,
.x-import-url textarea,
.x-import-controls select {
    width: 100%;
    min-height: 44px;
    margin-top: 7px;
    padding: 0 12px;
}

.x-import-url textarea {
    min-height: 92px;
    padding-top: 10px;
    resize: vertical;
}

.x-import-url small {
    display: block;
    margin-top: 8px;
    color: #8f8f8f;
    font-size: 12px;
    font-weight: 700;
}

.x-import-controls label {
    flex: 1 1 0;
}

.x-import-step-note {
    max-width: 100%;
    margin: 4px 0 0;
    color: #9fd7ff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.6;
    text-align: left;
}

.x-import-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
}

.x-import-actions .pixiv-submit {
    min-width: min(100%, 260px);
}

.x-import-confirm-page {
    padding: 48px 16px 80px;
}

.x-import-confirm-card {
    display: grid;
    gap: 18px;
    width: min(100%, 920px);
    margin: 0 auto;
    padding: 22px;
}

.x-import-confirm-head,
.x-import-confirm-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.x-import-confirm-head h1 {
    margin: 0;
    font-size: 24px;
}

.x-import-confirm-head p:last-child {
    margin: 6px 0 0;
    color: #aaa;
}

.x-import-confirm-form,
.x-import-preview-fields {
    display: grid;
    gap: 14px;
}

.x-import-character-card {
    border: 1px solid #343434;
    background: #202020;
}

.x-import-character-card p {
    margin: -4px 0 0;
    color: #aaa;
    font-size: 13px;
    font-weight: 800;
}

.x-import-preview-item {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 16px;
    padding: 14px;
    border: 1px solid #343434;
    border-radius: 8px;
    background: #181818;
}

.x-import-preview-item.is-duplicate {
    opacity: 0.78;
}

.x-import-preview-media {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 6px;
    background: #111;
    color: #aaa;
    font-weight: 900;
}

.x-import-preview-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.x-import-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #aaa;
    font-size: 12px;
    font-weight: 900;
}

.x-import-preview-meta a {
    color: #62b8f5;
}

.x-import-preview-fields label {
    display: grid;
    gap: 7px;
}

.x-import-preview-fields label span {
    color: #ddd;
    font-size: 12px;
    font-weight: 900;
}

.pixiv-required {
    position: absolute;
    left: -46px;
    top: 18px;
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 18px;
    border-radius: 4px;
    background: #ff3b14;
    color: #fff;
    font-size: 12px;
    font-weight: 950;
}

.admin-app .character-choice {
    min-height: 132px;
    border-color: #333;
    background: #242424;
    color: #fff;
}

.admin-app .character-choice:hover {
    border-color: rgba(20, 153, 232, 0.46);
    background: #2a2a2a;
}

.admin-app .character-choice:has(input[name="character_ids[]"]:checked),
.admin-app .character-choice.create-choice:has(input[type="radio"]:checked) {
    border-color: #1499e8;
    background: #123041;
    box-shadow: inset 0 0 0 2px rgba(20, 153, 232, 0.34), 0 10px 22px rgba(20, 153, 232, 0.12);
}

.admin-app .character-choice:has(input[type="checkbox"]:checked)::after {
    background: #1499e8;
    color: #fff;
}

.admin-app .character-selection-status {
    color: #9fc8df;
}

.admin-app .character-selection-status.is-multiple {
    color: #5cc6ff;
}

.admin-app .character-multiple-toggle {
    color: #9fc8df;
}

.admin-app .character-multiple-toggle input {
    accent-color: #1499e8;
}

.admin-app .character-multiple-toggle:has(input:checked) {
    color: #5cc6ff;
}

.admin-app .character-choice strong {
    color: #fff;
}

.admin-app .character-choice small {
    color: #aaa;
}

.admin-app .new-character-panel {
    border-color: #333;
    background: #181818;
}

.pixiv-line-input,
.pixiv-textarea {
    position: relative;
    display: block;
}

.pixiv-line-input input {
    min-height: 50px;
    padding-right: 70px;
    border: 0;
    border-bottom: 1px solid #333;
}

.pixiv-textarea textarea {
    min-height: 142px;
    border: 0;
    padding-right: 80px;
}

.pixiv-line-input span,
.pixiv-textarea span {
    position: absolute;
    right: 16px;
    color: #9b9b9b;
}

.pixiv-line-input span {
    top: 16px;
}

.pixiv-textarea span {
    bottom: 14px;
}

.x-import-tag-card .pixiv-line-input > span {
    top: 0;
    right: 0;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.x-import-content-card .pixiv-line-input > span,
.x-import-content-card .pixiv-textarea > span {
    top: 0;
    right: 0;
    bottom: auto;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.x-import-content-card .x-import-field-label {
    padding-right: 88px;
}

.x-import-tag-card .x-import-field-label {
    padding-right: 64px;
}

.product-title-field {
    display: grid;
    gap: 6px;
}

.product-title-field small {
    color: #8f98a8;
    font-size: 12px;
    line-height: 1.5;
}

.product-link-field {
    display: grid;
    gap: 10px;
}

.product-title-preview {
    display: grid;
    gap: 4px;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid #2d3d4a;
    border-radius: 4px;
    background: #111920;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.product-title-preview:hover,
.product-title-preview:focus-visible {
    border-color: #3187c8;
    background: #122230;
    outline: none;
}

.product-title-preview span {
    color: #8f98a8;
    font-size: 12px;
    font-weight: 850;
}

.product-title-preview strong {
    overflow: hidden;
    color: #f6f8fb;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-title-preview[data-state="empty"] {
    align-items: center;
    border-style: dashed;
}

.product-title-autofill-status {
    color: #9aa8b5;
    font-weight: 850;
}

.product-title-autofill-status[data-tone="loading"] {
    color: #8bc7ff;
}

.product-title-autofill-status[data-tone="success"] {
    color: #57d48a;
}

.product-title-autofill-status[data-tone="error"] {
    color: #ff8b8b;
}

.product-title-history {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
}

.product-title-history-chip {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    max-width: 100%;
    border: 1px solid #2f4150;
    border-radius: 4px;
    background: #18232b;
}

.product-title-history-pick,
.product-title-history-remove {
    border: 0;
    background: transparent;
    color: #5eb6f2;
    cursor: pointer;
    font-weight: 900;
}

.product-title-history-pick {
    display: grid;
    gap: 2px;
    overflow: hidden;
    max-width: min(620px, 70vw);
    padding: 7px 10px;
    text-align: left;
}

.product-title-history-pick strong,
.product-title-history-pick small,
.product-title-history-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-title-history-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.product-title-history-kind {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.25;
}

.product-title-history-kind.is-product {
    background: #203041;
    color: #8ac9ff;
}

.product-title-history-kind.is-affiliate {
    background: #3a2812;
    color: #ffbe6b;
}

.product-title-history-pick small {
    min-width: 0;
    color: #8f98a8;
    font-size: 11px;
}

.product-title-history-remove {
    display: inline-grid;
    place-items: center;
    width: 28px;
    min-height: 30px;
    border-left: 1px solid #2f4150;
    color: #fff;
}

.product-title-history-confirm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 8px;
    border-left: 1px solid #2f4150;
    background: #271b1b;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.product-title-history-confirm button {
    border: 0;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
}

.product-title-history-delete {
    background: #ff4b32;
    color: #fff;
}

.product-title-history-cancel {
    background: #333;
    color: #ddd;
}

.product-title-history-pick:hover,
.product-title-history-remove:hover {
    background: #243746;
}

.product-link-field {
    display: grid;
    gap: 10px;
}

.product-link-type {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.nextscene-link-card .product-link-type label {
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid #333;
    border-radius: 4px;
    background: #191919;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.nextscene-link-card .product-link-type label:has(input:checked) {
    border-color: #1499e8;
    background: #132536;
    color: #fff;
}

.material-mention-inline {
    display: grid;
    gap: 10px;
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.affiliate-material-fields {
    display: grid;
    gap: 14px;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(20, 153, 232, 0.36);
    border-left: 4px solid #1499e8;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(20, 153, 232, 0.13), rgba(24, 24, 24, 0.96) 56%);
}

.affiliate-material-fields-head {
    display: grid;
    gap: 5px;
}

.affiliate-material-fields-head span {
    width: fit-content;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(20, 153, 232, 0.18);
    color: #8fd7ff;
    font-size: 12px;
    font-weight: 900;
}

.affiliate-material-fields-head strong {
    color: #fff;
    font-size: 17px;
}

.affiliate-material-fields-head p {
    margin: 0;
    color: #c8d7e6;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.affiliate-note-field {
    border: 1px solid rgba(20, 153, 232, 0.22);
    border-radius: 5px;
    padding: 10px;
    background: rgba(5, 16, 24, 0.42);
}

.material-mention-inline textarea,
.material-mention-card textarea {
    min-height: 92px;
    word-break: break-word;
}

.material-mention-history-help {
    color: #8f98a8;
    font-size: 12px;
    line-height: 1.5;
}

.healthy-mention-history .product-title-history-pick {
    max-width: min(520px, 70vw);
}

.material-mention-inline .x-import-section-title span,
.material-mention-card .x-import-section-title span {
    color: #a9b4bf;
}

.product-link-type input {
    width: 18px;
    min-height: auto;
    accent-color: #1499e8;
}

.admin-app .advanced-fields {
    padding: 16px 18px;
    border: 0;
    background: #1f1f1f;
}

.admin-app .advanced-fields summary {
    color: #62b8f5;
}

.admin-app .advanced-fields label {
    margin-top: 12px;
}

.admin-app .advanced-fields p {
    margin: 12px 0 0;
    color: #aaa;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.7;
}

.x-import-promo-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ddd;
    font-size: 13px;
    font-weight: 900;
}

.x-import-promo-check input {
    width: 20px;
    min-height: 20px;
    accent-color: #1499e8;
}

.affiliate-share-app {
    background: #111;
}

.affiliate-share-main {
    min-height: 100vh;
    color: var(--ink);
}

.affiliate-share-shell {
    min-height: 100vh;
    padding-bottom: 72px;
}

.affiliate-share-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 16px clamp(20px, 4vw, 48px);
    border-bottom: 1px solid #2d2d2d;
    background: rgba(18, 18, 18, 0.96);
    backdrop-filter: blur(12px);
}

.affiliate-share-brand {
    display: grid;
    gap: 2px;
}

.affiliate-share-brand span {
    color: #ff3f38;
    font-size: 13px;
    font-weight: 950;
}

.affiliate-share-brand strong {
    color: #fff;
    font-size: 20px;
    font-weight: 950;
}

.affiliate-share-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 1px solid #2c6284;
    border-radius: 999px;
    background: rgba(18, 118, 178, 0.16);
    color: #69caff;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 900;
}

.affiliate-share-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.affiliate-share-actions form {
    margin: 0;
}

.affiliate-share-actions button {
    min-height: 34px;
    border: 1px solid #3a3a3a;
    border-radius: 999px;
    background: #202020;
    color: #f5f5f5;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.affiliate-invite-page {
    width: min(760px, calc(100% - 32px));
    margin: 48px auto 88px;
}

.affiliate-invite-card {
    display: grid;
    gap: 16px;
    border: 1px solid #333;
    border-radius: 8px;
    background: #1a1a1a;
    padding: clamp(20px, 4vw, 36px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}

.affiliate-invite-card h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.1;
}

.affiliate-invite-card p {
    margin: 0;
    color: #cfcfcf;
    line-height: 1.8;
}

.affiliate-invite-actions,
.affiliate-invite-form {
    display: grid;
    gap: 14px;
}

.affiliate-invite-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    color: #a8a8a8;
    font-size: 12px;
    font-weight: 900;
}

.affiliate-invite-divider::before,
.affiliate-invite-divider::after {
    content: "";
    height: 1px;
    background: #333;
}

.affiliate-invite-form label {
    display: grid;
    gap: 8px;
}

.affiliate-invite-form label span {
    color: #f5f5f5;
    font-size: 13px;
    font-weight: 900;
}

.affiliate-invite-form input {
    width: 100%;
    min-height: 52px;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    background: #111;
    color: #fff;
    padding: 0 14px;
    font-size: 16px;
    font-weight: 800;
}

.affiliate-invite-form small {
    color: #aaa;
    font-size: 12px;
    line-height: 1.7;
}

.circle-profile-edit-page {
    width: min(1120px, calc(100% - 32px));
    margin: 28px auto 80px;
}

.circle-profile-edit-form {
    display: grid;
    gap: 18px;
}

.admin-app .circle-profile-edit-head h1 {
    color: #f5f5f5;
}

.admin-app .circle-profile-edit-head p:last-child {
    color: #c7c7c7;
}

.circle-profile-edit-preview {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--circle-accent, var(--accent)) 26%, #3a3a3a);
    border-radius: 8px;
    background: #181818;
    box-shadow: none;
}

.circle-profile-pattern-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.circle-profile-pattern-card {
    display: grid;
    grid-template-columns: minmax(180px, 0.38fr) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    min-width: 0;
    padding: 12px;
    border: 1px solid #383838;
    border-radius: 8px;
    background: #242424;
}

.circle-profile-pattern-meta {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 4px 2px;
}

.circle-profile-pattern-meta strong {
    color: #fff;
    font-size: 18px;
}

.circle-profile-pattern-meta span,
.circle-profile-pattern-meta em {
    color: #c9c9c9;
    font-size: 13px;
    line-height: 1.65;
}

.circle-profile-pattern-meta em {
    color: #ffcfcc;
    font-style: normal;
    font-weight: 900;
}

.circle-profile-pattern-preview {
    overflow: hidden;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--circle-accent, var(--accent)) 26%, #3a3a3a);
    border-radius: 8px;
    background: #171414;
}

.circle-profile-pattern-preview .circle-link-panel-head strong {
    font-size: 12px;
}

.circle-profile-pattern-card.is-sales {
    border-color: rgba(255, 77, 72, 0.28);
}

.circle-profile-pattern-card.is-catalog {
    border-color: rgba(58, 156, 218, 0.28);
}

.circle-profile-pattern-card.is-social {
    border-color: rgba(85, 170, 126, 0.28);
}

.circle-profile-pattern-preview.is-social .circle-link-panel-head {
    justify-content: center;
}

.circle-profile-pattern-preview.is-social .circle-link-panel-head span {
    display: none;
}

.circle-profile-pattern-card.is-campaign {
    border-color: rgba(255, 111, 76, 0.32);
}

.circle-profile-design-bridge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 73, 68, 0.32);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 73, 68, 0.13), rgba(39, 39, 39, 0.88));
}

.circle-profile-design-bridge h2 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 18px;
}

.circle-profile-design-bridge p {
    max-width: 780px;
    margin: 0;
    color: #d7d7d7;
    font-size: 13px;
    line-height: 1.7;
}

.circle-profile-edit-page .circle-profile-preview-report,
.circle-profile-edit-page .circle-profile-pattern-report {
    display: none;
}

.circle-profile-edit-page .circle-profile-edit-grid > .circle-profile-edit-panel:nth-child(4) {
    display: none;
}

.circle-profile-design-page {
    width: min(1560px, calc(100% - 32px));
    margin: 24px auto 80px;
}

.circle-profile-design-head,
.circle-profile-design-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.circle-profile-design-head h1,
.circle-profile-design-section-head h2,
.circle-profile-design-controls h2 {
    margin: 0;
    color: #f5f5f5;
}

.circle-profile-design-head h1 {
    font-size: 32px;
}

.circle-profile-design-head p,
.circle-profile-design-section-head p,
.circle-profile-design-controls p {
    max-width: 760px;
    margin: 8px 0 0;
    color: #c8c8c8;
    line-height: 1.7;
}

.circle-profile-design-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.circle-profile-design-current {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 18px;
}

.circle-profile-design-controls,
.circle-profile-design-preview-lab,
.circle-profile-design-patterns {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #393939;
    border-radius: 8px;
    background: #202020;
}

.circle-profile-design-controls {
    position: static;
    order: 2;
}

.circle-profile-design-preview-lab {
    order: 1;
}

.circle-profile-builder-shell {
    display: grid;
    grid-template-columns: minmax(250px, 330px) minmax(390px, 1fr) minmax(300px, 390px);
    gap: 16px;
    align-items: start;
}

.circle-profile-builder-panel,
.circle-profile-builder-stage {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #393939;
    border-radius: 8px;
    background: #202020;
}

.circle-profile-builder-panel {
    position: sticky;
    top: 14px;
}

.circle-profile-builder-panel h2,
.circle-profile-builder-stage h2 {
    margin: 0;
    color: #f5f5f5;
    font-size: 20px;
}

.circle-profile-builder-panel p,
.circle-profile-builder-stage p {
    margin: 6px 0 0;
    color: #c8c8c8;
    font-size: 13px;
    line-height: 1.7;
}

.circle-profile-builder-media {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid #343434;
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 52%),
        #191919;
}

.circle-profile-builder-media h3 {
    margin: 0;
    color: #f6f6f6;
    font-size: 15px;
    font-weight: 950;
}

.circle-profile-builder-media-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.circle-profile-builder-media-note {
    margin: 0;
    padding: 10px;
    border: 1px dashed color-mix(in srgb, var(--circle-accent, var(--accent)) 52%, #4a4a4a);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    color: #d8d8d8;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.6;
}

.circle-profile-builder-icon-editor,
.circle-profile-builder-header-editor {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.circle-profile-builder-icon-editor .character-edit-avatar-shell {
    justify-content: start;
}

.circle-profile-builder-icon-editor .character-edit-avatar,
.circle-profile-builder-icon-editor .character-edit-avatar-upload,
.circle-profile-builder-icon-editor.has-character-icon .character-edit-avatar-upload {
    width: 112px;
    height: 112px;
    border-radius: 14px;
}

.circle-profile-builder-icon-editor .character-edit-avatar-plus {
    width: 38px;
    height: 38px;
    font-size: 26px;
}

.circle-profile-builder-icon-editor .character-edit-avatar-clear {
    right: 6px;
    bottom: 6px;
    width: 30px;
    height: 30px;
}

.circle-profile-builder-icon-editor .character-edit-avatar-status {
    max-width: 112px;
    color: #d7d7d7;
    font-size: 12px;
    text-align: left;
}

.circle-profile-builder-icon-editor .character-icon-crop-controls {
    gap: 6px;
}

.circle-profile-builder-icon-editor .character-icon-crop-controls label,
.circle-profile-builder-icon-editor .character-icon-crop-controls button {
    font-size: 11px;
}

.circle-profile-builder-header-editor .circle-header-upload {
    min-height: 112px;
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 52%, #4a4a4a);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--circle-accent, var(--accent)) 14%, transparent), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 45%),
        #111;
}

.circle-profile-builder-header-editor .circle-header-upload img,
.circle-profile-builder-header-editor .circle-header-upload span {
    min-height: 112px;
}

.circle-profile-builder-header-drop-overlay {
    position: absolute;
    z-index: 6;
    top: 0;
    right: 0;
    left: 0;
    display: grid;
    height: clamp(150px, 23vw, 260px);
    pointer-events: none;
}

.circle-profile-builder-header-mode-tabs {
    display: inline-flex;
    position: absolute;
    z-index: 4;
    top: 14px;
    left: 14px;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(24, 20, 18, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 12px 28px rgba(24, 20, 18, 0.12);
    pointer-events: auto;
}

.circle-profile-builder-header-mode-tabs button {
    min-height: 30px;
    padding: 6px 11px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #2b2725;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.circle-profile-builder-header-mode-tabs button.is-active {
    background: var(--circle-accent, var(--accent));
    color: #fff;
}

.circle-profile-builder-header-drop-overlay input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.circle-profile-builder-header-drop-target {
    display: grid;
    place-items: center;
    gap: 6px;
    margin: 12px;
    border: 2px dashed color-mix(in srgb, var(--circle-accent, var(--accent)) 46%, rgba(255, 255, 255, 0.78));
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.74), transparent 28%),
        color-mix(in srgb, var(--circle-main, var(--circle-accent)) 8%, rgba(255, 255, 255, 0.66));
    color: #1d1716;
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.circle-profile-builder-header-drop-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--circle-accent, var(--accent)) 92%, #111);
    color: #fff;
    font-size: 24px;
    font-weight: 950;
    line-height: 1;
}

.circle-profile-builder-header-drop-target strong {
    font-size: 15px;
    font-weight: 950;
}

.circle-profile-builder-header-drop-target small {
    color: #554a48;
    font-size: 12px;
    font-weight: 900;
}

.circle-profile-builder-header-drop-overlay.has-header .circle-profile-builder-header-drop-target {
    opacity: 0;
}

.circle-profile-builder-header-drop-overlay.has-header:hover .circle-profile-builder-header-drop-target,
.circle-profile-builder-header-drop-overlay.is-dragging .circle-profile-builder-header-drop-target {
    opacity: 1;
    background: rgba(255, 255, 255, 0.82);
}

.circle-profile-builder-header-drop-overlay.is-dragging .circle-profile-builder-header-drop-target {
    border-color: var(--circle-accent, var(--accent));
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--circle-accent, var(--accent)) 18%, transparent);
}

.circle-profile-builder-header-actions {
    display: flex;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    gap: 8px;
    pointer-events: auto;
}

.circle-profile-builder-header-drop-overlay.is-empty .circle-profile-builder-header-actions {
    display: none;
}

.circle-profile-builder-header-tune {
    display: grid;
    position: absolute;
    right: 14px;
    bottom: 14px;
    left: 14px;
    z-index: 4;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(24, 20, 18, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 16px 36px rgba(24, 20, 18, 0.14);
    pointer-events: auto;
}

.circle-profile-builder-header-tune label {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: #2a2423;
    font-size: 11px;
    font-weight: 950;
}

.circle-profile-builder-header-tune input[type="range"] {
    width: 100%;
    accent-color: var(--circle-accent, var(--accent));
}

.circle-profile-builder-header-drop-overlay.is-empty .circle-profile-builder-header-tune {
    display: none;
}

.circle-profile-builder-device.is-mobile .circle-profile-builder-header-mode-tabs {
    top: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
}

.circle-profile-builder-device.is-mobile .circle-profile-builder-header-actions {
    top: 50px;
    right: 10px;
    left: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
}

.circle-profile-builder-device.is-mobile .circle-profile-builder-header-tune {
    right: 10px;
    bottom: 10px;
    left: 10px;
}

.circle-profile-builder-stage {
    position: sticky;
    top: 14px;
    justify-items: center;
}

.circle-profile-builder-stage.is-device-mock-active {
    position: static;
    align-self: start;
}

.circle-profile-builder-stage-head,
.circle-profile-builder-savebar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.circle-profile-builder-mobile-savebar {
    display: none;
}

.circle-profile-builder-device-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    padding: 4px;
    border: 1px solid #3b3b3b;
    border-radius: 18px;
    background: #151515;
    flex: 0 0 auto;
}

.circle-profile-builder-device-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 32px;
    padding: 6px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #d0d0d0;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.circle-profile-builder-device-toggle button.is-active {
    background: #fff;
    color: #141414;
}

.circle-profile-builder-device-toggle button:focus-visible {
    outline: 2px solid #ff7770;
    outline-offset: 2px;
}

.circle-profile-builder-live-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    border: 1px solid #373737;
    border-radius: 999px;
    background: #171717;
}

.circle-profile-builder-live-tools span {
    color: #eeeeee;
    font-size: 12px;
    font-weight: 950;
    padding: 0 6px;
}

.circle-profile-builder-live-tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 7px 11px;
    border: 1px solid #3d3d3d;
    border-radius: 999px;
    background: #202020;
    color: #e8e8e8;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.circle-profile-builder-live-tools button.is-active {
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 72%, #ffffff);
    background: color-mix(in srgb, var(--circle-accent, var(--accent)) 28%, #202020);
    color: #fff;
}

.circle-profile-builder-device {
    display: grid;
    justify-items: center;
    width: 100%;
    min-width: 0;
}

.circle-profile-builder-device-mock {
    --device-width: 393px;
    --device-height: 852px;
    --device-padding-x: 12px;
    --device-padding-y: 12px;
    --device-shell-width: 419px;
    --device-shell-height: 878px;
    --device-frame-width: 326.82px;
    --device-frame-height: 684.84px;
    --device-scale: .78;
    display: grid;
    justify-items: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-block: 2px 8px;
}

.circle-profile-builder-device-mock[hidden] {
    display: none;
}

.circle-profile-builder-device-viewport {
    position: relative;
    width: var(--device-frame-width);
    height: var(--device-frame-height);
    max-width: 100%;
}

.circle-profile-builder-device-frame {
    position: relative;
    width: var(--device-shell-width);
    height: var(--device-shell-height);
    padding: var(--device-padding-y) var(--device-padding-x);
    overflow: hidden;
    border: 1px solid #4b4b4b;
    border-radius: 46px;
    background: linear-gradient(145deg, #252525, #050505 62%);
    box-shadow:
        0 30px 76px rgba(0, 0, 0, .48),
        inset 0 0 0 2px rgba(255, 255, 255, .045);
    transform: scale(var(--device-scale));
    transform-origin: left top;
}

.circle-profile-builder-device-frame iframe {
    display: block;
    width: var(--device-width);
    height: var(--device-height);
    border: 0;
    border-radius: 34px;
    background: #f8f5f3;
}

.circle-profile-builder-device-speaker,
.circle-profile-builder-device-camera,
.circle-profile-builder-device-home {
    position: absolute;
    z-index: 4;
    pointer-events: none;
}

.circle-profile-builder-device-speaker {
    top: 20px;
    left: 50%;
    width: 112px;
    height: 32px;
    border-radius: 999px;
    background: #050505;
    transform: translateX(-50%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}

.circle-profile-builder-device-camera {
    display: none;
}

.circle-profile-builder-device-home {
    bottom: 17px;
    left: 50%;
    width: 112px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    transform: translateX(-50%);
}

.circle-profile-builder-device-frame[data-device-model="iphone-se"] {
    border-radius: 34px;
}

.circle-profile-builder-device-frame[data-device-model="iphone-se"] iframe {
    border-radius: 12px;
}

.circle-profile-builder-device-frame[data-device-model="iphone-se"] .circle-profile-builder-device-speaker {
    top: 13px;
    width: 58px;
    height: 6px;
    background: #242424;
}

.circle-profile-builder-device-frame[data-device-model="iphone-se"] .circle-profile-builder-device-camera {
    top: 12px;
    left: calc(50% - 48px);
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #16202a;
    box-shadow: inset 0 0 0 2px #080808;
}

.circle-profile-builder-device-frame[data-device-model="iphone-se"] .circle-profile-builder-device-home {
    bottom: 7px;
    width: 21px;
    height: 21px;
    border: 2px solid #353535;
    border-radius: 999px;
    background: transparent;
}

.circle-profile-builder-device-frame[data-device-model="android"] {
    border-radius: 38px;
}

.circle-profile-builder-device-frame[data-device-model="android"] iframe {
    border-radius: 29px;
}

.circle-profile-builder-device-frame[data-device-model="android"] .circle-profile-builder-device-speaker {
    display: none;
}

.circle-profile-builder-device-frame[data-device-model="android"] .circle-profile-builder-device-camera {
    top: 18px;
    left: 50%;
    display: block;
    width: 13px;
    height: 13px;
    border: 2px solid #161616;
    border-radius: 999px;
    background: #07141d;
    transform: translateX(-50%);
}

.circle-profile-builder-device-frame[data-device-model="android"] .circle-profile-builder-device-home {
    bottom: 15px;
    width: 86px;
    height: 4px;
}

.circle-profile-builder-device-caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 5px 10px;
    width: min(100%, 460px);
    color: #efefef;
    text-align: center;
}

.circle-profile-builder-device-caption strong {
    font-size: 13px;
}

.circle-profile-builder-device-caption span {
    color: #ff9c97;
    font-size: 11px;
    font-weight: 900;
}

.circle-profile-builder-device-caption small {
    flex-basis: 100%;
    color: #9f9f9f;
    font-size: 10px;
    line-height: 1.5;
}

.circle-profile-builder-mobile-header-tools {
    display: grid;
    gap: 11px;
    width: min(100%, 620px);
    padding: 12px;
    border: 1px solid #3d3d3d;
    border-radius: 16px;
    background: #171717;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

.circle-profile-builder-mobile-header-tools[hidden] {
    display: none;
}

.circle-profile-builder-mobile-header-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.circle-profile-builder-mobile-header-head > span {
    display: grid;
    gap: 2px;
}

.circle-profile-builder-mobile-header-head strong {
    color: #f5f5f5;
    font-size: 13px;
}

.circle-profile-builder-mobile-header-head small {
    color: #aaa;
    font-size: 10px;
    font-weight: 800;
}

.circle-profile-builder-mobile-header-head > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.circle-profile-builder-mobile-header-ranges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.circle-profile-builder-mobile-header-ranges label {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: #d2d2d2;
    font-size: 10px;
    font-weight: 900;
}

.circle-profile-builder-mobile-header-ranges input[type="range"] {
    width: 100%;
    accent-color: var(--circle-accent, var(--accent));
}

.circle-profile-builder-phone-shell {
    width: min(430px, 100%);
    padding: 12px;
    border: 1px solid #3f3f3f;
    border-radius: 32px;
    background: #0b0b0b;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    transition: width 0.22s ease, border-radius 0.22s ease;
}

.circle-profile-builder-device.is-desktop .circle-profile-builder-phone-shell {
    width: min(100%, 920px);
    border-radius: 16px;
}

.circle-profile-builder-screen {
    height: min(760px, calc(100vh - 230px));
    min-height: 560px;
    overflow: auto;
    border-radius: 22px;
    background: #f8f5f3;
}

.circle-profile-builder-device.is-desktop .circle-profile-builder-screen {
    min-height: 560px;
    border-radius: 10px;
}

.circle-profile-builder-preview {
    --paper: #fff;
    --surface: #fff;
    --soft-panel: #f3efeb;
    --ink: #151515;
    --muted: #6a6260;
    --line: #eadfda;
    position: relative;
    width: 100%;
    min-height: 100%;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--circle-main, var(--circle-accent)) 14%, transparent), transparent 30%),
        color-mix(in srgb, var(--circle-main, var(--circle-accent)) 7%, var(--paper));
}

.circle-profile-builder-link-list {
    display: grid;
    gap: 10px;
}

.circle-profile-builder-link-row {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    background: #181818;
}

.circle-profile-builder-link-row-head {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 8px;
}

.circle-profile-builder-link-row-head strong {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 73, 68, 0.16);
    color: #fff;
    font-size: 12px;
}

.circle-profile-builder-link-row-head div {
    display: inline-flex;
    gap: 4px;
}

.circle-profile-builder-link-row-head button {
    min-width: 28px;
    min-height: 28px;
    border: 1px solid #454545;
    border-radius: 7px;
    background: #242424;
    color: #f5f5f5;
    font-weight: 900;
    cursor: pointer;
}

.circle-profile-builder-drag {
    position: relative;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.circle-profile-builder-drag::before {
    content: "";
    position: absolute;
    inset: 8px 10px;
    background:
        radial-gradient(circle, #d8d8d8 1.5px, transparent 2px) 0 0 / 8px 8px;
}

.circle-profile-builder-link-row label {
    display: grid;
    gap: 5px;
    color: #d0d0d0;
    font-size: 12px;
    font-weight: 900;
}

.circle-profile-builder-link-row input,
.circle-profile-builder-link-row select {
    width: 100%;
    min-height: 38px;
    border: 1px solid #454545;
    border-radius: 7px;
    background: #101010;
    color: #f5f5f5;
    font: inherit;
}

.circle-profile-builder-link-icon-editor {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 8px;
    border: 1px solid #303030;
    border-radius: 8px;
    background: #141414;
}

.circle-profile-builder-link-icon-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: #f2f2f2;
    font-size: 12px;
    font-weight: 950;
}

.circle-profile-builder-link-icon-head small {
    min-width: 0;
    overflow: hidden;
    color: #ababab;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.circle-profile-builder-link-icon-editor .character-edit-avatar-shell {
    justify-content: start;
}

.circle-profile-builder-link-icon-editor .circle-link-icon-upload,
.circle-profile-builder-link-icon-editor .character-edit-avatar,
.circle-profile-builder-link-icon-editor .character-edit-avatar-upload {
    width: 58px;
    height: 58px;
    border-radius: 12px;
}

.circle-profile-builder-link-icon-editor .character-edit-avatar-plus {
    width: 26px;
    height: 26px;
    font-size: 20px;
}

.circle-profile-builder-link-icon-editor .character-edit-avatar-clear {
    right: -5px;
    bottom: -5px;
    width: 24px;
    height: 24px;
}

.circle-profile-builder-link-icon-editor .character-edit-avatar-status {
    align-self: center;
    color: #cfcfcf;
    font-size: 11px;
    font-weight: 900;
}

.circle-profile-builder-link-icon-editor .character-icon-cropper {
    grid-column: 1 / -1;
}

.circle-profile-builder-link-icon-editor .character-icon-crop-controls {
    gap: 6px;
}

.circle-profile-builder-link-icon-editor .character-icon-crop-controls label {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 8px;
    font-size: 11px;
}

.circle-profile-builder-link-icon-editor .character-icon-crop-controls button {
    min-height: 30px;
    font-size: 11px;
}

.circle-profile-design-controls label {
    display: grid;
    gap: 7px;
    color: #d0d0d0;
    font-size: 13px;
    font-weight: 800;
}

.circle-profile-design-pattern-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.circle-profile-design-pattern-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #3c3c3c;
    border-radius: 8px;
    background: #252525;
}

.circle-profile-design-pattern-copy {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
}

.circle-profile-design-pattern-copy strong {
    color: #fff;
    font-size: 20px;
}

.circle-profile-design-pattern-copy span,
.circle-profile-design-pattern-copy em {
    color: #d0d0d0;
    font-size: 13px;
    line-height: 1.7;
}

.circle-profile-design-pattern-copy em {
    color: #ffd1ce;
    font-style: normal;
    font-weight: 900;
}

.circle-profile-design-mini-devices {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 10px;
    min-width: 0;
}

.circle-profile-design-preview-body {
    margin: 0;
    overflow-x: hidden;
    background: #101010;
    color: #fff;
}

.circle-profile-design-preview-shell {
    min-height: 100vh;
    padding: 0;
}

.circle-profile-design-preview-body.is-mobile .circle-profile-design-preview-shell {
    width: 100%;
    padding: 0;
}

@media (max-width: 1240px) {
.circle-profile-builder-shell {
        grid-template-columns: 1fr;
    }

.circle-profile-builder-panel,
    .circle-profile-builder-stage {
        position: static;
    }

.circle-profile-builder-stage {
        order: 1;
    }

.circle-profile-builder-panel.is-appearance {
        order: 2;
    }

.circle-profile-builder-panel.is-links {
        order: 3;
    }

.circle-profile-design-pattern-card {
        grid-template-columns: 1fr;
    }
}

.admin-app .circle-profile-edit-panel {
    border-color: #393939;
    background: #242424;
    box-shadow: none;
}

.admin-app .circle-profile-edit-panel h2 {
    color: #f5f5f5;
}

.admin-app .circle-profile-edit-panel p,
.admin-app .circle-profile-edit-panel label > span,
.admin-app .circle-edit-media-label {
    color: #c7c7c7;
}

.admin-app .circle-profile-edit-panel input,
.admin-app .circle-profile-edit-panel textarea,
.admin-app .circle-profile-edit-panel select {
    border-color: #464646;
    background: #161616;
    color: #f5f5f5;
}

.circle-profile-design-presets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.circle-profile-design-preset {
    display: grid;
    gap: 6px;
    min-height: 92px;
    align-content: start;
    padding: 12px;
    border: 1px solid #3c3c3c;
    border-radius: 10px;
    background: #171717;
    color: #f5f5f5;
    text-align: left;
    cursor: pointer;
}

.circle-profile-design-preset strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.35;
}

.circle-profile-design-preset span {
    color: #bebebe;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
}

.circle-profile-design-preset.is-active {
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 68%, #555);
    background: color-mix(in srgb, var(--circle-accent, var(--accent)) 18%, #1c1c1c);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--circle-accent, var(--accent)) 18%, transparent);
}

.admin-app .circle-theme-options span {
    border-color: #3c3c3c;
    background: #1b1b1b;
    color: #f5f5f5;
}

.admin-app .circle-theme-options input:checked + span {
    border-color: color-mix(in srgb, var(--circle-accent, var(--accent)) 62%, #444);
    background: color-mix(in srgb, var(--circle-accent, var(--accent)) 16%, #202020);
    color: #ff8a83;
}

.affiliate-public-page,
.affiliate-admin-page {
    --surface: #171717;
    --paper: #1f1716;
    --ink: #f7f2ef;
    --muted: #c8bbb6;
    --line: #3b302e;
    --field-bg: #111;
    --field-border: #4a3b38;
    --subtle-bg: #120f0f;
    --soft-panel: #241b19;
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
    width: min(1640px, calc(100% - 32px));
}

.affiliate-public-page {
    margin: 22px auto 80px;
}

.affiliate-public-page.is-async-loading {
    pointer-events: none;
    opacity: 0.62;
}

.affiliate-admin-page {
    margin: 22px auto 80px;
}

.affiliate-admin-head,
.affiliate-public-head,
.affiliate-materials-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.affiliate-admin-head h1,
.affiliate-public-head h1 {
    margin: 0;
    color: var(--ink);
    font-size: 30px;
}

.affiliate-admin-head p:last-child,
.affiliate-public-head p:last-child {
    max-width: 720px;
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.7;
}

.affiliate-admin-head p:last-child {
    max-width: 900px;
    margin-top: 4px;
    line-height: 1.55;
}

.affiliate-dashboard-tabs {
    margin: 0 0 14px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.affiliate-dashboard-section {
    margin-top: 12px;
}

.affiliate-notification-page .notification-settings-panel {
    margin: 0;
}

.affiliate-material-statbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.affiliate-material-statbar a {
    display: flex;
    min-width: 0;
    min-height: 54px;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 10px 12px;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

.affiliate-material-statbar a.is-active {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.affiliate-material-statbar span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.affiliate-material-statbar strong {
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
}

.affiliate-view-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}

.affiliate-view-tabs a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--muted);
    padding: 0 12px;
    font-size: 13px;
    font-weight: 950;
    text-decoration: none;
}

.affiliate-view-tabs a.is-active {
    border-color: color-mix(in srgb, var(--accent) 64%, var(--line));
    background: color-mix(in srgb, var(--accent) 14%, var(--paper));
    color: var(--accent-strong);
}

.affiliate-impression-overview {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(150px, 0.8fr));
    gap: 8px;
    margin-bottom: 10px;
}

.affiliate-impression-overview > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    padding: 10px;
}

.affiliate-impression-overview span,
.affiliate-impression-overview small {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.affiliate-impression-overview strong {
    color: var(--ink);
    font-size: 26px;
    line-height: 1;
}

.affiliate-impression-refresh-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 7%, var(--paper));
    padding: 10px;
}

.affiliate-impression-refresh-form > div {
    display: grid;
    min-width: min(100%, 320px);
    gap: 3px;
}

.affiliate-impression-refresh-form strong {
    font-size: 13px;
    line-height: 1.2;
}

.affiliate-impression-refresh-form span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
}

.affiliate-impression-refresh-status {
    display: none;
    color: var(--accent-strong);
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
    line-height: 1.35;
}

.affiliate-impression-refresh-form.is-refreshing {
    border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.affiliate-impression-refresh-form.is-refreshing .affiliate-impression-refresh-status {
    display: block;
}

.affiliate-impression-refresh-form.is-refreshing button[type="submit"] {
    cursor: wait;
    opacity: 0.72;
}

.affiliate-impression-window-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -2px 0 10px;
}

.affiliate-impression-window-tabs a {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    color: var(--muted);
    padding: 0 10px;
    font-size: 12px;
    font-weight: 950;
    text-decoration: none;
}

.affiliate-impression-window-tabs a.is-active {
    border-color: color-mix(in srgb, var(--accent) 64%, var(--line));
    background: color-mix(in srgb, var(--accent) 14%, var(--paper));
    color: var(--accent-strong);
}

.affiliate-admin-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
}

.affiliate-panel,
.affiliate-materials-panel,
.affiliate-empty-state {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.affiliate-panel,
.affiliate-materials-panel {
    padding: 12px;
}

.affiliate-materials-panel {
    order: 1;
}

.affiliate-panel {
    order: 2;
}

.affiliate-panel {
    display: grid;
    grid-template-columns: minmax(170px, 0.18fr) minmax(0, 1fr) max-content;
    gap: 10px;
    align-items: start;
}

.affiliate-panel-head {
    display: grid;
    gap: 6px;
}

.affiliate-panel-head p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.affiliate-panel-head > span {
    width: fit-content;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--muted);
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 900;
}

.affiliate-panel h2,
.affiliate-materials-head h2 {
    margin: 0;
    font-size: 18px;
}

.affiliate-materials-title-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.affiliate-impression-aggregate-time {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.affiliate-materials-head p {
    display: none;
}

.affiliate-create-form,
.affiliate-list,
.affiliate-material-body,
.affiliate-assign-form {
    display: grid;
    gap: 10px;
}

.affiliate-create-form {
    margin-top: 14px;
}

.affiliate-create-details {
    min-width: 190px;
    border-left: 1px solid var(--line);
    padding-left: 12px;
}

.affiliate-create-details:not([open]) {
    align-self: center;
}

.affiliate-create-details summary {
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.affiliate-create-form label {
    display: grid;
    gap: 6px;
}

.affiliate-create-form label span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.affiliate-create-form input,
.affiliate-create-form textarea,
.affiliate-assign-form input,
.affiliate-assign-form select,
.affiliate-person-card input,
.affiliate-public-card input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--field-border);
    border-radius: 6px;
    background: var(--field-bg);
    color: var(--ink);
}

.affiliate-person-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 8px;
    min-width: 210px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}

.affiliate-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    max-height: 120px;
    overflow: auto;
}

.affiliate-person-card .compact-copy {
    grid-column: 1 / -1;
}

.affiliate-person-card strong,
.affiliate-material-card h3,
.affiliate-public-card h2 {
    overflow-wrap: anywhere;
}

.affiliate-person-card span,
.affiliate-person-card small,
.affiliate-empty,
.affiliate-product-link,
.affiliate-material-body p,
.affiliate-public-body p {
    color: var(--muted);
    font-size: 13px;
}

.affiliate-material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

.affiliate-material-grid.is-impression-gallery {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-items: start;
}

.affiliate-material-card,
.affiliate-public-card {
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}

.affiliate-material-card,
.affiliate-public-card {
    align-content: start;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.affiliate-material-card:hover,
.affiliate-public-card:hover {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
}

.affiliate-admin-material-card .affiliate-public-gallery {
    padding: 8px;
}

.affiliate-admin-material-card .affiliate-public-image {
    text-decoration: none;
}

.affiliate-admin-material-card .affiliate-public-body {
    gap: 10px;
}

.affiliate-impression-gallery-card .affiliate-public-gallery {
    padding: 6px;
}

.affiliate-impression-gallery-card .affiliate-public-image {
    aspect-ratio: 4 / 5.2;
    border-radius: 6px;
}

.affiliate-impression-gallery-card .affiliate-material-count {
    top: 8px;
    right: 8px;
    bottom: auto;
}

.affiliate-impression-gallery-card .affiliate-public-body {
    gap: 8px;
    padding: 9px;
}

.affiliate-impression-gallery-card .affiliate-material-title-row {
    grid-template-columns: minmax(0, 1fr);
}

.affiliate-impression-gallery-card .affiliate-material-title-row a {
    display: none;
}

.affiliate-gallery-impression-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 6;
    display: grid;
    min-height: 58px;
    align-content: center;
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(10, 13, 17, 0.82);
    color: #fff;
    padding: 8px 9px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
}

.affiliate-gallery-impression-badge small {
    color: rgba(255, 255, 255, 0.74);
    font-size: 11px;
    font-weight: 950;
}

.affiliate-gallery-impression-badge strong {
    overflow: hidden;
    font-size: 26px;
    font-weight: 950;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.affiliate-gallery-impression-badge.is-final {
    border-color: rgba(255, 211, 92, 0.56);
    background: linear-gradient(135deg, rgba(35, 28, 12, 0.9), rgba(8, 18, 24, 0.88));
}

.affiliate-gallery-impression-panel {
    display: grid;
    gap: 7px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    padding: 8px;
}

.affiliate-gallery-impression-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    align-items: end;
}

.affiliate-gallery-impression-main span,
.affiliate-gallery-impression-main small,
.affiliate-gallery-impression-meta span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.affiliate-gallery-impression-main strong {
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
}

.affiliate-gallery-impression-main small {
    grid-column: 1 / -1;
}

.affiliate-gallery-impression-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.affiliate-gallery-impression-meta span {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    padding: 0 7px;
}

.affiliate-gallery-date-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.affiliate-gallery-date-row span {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 7%, var(--paper));
    color: var(--muted);
    padding: 0 7px;
    font-size: 11px;
    font-weight: 900;
}

.affiliate-gallery-x-link,
.affiliate-gallery-detail-link {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 950;
    text-decoration: none;
}

.affiliate-gallery-detail-link {
    width: 100%;
}

.affiliate-public-card[data-affiliate-report-card] {
    cursor: pointer;
}

.affiliate-public-card[data-affiliate-report-card] a,
.affiliate-public-card[data-affiliate-report-card] button,
.affiliate-public-card[data-affiliate-report-card] input,
.affiliate-public-card[data-affiliate-report-card] textarea,
.affiliate-public-card[data-affiliate-report-card] select,
.affiliate-public-card[data-affiliate-report-card] label {
    cursor: auto;
}

.affiliate-public-card[data-affiliate-report-card] a,
.affiliate-public-card[data-affiliate-report-card] button {
    cursor: pointer;
}

.affiliate-material-image,
.affiliate-public-image {
    display: block;
    position: relative;
    width: 100%;
    border: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--subtle-bg);
    color: inherit;
    cursor: pointer;
    padding: 0;
    text-align: inherit;
}

.affiliate-material-image {
    aspect-ratio: 4 / 5;
}

.affiliate-material-image img,
.affiliate-public-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.affiliate-material-body,
.affiliate-public-body {
    padding: 10px;
}

.affiliate-material-body h3,
.affiliate-public-body h2 {
    margin: 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 950;
}

.affiliate-material-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
}

.affiliate-material-title-row h3 {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.affiliate-material-title-row a {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    padding: 0 8px;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
}

.affiliate-material-status,
.affiliate-material-count {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    border-radius: 999px;
    padding: 0 9px;
    font-size: 11px;
    font-weight: 950;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

.affiliate-material-status {
    top: 8px;
    left: 8px;
    background: rgba(20, 20, 20, 0.78);
    color: #fff;
}

.affiliate-material-warning-stack {
    position: absolute;
    top: 38px;
    left: 8px;
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none;
}

.affiliate-material-warning-badge {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 0 8px;
    color: #fff;
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.affiliate-material-warning-badge.is-excluded {
    border-color: rgba(255, 94, 94, 0.58);
    background: rgba(218, 37, 37, 0.92);
}

.affiliate-material-warning-badge.is-sensitive {
    border-color: rgba(255, 191, 71, 0.62);
    background: rgba(184, 104, 12, 0.94);
}

.affiliate-material-status.is-unassigned {
    background: rgba(255, 76, 76, 0.9);
}

.affiliate-material-status.is-assigned {
    background: rgba(30, 144, 210, 0.9);
}

.affiliate-material-status.is-posted {
    background: rgba(42, 173, 104, 0.92);
}

.affiliate-material-status.is-unposted {
    background: rgba(255, 76, 76, 0.9);
}

.affiliate-material-count {
    right: 8px;
    bottom: 8px;
    background: rgba(15, 15, 15, 0.78);
    color: #fff;
}

.affiliate-product-link {
    width: fit-content;
    color: var(--accent-strong);
    font-weight: 900;
}

.affiliate-assigned-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.affiliate-assigned-list form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--subtle-bg);
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 900;
}

.affiliate-assigned-list button {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    cursor: pointer;
}

.affiliate-x-link {
    color: var(--accent);
    text-decoration: none;
}

.affiliate-x-metric {
    padding: 2px 6px;
    border: 1px solid rgba(20, 153, 232, 0.28);
    border-radius: 999px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.affiliate-filter-form {
    display: grid;
    grid-template-columns: minmax(140px, 0.75fr) minmax(190px, 1fr) minmax(125px, 0.6fr) minmax(125px, 0.55fr) minmax(210px, 1fr) auto auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}

.affiliate-filter-form.is-impression-filter {
    grid-template-columns:
        minmax(120px, 0.75fr)
        minmax(155px, 1fr)
        minmax(108px, 0.55fr)
        minmax(108px, 0.55fr)
        minmax(132px, 0.62fr)
        minmax(92px, 0.42fr)
        minmax(150px, 0.9fr)
        minmax(112px, 0.48fr);
}

.affiliate-filter-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.affiliate-filter-form span,
.affiliate-assign-picker > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.affiliate-filter-form select,
.affiliate-filter-form input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--field-border);
    border-radius: 8px;
    background: var(--field-bg);
    color: var(--ink);
}

.affiliate-public-filter-form {
    grid-template-columns: minmax(150px, 0.85fr) minmax(190px, 1fr) minmax(125px, 0.6fr) minmax(125px, 0.55fr) auto auto;
}

.affiliate-public-filter-form + .affiliate-public-statbar {
    margin-top: 12px;
}

.affiliate-assign-picker {
    display: grid;
    gap: 7px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.affiliate-assign-picker > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.affiliate-assign-picker form {
    display: contents;
}

.affiliate-assign-pill {
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: 999px;
    background: var(--surface);
    color: var(--accent-strong);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.affiliate-assign-pill.is-assigned {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--muted);
    cursor: default;
}

.affiliate-assign-pill.is-return {
    display: inline-flex;
    align-items: center;
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent-strong);
}

.affiliate-assign-pill.is-return:hover,
.affiliate-assign-pill.is-return:focus-visible {
    background: var(--accent);
    color: var(--on-accent);
}

.affiliate-material-ops {
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--line);
    padding-top: 8px;
}

.affiliate-material-ops summary {
    display: flex;
    min-height: 32px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--accent-strong);
    padding: 0 10px;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
    list-style: none;
}

.affiliate-material-ops summary::-webkit-details-marker {
    display: none;
}

.affiliate-material-ops summary::after {
    content: "+";
    color: var(--muted);
    font-size: 14px;
}

.affiliate-material-ops[open] summary::after {
    content: "-";
}

.affiliate-empty-state {
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: 24px;
}

.affiliate-empty-state h2 {
    margin: 0;
}

.affiliate-empty-state p {
    margin: 0;
    color: var(--muted);
}

.affiliate-public-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    align-items: start;
    gap: 10px;
}

.affiliate-public-grid.is-impression-gallery {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.affiliate-public-view-tabs {
    margin-top: -4px;
}

.affiliate-public-impression-overview {
    margin-bottom: 12px;
}

.affiliate-public-impression-card .affiliate-card-action {
    min-height: 34px;
    background: var(--paper);
    font-size: 12px;
}

.affiliate-public-impression-card .affiliate-material-title-block {
    min-height: 34px;
}

.affiliate-public-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.affiliate-admin-sortbar {
    margin-bottom: 10px;
    padding: 10px;
}

.affiliate-public-toolbar div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.affiliate-public-toolbar strong {
    color: var(--ink);
}

.affiliate-public-toolbar nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.affiliate-public-toolbar a {
    min-height: 32px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.affiliate-public-toolbar a.is-active {
    border-color: var(--accent);
    background: rgba(20, 153, 232, 0.14);
    color: var(--accent);
}

.affiliate-public-gallery {
    padding: 8px;
    background: var(--subtle-bg);
}

.affiliate-public-gallery .affiliate-public-image {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 6px;
    background: var(--subtle-bg);
    isolation: isolate;
}

.affiliate-public-primary-image,
.affiliate-public-secondary-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.affiliate-public-primary-image {
    display: block;
    position: relative;
    z-index: 2;
    border-radius: 6px;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.affiliate-public-gallery.has-secondary .affiliate-public-image {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.08)),
        var(--subtle-bg);
}

.affiliate-public-gallery.has-secondary .affiliate-public-primary-image {
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    margin: 14px 14px 0 0;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.affiliate-public-gallery.has-secondary .affiliate-public-image:hover .affiliate-public-primary-image,
.affiliate-public-gallery.has-secondary .affiliate-public-image:focus-visible .affiliate-public-primary-image {
    filter: brightness(0.9);
    transform: translate(-3px, 3px) scale(0.985);
}

.affiliate-public-secondary-image {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    width: 62%;
    height: 62%;
    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
    filter: brightness(0.78);
    opacity: 0.72;
    transform: translate(0, 0) rotate(2deg);
    transition: transform 0.18s ease, width 0.18s ease, height 0.18s ease, opacity 0.18s ease, filter 0.18s ease;
}

.affiliate-public-gallery.has-secondary .affiliate-public-image:hover .affiliate-public-secondary-image,
.affiliate-public-gallery.has-secondary .affiliate-public-image:focus-visible .affiliate-public-secondary-image {
    width: 66%;
    height: 66%;
    filter: brightness(0.9);
    opacity: 0.86;
    transform: translate(-3px, 3px) rotate(0deg);
}

.affiliate-public-image-index {
    position: absolute;
    bottom: 7px;
    left: 7px;
    z-index: 1;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 950;
    line-height: 24px;
    text-align: center;
}

.affiliate-public-image-peek {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border-radius: 999px;
    background: rgba(16, 16, 16, 0.76);
    color: #fff;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 950;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

.affiliate-public-sensitive {
    position: absolute;
    top: 40px;
    left: 8px;
    z-index: 6;
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    border-radius: 999px;
    padding: 0 9px;
    background: rgba(255, 75, 75, 0.92);
    color: #fff;
    font-size: 11px;
    font-weight: 950;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

.affiliate-public-statbar {
    margin-bottom: 12px;
}

.affiliate-public-statbar a:nth-child(2) {
    pointer-events: none;
}

.affiliate-note {
    padding: 10px;
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    background: var(--soft-panel);
    color: var(--ink) !important;
}

.affiliate-material-title-block {
    display: grid;
    gap: 3px;
    min-width: 0;
    margin: 0;
    border-left: 3px solid var(--accent);
    padding-left: 10px;
}

.affiliate-material-title-block span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.affiliate-material-title-block strong {
    min-width: 0;
    color: var(--ink);
    font-size: 14px;
}

.affiliate-public-card .affiliate-material-title-block strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.affiliate-title-actions em,
.affiliate-free-tree-actions em {
    color: var(--ink);
    font-style: normal;
    font-weight: 900;
}

.affiliate-x-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.affiliate-x-metric.is-final {
    background: rgba(20, 153, 232, 0.12);
    color: #177bbd;
}

.affiliate-x-metric.is-updated {
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
}

.affiliate-x-metric.is-warning {
    border-color: rgba(255, 75, 75, 0.24);
    background: rgba(255, 75, 75, 0.12);
    color: #d83a3a;
}

.affiliate-usage-form {
    display: grid;
    gap: 9px;
    margin-top: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.affiliate-usage-form strong {
    color: var(--ink);
    font-size: 14px;
}

.affiliate-public-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.affiliate-public-card h2 {
    display: -webkit-box;
    min-height: 46px;
    overflow: hidden;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.affiliate-public-meta span {
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(20, 153, 232, 0.12);
    color: var(--accent-strong);
    font-size: 11px;
    font-weight: 900;
}

.affiliate-product-actions,
.affiliate-download-list {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.affiliate-product-actions {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
}

.affiliate-title-actions {
    grid-template-columns: max-content minmax(0, 1fr);
}

.affiliate-title-actions span {
    min-width: 44px;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
}

.affiliate-title-actions em {
    min-width: 0;
    overflow-wrap: anywhere;
}

.affiliate-mention-actions {
    grid-template-columns: max-content auto minmax(0, 1fr);
}

.affiliate-mention-actions span {
    min-width: 44px;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
}

.affiliate-admin-product-actions {
    grid-template-columns: 1fr auto auto;
    gap: 6px;
    padding: 8px;
}

.affiliate-product-actions span,
.affiliate-download-list strong {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.affiliate-title-actions span,
.affiliate-mention-actions span {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
}

.affiliate-report-dialog .affiliate-title-actions em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
}

.affiliate-product-actions button,
.affiliate-product-actions a,
.affiliate-download-list a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.affiliate-public-card .affiliate-product-actions button,
.affiliate-public-card .affiliate-product-actions a {
    min-width: 54px;
    padding-inline: 8px;
}

.affiliate-admin-product-actions button,
.affiliate-admin-product-actions a {
    min-height: 30px;
    padding-inline: 10px;
}

.affiliate-product-actions button {
    color: var(--accent);
}

.affiliate-mention-actions em {
    grid-column: 3;
    color: var(--ink);
    font-style: normal;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.affiliate-product-actions a {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.affiliate-report-metrics {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.affiliate-report-metrics > strong {
    color: var(--ink);
    font-size: 14px;
}

.affiliate-report-metrics dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.affiliate-report-metrics dl > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
}

.affiliate-report-metrics dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.affiliate-report-metrics dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.affiliate-report-metrics small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.affiliate-report-metrics p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.affiliate-report-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}

.affiliate-report-view-switch {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
}

.affiliate-report-view-switch button {
    min-height: 30px;
    min-width: 48px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    padding: 0 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.affiliate-report-view-switch button.is-active {
    background: var(--accent);
    color: var(--on-accent);
}

.affiliate-material-info-panel {
    display: grid;
    gap: 8px;
    height: clamp(180px, 34vh, 360px);
    max-height: 420px;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34%),
        var(--surface);
}

.affiliate-material-info-panel h3 {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
}

.affiliate-material-info-panel p {
    display: block;
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.affiliate-report-dialog:not(.is-metrics-view) .affiliate-report-metrics {
    display: none;
}

.affiliate-report-dialog:not(.is-metrics-view) .affiliate-report-dialog-head .affiliate-x-status-row {
    display: none;
}

.affiliate-report-dialog.is-metrics-view .affiliate-material-info-panel,
.affiliate-report-dialog.is-metrics-view .affiliate-note,
.affiliate-report-dialog.is-metrics-view .affiliate-product-actions,
.affiliate-report-dialog.is-metrics-view .affiliate-usage-form,
.affiliate-report-dialog.is-metrics-view .affiliate-report-dialog-controls > p {
    display: none;
}

.affiliate-download-list div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
}

@media (min-width: 761px) {
.affiliate-public-card {
        position: relative;
        align-self: start;
        overflow: hidden;
    }

.affiliate-public-card .affiliate-public-body {
        display: grid;
        gap: 10px;
    }

.affiliate-public-card .affiliate-download-list div {
        max-height: 106px;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
}

.affiliate-card-action {
    display: inline-flex;
    min-height: 42px;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(14, 14, 14, 0.46);
    color: var(--ink);
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.affiliate-card-action:hover,
.affiliate-card-action:focus-visible {
    border-color: var(--accent);
    color: var(--accent-strong);
}

.affiliate-report-dialog {
    width: min(1040px, calc(100vw - 32px));
    max-width: none;
    height: min(920px, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    overflow: hidden;
}

.affiliate-report-dialog::backdrop {
    background: rgba(0, 0, 0, 0.72);
}

.affiliate-report-dialog-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
}

.affiliate-report-dialog-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.affiliate-report-dialog-head h2,
.affiliate-report-dialog-head strong {
    display: block;
    min-height: 0;
    margin: 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 950;
    line-height: 1.45;
    overflow: visible;
    overflow-wrap: anywhere;
    -webkit-line-clamp: initial;
    -webkit-box-orient: initial;
}

.affiliate-report-dialog-head p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.affiliate-public-date-row,
.affiliate-report-date-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.4;
}

.affiliate-public-date-row {
    margin-top: -2px;
}

.affiliate-report-date-row {
    margin-top: 6px;
}

.affiliate-public-date-row span,
.affiliate-report-date-row span {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
}

.affiliate-report-dialog-close {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.affiliate-report-dialog-close:hover,
.affiliate-report-dialog-close:focus-visible {
    border-color: var(--accent);
    color: var(--accent-strong);
}

.affiliate-report-dialog-body {
    display: grid;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: none;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 14px;
}

.affiliate-report-dialog-layout {
    grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
    align-items: stretch;
    gap: 14px;
}

.affiliate-report-image-pane {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    position: sticky;
    top: 0;
}

.affiliate-report-image-frame {
    position: relative;
    min-width: 0;
}

.affiliate-report-image-set {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.affiliate-report-image-set.has-multiple {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.affiliate-report-image-set figure {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.affiliate-report-image-set img {
    width: 100%;
    max-height: min(62vh, 620px);
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #0e0d0d;
}

.affiliate-report-image-set.has-multiple img {
    height: min(58vh, 560px);
}

.affiliate-report-image-set figcaption {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
}

.affiliate-report-nav-button {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(8, 8, 8, 0.68);
    color: #fff;
    font: inherit;
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36);
    cursor: pointer;
    transform: translateY(-50%);
}

.affiliate-report-nav-button.is-prev {
    left: 10px;
}

.affiliate-report-nav-button:not(:disabled):hover,
.affiliate-report-nav-button:not(:disabled):focus-visible {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.affiliate-report-nav-button:disabled {
    opacity: 0.18;
    cursor: default;
}

@media (min-width: 1180px) {
.affiliate-report-dialog {
        overflow: visible;
    }

.affiliate-report-nav-button {
        position: fixed;
    }

.affiliate-report-nav-button.is-prev {
        left: max(18px, calc((100vw - 1040px) / 2 - 82px));
    }
}

@media (min-width: 761px) and (max-height: 760px) {
.affiliate-report-dialog {
        height: calc(100dvh - 12px);
        max-height: calc(100dvh - 12px);
    }

.affiliate-report-dialog-head {
        padding: 10px 14px;
    }

.affiliate-report-dialog-body {
        padding: 10px;
    }

.affiliate-report-image-set img {
        max-height: min(50dvh, 460px);
    }

.affiliate-report-image-set.has-multiple img {
        height: min(46dvh, 420px);
    }
}

.affiliate-report-image-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.affiliate-report-image-meta div {
    display: inline-flex;
    gap: 6px;
}

.affiliate-report-image-meta button,
.affiliate-report-image-downloads a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.affiliate-report-image-meta button:not(:disabled):hover,
.affiliate-report-image-meta button:not(:disabled):focus-visible,
.affiliate-report-image-downloads a:hover,
.affiliate-report-image-downloads a:focus-visible {
    border-color: var(--accent);
    color: var(--accent-strong);
}

.affiliate-report-image-meta button:disabled {
    opacity: 0.42;
    cursor: default;
}

.affiliate-report-image-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.affiliate-report-dialog-controls {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    padding-right: 4px;
    overscroll-behavior: contain;
}

.affiliate-report-dialog-body > p,
.affiliate-report-dialog-controls > p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

.affiliate-card-details {
    display: grid;
    gap: 10px;
    margin-top: 2px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(14, 14, 14, 0.46);
    overflow: hidden;
}

.affiliate-card-details summary {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
    list-style: none;
}

.affiliate-card-details summary::-webkit-details-marker {
    display: none;
}

.affiliate-card-details summary::after {
    content: "+";
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--accent-strong);
    font-size: 15px;
    line-height: 1;
}

.affiliate-card-details[open] {
    padding: 0 10px 10px;
}

.affiliate-card-details[open] summary {
    margin: 0 -10px;
    border-bottom: 1px solid var(--line);
}

.affiliate-card-details[open] summary::after {
    content: "-";
}

.affiliate-card-details > p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

.affiliate-usage-form > label {
    display: grid;
    align-items: stretch;
}

.affiliate-usage-form label span {
    color: var(--muted);
    font-size: 12px;
}

.affiliate-usage-form input,
.affiliate-usage-form textarea {
    min-width: 0;
    border: 1px solid var(--field-border);
    border-radius: 6px;
    background: var(--field-bg);
    color: var(--ink);
}

.affiliate-usage-form small {
    color: var(--muted);
    font-size: 12px;
}

.affiliate-required-hint {
    line-height: 1.5;
}

.affiliate-usage-inline-error {
    padding: 10px 12px;
    border: 1px solid rgba(255, 75, 75, 0.5);
    border-left: 4px solid #ff4b4b;
    border-radius: 8px;
    background: rgba(255, 75, 75, 0.1);
    color: #ff8a83;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.55;
}

.affiliate-usage-inline-error[hidden] {
    display: none;
}

.affiliate-usage-inline-error.is-success {
    border-color: rgba(42, 173, 104, 0.52);
    border-left-color: #2aad68;
    background: rgba(42, 173, 104, 0.12);
    color: #79e6a4;
}

.affiliate-usage-form.has-inline-error input[name="used_url"] {
    border-color: #ff4b4b;
    box-shadow: 0 0 0 3px rgba(255, 75, 75, 0.14);
}

.affiliate-usage-form.is-saving button[type="submit"] {
    cursor: progress;
    opacity: 0.75;
}

@media (max-width: 760px) {
.circle-profile-edit-page {
        width: min(100% - 24px, 1120px);
        margin-top: 18px;
    }

.circle-profile-design-page {
        width: min(100% - 20px, 1560px);
        margin-top: 18px;
    }

.circle-profile-design-controls {
        position: static;
    }

.circle-profile-builder-stage {
        order: 3;
    }

.circle-profile-builder-panel.is-appearance {
        order: 1;
    }

.circle-profile-builder-panel.is-links {
        order: 2;
        position: static;
        max-height: none;
        overflow: visible;
    }

.circle-profile-builder-link-list {
        overflow: visible;
    }

.circle-profile-builder-mobile-savebar {
        position: sticky;
        bottom: 10px;
        z-index: 30;
        order: 4;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 10px;
        border: 1px solid #3d3d3d;
        border-radius: 12px;
        background: rgba(24, 24, 24, 0.94);
        box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.34);
        backdrop-filter: blur(14px);
    }

.circle-profile-builder-device-toggle {
        display: none;
    }

.circle-profile-builder-device.is-desktop .circle-profile-builder-phone-shell {
        width: min(430px, 100%);
        border-radius: 32px;
    }

.circle-profile-builder-device.is-desktop .circle-profile-builder-screen {
        border-radius: 22px;
    }

.circle-profile-builder-screen {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

.developer-flow-page {
        width: min(100% - 20px, 1440px);
        padding-top: 20px;
    }

.developer-flow-shell,
    .flow-visualizer__shell {
        min-height: 0;
    }

.flow-visualizer__header,
    .developer-flow-note-grid {
        grid-template-columns: 1fr;
    }

.flow-visualizer__viewport {
        min-height: 660px;
        overflow-x: auto;
    }

.flow-visualizer__viewport::before {
        content: "";
        display: block;
        width: 900px;
        height: 660px;
    }

.flow-visualizer__edges,
    .flow-visualizer__nodes {
        width: 900px;
        height: 660px;
    }

.flow-visualizer__node {
        width: 136px;
    }

.flow-visualizer__controls {
        justify-content: stretch;
    }

.flow-visualizer__control {
        flex: 1;
    }

.circle-profile-builder-header-drop-overlay {
        height: 132px;
    }

.circle-profile-builder-live-tools {
        border-radius: 14px;
    }

.circle-profile-builder-live-tools span {
        width: 100%;
    }

.circle-profile-builder-live-tools button {
        flex: 1 1 calc(50% - 8px);
    }

.circle-profile-builder-header-mode-tabs {
        top: 8px;
        left: 8px;
    }

.circle-profile-builder-header-mode-tabs button {
        min-height: 28px;
        padding: 5px 8px;
        font-size: 11px;
    }

.circle-profile-builder-header-mode-tabs [data-builder-header-mode-button="desktop"] {
        display: none;
    }

.circle-profile-builder-header-drop-target {
        margin: 8px;
    }

.circle-profile-builder-header-actions {
        top: 8px;
        right: 8px;
        gap: 5px;
    }

.circle-profile-builder-header-tune {
        right: 8px;
        bottom: 8px;
        left: 8px;
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 8px;
    }

.auth-shell {
        width: 100%;
        max-width: 390px;
        margin: 0 auto;
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        gap: 14px;
        padding: 18px 12px 34px;
        overflow-x: hidden;
    }

.auth-brand {
        gap: 12px;
        width: 100%;
        max-width: 100%;
        padding: 18px;
    }

.auth-brand h1 {
        width: 100%;
        max-width: 100%;
        font-size: 24px;
        line-height: 1.14;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-all;
    }

.auth-trust-list {
        width: 100%;
        max-width: 100%;
        gap: 8px;
    }

.auth-trust-list div {
        grid-template-columns: 36px 1fr;
        padding: 12px;
    }

.auth-trust-list span {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }

.auth-panel {
        width: 100%;
        max-width: 100%;
        padding: 18px;
    }

.account-choice-card {
        min-height: 0;
        padding: 15px;
    }

.account-choice-card strong {
        font-size: 21px;
    }

.auth-panel-header h2 {
        font-size: 24px;
    }

.admin-onboarding-dialog {
        max-height: calc(100vh - 32px);
        overflow: auto;
        padding: 20px;
    }

.admin-onboarding-actions,
    .admin-setup-actions {
        justify-content: stretch;
    }

.admin-onboarding-dialog {
        width: min(100% - 22px, 880px);
        max-height: calc(100vh - 24px);
        overflow-y: auto;
    }

.admin-onboarding-step h2 {
        font-size: 28px;
    }

.developer-dashboard {
        width: min(100% - 24px, 1320px);
        padding: 28px 0 48px;
    }

.developer-dashboard-hero,
    .developer-management-topbar,
    .developer-db-layout,
    .developer-current-circle,
    .developer-affiliate-list article {
        grid-template-columns: 1fr;
    }

.developer-dashboard-hero {
        align-items: stretch;
    }

.developer-dashboard-hero h1 {
        font-size: 34px;
    }

.developer-management-topbar {
        align-items: stretch;
        padding: 14px 16px;
    }

.developer-management-topbar nav {
        flex-wrap: wrap;
    }

.developer-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.developer-link-row,
    .developer-health-item {
        grid-template-columns: 1fr auto;
    }

.developer-link-row small {
        grid-column: 1 / -1;
    }

.affiliate-product-actions {
        grid-template-columns: 1fr 1fr;
    }

.affiliate-product-actions span {
        grid-column: 1 / -1;
    }

.affiliate-title-actions em,
    .affiliate-mention-actions em {
        grid-column: 1 / -1;
    }

.affiliate-report-metrics dl {
        grid-template-columns: 1fr;
    }

.creation-mode-grid {
        grid-template-columns: 1fr;
    }

.affiliate-share-topbar {
        align-items: flex-start;
        padding: 14px 16px;
    }

.affiliate-share-badge {
        min-height: 30px;
        padding-inline: 10px;
        font-size: 12px;
    }

.affiliate-admin-page,
    .affiliate-public-page,
    .material-detail-page {
        width: min(100% - 24px, 1640px);
        margin-top: 18px;
    }

.affiliate-admin-head,
    .affiliate-public-head,
    .affiliate-materials-head,
    .material-detail-head {
        display: grid;
        align-items: start;
    }

.affiliate-admin-layout,
    .material-detail-layout,
    .material-edit-grid {
        grid-template-columns: 1fr;
    }

.affiliate-material-statbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.affiliate-view-tabs a {
        flex: 1 1 150px;
    }

.affiliate-impression-overview {
        grid-template-columns: 1fr;
    }

.affiliate-panel {
        grid-template-columns: 1fr;
    }

.affiliate-create-details {
        min-width: 0;
        border-top: 1px solid var(--line);
        border-left: 0;
        padding-top: 12px;
        padding-left: 0;
    }

.affiliate-list {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        max-height: none;
    }

.affiliate-filter-form,
    .affiliate-filter-form.is-impression-filter {
        grid-template-columns: 1fr 1fr;
    }

.material-detail-preview {
        position: static;
    }

.material-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.material-assignment-row,
    .material-assignment-row.is-creator-safe,
    .material-metric-head,
    .material-metric-row {
        grid-template-columns: 1fr;
    }

.material-assignment-metric {
        text-align: left;
    }

.affiliate-material-grid,
    .affiliate-public-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

.affiliate-material-grid.is-impression-gallery {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    }

.affiliate-public-grid.is-impression-gallery {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    }

.affiliate-public-grid {
        grid-template-columns: 1fr;
    }

.affiliate-report-dialog {
        width: 100%;
        max-width: none;
        height: calc(100dvh - 10px);
        max-height: calc(100dvh - 10px);
        margin: auto 0 0;
        border-radius: 16px 16px 0 0;
    }

.affiliate-report-dialog-panel {
        height: 100%;
        max-height: 100%;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 16px 16px 0 0;
    }

.affiliate-report-dialog-head {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 12px 14px;
    }

.affiliate-report-dialog-close {
        width: 42px;
        height: 42px;
    }

.affiliate-report-dialog-body {
        height: 100%;
        max-height: none;
        overflow: auto;
        padding: 12px;
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }

.affiliate-report-dialog-layout {
        grid-template-columns: 1fr;
    }

.affiliate-report-image-pane {
        position: static;
        max-height: none;
        overflow: visible;
    }

.affiliate-report-dialog-controls {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

.affiliate-report-image-set img {
        max-height: 38vh;
    }

.affiliate-report-image-set.has-multiple img {
        height: 32vh;
    }

.affiliate-report-nav-button {
        width: 48px;
        height: 48px;
        font-size: 34px;
    }

.affiliate-report-nav-button.is-prev {
        left: 6px;
    }

.affiliate-report-date-row span,
    .affiliate-public-date-row span {
        min-height: 20px;
    }

.affiliate-admin-head h1,
    .affiliate-public-head h1,
    .material-detail-head h1 {
        font-size: 24px;
    }
}

.pixiv-submit {
    justify-self: center;
    min-width: 200px;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: #1499e8;
    color: #fff;
    font: inherit;
    font-weight: 950;
}

.pixiv-submit:hover {
    background: #23a8f5;
    color: #fff;
}

@media (max-width: 1100px) {
.admin-topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        min-height: 100px;
        padding: 18px 14px 10px;
    }

.admin-setup-topbar {
        min-height: 72px;
        padding: 14px 16px 10px;
    }

.admin-logo {
        font-size: 24px;
    }

.admin-search {
        grid-column: 1 / -1;
        order: 3;
        max-width: none;
    }

.admin-actions {
        gap: 8px;
    }

.admin-home-button,
    .admin-post-button {
        min-height: 40px;
        padding: 0 16px;
    }

.pixiv-dashboard {
        padding: 28px 16px 70px;
    }

.dashboard-page-section {
        margin-top: 18px;
    }

.dashboard-empty-panel {
        padding: 18px;
    }

.admin-work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 14px;
    }

.dashboard-home-summary {
        grid-template-columns: 1fr;
        margin-top: 42px;
    }

.character-hub-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 250px));
    }

.character-edit-page {
        padding: 28px 12px 56px;
    }

.character-edit-card {
        padding: 18px;
    }

.character-edit-head {
        grid-template-columns: 1fr;
        gap: 14px;
    }

.character-edit-icon-column {
        justify-items: center;
        min-height: 220px;
    }

.character-edit-avatar {
        width: 138px;
        height: 138px;
    }

.has-character-icon .character-edit-avatar-upload {
        width: 156px;
        height: 156px;
    }

.character-edit-avatar-status {
        max-width: 100%;
        text-align: center;
    }

.character-edit-actions {
        display: grid;
        justify-content: stretch;
    }

.post-type-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.post-method-card {
        width: calc(100% - 24px);
        margin-top: 14px;
        padding: 14px;
    }

.post-method-grid {
        grid-template-columns: 1fr;
    }

.post-method-choice {
        min-height: 92px;
    }

.pixiv-upload-hero {
        grid-template-columns: 1fr;
        min-height: 180px;
        padding: 28px 14px;
    }

.pixiv-upload-hero.post-method-panel {
        width: calc(100% - 24px);
        margin-top: 14px;
        padding: 14px;
    }

.pixiv-add-image {
        min-height: 68px;
        border-radius: 14px;
    }

.pixiv-upload-hero.post-method-panel .pixiv-add-image {
        min-height: 78px;
        border-radius: 6px;
    }

.pixiv-required {
        position: static;
        width: 34px;
        margin-bottom: 6px;
    }
}

@media (max-width: 560px) {
.character-hub-grid {
        grid-template-columns: 1fr;
    }

.material-detail-image-set.has-multiple {
        grid-template-columns: 1fr;
    }
}

/* クリエイター招待ゲート */
.creator-invite-main {
    min-height: 100vh;
}

.creator-invite-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 5%, rgba(20, 153, 232, .14), transparent 34rem),
        #171717;
    color: #f7f7f7;
}

.creator-invite-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 84px;
    padding: 14px clamp(18px, 5vw, 64px);
    border-bottom: 1px solid #303030;
    background: rgba(20, 20, 20, .92);
}

.creator-invite-topbar img {
    display: block;
    width: clamp(150px, 20vw, 220px);
    height: auto;
}

.creator-invite-exit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid #454545;
    border-radius: 999px;
    color: #e5e5e5;
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.creator-invite-card {
    display: grid;
    width: min(760px, calc(100% - 32px));
    gap: 30px;
    margin: 0 auto;
    padding: clamp(38px, 7vw, 76px) 0 80px;
}

.creator-invite-heading {
    display: grid;
    gap: 14px;
}

.creator-invite-heading .eyebrow {
    margin: 0;
    color: #79ccff;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: .08em;
}

.creator-invite-heading h1 {
    margin: 0;
    font-size: clamp(40px, 7vw, 58px);
    line-height: 1.1;
    letter-spacing: -.035em;
}

.creator-invite-heading > p:last-child {
    margin: 0;
    color: #c3c3c3;
    font-size: 18px;
    line-height: 1.85;
}

.creator-invite-form {
    display: grid;
    gap: 22px;
    padding: clamp(24px, 5vw, 38px);
    border: 1px solid #353535;
    border-radius: 16px;
    background: #202020;
    box-shadow: 0 22px 64px rgba(0, 0, 0, .28);
}

.creator-invite-form label {
    display: grid;
    gap: 10px;
}

.creator-invite-form label > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #f2f2f2;
    font-size: 18px;
    font-weight: 900;
}

.creator-invite-form em {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(20, 153, 232, .15);
    color: #8ad3ff;
    font-size: 14px;
    font-style: normal;
}

.creator-invite-form input {
    width: 100%;
    min-height: 62px;
    border: 1px solid #505050;
    border-radius: 10px;
    background: #151515;
    color: #fff;
    padding: 0 18px;
    font: inherit;
    font-size: 20px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.creator-invite-form input:focus {
    border-color: #47baff;
    outline: 3px solid rgba(20, 153, 232, .2);
}

.creator-invite-form small {
    color: #aaa;
    font-size: 15px;
    line-height: 1.7;
}

.creator-invite-form .button {
    min-height: 58px;
    font-size: 18px;
}

.creator-invite-help {
    display: grid;
    gap: 8px;
    padding: 22px 24px;
    border-left: 4px solid #555;
    background: rgba(255, 255, 255, .035);
}

.creator-invite-help strong {
    font-size: 18px;
}

.creator-invite-help p {
    margin: 0;
    color: #b8b8b8;
    font-size: 16px;
    line-height: 1.75;
}

.creator-invite-help a {
    width: fit-content;
    color: #8ed5ff;
    font-size: 16px;
    font-weight: 900;
}

/* developer: 招待コード管理 */
.developer-invites-page {
    display: grid;
    width: min(1180px, calc(100% - 48px));
    gap: 16px;
    margin: 0 auto;
    padding: 42px 0 72px;
}

.developer-page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
}

.developer-page-heading h1 {
    margin: 4px 0 10px;
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.08;
}

.developer-page-heading p {
    max-width: 760px;
    margin: 0;
    color: #b9b9b9;
    font-size: 17px;
    line-height: 1.75;
}

.developer-invite-summary {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.developer-invite-summary span {
    display: grid;
    min-width: 118px;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid #383838;
    border-radius: 10px;
    background: #202020;
    color: #aaa;
    font-size: 14px;
}

.developer-invite-summary strong {
    color: #fff;
    font-size: 25px;
}

.developer-invite-issue form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(130px, 180px) auto;
    gap: 14px;
    align-items: end;
}

.developer-invite-issue label {
    display: grid;
    gap: 8px;
}

.developer-invite-issue label > span {
    color: #f2f2f2;
    font-size: 18px;
    font-weight: 900;
}

.developer-invite-issue em {
    color: #8ed5ff;
    font-size: 13px;
    font-style: normal;
}

.developer-invite-issue input {
    width: 100%;
    min-height: 52px;
    border: 1px solid #454545;
    border-radius: 8px;
    background: #151515;
    color: #fff;
    padding: 0 15px;
    font: inherit;
    font-size: 18px;
}

.developer-invite-issue .button {
    min-height: 52px;
    font-size: 18px;
    white-space: nowrap;
}

.developer-invite-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #343434;
    border-radius: 10px;
}

.developer-invite-table {
    width: 100%;
    min-width: 930px;
    border-collapse: collapse;
    background: #181818;
    font-size: 15px;
}

.developer-invite-table th,
.developer-invite-table td {
    padding: 14px;
    border-bottom: 1px solid #303030;
    text-align: left;
    vertical-align: top;
}

.developer-invite-table th {
    background: #222;
    color: #8fcfff;
    font-size: 13px;
}

.developer-invite-table tr:last-child td {
    border-bottom: 0;
}

.developer-invite-table form {
    margin: 0;
}

.developer-invite-code {
    display: block;
    color: #fff;
    font-size: 17px;
    font-weight: 950;
    white-space: nowrap;
}

.developer-invite-status {
    display: inline-flex;
    margin-top: 7px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(73, 181, 129, .14);
    color: #8be0b5;
    font-size: 12px;
    font-weight: 900;
}

.developer-invite-status.is-used {
    background: rgba(255, 183, 77, .14);
    color: #ffd087;
}

.developer-invite-status.is-revoked {
    background: rgba(255, 86, 86, .14);
    color: #ffaaa4;
}

.developer-invite-users {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.developer-invite-users li {
    color: #ddd;
    font-size: 14px;
    line-height: 1.45;
}

.developer-invite-empty {
    color: #888;
}

@media (max-width: 760px) {
    .creator-invite-topbar {
        min-height: 72px;
        padding: 12px 14px;
    }

    .creator-invite-topbar img {
        width: 140px;
    }

    .creator-invite-exit {
        min-height: 40px;
        padding: 0 12px;
        font-size: 14px;
    }

    .creator-invite-card {
        width: min(100% - 24px, 760px);
        gap: 24px;
        padding-top: 38px;
    }

    .creator-invite-heading h1 {
        font-size: 40px;
    }

    .creator-invite-form {
        padding: 24px 18px;
    }

    .developer-invites-page {
        width: calc(100% - 20px);
        padding: 28px 0 52px;
    }

    .developer-page-heading {
        display: grid;
        align-items: stretch;
    }

    .developer-page-heading h1 {
        font-size: 38px;
    }

    .developer-invite-summary {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .developer-invite-issue form {
        grid-template-columns: 1fr;
    }

    .developer-invite-table-wrap {
        overflow: hidden;
    }

    .developer-invite-table {
        min-width: 0;
    }

    .developer-invite-table thead {
        display: none;
    }

    .developer-invite-table tbody,
    .developer-invite-table tr,
    .developer-invite-table td {
        display: block;
        width: 100%;
    }

    .developer-invite-table tr {
        padding: 18px;
        border-bottom: 1px solid #353535;
    }

    .developer-invite-table td {
        padding: 0;
        border: 0;
        font-size: 16px;
        overflow-wrap: anywhere;
    }

    .developer-invite-table td + td {
        margin-top: 14px;
    }

    .developer-invite-table td::before {
        display: block;
        margin-bottom: 5px;
        color: #8fcfff;
        content: attr(data-label);
        font-size: 14px;
        font-weight: 900;
    }

    .developer-invite-code {
        font-size: 18px;
    }

    .developer-invite-users li {
        font-size: 16px;
    }
}

/* developer analytics: 動画・uploads容量 */
.developer-analytics-page {
    display: grid;
    width: min(1180px, calc(100% - 48px));
    min-width: 0;
    gap: 16px;
    margin: 0 auto;
    padding: 36px 0 72px;
}

.developer-analytics-page .analytics-dashboard,
.developer-analytics-page .analytics-head,
.developer-analytics-page .analytics-stat-row {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.developer-analytics-page .analytics-dashboard {
    grid-template-columns: minmax(0, 1fr);
}

.developer-analytics-page .analytics-head > *,
.developer-analytics-page .analytics-stat {
    min-width: 0;
}

.developer-analytics-page .analytics-stat strong,
.developer-analytics-page .analytics-stat span,
.developer-analytics-page .analytics-stat small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.storage-usage-panel {
    display: grid;
    gap: 16px;
}

.storage-usage-panel.is-warning {
    border-color: rgba(255, 183, 77, .58);
    background: rgba(255, 183, 77, .055);
}

.storage-usage-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.storage-usage-stat-grid > div {
    display: grid;
    min-width: 0;
    gap: 5px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(255, 255, 255, .035);
}

.storage-usage-stat-grid span {
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    font-weight: 850;
}

.storage-usage-stat-grid strong {
    overflow-wrap: anywhere;
    color: #fff;
    font-size: clamp(20px, 2.5vw, 28px);
}

.storage-usage-stat-grid small {
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
}

.storage-usage-meter {
    height: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: #151515;
}

.storage-usage-meter span {
    display: block;
    min-width: 2px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1499e8, #55c7ff);
}

.storage-usage-panel.is-warning .storage-usage-meter span {
    background: linear-gradient(90deg, #ff9e40, #ffcb6f);
}

.storage-usage-meter-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
    margin-top: -8px;
}

.storage-usage-meter-labels strong {
    color: #8ed5ff;
    font-size: 20px;
}

.storage-usage-meter-labels span {
    color: #e5e5e5;
    font-size: 15px;
    font-weight: 800;
}

.storage-usage-meter-labels small {
    margin-left: auto;
    color: #929292;
    font-size: 13px;
}

.storage-usage-threshold {
    margin: 0;
    padding: 13px 15px;
    border-left: 3px solid #3f6c88;
    background: rgba(20, 153, 232, .06);
    color: #b9c9d3;
    font-size: 15px;
    line-height: 1.65;
}

.storage-usage-warning {
    padding: 15px 17px;
    border: 1px solid rgba(255, 183, 77, .46);
    border-radius: 10px;
    background: rgba(255, 183, 77, .1);
}

.storage-usage-warning strong {
    color: #ffd087;
    font-size: 18px;
}

.storage-usage-warning p {
    margin: 6px 0 0;
    color: #ded2be;
    font-size: 15px;
    line-height: 1.65;
}

@media (max-width: 760px) {
    .developer-analytics-page {
        width: calc(100% - 20px);
        padding: 28px 0 52px;
    }

    .developer-analytics-page .analytics-head {
        display: grid;
        align-items: stretch;
    }

    .developer-analytics-page .analytics-range {
        justify-self: start;
    }

    .developer-analytics-page .analytics-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .storage-usage-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .storage-usage-meter-labels {
        display: grid;
    }

    .storage-usage-meter-labels small {
        margin-left: 0;
    }
}

@media (max-width: 520px) {
.admin-topbar {
        grid-template-columns: 1fr auto;
        min-height: 62px;
        padding: 10px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
    }

.admin-setup-topbar {
        min-height: 70px;
    }

.admin-logo {
        font-size: 20px;
    }

.developer-stat-grid {
        grid-template-columns: 1fr;
    }

.developer-link-row,
    .developer-health-item {
        grid-template-columns: 1fr;
    }

.developer-health-item strong {
        grid-row: auto;
        grid-column: auto;
        justify-self: start;
    }

.developer-db-table {
        min-width: 640px;
    }

.affiliate-material-grid {
        grid-template-columns: 1fr;
    }

.affiliate-material-statbar,
    .affiliate-filter-form,
    .affiliate-filter-form.is-impression-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.affiliate-material-statbar a {
        min-height: 58px;
    }

.affiliate-materials-panel,
    .affiliate-panel {
        padding: 10px;
    }

.affiliate-material-image {
        aspect-ratio: 4 / 3.7;
    }

.affiliate-admin-product-actions {
        grid-template-columns: 1fr auto auto;
    }

.affiliate-material-title-row {
        grid-template-columns: 1fr;
    }

.admin-setup-brand {
        gap: 9px;
        font-size: 16px;
    }

.admin-setup-brand .brand-wordmark {
        width: min(50vw, 176px);
    }

.admin-setup-logout {
        min-height: 36px;
        padding: 0 12px;
        font-size: 13px;
    }

.admin-actions {
        gap: 6px;
    }

.admin-search,
    .admin-home-button {
        display: none;
    }

.admin-home-button,
    .admin-post-button {
        min-height: 38px;
        padding: 0 12px;
        font-size: 13px;
    }

.admin-search {
        min-height: 42px;
        padding-left: 12px;
    }

.pixiv-dashboard {
        padding: 16px 10px 56px;
    }

.dashboard-title-row {
        align-items: stretch;
    }

.dashboard-title-row > div {
        width: 100%;
        min-width: 0;
    }

.dashboard-title-row h1 {
        margin-bottom: 12px;
        font-size: 21px;
    }

.admin-work-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

.admin-work-card {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 7px 11px;
        margin: 0;
        padding: 10px;
        border-color: #2c2c2c;
        border-radius: 10px;
        background: #181818;
    }

.admin-work-cover {
        grid-row: 1 / span 5;
        align-self: start;
        width: 108px;
        max-height: none;
        border-radius: 7px;
    }

.admin-work-cover em,
    .admin-work-cover b {
        min-height: 18px;
        padding: 1px 5px;
        font-size: 10px;
        line-height: 15px;
    }

.admin-work-card h2 {
        min-height: 0;
        margin: 0;
        font-size: 15px;
        line-height: 1.38;
    }

.admin-work-card p,
    .admin-work-card .work-status {
        min-height: 0;
        margin: 0;
        font-size: 12px;
    }

.affiliate-feed-status {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        min-height: 0;
        margin-top: 0;
        font-size: 11px;
    }

.affiliate-feed-status span,
    .affiliate-feed-status .affiliate-x-link,
    .affiliate-feed-status .affiliate-x-metric {
        min-height: 25px;
        padding: 2px 6px;
        font-size: 11px;
    }

.affiliate-feed-status .affiliate-final-impressions {
        grid-column: 1 / -1;
        min-height: 42px;
        padding: 6px;
    }

.affiliate-feed-status.has-final-impressions .affiliate-x-link {
        min-height: 24px;
    }

.affiliate-final-impressions strong {
        font-size: 18px;
    }

.character-hub-grid {
        display: flex;
        grid-template-columns: none;
        gap: 10px;
        margin: 0 -10px;
        padding: 0 10px 6px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-padding-inline: 10px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

.character-hub-card {
        flex: 0 0 min(78vw, 300px);
        grid-template-columns: 48px minmax(0, 1fr) auto;
        gap: 9px;
        padding: 10px;
        scroll-snap-align: start;
    }

.character-hub-avatar {
        width: 48px;
        height: 48px;
    }

.character-hub-card strong {
        font-size: 14px;
    }

.character-hub-card small {
        font-size: 12px;
    }

.character-hub-action {
        grid-column: 1 / 3;
        min-height: 31px;
        font-size: 12px;
    }

.character-hub-action.secondary {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        padding: 0 10px;
        border-radius: 999px;
        background: #242424;
    }

.dashboard-home-summary {
        gap: 12px;
        margin-top: 28px;
    }

.post-type-tabs,
    .post-method-grid,
    .creation-mode-grid {
        grid-template-columns: 1fr;
    }

.pixiv-upload-hero.post-method-panel,
    .post-method-card,
    .pixiv-form-card,
    .x-import-card,
    .x-import-loaded-media,
    .x-import-content-card,
    .x-import-tag-card {
        padding: 12px;
    }

.x-import-controls,
    .x-import-confirm-head,
    .x-import-confirm-actions,
    .x-import-review-actions {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

.x-import-preview-item {
        grid-template-columns: 1fr;
    }

.x-import-preview-media {
        width: min(220px, 100%);
        justify-self: center;
    }

.x-import-image-list {
        display: grid;
        grid-template-columns: 1fr;
    }

.x-import-image-item {
        width: 100%;
    }

.material-stat-grid,
    .material-detail-list div {
        grid-template-columns: 1fr;
    }

.developer-dashboard,
    .affiliate-admin-page,
    .affiliate-public-page,
    .material-detail-page {
        width: calc(100% - 20px);
    }

.developer-management-topbar,
    .affiliate-share-topbar {
        position: static;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

.developer-management-topbar nav {
        display: grid;
        grid-template-columns: 1fr;
    }

.affiliate-share-badge {
        justify-self: start;
    }

.affiliate-public-toolbar,
    .affiliate-public-toolbar div,
    .affiliate-public-toolbar nav {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

.affiliate-public-toolbar a {
        justify-content: center;
    }

.affiliate-public-gallery {
        grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    }

.affiliate-product-actions span {
        grid-column: auto;
    }

.affiliate-mention-actions em {
        grid-column: auto;
    }

.affiliate-product-actions button,
    .affiliate-product-actions a,
    .affiliate-download-list a,
    .affiliate-usage-form button {
        width: 100%;
    }
}

.lp-beta-page {
    --lp-ink: #171313;
    --lp-muted: #665b57;
    --lp-line: #e8d8d2;
    --lp-red: #cf1f1f;
    --lp-red-dark: #941414;
    --lp-gold: #b8892e;
    --lp-green: #247c63;
    --lp-blue: #286f9f;
    --lp-paper: #fffaf7;
    --lp-white: #ffffff;
}

.lp-beta-shell {
    width: 100%;
    margin: 0;
    padding: 0 0 72px;
    overflow: hidden;
}

.lp-beta-shell > .flash {
    width: min(1120px, calc(100% - 32px));
    margin: 24px auto 0;
}

.lp-beta-variant-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: min(1120px, calc(100% - 32px));
    margin: 22px auto 0;
}

.lp-beta-variant-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 9px 13px;
    border: 1px solid var(--lp-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--lp-muted);
    font-size: 14px;
    font-weight: 800;
}

.lp-beta-variant-nav a.is-active {
    border-color: rgba(207, 31, 31, 0.34);
    background: var(--lp-red);
    color: #fff;
}

.lp-beta-cool .lp-beta-variant-nav a {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #f4ebe7;
}

.lp-beta-cool .lp-beta-variant-nav a.is-active {
    background: #f3f0ec;
    color: #181313;
}

.lp-beta-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
    gap: 42px;
    align-items: center;
    min-height: 620px;
    margin-top: 0;
    padding: 72px max(24px, calc((100vw - 1280px) / 2)) 68px;
    overflow: hidden;
    border-bottom: 1px solid rgba(207, 31, 31, 0.12);
}

.lp-beta-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    background-image: url("/assets/nextscene-logo-stamp-alpha.png");
    background-repeat: no-repeat;
    background-position: right -80px top 46px;
    background-size: 540px auto;
    opacity: 0.08;
    pointer-events: none;
}

.lp-beta-hero.is-cool::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, transparent 0 48%, rgba(255, 255, 255, 0.07) 49%, transparent 51% 100%) 0 0 / 92px 100%,
        linear-gradient(0deg, transparent 0 48%, rgba(255, 255, 255, 0.05) 49%, transparent 51% 100%) 0 0 / 100% 74px;
    opacity: 0.3;
    mix-blend-mode: screen;
    pointer-events: none;
}

.lp-beta-hero.is-cool {
    background:
        linear-gradient(135deg, rgba(207, 31, 31, 0.28), transparent 48%),
        #151211;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: #fffaf7;
}

.lp-beta-hero.is-service {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 247, 244, 0.74)),
        #fffaf7;
    color: var(--lp-ink);
}

.lp-beta-hero-copy,
.lp-beta-hero-visual {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.lp-beta-kicker {
    margin: 0 0 14px;
    color: var(--lp-red);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
}

.lp-beta-cool .lp-beta-kicker {
    color: #ff8079;
}

.lp-beta-hero h1 {
    width: min(100%, 760px);
    max-width: 760px;
    margin: 0;
    font-size: 56px;
    line-height: 1.08;
    letter-spacing: 0;
    word-break: keep-all;
    line-break: strict;
    text-wrap: balance;
}

.lp-beta-section h2,
.lp-beta-section h3,
.lp-beta-cta h2,
.lp-beta-index-hero h1 {
    word-break: keep-all;
    line-break: strict;
    text-wrap: balance;
}

.lp-beta-balanced-heading > span {
    display: block;
}

.lp-beta-mobile-line {
    display: none !important;
}

.lp-beta-hero-copy > p:not(.lp-beta-kicker) {
    max-width: 660px;
    margin: 22px 0 0;
    color: color-mix(in srgb, currentColor 78%, transparent);
    font-size: 18px;
    line-height: 1.8;
}

.lp-beta-route-map {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.24fr) 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    max-width: 720px;
    margin-top: 28px;
}

.lp-beta-route-map span {
    position: relative;
    display: grid;
    min-height: 68px;
    align-content: center;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
        rgba(13, 12, 12, 0.44);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lp-beta-route-map span::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 18% 0%, rgba(255, 74, 68, 0.22), transparent 42%);
    content: "";
    opacity: 0;
}

.lp-beta-route-map .is-current {
    border-color: rgba(255, 98, 91, 0.54);
    background:
        linear-gradient(135deg, rgba(255, 74, 68, 0.24), rgba(255, 255, 255, 0.06)),
        rgba(36, 15, 14, 0.7);
    box-shadow:
        0 18px 52px rgba(255, 52, 46, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.lp-beta-route-map .is-current::before {
    opacity: 1;
}

.lp-beta-route-map strong,
.lp-beta-route-map small {
    position: relative;
    z-index: 1;
}

.lp-beta-route-map strong {
    color: #fffaf7;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.2;
}

.lp-beta-route-map small {
    color: rgba(255, 250, 247, 0.68);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
}

.lp-beta-route-map i {
    position: relative;
    display: block;
    height: 1px;
    min-width: 0;
    background: linear-gradient(90deg, rgba(255, 98, 91, 0.18), rgba(255, 98, 91, 0.82));
}

.lp-beta-route-map i::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 7px;
    height: 7px;
    border-top: 1px solid rgba(255, 98, 91, 0.9);
    border-right: 1px solid rgba(255, 98, 91, 0.9);
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

.lp-beta-hero.is-service .lp-beta-route-map span {
    border-color: rgba(207, 31, 31, 0.14);
    background: rgba(255, 255, 255, 0.72);
}

.lp-beta-hero.is-service .lp-beta-route-map .is-current {
    border-color: rgba(207, 31, 31, 0.28);
    background: rgba(255, 232, 228, 0.92);
}

.lp-beta-hero.is-service .lp-beta-route-map strong {
    color: var(--lp-ink);
}

.lp-beta-hero.is-service .lp-beta-route-map small {
    color: rgba(28, 21, 20, 0.62);
}

.lp-beta-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.lp-beta-hero-notes {
    display: grid;
    gap: 8px;
    max-width: 680px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.lp-beta-hero-notes li {
    position: relative;
    padding-left: 20px;
    color: color-mix(in srgb, currentColor 72%, transparent);
    font-size: 14px;
    line-height: 1.6;
}

.lp-beta-hero-notes li::before {
    position: absolute;
    top: 0.7em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lp-red);
    content: "";
}

.lp-beta-scene-stack {
    position: relative;
    display: grid;
    gap: 14px;
    max-width: 420px;
    margin-left: auto;
}

.lp-beta-scene-card {
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
}

.lp-beta-scene-card.is-secondary {
    width: 86%;
    margin-left: auto;
}

.lp-beta-scene-card.is-tertiary {
    width: 72%;
}

.lp-beta-scene-card span,
.lp-beta-scene-card small {
    color: rgba(255, 250, 247, 0.72);
    font-size: 13px;
    font-weight: 800;
}

.lp-beta-scene-card strong {
    color: #fff;
    font-size: 22px;
    line-height: 1.35;
}

.lp-beta-art-window {
    display: grid;
    min-height: 190px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 250, 247, 0.94), rgba(255, 230, 222, 0.88)),
        #fffaf7;
    overflow: hidden;
}

.lp-beta-art-window img {
    width: 240px;
    max-width: 76%;
}

.lp-beta-motion-stage {
    position: relative;
    width: min(100%, 520px);
    min-height: 500px;
    margin-left: auto;
    perspective: 1200px;
}

.lp-beta-motion-frame {
    position: relative;
    display: grid;
    gap: 14px;
    width: min(100%, 440px);
    margin-left: auto;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(18px);
    transform: rotateY(-8deg) rotateX(2deg);
}

.lp-beta-motion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(255, 250, 247, 0.64);
    font-size: 12px;
    font-weight: 900;
}

.lp-beta-motion-head em {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border: 1px solid rgba(255, 128, 121, 0.28);
    border-radius: 8px;
    color: #ffaaa5;
    font-style: normal;
}

.lp-beta-motion-screen {
    position: relative;
    display: grid;
    min-height: 280px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 250, 247, 0.95), rgba(255, 226, 218, 0.9)),
        #fffaf7;
}

.lp-beta-motion-screen::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(207, 31, 31, 0.08) 1px, transparent 1px) 0 0 / 28px 100%,
        linear-gradient(0deg, rgba(207, 31, 31, 0.06) 1px, transparent 1px) 0 0 / 100% 28px;
    opacity: 0.75;
}

.lp-beta-motion-screen img {
    position: relative;
    z-index: 1;
    width: min(72%, 280px);
    filter: drop-shadow(0 18px 28px rgba(207, 31, 31, 0.18));
}

.lp-beta-scan-line {
    position: absolute;
    z-index: 2;
    top: -20%;
    left: 0;
    width: 100%;
    height: 22%;
    background: linear-gradient(180deg, transparent, rgba(207, 31, 31, 0.2), transparent);
    opacity: 0.9;
}

.lp-beta-screen-tags {
    position: absolute;
    z-index: 3;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 92%;
}

.lp-beta-screen-tags span {
    min-height: 26px;
    padding: 5px 8px;
    border: 1px solid rgba(207, 31, 31, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    color: #3b2925;
    font-size: 12px;
    font-weight: 900;
}

.lp-beta-motion-track {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
}

.lp-beta-motion-track div,
.lp-beta-live-strip div {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 8px;
}

.lp-beta-motion-track span,
.lp-beta-live-strip span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 11px;
    border-radius: 8px;
    color: rgba(255, 250, 247, 0.84);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.lp-beta-motion-track span {
    background: rgba(255, 255, 255, 0.08);
}

.lp-beta-motion-card {
    position: absolute;
    display: grid;
    gap: 6px;
    width: 260px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 8px;
    background: rgba(36, 31, 30, 0.92);
    color: #fffaf7;
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.32);
}

.lp-beta-motion-card.is-assign {
    top: 314px;
    right: 0;
}

.lp-beta-motion-card.is-report {
    top: 398px;
    left: 4px;
    width: 220px;
}

.lp-beta-motion-card span {
    color: #ff8079;
    font-size: 12px;
    font-weight: 900;
}

.lp-beta-motion-card strong {
    font-size: 19px;
    line-height: 1.35;
}

.lp-beta-motion-card small {
    color: rgba(255, 250, 247, 0.68);
    font-size: 12px;
    line-height: 1.5;
}

.lp-beta-signal-bars {
    position: absolute;
    top: 52px;
    right: -10px;
    display: grid;
    grid-template-columns: repeat(5, 7px);
    gap: 7px;
    align-items: end;
    height: 74px;
}

.lp-beta-signal-bars span {
    display: block;
    height: 24px;
    border-radius: 8px;
    background: #ff4a44;
    opacity: 0.75;
}

.lp-beta-signal-bars span:nth-child(2) {
    height: 44px;
    background: #d8a84c;
}

.lp-beta-signal-bars span:nth-child(3) {
    height: 62px;
    background: #247c63;
}

.lp-beta-signal-bars span:nth-child(4) {
    height: 34px;
    background: #286f9f;
}

.lp-beta-signal-bars span:nth-child(5) {
    height: 54px;
}

.lp-beta-scroll-cue {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    color: rgba(255, 250, 247, 0.58);
    font-size: 12px;
    font-weight: 900;
}

.lp-beta-scroll-cue span {
    display: block;
    width: 42px;
    height: 1px;
    background: rgba(255, 250, 247, 0.42);
}

.lp-beta-scroll-cue em {
    font-style: normal;
}

.lp-beta-live-strip {
    overflow: hidden;
    border-block: 1px solid rgba(255, 255, 255, 0.1);
    background: #1d1716;
}

.lp-beta-live-strip span {
    min-height: 46px;
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0;
    color: rgba(255, 250, 247, 0.72);
    font-size: 13px;
}

.lp-beta-product-stage {
    position: relative;
    width: min(100%, 650px);
    min-height: 660px;
    margin-left: auto;
    perspective: 1200px;
}

.lp-beta-product-stage::before {
    position: absolute;
    inset: 34px 18px 90px 52px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 74, 68, 0.2), transparent 32%),
        radial-gradient(circle at 82% 76%, rgba(36, 124, 99, 0.16), transparent 30%),
        rgba(255, 255, 255, 0.03);
    content: "";
    filter: blur(1px);
}

.lp-beta-home-window,
.lp-beta-post-window,
.lp-beta-product-status {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(28, 22, 21, 0.86);
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(18px);
}

.lp-beta-home-window {
    position: relative;
    z-index: 2;
    width: min(100%, 560px);
    padding: 14px;
    overflow: hidden;
    transform: rotateY(-8deg) rotateX(2deg);
}

.lp-beta-product-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    color: rgba(255, 250, 247, 0.64);
    font-size: 12px;
    font-weight: 900;
}

.lp-beta-product-head em {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border: 1px solid rgba(255, 128, 121, 0.28);
    border-radius: 8px;
    color: #ffaaa5;
    font-style: normal;
}

.lp-beta-home-toolbar {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 8px;
    align-items: center;
}

.lp-beta-home-toolbar span,
.lp-beta-home-toolbar strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: rgba(255, 250, 247, 0.72);
    font-size: 12px;
    font-weight: 900;
}

.lp-beta-home-toolbar span.is-active,
.lp-beta-home-toolbar strong {
    background: #ff4a44;
    color: #fff;
}

.lp-beta-home-toolbar strong {
    justify-self: end;
}

.lp-beta-home-search {
    display: flex;
    align-items: center;
    min-height: 38px;
    margin-top: 8px;
    padding: 8px 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 250, 247, 0.46);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.lp-beta-home-tags {
    display: flex;
    gap: 7px;
    margin-top: 8px;
    overflow: hidden;
}

.lp-beta-home-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 74, 68, 0.18);
    border-radius: 8px;
    background: rgba(255, 74, 68, 0.11);
    color: #ffaaa5;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.lp-beta-home-feed {
    height: 345px;
    margin-top: 12px;
    overflow: hidden;
    mask-image: linear-gradient(180deg, #000 0 82%, transparent 100%);
}

.lp-beta-home-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-bottom: 110px;
}

.lp-beta-home-card {
    display: grid;
    min-width: 0;
    gap: 7px;
    padding-bottom: 8px;
}

.lp-beta-home-card div {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    aspect-ratio: 4 / 5.05;
    background: rgba(255, 255, 255, 0.08);
}

.lp-beta-home-card div::after {
    position: absolute;
    right: 7px;
    bottom: 7px;
    min-width: 34px;
    padding: 4px 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    content: attr(data-page-label);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.lp-beta-home-card.is-selected div {
    box-shadow: 0 0 0 2px rgba(255, 74, 68, 0.66), 0 20px 36px rgba(255, 74, 68, 0.24);
}

.lp-beta-home-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
}

.lp-beta-home-card strong {
    overflow: hidden;
    color: #fffaf7;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-beta-home-card small {
    overflow: hidden;
    color: rgba(255, 250, 247, 0.52);
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-beta-product-flow {
    position: absolute;
    inset: 260px 18px 52px 46px;
    z-index: 1;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(13, 12, 12, 0.2), rgba(13, 12, 12, 0.66)),
        rgba(13, 12, 12, 0.34);
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%);
    opacity: 0.52;
}

.lp-beta-product-flow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
}

.lp-beta-product-flow span {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    aspect-ratio: 4 / 5.05;
    background: rgba(255, 255, 255, 0.05);
}

.lp-beta-product-flow img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.88) brightness(0.74);
}

.lp-beta-post-window {
    position: absolute;
    right: -10px;
    bottom: 42px;
    z-index: 3;
    display: grid;
    gap: 10px;
    width: 342px;
    padding: 14px;
}

.lp-beta-post-drop {
    position: relative;
    display: grid;
    height: 314px;
    min-height: 314px;
    place-items: center;
    overflow: hidden;
    border: 1px dashed rgba(255, 128, 121, 0.42);
    border-radius: 8px;
    background: rgba(6, 5, 5, 0.72);
}

.lp-beta-post-drop img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.96;
    filter: saturate(0.95);
}

.lp-beta-post-drop span {
    position: absolute;
    right: 10px;
    bottom: 10px;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 8px;
    background: #ff4a44;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.lp-beta-post-fields {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 7px 10px;
    align-items: center;
}

.lp-beta-post-fields span {
    color: rgba(255, 250, 247, 0.48);
    font-size: 11px;
    font-weight: 900;
}

.lp-beta-post-fields strong {
    overflow: hidden;
    color: #fffaf7;
    font-size: 12px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-beta-post-switches {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.lp-beta-post-switches span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    color: rgba(255, 250, 247, 0.6);
    font-size: 11px;
    font-weight: 900;
}

.lp-beta-post-switches span.is-on {
    border-color: rgba(36, 124, 99, 0.48);
    background: rgba(36, 124, 99, 0.22);
    color: #b9f1dc;
}

.lp-beta-product-status {
    position: absolute;
    display: grid;
    gap: 5px;
    width: 236px;
    padding: 14px;
}

.lp-beta-product-status.is-route {
    top: 352px;
    left: 8px;
}

.lp-beta-product-status.is-assign {
    top: 442px;
    left: 126px;
}

.lp-beta-product-status span {
    color: #ff8079;
    font-size: 11px;
    font-weight: 900;
}

.lp-beta-product-status strong {
    color: #fffaf7;
    font-size: 17px;
    line-height: 1.3;
}

.lp-beta-product-status small {
    color: rgba(255, 250, 247, 0.62);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
}

.lp-beta-product-rail {
    position: absolute;
    right: 34px;
    bottom: 0;
    left: 34px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
}

.lp-beta-product-rail div {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 8px;
}

.lp-beta-product-rail span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 11px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 250, 247, 0.76);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.lp-beta-product-sparks span {
    position: absolute;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4a44;
    box-shadow: 0 0 22px rgba(255, 74, 68, 0.78);
}

.lp-beta-product-sparks span:nth-child(1) {
    top: 42px;
    right: 84px;
}

.lp-beta-product-sparks span:nth-child(2) {
    top: 182px;
    right: 18px;
    background: #d8a84c;
}

.lp-beta-product-sparks span:nth-child(3) {
    bottom: 118px;
    left: 48px;
    background: #247c63;
}

.lp-beta-product-sparks span:nth-child(4) {
    top: 286px;
    left: 12px;
    background: #286f9f;
}

.lp-beta-ops-board {
    width: min(100%, 470px);
    margin-left: auto;
    padding: 18px;
    border: 1px solid rgba(80, 50, 42, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 26px 60px rgba(90, 24, 20, 0.14);
}

.lp-beta-ops-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--lp-muted);
    font-size: 13px;
}

.lp-beta-ops-head strong {
    color: var(--lp-ink);
}

.lp-beta-ops-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 78px;
    padding: 12px;
    border: 1px solid #efe0dc;
    border-radius: 8px;
    background: #fffdfb;
}

.lp-beta-ops-row + .lp-beta-ops-row {
    margin-top: 10px;
}

.lp-beta-ops-row strong,
.lp-beta-ops-row small {
    display: block;
}

.lp-beta-ops-row strong {
    font-size: 15px;
}

.lp-beta-ops-row small {
    margin-top: 4px;
    color: var(--lp-muted);
    font-size: 12px;
    line-height: 1.5;
}

.lp-beta-ops-row em {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 8px;
    background: #f7eee9;
    color: #5f514d;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.lp-beta-ops-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lp-red);
}

.lp-beta-ops-dot.is-gold {
    background: var(--lp-gold);
}

.lp-beta-ops-dot.is-green {
    background: var(--lp-green);
}

.lp-beta-ops-dot.is-blue {
    background: var(--lp-blue);
}

.lp-beta-section,
.lp-beta-cta,
.lp-beta-index-hero,
.lp-beta-compare-grid {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
}

.lp-beta-section {
    padding: 78px 0 0;
}

.lp-beta-section-head {
    max-width: 760px;
}

.lp-beta-section h2,
.lp-beta-cta h2,
.lp-beta-index-hero h1 {
    margin: 0;
    color: var(--lp-ink);
    font-size: 38px;
    line-height: 1.2;
    letter-spacing: 0;
}

.lp-beta-section-head > p:not(.lp-beta-kicker),
.lp-beta-fit-copy > p:not(.lp-beta-kicker),
.lp-beta-cta > p,
.lp-beta-index-hero > p {
    margin: 18px 0 0;
    color: var(--lp-muted);
    font-size: 16px;
    line-height: 1.85;
}

.lp-beta-problem-grid,
.lp-beta-flow,
.lp-beta-fit-list,
.lp-beta-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.lp-beta-problem-grid article,
.lp-beta-flow article,
.lp-beta-fit-list article,
.lp-beta-compare-grid article {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--lp-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
}

.lp-beta-problem-grid span,
.lp-beta-flow span,
.lp-beta-compare-grid span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    margin-bottom: 14px;
    border-radius: 8px;
    background: #1e1918;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.lp-beta-problem-grid h3,
.lp-beta-flow h3,
.lp-beta-fit-list h3,
.lp-beta-compare-grid h2 {
    margin: 0;
    color: var(--lp-ink);
    font-size: 19px;
    line-height: 1.35;
}

.lp-beta-problem-grid p,
.lp-beta-flow p,
.lp-beta-fit-list p,
.lp-beta-compare-grid p {
    margin: 12px 0 0;
    color: var(--lp-muted);
    font-size: 14px;
    line-height: 1.75;
}

.lp-beta-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lp-beta-flow article {
    background: #fffdfb;
}

.lp-beta-flow span {
    background: var(--lp-red);
}

.lp-beta-fit-section {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(360px, 1.14fr);
    gap: 36px;
    align-items: start;
}

.lp-beta-fit-list {
    grid-template-columns: 1fr;
    margin-top: 0;
}

.lp-beta-fit-list article {
    background: #fffaf7;
}

.lp-beta-cta {
    margin-top: 78px;
    padding: 44px;
    border: 1px solid rgba(207, 31, 31, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(207, 31, 31, 0.1), rgba(36, 124, 99, 0.08)),
        #fffdfb;
}

.lp-beta-index-hero {
    padding: 72px 0 0;
}

.lp-beta-index-hero h1 {
    max-width: 760px;
}

.lp-beta-index-hero p {
    max-width: 780px;
}

.lp-beta-index-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.lp-beta-compare-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lp-beta-compare-grid a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin-top: 16px;
    color: var(--lp-red);
    font-size: 14px;
    font-weight: 900;
}

.lp-beta-cool {
    background:
        linear-gradient(180deg, #151211 0, #1d1716 620px, #fff7f3 621px, #fff5f1 100%);
}

.lp-beta-cool .lp-beta-why-section {
    margin-top: 0;
    padding-top: 54px;
}

.lp-beta-cool .lp-beta-why-section h2 {
    color: var(--lp-ink);
}

.lp-beta-cool .lp-beta-why-section .lp-beta-section-head > p:not(.lp-beta-kicker) {
    color: var(--lp-muted);
}

.lp-beta-cool .lp-beta-why-section .lp-beta-problem-grid article {
    border-color: var(--lp-line);
    background: rgba(255, 255, 255, 0.78);
}

.lp-beta-cool .lp-beta-why-section .lp-beta-problem-grid h3 {
    color: var(--lp-ink);
}

.lp-beta-cool .lp-beta-why-section .lp-beta-problem-grid p {
    color: var(--lp-muted);
}

.lp-beta-service .lp-beta-hero {
    min-height: 580px;
}

.lp-beta-service .lp-beta-problem-grid article,
.lp-beta-service .lp-beta-flow article,
.lp-beta-service .lp-beta-fit-list article {
    box-shadow: 0 12px 34px rgba(90, 24, 20, 0.07);
}

@media (prefers-reduced-motion: no-preference) {
.lp-beta-hero.is-cool::after {
        animation: lp-beta-grid-drift 18s linear infinite;
    }

.lp-beta-hero-copy {
        animation: lp-beta-rise 0.7s ease-out both;
    }

.lp-beta-home-window {
        animation: lp-beta-product-float 6.2s ease-in-out infinite;
    }

.lp-beta-home-grid {
        animation: lp-beta-home-feed 10s ease-in-out infinite;
    }

.lp-beta-home-card.is-selected div {
        animation: lp-beta-selected-card 2.6s ease-in-out infinite;
    }

.lp-beta-product-flow-grid {
        animation: lp-beta-home-feed 16s ease-in-out infinite reverse;
    }

.lp-beta-post-window {
        animation: lp-beta-post-window 6.4s ease-in-out infinite;
    }

.lp-beta-product-status.is-route {
        animation: lp-beta-status-pop 6.4s 0.35s ease-in-out infinite;
    }

.lp-beta-product-status.is-assign {
        animation: lp-beta-status-pop 6.4s 0.85s ease-in-out infinite;
    }

.lp-beta-product-rail div {
        animation: lp-beta-marquee 23s linear infinite;
    }

.lp-beta-product-sparks span {
        animation: lp-beta-spark 2.2s ease-in-out infinite;
    }

.lp-beta-product-sparks span:nth-child(2) {
        animation-delay: 0.28s;
    }

.lp-beta-product-sparks span:nth-child(3) {
        animation-delay: 0.56s;
    }

.lp-beta-product-sparks span:nth-child(4) {
        animation-delay: 0.84s;
    }

.lp-beta-motion-frame {
        animation: lp-beta-frame-float 5.8s ease-in-out infinite;
    }

.lp-beta-scan-line {
        animation: lp-beta-scan 3.2s ease-in-out infinite;
    }

.lp-beta-motion-track div,
    .lp-beta-live-strip div {
        animation: lp-beta-marquee 22s linear infinite;
    }

.lp-beta-motion-card.is-assign {
        animation: lp-beta-card-in 0.75s 0.28s ease-out both, lp-beta-card-float 4.8s 1.05s ease-in-out infinite;
    }

.lp-beta-motion-card.is-report {
        animation: lp-beta-card-in 0.75s 0.48s ease-out both, lp-beta-card-float 5.2s 1.25s ease-in-out infinite reverse;
    }

.lp-beta-signal-bars span {
        animation: lp-beta-bars 1.8s ease-in-out infinite;
    }

.lp-beta-signal-bars span:nth-child(2) {
        animation-delay: 0.12s;
    }

.lp-beta-signal-bars span:nth-child(3) {
        animation-delay: 0.24s;
    }

.lp-beta-signal-bars span:nth-child(4) {
        animation-delay: 0.36s;
    }

.lp-beta-signal-bars span:nth-child(5) {
        animation-delay: 0.48s;
    }

.lp-beta-scroll-cue span {
        animation: lp-beta-cue 1.5s ease-in-out infinite;
    }
}

@media (max-width: 1120px) and (min-width: 981px) {
.lp-beta-hero {
        grid-template-columns: minmax(0, 0.94fr) minmax(320px, 0.86fr);
        gap: 32px;
    }

.lp-beta-hero h1 {
        font-size: 48px;
        line-height: 1.1;
    }

.lp-beta-hero .lp-beta-desktop-line {
        display: none !important;
    }

.lp-beta-hero .lp-beta-mobile-line {
        display: block !important;
    }
}

@media (max-width: 980px) {
.lp-beta-hero {
        grid-template-columns: 1fr;
        gap: 30px;
        min-height: 0;
        padding-top: 50px;
        padding-bottom: 50px;
    }

.lp-beta-hero h1 {
        font-size: 42px;
    }

.lp-beta-hero-copy > p:not(.lp-beta-kicker) {
        font-size: 16px;
    }

.lp-beta-scene-stack,
    .lp-beta-motion-stage,
    .lp-beta-product-stage,
    .lp-beta-ops-board {
        margin-right: auto;
        margin-left: 0;
    }

.lp-beta-product-stage {
        width: min(100%, 620px);
        min-height: 500px;
    }

.lp-beta-home-feed {
        height: 318px;
    }

.lp-beta-home-window {
        transform: none;
    }

.lp-beta-motion-stage {
        min-height: 480px;
    }

.lp-beta-motion-frame {
        transform: none;
    }

.lp-beta-problem-grid,
    .lp-beta-flow,
    .lp-beta-fit-section,
    .lp-beta-compare-grid {
        grid-template-columns: 1fr;
    }

.lp-beta-fit-list {
        margin-top: 0;
    }
}

@media (max-width: 620px) {
.lp-beta-shell {
        padding-bottom: 48px;
    }

.lp-beta-variant-nav {
        width: calc(100% - 24px);
        margin-top: 14px;
    }

.lp-beta-variant-nav a {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
        font-size: 13px;
    }

.lp-beta-hero {
        gap: 24px;
        padding: 24px 16px 24px;
    }

.lp-beta-hero::before {
        background-position: right -120px top 18px;
        background-size: 360px auto;
    }

.lp-beta-hero h1,
    .lp-beta-section h2,
    .lp-beta-cta h2,
    .lp-beta-index-hero h1 {
        font-size: 32px;
    }

.lp-beta-desktop-line {
        display: none !important;
    }

.lp-beta-mobile-line {
        display: block !important;
    }

.lp-beta-hero-copy > p:not(.lp-beta-kicker) {
        margin-top: 18px;
        line-height: 1.68;
    }

.lp-beta-route-map {
        grid-template-columns: minmax(0, 0.9fr) 16px minmax(0, 1.22fr) 16px minmax(0, 0.95fr);
        gap: 5px;
        margin-top: 18px;
    }

.lp-beta-route-map span {
        min-height: 58px;
        padding: 9px 7px;
    }

.lp-beta-route-map strong {
        font-size: 12px;
    }

.lp-beta-route-map small {
        font-size: 10px;
        line-height: 1.28;
    }

.lp-beta-route-map i::after {
        width: 5px;
        height: 5px;
    }

.lp-beta-hero-actions {
        gap: 10px;
        margin-top: 22px;
    }

.lp-beta-hero-notes {
        display: flex;
        gap: 8px;
        margin-top: 18px;
        padding-bottom: 2px;
        overflow-x: auto;
        scrollbar-width: none;
        mask-image: linear-gradient(90deg, #000 0 88%, transparent 100%);
    }

.lp-beta-hero-notes::-webkit-scrollbar {
        display: none;
    }

.lp-beta-hero-notes li {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 7px 10px 7px 22px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
    }

.lp-beta-hero-notes li::before {
        top: 13px;
        left: 10px;
        width: 6px;
        height: 6px;
    }

.lp-beta-hero-visual {
        display: none;
    }

.lp-beta-cool .lp-beta-hero-visual {
        display: block;
    }

.lp-beta-scroll-cue {
        display: none;
    }

.lp-beta-product-stage {
        width: 100%;
        min-height: 980px;
    }

.lp-beta-product-stage::before {
        inset: 24px 0 160px 0;
    }

.lp-beta-home-window {
        width: 100%;
        padding: 10px;
        animation: none;
        transform: none;
    }

.lp-beta-product-head {
        margin-bottom: 9px;
        font-size: 11px;
    }

.lp-beta-product-head em {
        min-height: 24px;
        padding: 3px 7px;
    }

.lp-beta-home-toolbar {
        grid-template-columns: 1fr 1fr;
    }

.lp-beta-home-toolbar strong {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

.lp-beta-home-search {
        min-height: 34px;
        font-size: 11px;
    }

.lp-beta-home-tags span {
        min-height: 28px;
        font-size: 10px;
    }

.lp-beta-home-feed {
        height: 430px;
    }

.lp-beta-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

.lp-beta-home-card strong {
        font-size: 11px;
    }

.lp-beta-home-card small {
        font-size: 10px;
    }

.lp-beta-product-flow {
        inset: 660px 0 62px 0;
        opacity: 0.5;
    }

.lp-beta-product-flow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
    }

.lp-beta-post-window {
        position: relative;
        right: auto;
        bottom: auto;
        z-index: 2;
        width: min(326px, 92%);
        margin: -26px 8px 0 auto;
        padding: 12px;
        gap: 9px;
    }

.lp-beta-post-drop {
        height: clamp(280px, 82vw, 320px);
        min-height: 280px;
        background: rgba(6, 5, 5, 0.72);
    }

.lp-beta-post-drop img {
        min-height: 0;
        object-fit: contain;
        opacity: 0.96;
    }

.lp-beta-post-drop span {
        right: 8px;
        bottom: 8px;
        min-height: 26px;
        padding: 5px 8px;
        font-size: 11px;
    }

.lp-beta-post-fields {
        display: none;
    }

.lp-beta-post-fields span,
    .lp-beta-post-fields strong,
    .lp-beta-post-switches span {
        font-size: 10px;
    }

.lp-beta-product-status,
    .lp-beta-product-sparks {
        display: none;
    }

.lp-beta-product-rail {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        margin-top: 12px;
    }

.lp-beta-product-rail div {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 0;
        animation: none !important;
    }

.lp-beta-product-rail span {
        justify-content: center;
        min-height: 32px;
        padding: 6px 4px;
        font-size: 10px;
    }

.lp-beta-product-rail span:nth-child(n+4) {
        display: none;
    }

.lp-beta-scene-card.is-secondary,
    .lp-beta-scene-card.is-tertiary {
        width: 100%;
    }

.lp-beta-art-window {
        min-height: 148px;
    }

.lp-beta-ops-board {
        padding: 12px;
    }

.lp-beta-ops-row {
        grid-template-columns: 10px minmax(0, 1fr);
    }

.lp-beta-ops-row em {
        grid-column: 2;
        width: max-content;
    }

.lp-beta-section,
    .lp-beta-cta,
    .lp-beta-index-hero,
    .lp-beta-compare-grid {
        width: calc(100% - 24px);
    }

.lp-beta-section {
        padding-top: 40px;
    }

.lp-beta-live-strip span {
        min-height: 40px;
        font-size: 12px;
    }

.lp-beta-problem-grid,
    .lp-beta-flow,
    .lp-beta-fit-list,
    .lp-beta-compare-grid {
        gap: 12px;
    }

.lp-beta-problem-grid article,
    .lp-beta-flow article,
    .lp-beta-fit-list article,
    .lp-beta-compare-grid article {
        padding: 18px;
    }

.lp-beta-cta {
        margin-top: 52px;
        padding: 24px;
    }

.lp-beta-index-hero {
        padding-top: 48px;
    }
}

/* ===== クリエイターダッシュボード: ファン指標ストリップ ===== */
.admin-fan-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 2px 0 20px;
}

.admin-fan-stat {
    display: grid;
    gap: 2px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
}

.admin-fan-stat strong {
    color: #fff;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.1;
}

.admin-fan-stat span {
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 800;
}

.admin-fan-stat small {
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
}

/* ===== アクセス解析ダッシュボード ===== */
.analytics-dashboard {
    display: grid;
    gap: 18px;
}

.analytics-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.analytics-head h2 {
    margin: 2px 0 2px;
    color: #fff;
    font-size: 20px;
}

.analytics-head small {
    color: rgba(255, 255, 255, .5);
    font-size: 11.5px;
}

.analytics-range {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
}

.analytics-range a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    color: rgba(255, 255, 255, .68);
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
}

.analytics-range a.is-active {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.analytics-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.analytics-stat {
    display: grid;
    gap: 2px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
}

.analytics-stat strong {
    color: #fff;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.1;
}

.analytics-stat span {
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 800;
}

.analytics-stat small {
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
}

.analytics-block {
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
}

.analytics-block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.analytics-block-head h3 {
    margin: 0;
    color: #fff;
    font-size: 15px;
}

.analytics-block-head small {
    color: rgba(255, 255, 255, .5);
    font-size: 11.5px;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 14px;
}

.analytics-subhead {
    margin: 14px 0 8px;
    color: rgba(255, 255, 255, .62);
    font-size: 11.5px;
    font-weight: 800;
}

.analytics-empty {
    margin: 0;
    color: rgba(255, 255, 255, .5);
    font-size: 12.5px;
}

/* 日別推移 */
.analytics-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 140px;
    padding: 6px 0;
}

.analytics-chart-col {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
    height: 100%;
}

.analytics-chart-bar {
    width: 100%;
    max-width: 22px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #ff6b6b, #cf1f1f);
}

.analytics-chart-signup {
    position: absolute;
    top: -2px;
    padding: 1px 4px;
    border-radius: 999px;
    background: #2aad68;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
}

.analytics-chart-axis {
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, .45);
    font-size: 11px;
}

/* 横棒 */
.analytics-bars {
    display: grid;
    gap: 6px;
}

.analytics-bar-row {
    display: grid;
    grid-template-columns: minmax(72px, 34%) 1fr auto;
    align-items: center;
    gap: 8px;
}

.analytics-bar-label {
    overflow: hidden;
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-bar-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.analytics-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #cf1f1f, #ff6b6b);
}

.analytics-bar-value {
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.analytics-inline-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
}

.analytics-inline-stats strong {
    color: #fff;
    font-weight: 900;
}

/* 表 */
.analytics-table-wrap {
    overflow-x: auto;
}

.analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.analytics-table th,
.analytics-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    text-align: left;
    white-space: nowrap;
}

.analytics-table thead th {
    color: rgba(255, 255, 255, .55);
    font-size: 11.5px;
    font-weight: 800;
}

.analytics-table tbody th {
    max-width: 320px;
    overflow: hidden;
    color: #fff;
    font-weight: 700;
    text-overflow: ellipsis;
}

.analytics-table tbody th a {
    color: inherit;
    text-decoration: none;
}

.analytics-table tbody th a:hover {
    text-decoration: underline;
}

.analytics-table td {
    color: rgba(255, 255, 255, .78);
    font-variant-numeric: tabular-nums;
}

.video-experiment {
    display: grid;
    gap: 14px;
    border-color: rgba(255, 107, 107, .34);
    background:
        radial-gradient(circle at 100% 0, rgba(207, 31, 31, .16), transparent 34%),
        rgba(255, 255, 255, .035);
}

.video-experiment .analytics-block-head,
.video-experiment .analytics-subhead {
    margin: 0;
}

.video-experiment__period {
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    color: rgba(255, 255, 255, .68);
    font-size: 11px;
}

.video-experiment__goal {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(0, 0, 0, .18);
}

.video-experiment__goal > div:not(.video-experiment__progress) {
    display: grid;
    gap: 2px;
}

.video-experiment__goal span {
    color: rgba(255, 255, 255, .54);
    font-size: 11px;
    font-weight: 800;
}

.video-experiment__goal strong {
    color: #fff;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
}

.video-experiment__goal strong small {
    margin-left: 3px;
    color: rgba(255, 255, 255, .52);
    font-size: 11px;
}

.video-experiment__progress {
    overflow: hidden;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.video-experiment__progress > span {
    display: block;
    min-width: 3px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #cf1f1f, #ff7777);
}

.video-experiment__stats {
    margin: 0;
}

.video-experiment__table tbody th {
    max-width: 260px;
}

.video-experiment__copy {
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 7px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.video-experiment__copy:hover {
    border-color: rgba(255, 107, 107, .6);
    background: rgba(207, 31, 31, .16);
}

@media (max-width: 760px) {
    .analytics-head h2 {
        font-size: 18px;
    }

    .analytics-bar-row {
        grid-template-columns: minmax(64px, 40%) 1fr auto;
    }

    .analytics-chart {
        height: 110px;
    }

    .video-experiment__goal {
        grid-template-columns: 1fr auto;
    }

    .video-experiment__progress {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* ===== エージェント連携: APIトークン ===== */

.api-token-section {
    margin-top: 32px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    display: grid;
    gap: 18px;
}

.api-token-head .eyebrow {
    margin: 0 0 4px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.api-token-head h2 {
    margin: 0 0 6px;
    font-size: 19px;
}

.api-token-head small {
    display: block;
    color: rgba(255, 255, 255, .62);
    line-height: 1.7;
}

.api-token-issued {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 208, 120, .45);
    background: rgba(255, 190, 80, .1);
}

.api-token-issued code {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .35);
    font-size: 13px;
    /* トークンは長いので必ず折り返す (横スクロールでコピー漏れが起きる) */
    word-break: break-all;
    user-select: all;
}

.api-token-issued small {
    color: rgba(255, 255, 255, .66);
}

.api-token-form {
    display: grid;
    gap: 14px;
}

.api-token-form > label {
    display: grid;
    gap: 6px;
    font-size: 13px;
}

.api-token-form > label input[type="text"] {
    width: 100%;
    max-width: 360px;
}

.api-token-scopes {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    display: grid;
    gap: 10px;
}

.api-token-scopes legend {
    padding: 0 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
}

.api-token-scope {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
}

.api-token-scope input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
}

/*
 * min-width:0 だけだと flex-basis:auto のまま最小幅まで潰れ、1文字ずつ縦積みになる。
 * 伸長も許可して初めて「溢れない かつ 普通に折り返す」になる。
 */
.api-token-scope > span {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.api-token-scope small {
    display: block;
    color: rgba(255, 255, 255, .45);
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: normal;
    overflow-wrap: anywhere;
}

.api-token-form .button.primary {
    justify-self: start;
}

.api-token-list {
    display: grid;
    gap: 10px;
}

.api-token-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(0, 0, 0, .2);
}

.api-token-row.is-revoked {
    opacity: .55;
}

.api-token-row strong {
    display: block;
    font-size: 14px;
}

.api-token-row small {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, .52);
}

.api-token-revoked {
    flex: 0 0 auto;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
}

@media (max-width: 640px) {
    .api-token-section {
        padding: 16px;
    }

    .api-token-row {
        flex-direction: column;
        align-items: stretch;
    }

    .api-token-row form {
        display: flex;
    }

    .api-token-row .button {
        width: 100%;
    }
}

.api-token-revoked-list {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 10px 14px;
}

.api-token-revoked-list summary {
    cursor: pointer;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
}

.api-token-revoked-list .api-token-list {
    margin-top: 12px;
}

.api-token-revoked-list > small {
    display: block;
    margin-top: 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, .45);
}

.admin-app .api-token-row .button.ghost {
    border-color: #4a4a4a;
    background: #252525;
    color: #f5f5f5;
}

/* 管理画面のラベル既定色だと、人が読む説明より scope キーの方が目立ってしまうので明示指定する */
.admin-app .api-token-scope > span {
    color: #f5f5f5;
}

.admin-app .api-token-scope small {
    color: rgba(255, 255, 255, .5);
}

/* 発行直後はここへアンカー遷移する。固定ヘッダの下に潜らせない */
.api-token-section {
    scroll-margin-top: 96px;
}

/* 初期設定の離脱導線。以前はロゴも「戻る」も /admin を指しており、
   サークル未作成だと設定画面へ跳ね返ってログアウト以外に出口が無かった。 */
.admin-setup-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-setup-exit {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid #3d3d3d;
    border-radius: 999px;
    background: transparent;
    color: #dcdcdc;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.admin-setup-exit:hover,
.admin-setup-exit:focus-visible {
    border-color: #555;
    background: #363636;
    color: #fff;
    outline: none;
}

/* ボタンが2つ並ぶので、狭い画面だと縦積み(1文字ずつ改行)になりやすい */
.admin-setup-exit,
.admin-setup-topbar .admin-setup-logout {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* .admin-setup-logout の枠線指定は app.css の `.profile-logout-form button`
   (詳細度が上) に打ち消されていた。出口ボタンと並ぶので見た目を揃える。 */
.admin-setup-topbar .admin-setup-logout {
    border: 1px solid #3d3d3d;
    border-radius: 999px;
    background: #2b2b2b;
    color: #dcdcdc;
}

.admin-setup-topbar .admin-setup-logout:hover,
.admin-setup-topbar .admin-setup-logout:focus-visible {
    border-color: #555;
    background: #363636;
    color: #fff;
}

@media (max-width: 560px) {
    .admin-setup-topbar {
        padding: 12px 14px 10px;
        gap: 8px;
    }

    /* ロゴが幅を取りすぎると出口ボタンが潰れる */
    .admin-setup-topbar .admin-setup-brand .brand-wordmark {
        width: clamp(104px, 30vw, 150px);
    }

    .admin-setup-topbar-actions {
        gap: 6px;
    }

    .admin-setup-exit,
    .admin-setup-topbar .admin-setup-logout {
        min-height: 34px;
        padding: 0 10px;
        font-size: 12px;
    }
}

/* ===== bundled: feed.css ===== */
.discovery-feed-shell {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 18px 16px 72px;
}

.discovery-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin: 12px 0 20px;
}

.discovery-intro h1 {
    margin: 4px 0 6px;
    font-size: clamp(1.65rem, 5vw, 2.5rem);
    letter-spacing: -.045em;
}

.discovery-intro p:last-child {
    margin: 0;
    color: var(--muted);
}

.discovery-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
}

.discovery-tabs a {
    padding: 8px 16px;
    border-radius: 999px;
    color: var(--muted);
    font-weight: 800;
}

.discovery-tabs a.is-active {
    background: var(--ink);
    color: var(--surface);
}

.scene-feed {
    display: grid;
    gap: 22px;
}

.scene-feed-loader {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 22px 0;
}

.scene-feed-loader button {
    min-width: 180px;
    padding: 12px 20px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.scene-feed-loader span { min-height: 1.2em; color: var(--muted); font-size: .78rem; }

.scene-feed-item {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 18px 60px rgba(20, 14, 10, .08);
}

.scene-feed-author {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
}

.scene-feed-circle,
.scene-feed-characters {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.scene-feed-circle > span:last-child {
    display: grid;
    min-width: 0;
}

.scene-feed-circle strong,
.scene-feed-circle small,
.scene-feed-characters > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scene-feed-circle small,
.scene-feed-characters > span:last-child {
    color: var(--muted);
    font-size: .78rem;
}

.scene-feed-circle-avatar {
    width: 42px;
    height: 42px;
}

.scene-feed-stage {
    position: relative;
    background: #101010;
}

.scene-feed-media {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.scene-feed-media::-webkit-scrollbar {
    display: none;
}

.scene-feed-media-page {
    position: relative;
    flex: 0 0 100%;
    display: grid;
    place-items: center;
    min-height: min(76vh, 760px);
    max-height: min(88vh, 820px);
    scroll-snap-align: start;
    background: #101010;
}

.scene-feed-media-page img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: min(88vh, 820px);
    object-fit: contain;
}

.scene-page-index,
.scene-rating-badge {
    position: absolute;
    z-index: 2;
    top: 14px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    backdrop-filter: blur(10px);
}

.scene-page-index { right: 14px; }
.scene-rating-badge { left: 14px; background: #cf1f3d; }

.cover-link { position: relative; }
.card-rating-badge,
.post-rating-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: #cf1f3d;
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
}
.card-rating-badge { position: absolute; top: 10px; left: 10px; z-index: 2; }
.post-rating-badge { margin-top: 8px; }

.scene-feed-placeholder {
    display: grid;
    place-items: center;
    min-height: 520px;
    color: #fff;
}

.scene-feed-placeholder strong { font-size: 5rem; }

.scene-feed-actions {
    position: absolute;
    right: 14px;
    bottom: 16px;
    z-index: 3;
    display: grid;
    gap: 10px;
}

.scene-action-button {
    display: grid;
    place-items: center;
    width: 58px;
    min-height: 58px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 18px;
    background: rgba(0,0,0,.68);
    color: #fff;
    font: inherit;
    cursor: pointer;
    backdrop-filter: blur(12px);
}

.scene-action-button span { font-size: 1.45rem; line-height: 1; }
.scene-action-button strong { margin-top: 3px; font-size: .68rem; }
.scene-action-button.is-liked { background: #cf1f3d; }

.scene-feed-copy { padding: 16px 18px 18px; }
.scene-feed-copy h2 { margin: 0; font-size: 1.18rem; }
.scene-feed-copy p { margin: 7px 0 0; color: var(--muted); line-height: 1.75; }

.scene-feed-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 14px;
}

.scene-feed-next a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    color: var(--accent);
}

.scene-feed-next a.is-secondary { color: var(--muted); font-size: .82rem; }

.feed-account-nudge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
    border-radius: 22px;
    background: linear-gradient(135deg, #231917, #4a211f);
    color: #fff;
}

.feed-account-nudge h2 { margin: 3px 0 6px; }
.feed-account-nudge p { margin: 0; color: rgba(255,255,255,.75); }

.discovery-recommendations { margin-top: 34px; }
.discovery-recommendation-heading { margin-bottom: 6px; }
.discovery-recommendation-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 30%);
    gap: 14px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    scroll-snap-type: x proximity;
}
.discovery-recommendation-row > * { scroll-snap-align: start; }
.discovery-recommendation-footer {
    display: flex;
    justify-content: center;
    margin-top: 2px;
}
.discovery-recommendation-more {
    display: inline-flex;
    width: min(100%, 340px);
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px 10px 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(18, 15, 14, .07);
}
.discovery-recommendation-more b {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent-strong);
    font-size: 16px;
}
.discovery-recommendation-more:hover {
    border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
    transform: translateY(-1px);
}

.post-purchase-options {
    display: grid;
    gap: 9px;
    width: 100%;
}

.post-purchase-options > span {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 900;
}

.purchase-link-inputs {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.purchase-link-inputs > p { margin: 0; color: var(--muted); }

.circle-url-structure {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px 12px;
    margin: 16px 0 20px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 86%, var(--accent) 14%);
}

.circle-url-structure span { color: var(--muted); font-size: .78rem; font-weight: 900; }
.circle-url-structure code { overflow-wrap: anywhere; color: var(--ink); }

body.post-stream-body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: #060606;
}

.post-stream-body .site-header {
    position: relative;
    transition: min-height .18s ease, padding .18s ease;
}

.post-stream-body .site-footer {
    display: none;
}

.post-stream-shell {
    display: flex;
    min-height: 0;
    width: 100%;
    padding: 0;
    flex-direction: column;
    overflow: hidden;
    background: #060606;
}

.post-stream-shell > .adult-site-notice {
    z-index: 5;
    flex: 0 0 auto;
    width: min(720px, calc(100% - 24px));
    margin: 8px auto;
    padding: 7px 11px;
    border-color: rgba(255, 92, 92, .3);
    background: #1c1111;
    color: rgba(255, 255, 255, .7);
    font-size: .72rem;
}

.post-stream-shell > .adult-site-notice strong {
    color: #ff7a7a;
    font-size: .76rem;
}

.post-save-register-sheet {
    position: fixed;
    z-index: 35;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom));
    display: flex;
    width: min(520px, calc(100% - 28px));
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 18px;
    background: rgba(22, 18, 18, .94);
    color: #fff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: translate(-50%, 14px);
    transition: opacity .18s ease, transform .18s ease;
    backdrop-filter: blur(18px);
}

.post-save-register-sheet[hidden] {
    display: none;
}

.post-save-register-sheet.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.post-save-register-sheet__message {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.post-save-register-sheet__message > span:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.post-save-register-sheet__message strong {
    font-size: .85rem;
}

.post-save-register-sheet__message small {
    overflow: hidden;
    color: rgba(255, 255, 255, .68);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-save-register-sheet__icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #cf1f3d;
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
}

.post-save-register-sheet__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.post-save-register-sheet__actions a,
.post-save-register-sheet__actions button {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
    font: inherit;
    font-size: .7rem;
    font-weight: 900;
    cursor: pointer;
}

.post-save-register-sheet__actions a {
    background: #fff;
    color: #1d1717;
}

.post-save-register-sheet__actions button {
    border: 1px solid rgba(255, 255, 255, .22);
    background: transparent;
    color: rgba(255, 255, 255, .72);
}

.post-stream {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    background:
        radial-gradient(circle at 18% 12%, rgba(207, 31, 31, .13), transparent 30%),
        #060606;
}

.post-stream::-webkit-scrollbar,
.post-stream-media::-webkit-scrollbar {
    display: none;
}

.post-stream-item {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #060606;
}

.post-stream-item__frame {
    position: relative;
    width: min(100%, 720px);
    height: 100%;
    overflow: hidden;
    isolation: isolate;
    background: #0a0a0a;
    box-shadow: 0 0 80px rgba(0, 0, 0, .55);
}

.post-stream-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
}

.post-stream-media.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.post-stream-media:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .9);
    outline-offset: -4px;
}

.post-stream-media-nav {
    position: absolute;
    z-index: 4;
    top: 50%;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0 0 4px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 2rem;
    line-height: 1;
    transform: translateY(-50%);
    backdrop-filter: blur(12px);
}

.post-stream-media-nav.is-previous { left: 14px; }
.post-stream-media-nav.is-next { right: 14px; }

.post-stream-media-nav:disabled {
    opacity: 0;
    pointer-events: none;
}

.post-stream-media__page {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #0a0a0a;
}

.post-stream-media__page img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.post-stream-media--empty {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    color: #fff;
}

.post-stream-media--empty span {
    color: #ff6767;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.post-stream-media--empty strong {
    font-size: clamp(4rem, 20vw, 8rem);
}

.post-stream-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .34), transparent 12%, transparent 82%, rgba(0, 0, 0, .5) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, .1), transparent 38%);
}

/* 明るい画像が上端まで届く低背比率端末でも作者行が読めるように */
.post-stream-author a span strong,
.post-stream-author a span small {
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

.post-stream-author {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    color: #fff;
}

.post-stream-author > a {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    color: #fff;
}

.post-stream-author > a > span:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.post-stream-author strong,
.post-stream-author small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-stream-author strong {
    font-size: .84rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

.post-stream-author small {
    color: rgba(255, 255, 255, .72);
    font-size: .66rem;
}

.post-stream-avatar {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(255, 255, 255, .82);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}

.post-stream-badges {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
}

.post-stream-rating,
.post-stream-page-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
    backdrop-filter: blur(12px);
}

.post-stream-rating {
    border-color: rgba(255, 87, 87, .65);
    background: rgba(207, 31, 61, .9);
}

.post-stream-actions {
    position: absolute;
    z-index: 4;
    right: 12px;
    bottom: max(14px, env(safe-area-inset-bottom));
    display: grid;
    gap: 8px;
}

.post-stream-actions form {
    margin: 0;
}

.post-stream-action {
    display: grid;
    place-items: center;
    width: 48px;
    min-height: 49px;
    padding: 5px 3px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 15px;
    background: rgba(8, 8, 8, .48);
    color: #fff;
    font: inherit;
    text-align: center;
    cursor: pointer;
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
}

.post-stream-action > span {
    font-size: 1.12rem;
    line-height: 1;
}

.post-stream-action__profile-icon svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.post-stream-action > strong {
    margin-top: 2px;
    font-size: .62rem;
}

.post-stream-action > small {
    margin-top: 1px;
    color: rgba(255, 255, 255, .68);
    font-size: .5rem;
    font-weight: 800;
}

.post-stream-action.is-liked {
    border-color: rgba(255, 124, 124, .74);
    background: rgba(207, 31, 61, .9);
}

.post-stream-action:focus-visible,
.post-stream-read-cta:focus-visible,
.post-stream-purchase summary:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.post-stream-copy {
    position: absolute;
    z-index: 3;
    left: 16px;
    right: 72px;
    bottom: max(16px, env(safe-area-inset-bottom));
    display: flex;
    width: auto;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    box-shadow: none;
    backdrop-filter: none;
}

.post-stream-character {
    display: none;
    align-items: center;
    gap: 7px;
    margin: 0 0 5px;
    color: rgba(255, 255, 255, .74);
    font-size: .68rem;
    font-weight: 800;
}

.post-stream-character .character-avatar {
    width: 22px;
    height: 22px;
    border-color: rgba(255, 255, 255, .6);
}

.post-stream-copy h1,
.post-stream-copy h2 {
    display: -webkit-box;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: clamp(.84rem, 2vw, 1rem);
    line-height: 1.25;
    letter-spacing: -.025em;
    text-wrap: balance;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .85);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.post-stream-caption {
    display: none;
    max-width: 560px;
    margin: 4px 0 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .76);
    font-size: .7rem;
    line-height: 1.45;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.post-stream-cta-row {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 0;
}

.post-stream-read-cta,
.post-stream-purchase summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
    backdrop-filter: blur(12px);
}

.post-stream-read-cta {
    gap: 7px;
    padding: 7px 11px;
    font-size: .75rem;
    background: #fff;
    color: #171313;
}

[data-stream-primary-cta][hidden] {
    display: none;
}

.post-stream-read-cta small {
    color: #cf1f3d;
    display: none;
}

.post-stream-purchase {
    position: relative;
}

.post-stream-purchase summary {
    padding: 9px 14px;
    list-style: none;
    background: rgba(17, 12, 12, .72);
    color: #fff;
}

.post-stream-purchase summary::-webkit-details-marker {
    display: none;
}

.post-stream-purchase summary::after {
    margin-left: 7px;
    content: '＋';
    color: #ff7f7f;
}

.post-stream-purchase[open] summary::after {
    content: '−';
}

.post-stream-purchase__menu {
    position: absolute;
    z-index: 8;
    left: 0;
    bottom: calc(100% + 9px);
    display: grid;
    width: min(330px, calc(100vw - 42px));
    max-height: min(52vh, 420px);
    gap: 8px;
    padding: 13px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 17px;
    background: rgba(17, 14, 14, .96);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
    backdrop-filter: blur(18px);
}

.post-stream-purchase__menu > strong {
    padding: 2px 2px 5px;
    color: rgba(255, 255, 255, .68);
    font-size: .72rem;
}

.post-stream-purchase__menu a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 11px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.post-stream-purchase__menu a span,
.post-stream-purchase__menu a small {
    color: #ff8b8b;
    font-size: .65rem;
    font-weight: 900;
}

.post-stream-purchase__menu a b {
    overflow: hidden;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-stream-purchase__menu a small {
    color: rgba(255, 255, 255, .5);
}

.post-stream-swipe-hint {
    position: absolute;
    z-index: 5;
    top: 48%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: post-stream-hint 4.2s ease forwards;
    backdrop-filter: blur(12px);
}

.post-stream-swipe-hint span {
    font-size: 1rem;
}

@keyframes post-stream-hint {
    0%, 58% { opacity: 0; transform: translate(-50%, -35%); }
    68%, 86% { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -68%); }
}

.post-stream-loader {
    display: grid;
    place-items: center;
    gap: 7px;
    min-height: 76px;
    padding: 10px;
    background: #060606;
    color: rgba(255, 255, 255, .68);
}

.post-stream-loader[hidden] {
    display: none;
}

/* スコープ付きストリームの終端 (対象の投稿を見切った状態) */
.post-stream-end {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 120px;
    padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    background: #060606;
    color: rgba(255, 255, 255, .78);
    text-align: center;
}

.post-stream-end[hidden] {
    display: none;
}

.post-stream-end p {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
}

.post-stream-end .button {
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-weight: 900;
}

.post-stream-loader button {
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.post-stream-loader span {
    min-height: 1.2em;
    font-size: .72rem;
}

.post-read-toolbar {
    position: sticky;
    z-index: 8;
    top: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 12px 28px rgba(20, 14, 10, .08);
    backdrop-filter: blur(16px);
}

.post-read-toolbar a {
    color: var(--accent);
    font-weight: 900;
}

.post-read-toolbar strong {
    color: var(--muted);
    font-size: .8rem;
}

.post-read-toolbar strong span {
    margin-left: 7px;
    color: var(--ink);
}

@media (max-width: 720px) {
    .discovery-feed-shell { width: 100%; padding: 8px 0 56px; }
    .discovery-feed-shell > .adult-site-notice,
    .discovery-intro { margin-left: 12px; margin-right: 12px; }
    .discovery-intro { align-items: start; flex-direction: column; }
    .discovery-intro p:last-child { font-size: .86rem; }
    .scene-feed { gap: 10px; }
    .scene-feed-item { border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
    .scene-feed-media-page { min-height: min(72vh, 680px); }
    .scene-feed-characters > span:last-child { display: none; }
    .feed-account-nudge { margin: 6px 12px; align-items: start; flex-direction: column; }
    .discovery-recommendations { padding: 0 12px; }
    .discovery-recommendation-row { grid-auto-columns: minmax(170px, 62vw); }
    .discovery-recommendation-more { width: 100%; }
    .post-stream-body .site-header {
        min-height: 40px;
        gap: 6px;
        padding: 3px 8px;
    }
    .post-stream-body .brand-wordmark {
        width: 112px;
        max-width: 30vw;
        transition: width .18s ease;
    }
    .post-stream-body .nav { gap: 2px; }
    .post-stream-body .nav a {
        min-height: 30px;
        padding: 6px 7px;
        font-size: .68rem;
    }
    .post-stream-body .theme-toggle {
        width: 30px;
        height: 30px;
    }
    .post-stream-body .theme-icon {
        width: 16px;
        height: 16px;
    }
    .post-stream-shell > .adult-site-notice {
        align-self: flex-start;
        width: auto;
        min-height: 22px;
        margin: 3px 8px;
        padding: 2px 7px;
        border-radius: 999px;
        line-height: 1;
        transition: min-height .18s ease, margin .18s ease, padding .18s ease, opacity .18s ease;
    }
    .post-stream-shell > .adult-site-notice strong {
        font-size: 0;
        line-height: 1;
    }
    .post-stream-shell > .adult-site-notice strong::after {
        content: '18+';
        font-size: .65rem;
        letter-spacing: .02em;
    }
    .post-stream-shell > .adult-site-notice span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .post-stream-item__frame { width: 100%; box-shadow: none; }
    .post-stream-media-nav { display: none; }
    .post-stream-author { padding: 9px 10px; }
    .post-stream-avatar { width: 32px; height: 32px; }
    .post-stream-actions { right: 7px; bottom: max(9px, env(safe-area-inset-bottom)); gap: 6px; }
    .post-stream-action { width: 45px; min-height: 47px; border-radius: 14px; }
    .post-stream-copy {
        left: 10px;
        right: 59px;
        bottom: max(11px, env(safe-area-inset-bottom));
        width: auto;
        gap: 7px;
        padding: 0;
    }
    .post-stream-character .character-avatar { width: 20px; height: 20px; }
    .post-stream-caption { -webkit-line-clamp: 1; }
    .post-stream-read-cta,
    .post-stream-purchase summary { min-height: 33px; padding: 7px 10px; font-size: .7rem; }
    .post-save-register-sheet {
        bottom: max(8px, env(safe-area-inset-bottom));
        width: calc(100% - 16px);
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
        padding: 10px 11px;
        border-radius: 16px;
    }
    .post-save-register-sheet__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .post-save-register-sheet__actions a,
    .post-save-register-sheet__actions button {
        display: inline-grid;
        width: 100%;
        place-items: center;
    }
    .post-read-toolbar {
        top: 70px;
        margin: 0 12px 16px;
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-stream-body .site-header,
    .post-stream-body .brand-wordmark,
    .post-stream-shell > .adult-site-notice,
    .post-save-register-sheet {
        transition: none;
    }
    .post-stream-item,
    .post-stream-media__page {
        scroll-snap-stop: normal;
    }
    .post-stream-swipe-hint {
        animation: none;
        opacity: 0;
    }
}

/* ===== ストリーム内ワンタップフォロー (作者ヘッダー右) ===== */
.post-stream-follow .entity-follow-form {
    margin: 0;
}

.post-stream-follow .entity-follow-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 120, 120, .75);
    border-radius: 999px;
    background: rgba(207, 31, 31, .88);
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
    backdrop-filter: blur(12px);
    cursor: pointer;
}

.post-stream-follow .entity-follow-button.is-followed {
    border-color: rgba(255, 255, 255, .26);
    background: rgba(0, 0, 0, .62);
}

.post-stream-follow .entity-follow-button small {
    display: none;
}

/* ===== bundled: video.css ===== */
.post-video {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
}

.post-video__stage {
    display: grid;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    place-items: center;
    overflow: hidden;
}

.post-video__viewport {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: var(--post-video-aspect);
    overflow: hidden;
    background: #000;
}

.post-video__viewport video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    background: #000;
    object-fit: contain;
}

.post-video.is-video-complete {
    z-index: 6;
}

.post-video__end-card {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 18px;
    padding: 76px 22px max(26px, env(safe-area-inset-bottom));
    overflow-y: auto;
    background:
        radial-gradient(circle at 50% 35%, rgba(207, 31, 61, .28), transparent 42%),
        linear-gradient(180deg, rgba(5, 5, 5, .74), rgba(5, 5, 5, .96));
    color: #fff;
    text-align: center;
    backdrop-filter: blur(12px);
}

.post-video__end-card[hidden] {
    display: none;
}

.post-video__end-copy {
    display: grid;
    max-width: 420px;
    gap: 5px;
}

.post-video__end-copy small {
    color: rgba(255, 255, 255, .68);
    font-size: .76rem;
    font-weight: 900;
}

.post-video__end-copy strong {
    font-size: clamp(1.3rem, 4vw, 2rem);
    line-height: 1.2;
}

.post-video__end-actions {
    display: grid;
    width: min(100%, 420px);
    gap: 9px;
}

.post-video__next,
.post-video__replay {
    display: grid;
    width: 100%;
    min-height: 48px;
    place-items: center;
    gap: 2px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font: inherit;
    font-size: .86rem;
    font-weight: 900;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    backdrop-filter: blur(14px);
}

.post-video__next.is-primary {
    border-color: transparent;
    background: #fff;
    color: #181313;
}

.post-video__next small {
    max-width: 100%;
    overflow: hidden;
    color: #cf1f3d;
    font-size: .65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-video__replay {
    background: transparent;
    color: rgba(255, 255, 255, .78);
}

.post-video__next:focus-visible,
.post-video__replay:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.post-video__follow .entity-follow-form,
.post-video__follow .entity-follow-button {
    width: 100%;
}

.post-video__follow .entity-follow-button {
    min-height: 48px;
    justify-content: center;
    border-color: rgba(255, 255, 255, .3);
    background: rgba(0, 0, 0, .34);
    color: #fff;
}

.post-video__cta {
    display: none;
    width: min(100%, 360px);
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    justify-self: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: #fff;
    color: #171313;
    font-weight: 900;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
}

.post-video__cta span,
.post-video__cta small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-video__cta small {
    color: #cf1f3d;
    font-size: .68rem;
}

.post-video__cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.post-video-upload {
    display: grid;
    width: min(100% - 32px, 810px);
    min-width: 0;
    gap: 14px;
    margin: 14px auto 0;
    padding: 16px;
    border-radius: 4px;
    background: #1f1f1f;
    color: #fff;
}

.post-method-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.post-video-upload__heading {
    display: grid;
    gap: 5px;
}

.post-video-upload__heading strong {
    font-size: 16px;
}

.post-video-upload__heading span,
.post-video-upload__field small,
.post-video-upload__status {
    color: #aaa;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.post-video-upload__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.post-video-upload__field {
    display: grid;
    min-width: 0;
    gap: 8px;
    padding: 13px;
    border: 1px solid #333;
    border-radius: 6px;
    background: #181818;
}

.post-video-upload__field b {
    font-size: 14px;
}

.post-video-upload__drop-zone {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 104px;
    place-items: center;
    align-content: center;
    gap: 7px;
    padding: 14px;
    overflow: hidden;
    border: 1px dashed rgba(20, 153, 232, .72);
    border-radius: 6px;
    background: #181818;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.post-video-upload__drop-zone:hover,
.post-video-upload__drop-zone:focus-within,
.post-video-upload__drop-zone.is-dragover {
    border-color: #1499e8;
    background: #202d36;
    box-shadow: inset 0 0 0 1px rgba(20, 153, 232, .28);
}

.post-video-upload__drop-zone.is-dragover {
    box-shadow: inset 0 0 0 2px rgba(20, 153, 232, .55);
}

.post-video-upload__drop-zone strong {
    max-width: 100%;
    color: #5eb6f2;
    font-size: 15px;
    line-height: 1.4;
}

.post-video-upload__drop-zone span {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    color: #aaa;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-video-upload__field input[type="file"] {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    opacity: 0;
    color: #ddd;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.post-video-upload__field input[type="file"]::file-selector-button {
    min-height: 38px;
    margin-right: 10px;
    padding: 7px 12px;
    border: 1px solid #555;
    border-radius: 5px;
    background: #2a2a2a;
    color: #fff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.post-video-upload__status {
    min-height: 1.55em;
    margin: 0;
}

.post-video-upload__status.is-valid {
    color: #76d89c;
}

.post-video-upload__status.is-error {
    color: #ff8a8a;
}

.post-video-upload__poster-preview {
    display: block;
    width: min(100%, 180px);
    max-height: 180px;
    border-radius: 5px;
    object-fit: contain;
}

.post-video-upload__poster-preview[hidden] {
    display: none;
}

@media (max-width: 720px) {
    .post-video[data-video-orientation="portrait"] .post-video__viewport video {
        object-fit: cover;
    }

    .post-video ~ .post-stream-actions,
    .post-video ~ .post-stream-copy {
        bottom: max(72px, calc(58px + env(safe-area-inset-bottom)));
    }

    .post-video__end-card {
        justify-items: stretch;
        padding: 74px 16px max(18px, env(safe-area-inset-bottom));
    }

    .post-video__end-actions {
        width: 100%;
    }

    .post-video-upload {
        width: calc(100% - 24px);
        padding: 12px;
    }

    .post-video-upload__fields {
        grid-template-columns: 1fr;
    }

    .post-method-grid {
        grid-template-columns: 1fr;
    }

    .post-video-upload__drop-zone {
        min-height: 92px;
    }
}

@media (max-width: 390px) {
    .post-video-upload__field {
        padding: 11px;
    }

    .post-video-upload__drop-zone {
        padding-inline: 10px;
    }
}

/* ===== bundled: manga.css ===== */
.manga-work-body {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, transparent) 0, transparent 25rem),
        var(--bg);
}

.manga-work {
    width: min(1040px, calc(100% - 32px));
    margin: 0 auto;
    padding: 24px 0 80px;
}

.manga-work__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 700;
}

.manga-work__breadcrumb a:hover {
    color: var(--accent);
}

.manga-work__hero {
    display: grid;
    grid-template-columns: minmax(260px, 390px) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 52px);
    align-items: start;
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 12px 42px rgba(30, 18, 14, .07);
}

.manga-work__cover {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 10px;
    background: #201d1d;
    box-shadow: 0 16px 40px rgba(25, 16, 16, .16);
    isolation: isolate;
}

.manga-work__cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.manga-work__cover-backdrop {
    object-fit: cover;
    filter: blur(22px) saturate(.78) brightness(.62);
    opacity: .72;
    transform: scale(1.13);
}

.manga-work__cover-art {
    z-index: 1;
    object-fit: contain;
}

.manga-work__cover-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
}

.manga-work__cover-placeholder {
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .54);
    background: linear-gradient(145deg, #292020, #0d0d0d);
    font-weight: 900;
}

.manga-work__summary {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 0;
    padding-top: 2px;
}

.manga-work__summary h1 {
    max-width: 24em;
    margin: 6px 0 10px;
    color: var(--ink);
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    line-height: 1.36;
    letter-spacing: -.025em;
    text-wrap: pretty;
}

.manga-work__type {
    margin: 0;
    color: var(--accent);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.manga-work__publisher {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 14px;
    font-size: .8rem;
}

.manga-work__publisher span {
    color: var(--muted);
    font-size: .66rem;
    font-weight: 800;
}

.manga-work__publisher a {
    color: var(--ink);
    font-weight: 800;
}

.manga-work__publisher a:hover {
    color: var(--accent);
}

.manga-work__badges,
.manga-work__characters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.manga-work__badges span,
.manga-work__characters a {
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--muted);
    font-size: .67rem;
    font-weight: 800;
}

.manga-work__badges span:first-child {
    border-color: rgba(207, 31, 61, .34);
    color: var(--accent);
}

.manga-work__description {
    max-width: 46rem;
    margin: 22px 0;
    color: var(--muted);
    font-size: .98rem;
    line-height: 1.85;
}

.manga-work__characters {
    margin-top: 13px;
    margin-bottom: 20px;
}

.manga-work__characters a {
    color: var(--ink);
}

.manga-work__characters a span {
    margin-right: 5px;
    color: var(--muted);
    font-size: .6rem;
}

.manga-work__characters a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.manga-work__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 142px;
    gap: 9px;
}

.manga-work__actions form,
.manga-work__save-button {
    width: 100%;
}

.manga-work__read-button,
.manga-work__save-button,
.manga-work__purchase-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 11px 17px;
    border-radius: 9px;
    font: inherit;
    font-weight: 900;
}

.manga-work__read-button {
    flex-direction: column;
    gap: 2px;
    width: 100%;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 10px 24px rgba(207, 31, 61, .2);
}

.manga-work__read-button:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.manga-work__read-button small {
    color: rgba(255, 255, 255, .78);
    font-size: .62rem;
    font-weight: 750;
}

.manga-work__save-button {
    gap: 7px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.manga-work__save-button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.manga-work__save-button svg {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.manga-work__save-button[aria-pressed="true"],
.manga-work__save-button.is-saved {
    border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    color: var(--accent);
}

.manga-work__save-button[aria-pressed="true"] svg,
.manga-work__save-button.is-saved svg {
    fill: currentColor;
}

.manga-work__purchase {
    margin-top: 17px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.manga-work__purchase > p {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
}

.manga-work__purchase-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 7px;
}

.manga-work__purchase-links a {
    justify-content: flex-start;
    gap: 6px;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    font-size: .77rem;
}

.manga-work__purchase-links a:hover {
    border-color: var(--accent);
}

.manga-work__purchase-links small {
    margin-left: auto;
    color: var(--accent);
}

.manga-work__purchase-links b {
    color: var(--muted);
    font-size: 1rem;
}

.manga-work__overview,
.manga-work__chapters,
.manga-work__recommendations,
.manga-work__next {
    padding: clamp(20px, 4vw, 32px);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.manga-work__overview {
    margin-top: 20px;
}

.manga-work__overview h2 {
    margin: 0 0 10px;
    font-size: 1.05rem;
}

.manga-work__overview p {
    max-width: 50rem;
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.85;
}

.manga-work__chapters {
    width: 100%;
    margin-top: 20px;
}

.manga-work__section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 15px;
}

.manga-work__section-heading h2 {
    margin: 0;
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
}

.manga-work__section-heading > span,
.manga-work__section-heading > a {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
}

.manga-work__section-heading > a:hover {
    color: var(--accent);
}

.manga-work__section-heading > div > p {
    margin: 0 0 3px;
    color: var(--muted);
    font-size: .66rem;
    font-weight: 800;
}

.manga-work__chapters ol {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.manga-work__chapters li > a,
.manga-work__chapters li > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 64px;
    padding: 12px 3px;
    border-bottom: 1px solid var(--line);
    background: transparent;
}

.manga-work__chapters li > a:hover {
    color: var(--accent);
    transform: translateX(2px);
}

.manga-work__chapters strong {
    color: var(--ink);
    line-height: 1.45;
}

.manga-work__chapters li > span,
.manga-work__chapters em {
    color: var(--muted);
    font-size: .74rem;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.manga-work__chapter-copy {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
}

.manga-work__chapter-copy small {
    flex: 0 0 auto;
    padding: 3px 6px;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
    border-radius: 4px;
    color: var(--accent);
    font-size: .61rem;
    font-weight: 900;
}

.manga-work__chapter-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 750;
    white-space: nowrap;
}

.manga-work__chapter-meta b {
    font-size: 1.15rem;
}

.manga-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 16px;
}

.manga-profile-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    box-shadow: 0 6px 20px rgba(30, 18, 14, .06);
}

.manga-profile-card__cover {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #171313;
    isolation: isolate;
}

.manga-profile-card__cover img,
.manga-profile-card__cover > span {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform .22s ease;
}

.manga-profile-card__backdrop {
    object-fit: cover;
    filter: blur(16px) saturate(.72) brightness(.62);
    opacity: .72;
    transform: scale(1.14);
}

.manga-profile-card__art {
    z-index: 1;
    object-fit: contain;
}

.manga-profile-card__cover > span {
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .55);
    font-weight: 900;
}

.manga-profile-card:hover .manga-profile-card__art {
    transform: scale(1.025);
}

.manga-profile-card__labels {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
}

.manga-profile-card__labels b,
.manga-profile-card__labels em {
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(22, 18, 18, .72);
    color: #fff;
    font-size: .54rem;
    line-height: 1.35;
    font-style: normal;
    font-weight: 900;
}

.manga-profile-card__labels b { background: #b91934; }

.manga-profile-card__copy {
    display: grid;
    gap: 4px;
    padding: 11px;
}

.manga-profile-card__copy strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink);
    font-size: .86rem;
    line-height: 1.48;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.manga-profile-card__copy span,
.manga-profile-card__copy small {
    overflow: hidden;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manga-profile-card__byline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    min-height: 17px;
}

.manga-profile-card__byline .manga-profile-card__creator {
    flex: 1 1 auto;
    min-width: 0;
}

.manga-profile-card__byline .manga-profile-card__labels {
    overflow: visible;
    color: inherit;
    font-size: inherit;
}

.manga-profile-card__byline .manga-profile-card__labels b,
.manga-profile-card__byline .manga-profile-card__labels em {
    overflow: visible;
    color: #fff;
    text-overflow: clip;
}

.manga-profile-card__meta {
    display: flex;
    /* 「4話・40ペ…」のような数値の途中切断を防ぎ、狭幅ではリンクを2行目へ落とす */
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 6px;
    min-width: 0;
}

.manga-profile-card__meta > small {
    white-space: nowrap;
}

.manga-profile-card__meta > a {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--accent);
    font-size: .62rem;
    font-weight: 850;
}

.manga-profile-card__meta > a span {
    margin-left: 2px;
    color: inherit;
    font-size: .86rem;
}

.manga-work__recommendations {
    margin-top: 20px;
}

.manga-work__next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 20px;
    border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 62%);
}

.manga-work__next p,
.manga-work__next h2,
.manga-work__next span {
    margin: 0;
}

.manga-work__next p {
    color: var(--accent);
    font-size: .68rem;
    font-weight: 900;
}

.manga-work__next h2 {
    margin: 3px 0 6px;
    font-size: clamp(1.15rem, 2.6vw, 1.55rem);
}

.manga-work__next > div > span {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.6;
}

.manga-work__next-actions {
    display: grid;
    flex: 0 0 min(310px, 40%);
    gap: 7px;
}

.manga-work__next-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-size: .78rem;
    font-weight: 850;
}

.manga-work__next-actions a.is-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.manga-end-recommendations {
    margin-top: 22px;
    text-align: left;
}

.manga-viewer__end .manga-end-recommendations[data-manga-recommendations] {
    display: block;
}

.manga-end-recommendations h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 1rem;
}

.manga-end-recommendations > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.manga-end-recommendations .manga-profile-card {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
}

.manga-end-recommendations .manga-profile-card__copy strong { color: #fff; font-size: .78rem; }
.manga-end-recommendations .manga-profile-card__copy span,
.manga-end-recommendations .manga-profile-card__copy small { color: rgba(255, 255, 255, .58); }

.manga-reader-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
}

.manga-viewer__end-card {
    display: grid;
    gap: 13px;
    padding: clamp(24px, 6vw, 44px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .045);
    text-align: center;
}

.manga-viewer__end-card p,
.manga-viewer__end-card strong {
    margin: 0;
    font-size: clamp(1.15rem, 4vw, 1.8rem);
}

.manga-viewer__end-card > a:not([data-manga-purchase]):not([data-manga-next-chapter]),
.manga-viewer__end-card > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 11px 18px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 850;
}

.admin-manga-page {
    display: grid;
    width: min(1320px, calc(100% - 28px));
    gap: 22px;
    margin: 0 auto;
    padding: 34px 0 80px;
    color: #f5f5f5;
}

.admin-manga-page__header,
.admin-manga-list__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-manga-page__header h1,
.admin-manga-list h2,
.admin-manga-form h2 {
    margin: 0;
    color: #fff;
}

.admin-manga-page__header h1 {
    font-size: clamp(2rem, 5vw, 3.4rem);
}

.admin-manga-page__header > a,
.admin-manga-list__heading > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid #404040;
    border-radius: 999px;
    background: #292929;
    color: #fff;
    font-weight: 900;
}

.admin-manga-list,
.admin-manga-form {
    border: 1px solid #343434;
    border-radius: 12px;
    background: #1f1f1f;
}

.admin-manga-list {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.admin-manga-list__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.admin-manga-list__grid article {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    min-height: 118px;
    overflow: hidden;
    border: 1px solid #353535;
    border-radius: 10px;
    background: #171717;
}

.admin-manga-list__grid article > img {
    width: 82px;
    height: 100%;
    min-height: 118px;
    object-fit: cover;
}

.admin-manga-list__grid article > div {
    display: grid;
    align-content: center;
    gap: 5px;
    min-width: 0;
    padding: 12px;
}

.admin-manga-list__grid span,
.admin-manga-list__grid small {
    color: #999;
    font-size: .7rem;
    font-weight: 800;
}

.admin-manga-list__grid strong {
    overflow: hidden;
    color: #fff;
    line-height: 1.4;
    text-overflow: ellipsis;
}

.admin-manga-list__grid a {
    color: #61c4ff;
    font-size: .8rem;
    font-weight: 900;
}

.admin-manga-form {
    display: grid;
    gap: 18px;
    padding: clamp(18px, 4vw, 32px);
}

.admin-manga-form > header {
    display: grid;
    gap: 6px;
}

.admin-manga-form > header p,
.admin-manga-form fieldset > p {
    margin: 0;
    color: #aaa;
    line-height: 1.7;
}

.admin-manga-form fieldset {
    display: grid;
    min-width: 0;
    gap: 14px;
    margin: 0;
    padding: 18px;
    border: 1px solid #343434;
    border-radius: 9px;
    background: #191919;
}

.admin-manga-form legend {
    padding: 0 8px;
    color: #fff;
    font-weight: 900;
}

.admin-manga-form label {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: #d9d9d9;
    font-size: .82rem;
    font-weight: 850;
}

.admin-manga-form input,
.admin-manga-form textarea,
.admin-manga-form select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #3b3b3b;
    border-radius: 7px;
    background: #242424;
    color: #fff;
    font: inherit;
}

.admin-manga-form textarea {
    resize: vertical;
    line-height: 1.6;
}

.admin-manga-form input:focus,
.admin-manga-form textarea:focus,
.admin-manga-form select:focus {
    border-color: #1499e8;
    outline: 2px solid rgba(20, 153, 232, .18);
}

.admin-manga-form input[type="file"] {
    padding: 8px;
}

.admin-manga-form input[type="checkbox"],
.admin-manga-form input[type="radio"] {
    width: 18px;
    min-height: 18px;
    margin: 0;
    padding: 0;
    accent-color: #1499e8;
}

.admin-manga-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-manga-form__check {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-content: start;
}

.admin-manga-form__characters,
.admin-manga-form__posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 9px;
}

.admin-manga-form__posts > article {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 9px;
    overflow: hidden;
    padding: 8px;
    border: 1px solid #363636;
    border-radius: 8px;
    background: #222;
}

.admin-manga-form__posts > article > img {
    grid-row: 1 / 3;
    width: 56px;
    height: 70px;
    border-radius: 5px;
    object-fit: cover;
}

.admin-manga-form__posts > article > label {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.admin-manga-form__posts > article > select {
    min-height: 34px;
    padding: 5px 8px;
    font-size: .72rem;
}

.admin-manga-form__page-order {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 9px;
    max-height: 560px;
    padding: 10px;
    overflow-y: auto;
    border: 1px solid #343434;
    border-radius: 8px;
    background: #131313;
}

.admin-manga-form__page-order > label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 6px;
    padding: 7px;
    border-radius: 7px;
    background: #242424;
    cursor: pointer;
}

.admin-manga-form__page-order > label.is-chapter-start {
    outline: 3px solid #1499e8;
    outline-offset: -3px;
}

.admin-manga-form__page-order > label.is-chapter-start::before {
    grid-column: 1 / -1;
    color: #61c4ff;
    content: '話の開始';
    font-size: .66rem;
    font-weight: 900;
}

.admin-manga-form__page-order img {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 4px;
    object-fit: cover;
}

.admin-manga-form__page-order span {
    align-self: center;
    color: #aaa;
    font-size: .68rem;
}

.admin-manga-form__page-order input {
    min-height: 34px;
    padding: 5px;
    text-align: center;
}

.admin-manga-chapter-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-manga-chapter-tools button {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #444;
    border-radius: 999px;
    background: #292929;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: .76rem;
    font-weight: 900;
}

.admin-manga-chapter-tools button:disabled {
    cursor: not-allowed;
    opacity: .4;
}

.admin-manga-chapter-tools small {
    flex: 1 1 260px;
    color: #999;
    line-height: 1.5;
}

.admin-manga-form__characters > label,
.admin-manga-form__posts > label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    min-height: 50px;
    padding: 9px 11px;
    border: 1px solid #363636;
    border-radius: 8px;
    background: #222;
}

.admin-manga-form__current-cover {
    width: 120px;
    max-height: 170px;
    border-radius: 7px;
    object-fit: cover;
}

@media (max-width: 720px) {
    .admin-manga-page {
        width: min(100% - 18px, 620px);
        padding-top: 18px;
    }

    .admin-manga-page__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-manga-form__row {
        grid-template-columns: 1fr;
    }

    .admin-manga-list__grid {
        grid-template-columns: 1fr;
    }

    .manga-profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .manga-end-recommendations > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .manga-work {
        width: 100%;
        padding: 0 0 56px;
    }

    .manga-work__breadcrumb {
        margin: 0;
        padding: 10px 14px;
        overflow: hidden;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .manga-work__breadcrumb a,
    .manga-work__breadcrumb span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .manga-work__hero {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 0 0 22px;
        border-width: 0 0 1px;
        border-radius: 0;
        box-shadow: none;
    }

    .manga-work__cover {
        width: 100%;
        border-width: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .manga-work__summary {
        padding: 0 16px;
    }

    .manga-work__summary h1 {
        margin-top: 5px;
        font-size: clamp(1.38rem, 6vw, 1.82rem);
        line-height: 1.42;
    }

    .manga-work__publisher {
        margin-bottom: 12px;
    }

    .manga-work__characters {
        margin-bottom: 16px;
    }

    .manga-work__actions {
        grid-template-columns: minmax(0, 1fr) 108px;
    }

    .manga-work__read-button {
        width: 100%;
    }

    .manga-work__save-button {
        padding-right: 8px;
        padding-left: 8px;
        font-size: .74rem;
    }

    .manga-work__overview,
    .manga-work__chapters,
    .manga-work__recommendations,
    .manga-work__next {
        margin-top: 10px;
        padding: 20px 16px;
        border-width: 1px 0;
        border-radius: 0;
    }

    .manga-work__overview p {
        font-size: .84rem;
        line-height: 1.8;
    }

    .manga-work__recommendations .manga-profile-grid {
        grid-auto-columns: minmax(168px, 44vw);
        grid-auto-flow: column;
        grid-template-columns: none;
        gap: 10px;
        margin: 0 -16px;
        padding: 0 16px 5px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .manga-work__recommendations .manga-profile-grid::-webkit-scrollbar {
        display: none;
    }

    .manga-work__recommendations .manga-profile-card {
        scroll-snap-align: start;
    }

    .manga-work__section-heading {
        align-items: center;
    }

    .manga-work__section-heading > a {
        flex: 0 0 auto;
    }

    .manga-work__next {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
    }

    .manga-work__next-actions {
        flex-basis: auto;
        width: 100%;
    }

    .manga-work__chapter-copy {
        gap: 7px;
    }

    .manga-work__chapter-meta {
        font-size: .64rem;
    }
}

@media (max-width: 380px) {
    .manga-work__actions {
        grid-template-columns: 1fr;
    }

    .manga-work__save-button {
        min-height: 46px;
    }

    .manga-work__chapter-meta {
        gap: 3px;
    }
}

/* ===== iPad縦(761〜900px): 2カラムheroで主CTAが潰れないように ===== */
@media (max-width: 900px) and (min-width: 761px) {
    .manga-work__hero {
        grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    }

    .manga-work__actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ===== PC: プロフィールの漫画ストリップを左に密集させず表紙を大きく ===== */
@media (min-width: 1101px) {
    body.circle-profile-landing .manga-profile-grid,
    body.character-profile-landing .manga-profile-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 18px;
    }
}

/* 既読再開時に表示する「最初から読む」の控えめリンク */
.manga-work__restart-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-top: 6px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.manga-work__restart-link[hidden] {
    display: none;
}

/* ===== /manga 漫画ハブ ===== */
.manga-hub-page {
    display: grid;
    gap: 22px;
}

.manga-hub-page .section-heading.compact {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px 14px;
}

.manga-hub-page .section-heading.compact > .entity-count {
    margin-left: auto;
    align-self: center;
}

.manga-hub-page > .manga-hub-head,
.manga-hub-page > .manga-hub-lead {
    margin-inline: var(--page-content-gutter, 16px);
}

.manga-hub-head h1 {
    margin: 2px 0 0;
    font-size: clamp(24px, 3.4vw, 32px);
}

.manga-hub-lead {
    margin: -10px 0 0;
    color: var(--muted);
    font-size: 13.5px;
}

/* ===== 読みかけの漫画 (続きから読む棚) ===== */
.manga-continue-section {
    display: grid;
    gap: 12px;
}

.manga-continue-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 12px;
}

.manga-continue-card {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 84px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 8px 22px rgba(30, 18, 14, .07);
    color: inherit;
    text-decoration: none;
}

.manga-continue-card img {
    flex: 0 0 auto;
    width: 56px;
    height: 74px;
    border-radius: 7px;
    object-fit: cover;
    background: #201d1d;
}

.manga-continue-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.manga-continue-copy strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: .86rem;
    line-height: 1.35;
}

.manga-continue-copy small {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
}

.manga-continue-copy em {
    color: var(--accent);
    font-size: .74rem;
    font-style: normal;
    font-weight: 900;
}

@media (min-width: 1101px) {
    body.manga-hub-body .manga-hub-shell {
        max-width: 1080px;
        margin-inline: auto;
    }

    body.manga-hub-body .manga-profile-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 18px;
    }
}

/* ===== bundled: manga-viewer.css ===== */
html.manga-viewer-open,
body.manga-viewer-open {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

.manga-viewer {
    --manga-accent: #ef476f;
    --manga-surface: rgba(15, 15, 18, 0.94);
    --manga-safe-top: env(safe-area-inset-top, 0px);
    --manga-safe-bottom: env(safe-area-inset-bottom, 0px);
    position: fixed;
    inset: 0;
    z-index: 10000;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    color: #fff;
    background: #050505;
    font-family: inherit;
    isolation: isolate;
    overscroll-behavior: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.manga-viewer:focus {
    outline: none;
}

.manga-viewer[hidden] {
    display: none !important;
}

.manga-viewer *,
.manga-viewer *::before,
.manga-viewer *::after {
    box-sizing: border-box;
}

.manga-viewer__shell,
.manga-viewer__stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.manga-viewer__shell {
    z-index: 1;
    background: #050505;
}

.manga-viewer__page-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.manga-viewer__page-layer.is-current {
    z-index: 1;
}

.manga-viewer__page-layer.is-incoming {
    z-index: 2;
    visibility: hidden;
}

.manga-viewer__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: 50% 50%;
    will-change: transform;
    -webkit-user-drag: none;
}

.manga-viewer__tap-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    appearance: none;
    color: transparent;
    background: transparent;
    touch-action: none;
}

.manga-viewer__tap-zone--next {
    left: 0;
    width: 32%;
    cursor: w-resize;
}

.manga-viewer__tap-zone--menu {
    left: 32%;
    width: 36%;
    cursor: default;
}

.manga-viewer__tap-zone--previous {
    right: 0;
    width: 32%;
    cursor: e-resize;
}

.manga-viewer__tap-zone--next::after,
.manga-viewer__tap-zone--previous::after {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.48);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
    font-size: 28px;
    line-height: 1;
    opacity: 0;
    transform: translateY(-50%) scale(0.9);
    transition: opacity 150ms ease, transform 150ms ease;
    backdrop-filter: blur(10px);
}

.manga-viewer__tap-zone--next::after {
    left: 22px;
    content: '←';
}

.manga-viewer__tap-zone--previous::after {
    right: 22px;
    content: '→';
}

@media (hover: hover) and (pointer: fine) {
    .manga-viewer__tap-zone--next:hover::after,
    .manga-viewer__tap-zone--previous:hover::after,
    .manga-viewer__tap-zone:focus-visible::after {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

.manga-viewer__header,
.manga-viewer__controls {
    position: absolute;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
}

.manga-viewer__header {
    top: 0;
    right: 0;
    left: 0;
    min-height: calc(58px + var(--manga-safe-top));
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 8px;
    padding: calc(8px + var(--manga-safe-top)) 12px 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0) 100%);
    transform: translateY(-8px);
}

.manga-viewer__title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manga-viewer__icon-button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    appearance: none;
    color: #fff;
    background: rgba(0, 0, 0, 0.38);
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
    backdrop-filter: blur(9px);
}

.manga-viewer__icon-button:hover {
    background: rgba(255, 255, 255, 0.18);
}

.manga-viewer__icon-button:active {
    transform: scale(0.93);
}

.manga-viewer__icon-button:focus-visible,
.manga-viewer__retry:focus-visible,
.manga-viewer__seek:focus-visible,
.manga-viewer__tap-zone:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.manga-viewer__close span {
    display: block;
    margin-top: -3px;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
}

.manga-viewer__fullscreen svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.manga-viewer__controls {
    right: 0;
    bottom: 0;
    left: 0;
    padding: 34px 18px calc(12px + var(--manga-safe-bottom));
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    transform: translateY(8px);
}

.manga-viewer.is-ui-visible .manga-viewer__header,
.manga-viewer.is-ui-visible .manga-viewer__controls {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.manga-viewer__counter {
    width: max-content;
    min-width: 76px;
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 8px;
    padding: 6px 13px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    backdrop-filter: blur(9px);
}

.manga-viewer__seek-wrap {
    width: min(820px, 100%);
    margin: 0 auto;
    padding: 5px 0;
}

.manga-viewer__seek {
    --manga-seek-progress: 0%;
    width: 100%;
    height: 28px;
    display: block;
    margin: 0;
    appearance: none;
    color: var(--manga-accent);
    background: transparent;
    cursor: pointer;
    direction: rtl;
}

.manga-viewer__seek::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(
        to left,
        var(--manga-accent) 0,
        var(--manga-accent) var(--manga-seek-progress),
        rgba(255, 255, 255, 0.28) var(--manga-seek-progress),
        rgba(255, 255, 255, 0.28) 100%
    );
}

.manga-viewer__seek::-webkit-slider-thumb {
    width: 19px;
    height: 19px;
    margin-top: -7px;
    border: 3px solid #fff;
    border-radius: 50%;
    appearance: none;
    background: var(--manga-accent);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
}

.manga-viewer__seek::-moz-range-track {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
}

.manga-viewer__seek::-moz-range-progress {
    height: 5px;
    border-radius: 999px;
    background: var(--manga-accent);
}

.manga-viewer__seek::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--manga-accent);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
}

.manga-viewer__seek:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.manga-viewer__control-row {
    width: min(820px, 100%);
    min-height: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 auto;
}

.manga-viewer__key-help {
    color: rgba(255, 255, 255, 0.54);
    font-size: 11px;
    font-weight: 700;
}

.manga-viewer__zoom {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.manga-viewer__loading,
.manga-viewer__error {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.manga-viewer__loading[hidden],
.manga-viewer__error[hidden] {
    display: none;
}

.manga-viewer__spinner {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: manga-viewer-spin 700ms linear infinite;
}

.manga-viewer__error {
    align-content: center;
    gap: 12px;
    padding: 24px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(0, 0, 0, 0.66);
    text-align: center;
    pointer-events: auto;
}

.manga-viewer__error p {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.manga-viewer__retry {
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
}

.manga-viewer__guide {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 24px;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    backdrop-filter: blur(3px);
}

.manga-viewer__guide[hidden] {
    display: none;
}

.manga-viewer__guide-card {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 28px 32px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    background: rgba(10, 10, 12, 0.76);
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.manga-viewer__guide-arrows {
    font-size: 42px;
    line-height: 1;
    letter-spacing: 0.08em;
}

.manga-viewer__guide-card strong {
    font-size: 17px;
    font-weight: 900;
}

.manga-viewer__guide-card small {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    line-height: 1.5;
}

.manga-viewer__end {
    position: absolute;
    inset: 0;
    z-index: 50;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: calc(28px + var(--manga-safe-top)) 18px calc(28px + var(--manga-safe-bottom));
    color: #fff;
    background: #111114;
    overscroll-behavior: contain;
    touch-action: pan-y;
    user-select: text;
    -webkit-user-select: text;
}

.manga-viewer__end[hidden] {
    display: none !important;
}

.manga-viewer__end > * {
    width: min(680px, 100%);
    margin-right: auto;
    margin-left: auto;
}

.manga-viewer__end [data-manga-purchase],
.manga-viewer__end [data-manga-next-chapter] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 13px 20px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: var(--manga-accent);
    box-shadow: 0 10px 32px color-mix(in srgb, var(--manga-accent) 34%, transparent);
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.manga-viewer__end [data-manga-back-to-pages] {
    cursor: pointer;
}

.manga-viewer__end [data-manga-recommendations] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.manga-viewer__sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@keyframes manga-viewer-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .manga-viewer__header {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .manga-viewer__icon-button {
        width: 42px;
        height: 42px;
    }

    .manga-viewer__controls {
        padding-right: 12px;
        padding-left: 12px;
    }

    .manga-viewer__key-help {
        display: none;
    }

    .manga-viewer__control-row {
        justify-content: flex-end;
    }

    .manga-viewer__tap-zone--next,
    .manga-viewer__tap-zone--previous {
        width: 20%;
    }

    .manga-viewer__tap-zone--menu {
        left: 20%;
        width: 60%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .manga-viewer *,
    .manga-viewer *::before,
    .manga-viewer *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 初回ガイドの文言をタッチ環境/ポインタ環境で出し分ける */
.manga-viewer__guide-card .is-pointer-copy {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .manga-viewer__guide-card .is-touch-copy {
        display: none;
    }

    .manga-viewer__guide-card .is-pointer-copy {
        display: block;
    }
}


/* 登録フォームの honeypot（人には見せない・スクリーンリーダーからも除外） */
.signup-guard-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cf-turnstile {
    margin: 4px 0 2px;
}

/* サークルプロフィール上部の予告動画 (2026-07-30) */
.circle-trailer .section-heading.compact h2 {
    font-size: 20px;
    line-height: 1.3;
}

.circle-trailer__frame {
    position: relative;
    width: 100%;
    margin-top: 4px;
    aspect-ratio: var(--post-video-aspect, 16 / 9);
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

/* 予告のエンドカードは購入導線に一本化する */
.post-video__end-card.is-trailer .post-video__end-actions {
    display: grid;
    justify-items: center;
    gap: 12px;
}

.post-video__next.is-sales {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: min(280px, 78vw);
    padding: 14px 22px;
    text-align: center;
}

.post-video__next.is-sales span {
    font-size: 16px;
    font-weight: 700;
}

.post-video__next.is-sales small {
    opacity: .78;
    font-size: 12px;
}

/* 予告では購入CTAを常時表示にする（投稿ページ側の挙動は変えない）。
   ネイティブの再生コントロールと喧嘩しないよう右上に置く。 */
.post-video.has-sales-cta .post-video__cta {
    display: inline-flex;
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    width: auto;
    max-width: calc(100% - 20px);
    min-height: 38px;
    padding: 7px 14px;
    gap: 8px;
    text-decoration: none;
}

.post-video.has-sales-cta .post-video__cta span {
    font-size: 13px;
}

.post-video.has-sales-cta .post-video__cta small {
    font-size: 11px;
}

.post-video.has-sales-cta.is-video-complete .post-video__cta {
    display: none;
}

@media (max-width: 560px) {
    .post-video.has-sales-cta .post-video__cta {
        top: 8px;
        right: 8px;
        min-height: 34px;
        padding: 6px 11px;
    }

    .post-video.has-sales-cta .post-video__cta small {
        display: none;
    }
}

/* --- CTA を押したくさせるアニメーション (2026-07-30) --- */

/* 常時CTA: 数秒に一度だけ軽く光る（出しっぱなしで動かすとうるさいので間欠） */
@keyframes ns-cta-pulse {
    0%, 86%, 100% {
        box-shadow: 0 10px 28px rgba(0, 0, 0, .32), 0 0 0 0 rgba(255, 255, 255, 0);
    }
    91% {
        box-shadow: 0 10px 28px rgba(0, 0, 0, .32), 0 0 0 7px rgba(255, 255, 255, .26);
    }
}

.post-video.has-sales-cta .post-video__cta {
    animation: ns-cta-pulse 6s ease-in-out 1.5s infinite;
    transition: transform .18s ease, box-shadow .18s ease;
}

.post-video.has-sales-cta .post-video__cta:hover,
.post-video.has-sales-cta .post-video__cta:focus-visible {
    animation: none;
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}

/* エンドカードの主ボタン: 登場 → 呼吸 → 光沢が流れる */
@keyframes ns-sales-in {
    from { opacity: 0; transform: translateY(12px) scale(.94); }
    to   { opacity: 1; transform: none; }
}

@keyframes ns-sales-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

@keyframes ns-sales-sheen {
    0%        { left: -60%; }
    55%, 100% { left: 135%; }
}

.post-video__end-card.is-trailer .post-video__next.is-sales {
    position: relative;
    overflow: hidden;
    animation:
        ns-sales-in .4s cubic-bezier(.2, .8, .3, 1) both,
        ns-sales-breathe 2.6s ease-in-out .6s infinite;
    transition: box-shadow .2s ease;
}

.post-video__end-card.is-trailer .post-video__next.is-sales::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 42%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-18deg);
    animation: ns-sales-sheen 3.4s ease-in-out 1.2s infinite;
    pointer-events: none;
}

.post-video__end-card.is-trailer .post-video__next.is-sales:hover,
.post-video__end-card.is-trailer .post-video__next.is-sales:focus-visible {
    animation: ns-sales-in .4s cubic-bezier(.2, .8, .3, 1) both;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .42);
}

/* 動きを減らす設定では一切animateしない */
@media (prefers-reduced-motion: reduce) {
    .post-video.has-sales-cta .post-video__cta,
    .post-video__end-card.is-trailer .post-video__next.is-sales,
    .post-video__end-card.is-trailer .post-video__next.is-sales::after {
        animation: none;
    }

    .post-video.has-sales-cta .post-video__cta:hover,
    .post-video__end-card.is-trailer .post-video__next.is-sales:hover {
        transform: none;
    }
}

/* --- 予告の中央再生ボタン (2026-07-30) --- */
.post-video__bigplay {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: opacity .25s ease, transform .2s ease, background-color .2s ease;
    animation: ns-bigplay-pulse 2.8s ease-in-out .8s infinite;
}

.post-video__bigplay span {
    display: block;
    width: 0;
    height: 0;
    margin-left: 7px;
    border-left: 27px solid #171313;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
}

.post-video__bigplay:hover,
.post-video__bigplay:focus-visible {
    animation: none;
    background: #fff;
    transform: translate(-50%, -50%) scale(1.09);
}

.post-video.is-video-started .post-video__bigplay {
    opacity: 0;
    pointer-events: none;
    animation: none;
}

@keyframes ns-bigplay-pulse {
    0%, 100% { box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 0 0 rgba(255, 255, 255, .32); }
    60%      { box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 0 18px rgba(255, 255, 255, 0); }
}

@media (max-width: 560px) {
    .post-video__bigplay {
        width: 64px;
        height: 64px;
    }

    .post-video__bigplay span {
        margin-left: 5px;
        border-left: 19px solid #171313;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-video__bigplay {
        animation: none;
    }

    .post-video__bigplay:hover {
        transform: translate(-50%, -50%);
    }
}

/* --- 自動再生時の「音を出す」ボタン (2026-07-30) --- */
.post-video__unmute {
    position: absolute;
    left: 50%;
    bottom: 58px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(20, 16, 15, .82);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
    cursor: pointer;
    transform: translateX(-50%);
    transition: transform .18s ease, background-color .18s ease;
    animation: ns-unmute-pulse 2.4s ease-in-out .4s infinite;
}

.post-video__unmute small {
    font-size: 12px;
    font-weight: 700;
}

.post-video__unmute:hover,
.post-video__unmute:focus-visible {
    animation: none;
    background: rgba(20, 16, 15, .95);
    transform: translateX(-50%) scale(1.05);
}

.post-video__unmute[hidden] {
    display: none;
}

@keyframes ns-unmute-pulse {
    0%, 100% { box-shadow: 0 10px 28px rgba(0, 0, 0, .4), 0 0 0 0 rgba(255, 255, 255, .3); }
    60%      { box-shadow: 0 10px 28px rgba(0, 0, 0, .4), 0 0 0 14px rgba(255, 255, 255, 0); }
}

/* 再生が始まったら中央ボタンは消えるが、音声ボタンは残す */
.post-video.is-video-complete .post-video__unmute {
    display: none;
}

@media (max-width: 560px) {
    .post-video__unmute {
        bottom: 48px;
        min-height: 34px;
        padding: 6px 12px;
    }

    .post-video__unmute small {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-video__unmute {
        animation: none;
    }

    .post-video__unmute:hover {
        transform: translateX(-50%);
    }
}

/* ボタンの基準を「実際に映っている動画の枠」にする */
.post-video__viewport {
    position: relative;
}

/* --- 一覧カードの動画マーク (2026-07-30) --- */
.card-video-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .38);
    transform: translate(-50%, -50%);
    transition: transform .18s ease, background-color .18s ease;
    pointer-events: none;
}

.card-video-mark em {
    display: block;
    width: 0;
    height: 0;
    margin-left: 4px;
    border-left: 14px solid #171313;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.trailer-card:hover .card-video-mark {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.1);
}

.card-video-label {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(20, 16, 15, .78);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    pointer-events: none;
}

.card-video-label b {
    font-variant-numeric: tabular-nums;
    opacity: .85;
    font-weight: 700;
}

@media (max-width: 560px) {
    .card-video-mark {
        width: 38px;
        height: 38px;
    }

    .card-video-mark em {
        margin-left: 3px;
        border-left: 12px solid #171313;
        border-top: 7.5px solid transparent;
        border-bottom: 7.5px solid transparent;
    }

    .card-video-label {
        left: 6px;
        top: 6px;
        padding: 2px 7px;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trailer-card:hover .card-video-mark {
        transform: translate(-50%, -50%);
    }
}

/* 投稿ページのフィードでは上端に投稿者バー(z-index:3)があるので、
   常時CTAをその下に逃がす（被って押せなくなるのを防ぐ）。 */
[data-stream-item] .post-video.has-sales-cta .post-video__cta {
    top: 72px;
    z-index: 4;
}

@media (max-width: 560px) {
    [data-stream-item] .post-video.has-sales-cta .post-video__cta {
        top: 64px;
    }
}

/* --- 予告動画の視聴ファネル (2026-07-30) --- */
.trailer-funnel__group {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.trailer-funnel__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.trailer-funnel__heading strong {
    font-size: 14px;
}

.trailer-funnel__heading span {
    color: var(--muted);
    font-size: 12px;
}

.trailer-funnel__bars {
    display: grid;
    gap: 6px;
}

.trailer-funnel__row {
    display: grid;
    grid-template-columns: 58px 1fr 92px;
    align-items: center;
    gap: 10px;
}

.trailer-funnel__label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.trailer-funnel__track {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: rgba(128, 128, 128, .16);
    overflow: hidden;
}

.trailer-funnel__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #cf1f1f, #f0637a);
}

.trailer-funnel__row.is-exit .trailer-funnel__fill {
    background: linear-gradient(90deg, #1f7acf, #4fb0f0);
}

.trailer-funnel__value {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.trailer-funnel__value b {
    font-size: 13px;
}

.trailer-funnel__value em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
}

.analytics-empty {
    margin-top: 12px;
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 560px) {
    .trailer-funnel__row {
        grid-template-columns: 46px 1fr 76px;
        gap: 8px;
    }
}