.publish-page{--publish-ink:#183936;--publish-muted:#80938e;--publish-line:#dfe9e3;--publish-paper:#fffefa;--publish-teal:#27796b;--publish-blue:#225b85;max-width:760px;margin:12px auto 44px;color:var(--publish-ink)}
.publish-page *{box-sizing:border-box}
.publish-card{overflow:hidden;border:1px solid var(--publish-line);border-radius:25px;background:var(--publish-paper);box-shadow:0 22px 55px rgba(32,81,69,.1)}
.publish-head{position:relative;display:flex;align-items:center;gap:15px;min-height:126px;padding:27px 31px;background:linear-gradient(125deg,#174b51,#287c70 56%,#d2a344 145%);color:#fff;isolation:isolate}
.publish-head::after{position:absolute;z-index:-1;right:-86px;bottom:-140px;width:310px;height:310px;border-radius:50%;background:rgba(255,231,164,.27);content:""}
.publish-back{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border:1px solid rgba(255,255,255,.36);border-radius:13px;background:rgba(255,255,255,.13);color:#fff;text-decoration:none;backdrop-filter:blur(8px)}
.publish-back:hover{background:rgba(255,255,255,.24)}
.publish-title{min-width:0}
.publish-title span{display:flex;align-items:center;gap:7px;color:#ffe3a0;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.publish-title h1{overflow:hidden;margin:7px 0 0;color:#fff;font-size:clamp(25px,4vw,32px);font-weight:900;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
.publish-error{display:flex;align-items:center;gap:8px;margin:18px 23px 0;padding:10px 13px;border-radius:11px;background:#fff0ed;color:#ba5748;font-size:13px;font-weight:700}
.publish-form{position:relative;padding:23px}
.publish-editor{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px}
.publish-avatar{display:grid;place-items:center;overflow:hidden;width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#efad36,#db7134);color:#fff;font-size:17px;font-weight:900;box-shadow:0 8px 16px rgba(192,120,35,.17)}
.publish-avatar img{width:100%;height:100%;object-fit:cover}
.publish-field{min-width:0}
.publish-textarea-wrap{position:relative;min-width:0}
.publish-field textarea{display:block;width:100%;min-height:170px;padding:3px 40px 14px 0;box-sizing:border-box;border:0;outline:0;resize:none!important;background:transparent;color:var(--publish-ink);font:inherit;font-size:16px;line-height:1.7}
.publish-topic-suggest{position:absolute;z-index:14;top:var(--publish-topic-suggest-top,0);left:var(--publish-topic-suggest-left,83px);box-sizing:border-box;width:var(--publish-topic-suggest-width,360px);overflow:auto;overscroll-behavior:contain;max-height:var(--publish-topic-suggest-max-height,340px);margin:0;padding:0;border:1px solid #e7deca;border-radius:13px;background:#fffdf7;box-shadow:0 14px 30px rgba(77,55,24,.16);transform-origin:center top;animation:publish-topic-suggest-in .16s ease-out}
.publish-topic-suggest[hidden]{display:none}
@keyframes publish-topic-suggest-in{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.publish-topic-suggest-head{padding:11px 14px 7px;color:#8b7f67;font-size:12px;font-weight:800}
.publish-topic-suggest-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:43px;padding:8px 14px;border:0;background:transparent;color:#263028;font:inherit;text-align:left;cursor:pointer}
.publish-topic-suggest-item:hover,.publish-topic-suggest-item:focus-visible{outline:0;background:#fff4d5}
.publish-topic-suggest-name{min-width:0;overflow:hidden;color:#173d34;font-size:14px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.publish-topic-suggest-item small{flex:0 0 auto;color:#a2947c;font-size:12px}
.publish-topic-suggest-empty{margin:0;padding:9px 14px 13px;color:#9b927e;font-size:13px}
.publish-topic-suggest-empty.is-loading{color:#8b7f67}
.publish-topic-suggest-empty.is-error{color:#ba5144}
.publish-resize-handle{position:absolute;right:0;bottom:0;z-index:1;display:block;width:38px;height:38px;border-radius:10px 0 0;cursor:ns-resize;touch-action:none;background-image:url('/public/campus/img/resize.png');background-repeat:no-repeat;background-position:right 7px bottom 7px;background-size:21px 21px}
.publish-field textarea::placeholder{color:#a4b1ad}
.publish-preview{display:grid;grid-template-columns:repeat(5,64px);gap:8px;margin:10px 0 2px}
.publish-preview[hidden]{display:none}
.publish-preview-item{position:relative;display:block;width:64px;height:64px}
.publish-preview img{display:block;width:100%;height:100%;border-radius:9px;object-fit:cover}
.publish-preview-remove{position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:22px;height:22px;border:2px solid var(--publish-paper);border-radius:50%;padding:0;background:#1e2825;color:#fff;font-size:11px;line-height:1;cursor:pointer;box-shadow:0 3px 8px rgba(19,38,32,.22)}
.publish-preview-remove:hover{background:#c84f42}
.publish-tool.is-disabled{opacity:.42;cursor:not-allowed;pointer-events:none}
.publish-poll{display:grid;gap:10px;margin:12px 0 2px;padding:13px;border:1px solid #dfe9e3;border-radius:14px;background:#f8fbf7}
.publish-poll[hidden]{display:none}
.publish-poll-question{display:grid;gap:7px;color:#63766f;font-size:12px;font-weight:900}
.publish-poll-question input,.publish-poll-options input{width:100%;height:38px;border:1px solid #dfe9e3;border-radius:10px;background:#fff;padding:0 11px;outline:0;color:var(--publish-ink);font:inherit;font-size:13px}
.publish-poll-question input:focus,.publish-poll-options input:focus{border-color:#89c7b7;box-shadow:0 0 0 3px rgba(39,121,107,.1)}
.publish-poll-options{display:grid;gap:8px}
.publish-poll-add{justify-self:start;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:9px;background:#edf6ea;color:var(--publish-teal);font:inherit;font-size:12px;font-weight:900;cursor:pointer}
.publish-poll-add:hover{background:#dfeee0}
.publish-tools{position:relative;z-index:13;display:flex;align-items:center;gap:8px;min-height:53px;margin-top:17px;padding-top:13px;border-top:1px solid #edf1ed;background:var(--publish-paper)}
.publish-tool{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:0;background:transparent;border-radius:9px;color:#71857e;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.publish-tool:hover{background:#eef6f0;color:var(--publish-teal)}
.publish-tool.active{background:#eef6f0;color:var(--publish-teal)}
.publish-tool input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.publish-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.publish-visibility-toggle{position:relative;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px;border:1px solid #d7dfdb;border-radius:10px;background:#f3f5f4;color:#879690;font-size:12px;font-weight:800;cursor:pointer;user-select:none}
.publish-visibility-toggle:hover{border-color:#c7d4ce;background:#eef1ef;color:#64756f}
.publish-visibility-toggle input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.publish-visibility-toggle:has(input:focus-visible){outline:3px solid rgba(39,121,107,.2);outline-offset:2px}
.publish-visibility-icon{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#dfe5e2;color:#9aa6a1;font-size:11px}
.publish-visibility-toggle.is-deliver.is-checked,.publish-visibility-toggle.is-deliver:has(input:checked){border-color:#a9d8ca;background:#eefaf5;color:var(--publish-teal)}
.publish-visibility-toggle.is-deliver.is-checked:hover,.publish-visibility-toggle.is-deliver:has(input:checked):hover{border-color:#8bcaba;background:#e5f7ef;color:#1f6b5f}
.publish-visibility-toggle.is-deliver.is-checked .publish-visibility-icon,.publish-visibility-toggle.is-deliver:has(input:checked) .publish-visibility-icon{background:var(--publish-teal);color:#fff}
.publish-visibility-toggle.is-deliver:not(.is-checked):not(:has(input:checked)){border-color:#d7dfdb;background:#f3f5f4;color:#879690}
.publish-submit{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 17px;border:0;border-radius:11px;background:linear-gradient(135deg,#298a75,#1f665a);color:#fff;font:inherit;font-size:13px;font-weight:900;cursor:pointer;box-shadow:0 9px 18px rgba(34,110,91,.19)}
.publish-submit:hover{filter:brightness(1.06)}
.publish-submit:disabled,.publish-submit[aria-disabled="true"]{cursor:not-allowed;filter:none;opacity:1;box-shadow:none;background:#e5e1d8;color:#a49c8d}
@media(max-width:720px){
  .publish-page{margin:-2px -4px 26px}
  .publish-card{border-right:0;border-left:0;border-radius:0}
  .publish-head{min-height:108px;padding:22px 18px}
  .publish-form{padding:19px 16px}
  .publish-field textarea{min-height:48vh;padding-right:40px;resize:none!important;font-size:16px}
  .publish-resize-handle{display:block}
  .publish-topic-suggest{max-height:var(--publish-topic-suggest-max-height,260px)}
  .publish-preview{grid-template-columns:repeat(5,minmax(0,1fr))}
  .publish-preview-item{width:100%;height:auto;aspect-ratio:1}
  .publish-tools,.publish-actions{gap:4px}
}
.publish-card.is-topic-suggest-open,.feed-composer.is-topic-suggest-open{position:relative;z-index:20;overflow:visible}
@media(max-width:390px){
  .publish-tool{padding:0 7px}
  .publish-tool span{display:none}
  .publish-submit{padding:0 13px}
}

.publish-page{
  --publish-ink:#263028;
  --publish-muted:#748077;
  --publish-line:#e7deca;
  --publish-paper:#fffdf7;
  --publish-teal:#1f6f5b;
  --publish-blue:#173d34;
  color:#263028;
}
.publish-card{
  border-color:rgba(110,84,42,.12);
  background:rgba(255,253,247,.92);
  box-shadow:0 12px 34px rgba(77,55,24,.1);
}
.publish-head{
  background:
    radial-gradient(circle at 88% 8%,rgba(255,216,77,.24),transparent 32%),
    linear-gradient(135deg,#173d34 0%,#1f6f5b 64%,#ffd84d 145%);
}
.publish-title span{color:#ffd84d}
.publish-back{background:rgba(255,255,255,.12);color:#fff8df}
.publish-back:hover{background:rgba(255,216,77,.2);color:#fff8df}
.publish-avatar{background:linear-gradient(135deg,#1f6f5b,#f49a2f);box-shadow:0 10px 24px rgba(77,55,24,.14)}
.publish-field textarea{color:#263028}
.publish-field textarea::placeholder{color:#8b7f67}
.publish-preview-remove{border-color:#fffdf7;background:#173d34}
.publish-poll{
  border-color:#e7deca;
  background:#fffaf0;
}
.publish-poll-question,
.publish-tool{color:#748077}
.publish-poll-question input,
.publish-poll-options input{
  border-color:#e7deca;
  background:#fffdf7;
  color:#263028;
}
.publish-poll-question input:focus,
.publish-poll-options input:focus{
  border-color:#f49a2f;
  box-shadow:0 0 0 3px rgba(244,154,47,.14);
}
.publish-poll-add,
.publish-tool:hover,
.publish-tool.active{
  background:#fff4d5;
  color:#173d34;
}
.publish-tools{border-top-color:#efe0c2}
.publish-visibility-toggle{
  border-color:#e7deca;
  background:#f3eadc;
  color:#8b7f67;
}
.publish-visibility-toggle:hover{border-color:#ddcda9;background:#fffaf0;color:#665b48}
.publish-visibility-toggle:has(input:focus-visible){outline-color:rgba(244,154,47,.22)}
.publish-visibility-icon{background:#e7deca;color:#8b7f67}
.publish-visibility-toggle.is-deliver.is-checked,
.publish-visibility-toggle.is-deliver:has(input:checked){
  border-color:rgba(31,111,91,.24);
  background:#fff4d5;
  color:#173d34;
}
.publish-visibility-toggle.is-deliver.is-checked:hover,
.publish-visibility-toggle.is-deliver:has(input:checked):hover{
  border-color:rgba(31,111,91,.32);
  background:#ffed9d;
  color:#173d34;
}
.publish-visibility-toggle.is-deliver.is-checked .publish-visibility-icon,
.publish-visibility-toggle.is-deliver:has(input:checked) .publish-visibility-icon{
  background:#173d34;
  color:#ffd84d;
}
.publish-submit{
  background:#ffd84d;
  color:#2e2914;
  box-shadow:0 12px 26px rgba(210,142,22,.22);
}
.publish-submit:hover{filter:brightness(1.03)}
.publish-submit:disabled,.publish-submit[aria-disabled="true"]{cursor:not-allowed;filter:none;background:#e5e1d8;color:#a49c8d;box-shadow:none}
.publish-character-count{margin:7px 0 -3px;color:var(--publish-muted);font-size:12px;line-height:1.2;text-align:right;font-variant-numeric:tabular-nums}
.publish-character-count.is-at-limit{color:#a87422;font-weight:700}
.publish-character-count.is-over-limit{color:#ba5144;font-weight:700}
.publish-field textarea[aria-invalid="true"]{box-shadow:inset 0 -2px 0 #ba5144}
